Блог Артёма Кобякова

Пишу про дизайн, интерфейсы и кошек.

Font style matcher или как убрать шрифтовую вспышку

Если вы так или иначе сталкивались с веб-разработкой или пользовались интернетом, то замечали некую «вспышку» в шрифтах при загрузке сайта. Это происходит когда базуер при загрузке страницы сначала применяет стандартый системный шрифт, а потом начинает отрисовку кастомного шрифта, который использовали разработчики по задумке дизайнера. Пример можно проиллюстрировать так:

Как происходит вспышка шрифта при его загрузке.

Решение проблемы


Нужно выбирать гарнитуру похожую на кастомный шрифт, который использовал дизайнер. Подогнать по параметрам: line-height, letter-spacing, font-size и т. д. Но это не значит, что нужно отказаться от кастомного. Нет, он так же будет работать, просто стандартый будет очень похож и эффект вспышки будет минимальным.

И такой сервис придумали. Его реализовала Моника из Канады. Кстати, она работает разработчиком в Google Inc. Знакомтесь и пользуйтесь — https://meowni.ca/font-style-matcher/ пока бесплатно.

Сервис подгона двух шрифтов для уменьшения эффекта вспышки

Про дизайн кнопок

Сделал я интерфейс с двумя страницами. На каждой странице кнопка. У кнопок одинаковый функционал (например это ссылка), но разные результаты по клику.

Я вот что подумал, почему я должен делать кнопки в интерфейсе одинаковыми? Совершенно, не должен. Чтобы оптимизировать разработку/код? В этом есть доля правды, но подойдем с другой стороны. Каждая кнопка (её внешний вид) должна ассоциироваться с ожидаемым результатом.

Рассмотим на примере одного выдуманного сайта.

Главная страница сайта имеет кнопку первого типа. Цель кнопки привлечь внимание и повысить конвкрсию клика, поэтому делаем её красной заливкой. Так как дизайн у нас светлый, без цветовых контрастов, то кнопка здесь выделяется.

Страница ошибки, тоже есть экшен — вернуться на главную. Здесь используем второй тип кнопки. Не такой контрасный и яркий, но все же, чтобы было похоже на кнопку. Можно обойтись прозрачным фоном с бордером. Такие кнопки еще назыаются ghost button. Они как бы есть, но не делают большого акцента/внимания пользователя.

Проблемы которые могут возникнуть. Например, если пользователь встретился с кнопкой первого типа и воспольовался ей, то создается ассоциативная связь: ожидаемый результат (в нашем случае это звонок) + внешний вид кнопки. Далее, если пользователь встретит на своем пути кнопку с таким же оформлением но другим текстом, он может даже не прочитать что на ней написано, и подумать что действие будет одинаковое. Лучше этого избежать на визуальном уровне сразу.

Используйте дизайн кнопок соответственно их требованиям.
А что вы думаете по этому поводу?

7 ноября   button   cat   ghost button   interface   ux   website   размышления

Маркетологи и баннер

История о том, как в одной компании работает отдел маркетинга.

Сдалал я баннер дла акции по продаже камер видеонаблюдения. Приняли после 3х правок, это нормально. Все хорошо, все довольны.
Спустя неделю захожу на сайт, посмотреть как там мой баннер, куда ведет… И вот что я наблюдаю.

Выяснив подробности, оказалось, что вмешался отдел маркетинга со своими правками. И даже не уведомили меня, того кто разрабатывал баннер. Почему?! Я же всегда поддерживаю связь с клиентом до конца, отвечаю за продукт головой. Казалось бы в чем проблема, позвонить, обсудить что да как. Ну да ладно — прикол.

21 октября   honeywell   баннер   делаю   маркетолог
2017   cinnk   iphone7   mockup

Принципы лендинга от Крейга Морриса

Завалялась на рабочем столе мини книжечка от создателя UsabilityHour — Крейга Морриса.
В книге изложены основные принципы работы лендинга, без которых страница была бы с минимальным числом конверсии. Хотите увеличить конверсию на своём лендинге — следуйте правилам из книги.

Сюда не прикрепляется, вышлю на почту всем кто оставит e-mail в комментариях.

Дизайн карты Сбербанка

Никак не хочу пиарить этот банк, но так повелось что я их давний клиент.
И вот у них появился сервис, который позволяет сделать свой дизайн на карте. Ну как не воспользоваться, хоть и стоит эта операция 750 ₽, пофиг. Проблемы начались тогда, когда банк не принял заявку на дизайн карты с моим шедевром.

Это Catbusters — моя авторская иллюстрация на которою права имею только я.
Это был мой первый шот на дрибббле https://dribbble.com/shots/2084378-404-Catbusters и а используется в реале на https://www.korporativnaya-pochta.com/xui

Банк решил, что я это изображение «утащил из интернета» и отклонил мою заявку. Я пытался как-то решить проблему, доказать авторство. Как оказалось, банк не принимает никакие возражения и только предлагает отправить новую заявку с другим изображением.

Далее я отправил десяток различных заявок и с кошкой живой и с колбасой и еще какую-то дичь в надежде что-нибудь да примут.

И приняли, только понять какую заявку было не возможно: пришла СМС с просьбой получить свою карту в таком-то отделении. Получил, и вот что:

Тут была картинка, но сервер её похерил.

Ну и на том спасибо.

Сервис получения выписки из ЕГРП

Мы запустили сервис получения выписок из ЕГРП. Очень долго готовились и вылизывали интерфейс. Буду рад любой критике и отзывам! Сейчас там нормальная такая акция в честь запуска.
Если есть какие либо вопросы по интерфейсу или дизайну, задавайте, рад пообщаться!

https://vipiska-iz-egrp.ru/

Рецензия от Фимушкина

Недавно на канале Даниила Фимушкина проходил проект под названием “дизайн-слив”. Даня обсуждает присланные ему работы по веб-дизайну или сайты. Я решил попробовать отправить ему свою разработку по продаже элитной квартиры в Москве на рецензию. Он её не слил конечно, но дельные комментарии дал. Самое интересное для меня было, что мой проект выглядит в глазах пользователей как разработка на конструкторе лендинов (например Тильда). А может и правда запилить шаблон и на продажу?!

Смотреть с 1:51 мин https://youtu.be/EoMAwQX_2NM

Первая запись

Давно хотел поставить блог и писать о своих проблемах в дизайне и интерфейсах. Ну и делиться опытом.

Поехали.

2016