Как улучшить типографику в макетах

Не используйте много шрифтов на странице

Достаточно выбрать два шрифта (акцидентный и контентный) – это позволит избежать хаоса в макете. Классный сайт для подбора шрифтовой пары здесь

Ограничивайте длину строки

Правильная длина строки – это залог попадания текстом в цель.
Если длина строки слишком длинная, то пользователь может забыть начало строки.
Если строка будет слишком короткой, то ему придется часто вертеть головой, где вероятность забыть текст еще выше.

Оптимальная длина строки – 60-70 символов.

Не используйте Caps Lock в длинных заголовках или контенте

Если уж очень хочется использовать заглавные буквы, то приберегите их для заголовков в одну строку.
Еще заглавные буквы идеально подойдут для коротких фраз над заголовками.

Используйте шрифт с большим количеством начертаний

Всем известно, что иерархия в текстах строится на базе размера текста и его начертания.
Шрифты, имеющие большое количество начертаний от Light до Extra bold, позволят лучше выстроить иерархию в текстах.

Соблюдайте расстояние между строк

Важно правильно определить интерлиньяж, чтобы текст было удобно читать с любого устройства, не напрягая зрение пользователя.
Держите в голове правило, что расстояние между строк должно быть на 20-30% больше базовой единицы шрифта.

Например, для контентного шрифта 16 кегля оптимальным интерлиньяжем будет значение 24 px.

Забирайте в работу 🔥

ЗD-герои для ваших проектов уже лежат тут и тут

Пользуйтесь🔥

Нужны ли попапы на сайте?

Попап – это модальное окно, которое закрывает основной контент на экране и заставляет пользователя выполнить действие для возврата к нему.

3 причины избегать использование попапов на сайте:

1. Они перекрывают пользовательский интерфейс и меняют пользовательский путь

Чтобы закрыть модальное окно, пользователю нужно совершить несколько действий, за это время он может забыть, зачем пришел на сайт и закрыть его. Цель не достигнута из-за сложной реализации

2. Предложение в модальном окне может не соответствовать запросу пользователя или не представлять интереса

В таком случае, вы скорее всего получите агрессивно настроенного пользователя, который не получил то, зачем пришел

3. Они добавляют неопределенность

Например, пользователям придется угадывать, что произойдет, если они нажмут кнопку «Назад», а многие браузеры не знают, как правильно обрабатывать вложенные модальные окна.

Все эти правила не существуют в вакууме и отдельно от остального дизайна, но любое их нарушение должно быть обоснованным.

Энджой🔥

Когда пообещал прислать макеты до завтра, а оказалось, что там работы на 2 недели

#мемнаясреда

Дизайнеры, ликуйте!

Нашел калькулятор сеток для ваших проектов: просто выбираете значение экрана и получаете нужные параметры сетки. Дополнительно можно задать настройки Gutter и Margin, чтобы сетка была просто кастомизированной. Есть возможность добавить левый или правый sidebar, что тоже повлияет на ширину колонок.

В общем, больше не нужно держать в голове сотни значений сеток для разных разрешений экранов 🔥

Вот вы зря так не поддерживаете этот пост, реально полезный сайт🥺

69% пользователей не оформляют заказ в корзине и уходят с сайта. Как вам такое?

Нашел исследование, на основании которого можно сделать вывод, что пользователи теряются, когда видят в корзине множество полей для заполнения и не оформляют заказ.

На протяжении 12 лет Baymard тестировали юзабилити сайтов и выяснили, что дизайн и юзерфлоу – единственные причины, по которым пользователи отказываются от покупки во время процесса оформления.

Стоит вспомнить, как реализована покупка билетов на сайте РЖД и сразу становится понятно, почему случается так много отказов от покупки.

Здесь можно прочитать подробнее🔥

Главные выводы, которые можно сделать дизайнерам:

1. Упрощайте все, что можно упростить
Запрашивайте у пользователя только ту информацию, без которой невозможно оформить заказ. Вряд ли вам нужна его фамилия, если вы просто хотите доставить ему, например, сумку курьером.

2. Запоминайте пользовательские данные, введенные на предыдущем этапе
Если пользователь ввел данные карты и нажал на кнопку «Сохранить для будущих платежей», значит, вы должны хранить эти данные. В будущем, это поможет не дать пользователю возможность передумать совершить покупку, пока он вводит данные карты.

3. Совет мало применимый для России, но очень эффективный: если есть возможность, подключайте оплату через Apple Pay и Google Pay.
Было исследование, согласно которому ввод данных банковской карты увеличивал пользовательский путь на 17 секунд. За это время многие успевали осознать импульсивность покупки и отменить ее.
Оплата с телефона решает сразу две проблемы: невозможность отмены импульсивной покупки в моменте после оплаты и отсутствие необходимости вручную вводить данные карты.

4. Группируйте поля в корзине по смыслу
Пользователю проще сориентироваться в сгруппированных полях, чем в полотне текста, поэтому сначала просим ввести контактные данные, необходимые для оформления заказа, затем адрес, способ и время доставки, потом данные банковской карты для оплаты.
Прогресс-бар помогает пользователю понять, сколько шагов осталось до окончания оформления.

Помните, что пользователи способны держать в фокусе 7 плюс-минус 2 полей. То есть, у вас в распоряжении от 5 до 9 полей, которые не создадут когнитивную нагрузку.

Тут можно раздать огня, если было полезно 🔥

Вчера Telegram выкатил обновление, в котором появилась возможность размещать контент за деньги: механика предельно проста за размытым фоном и анимацией скрывался контент, к которому можно получить доступ после оплаты. Сумму автор устанавливает самостоятельно.

Сегодня утром эта функция исчезла, потому что Apple не хочет терять денюшки разрешает проводить платежи вне платежной системы Apple.
Комиссии яблочного гиганта составляют 15-30%, понятно, почему Дуров не хотел проводить платежи через эту систему.

Теперь же, даже если разработчики Telegram выкатят обновление и оплата будет проходить через платежную систему Apple, заработать много на этом не получится: у пользователей из России банально не работает Apple Pay, а пополнять счет через мобильный телефон, чтобы купить платный контент мало кто станет🥺

Крутой плагин, который оживит ваши проекты, добавив бесплатные анимации🔥

Давайте сыграем в игру, где вам нужно угадать, какой дизайнерский прием нарушен на картинке.

Сразу договоримся, что в каждом примере нарушено только одно правило и надо его найти😎

Итак, как думаете, что не так с этой картинкой?

Полетели дальше: что нужно исправить здесь?

Последний пример на сегодня: что добавим тут?