ТОП-7 ХИТРОСТЕЙ ДИЗАЙНА

1. Используйте цвет и насыщенность вместо размера для создания иерархии

— «Этот текст важен? Давайте сделаем его больше».

— «Этот текст вторичен? Давайте сделаем его меньше».

Это распространённая ошибка.

Попробуйте использовать цвет или толщину шрифта для выполнения той же работы.

— «Этот текст важен? Давайте сделаем это жирнее».

— «Этот текст вторичен? Давайте используем более светлый цвет».

Попробуйте придерживаться двух или трех цветов:

• Тёмный (но не чёрный!) для главного контента (заголовок)
• Серый для вторичного контента (например, дата публикации статьи)

Более светлый серый для вспомогательного содержимого (возможно, уведомление об авторских правах в нижнем колонтитуле).

Аналогично, для работы обычно достаточно двух шрифтов, не увлекайтесь разнообразием:

• Обычный шрифт (толщиной 400 или 500 в зависимости от шрифта) для большинства текстов
• 600 или 700 для текста, который вы хотите подчеркнуть
• Держитесь подальше от толщины до 400 – такие шрифты могут работать с заголовками, но их слишком сложно читать при меньших размерах.

2. Не используйте серый текст на цветном фоне

Светло-серый текст на белом фоне – отличный способ сделать его менее значимым. НО на цветном фоне он не выглядит так здорово. Поэтому попробуйте сделать цвет ближе к цвету фона, а не просто серым.

Есть два способа уменьшить контрастность при работе с яркими фонами:

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

3. Сдвиньте тени

Вместо того, чтобы использовать большие значения размытия и распространения, чтобы сделать тени более заметными, добавьте вертикальное смещение. То есть не размывайте их, а сдвиньте слегка вниз.

Это выглядит намного более естественным, потому что так вы имитируете источник света, расположенный сверху – всё как в реальном мире.

4. Используйте меньше границ

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

Попробуйте одну из этих идей:

• Используйте box shadow
• Используйте два разных цвета фона
• Добавьте дополнительный интервал

5. Не растягивайте иконки, которые должны быть маленькими

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

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

6. Используйте акцентированные границы, чтобы добавить цвет в не запоминающийся дизайн

Есть одна фишка. Как быстро “бросить в глаза” ваш хороший, но слишком непримечательный дизайн?

— Добавьте яркую границу к деталям вашего дизайна!

Например, подчеркнуть важное сообщение:

Или выделить элемент навигации:

Или даже так:

7. НЕ каждая кнопка нуждается в цветном фоне

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

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

При разработке этих действий важно сообщить их место в иерархии:

• Первичные действия должны быть очевидны. Фон с высокой контрастностью

• Вторичные действия должны быть четкими, но незаметными. Можно использовать фон с меньшей контрастностью, например.
• Третичные ссылки должны быть такими, что их можно обнаружить, но при этом ненавязчиво. Как вариант, можно оформить их как ссылки.

— «А как насчет разрушительных действий, разве они не всегда будут красными?»

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

Сохраните большой, красный и смелый стиль, когда это негативное действие на самом деле является основным действием в интерфейсе, например, в диалоговом окне подтверждения:

Надеемся, эти советы помогут вам при оформлении ваших чудесных материалов!!!

Источник информации и изображений: сайт Say Hi