Чит коды для проектировщиков и дизайнеров интерфейсов

UX-дизайн
03.03.2019
621

С каждым днем мы делимся с вами полезной информацией в сфере веб-дизайна. Уверен, многие начинали свой путь с минимальным количеством знаний. Информацию находили в книгах, статьях, веб-ресурсах, находили в видео уроках. Ранее мы познакомились с типографикой и цветовой палитрой, цветовым контрастом и прочими атрибутами веб-дизайна.
Сегодня поделюсь полезной информацией, о проектировании интерфейсов. Секреты и лайфхаки из личного опыта и опыта моих коллег.

1. Как выделить значимый текст

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

Текст

Иерархия шрифтов — это не только размеры шрифта от малого до большого. Это правильное сочетание размеров, весов и цветов, которые создают контраст. Чем больше контраст, тем лучше.

Иерархия шрифтов

2. Как обеспечить хороший контраст?

  • Чтобы выделить заголовок от подзаголовка используйте более темный и жирный стиль для первого, и светлый и легкий для второстепенного. Увеличьте прозрачность текста для важной информации и сделайте менее прозрачной информацию подзаголовка или основного текста.
  • Используйте 3 цвета для контента (пример ниже).
  • Применяйте к шрифтам большие отступы. Например заголовок 28px, подзаголовок 20px, основной текст 16px.
  • Используйте онлайн-калькулятор Modularscale, который поможет определить лучшую иерархию шрифтов.
  • Контраст = размер + цвет + вес.

Цвет

От основного цвета, я перехожу к более темному цвету для заголовков и более светлому для вспомогательного контента.

3. 50 оттенков черного

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

Цвет

4. Только точный математический просчет

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

Цвет

Простое сложение и вычитание оттенка, насыщенности, яркости (HSB) сотворит магию (мы будем использовать HSB для этой формулы вместо RGB). Вы можете легко избавиться от скучного белого цвета на цветном фоне, смотрите ниже:

Цвет

Где же происходит сложение и вычитание HSB?

Цвет

Добиться такого, можно двумя способами. Каждый из них имеет одинаковый базовый цвет #B9F4BC (фон круга). Отличие составляют лишь цвет папки и полоски на ней. Правило гласит:
Оттенок >> Насыщенность >> Яркость.

Способ А

Цвет

Значение оттенка в первом варианте 123 в каждой фигуре (круг, папка, полоса). Переменные значения имеют насыщенность и яркость.
Исходные параметры: насыщенность 24, яркость 96.
Когда мы делаем оттенок папки более зеленым, соответственно другие параметры тоже меняются. Насыщенность стала 40, яркость наоборот уменьшилась и обрела значение 82.

Это свидетельствует о том, что при увеличении насыщенности показатель яркости изменяется обратно пропорционально.
Выше насыщенность – меньше яркость.
Меньше насыщенность – выше яркость.
Аналогично с полоской. Оставляем цвет папки неизменным. Увеличиваем контраст на 4 единицы, а яркость уменьшаем на 7 единиц.
В итоге получаем формулу:

Чтобы получить темный оттенок – нужно увеличить насыщенность посредством уменьшения яркости.

Для получения светлого оттенка – уменьшение насыщенности, посредством увеличения яркости.

Способ Б

Цвет

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

Цвет

Чтобы сделать цвет иконки темнее чем цвет круга, перемещаем селектор к синему. После этого применяем формулу из варианта А. Получаем:

Цвет

Цвет

Красный, зеленый, синий (RGB) + формула варианта A = более темный вариант

Голубой, пурпурный, желтый (CMYK) + формула варианта A = более светлый вариант

5. Используйте отступ

Отступ

Правило близости гласит:

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

Так как моя цель – создать разделение между автором и названием, я использую большой (24) отступ между ними.

6. Разделяйте строки с помощью цвета

Цвета

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

7. Умножение, вместо добавления тени

Умножение

Плохую читабельность текста добавление тени не спасет. Недавно я узнал об использовании умножения (Multiply) в качестве инструмента смешивания для градиентной заливки.

умножения

8. Длина строки

Строка

Оптимальная длина строки 45-60 символов. При этом следует выбирать оптимальное число знаков своему текстовому контейнеру. Чтобы избежать пустого пространства примените выравнивание текста.

Текст

Для уменьшения пустоты с правой стороны, примените выравнивание по центру.

Контент

9. Согласованность интерфейса

Карточка

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

10. Цвет бренда

Цвета

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

11. Маркеры

маркеры

Если в вашем макете используются списки, разместите маркеры или числа в рамке, чтобы их выделить. Так информация воспринимается гораздо лучше.

Это всего лишь небольшой перечень советов. Уверен, они помогут вам создавать крутые интерфейсы.

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку