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

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

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. Маркеры

маркеры

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

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

Добавить комментарий

Ваш e-mail не будет опубликован.