7 полезных советов для веб-дизайнеров | Nuances of programming

UX

Улучшаем проекты с помощью продуманной тактики, а не таланта.

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

Это происходит по разным причинам: возможно в вашей компании нет штатного дизайнера и вам необходимо самому реализовать UI для нового проекта или, может быть, вы “заимствуете” дизайн стороннего проекта и хотите, чтобы он выглядел лучше, чем типичный сайт, созданный с помощью фреймворка Bootstrap.

Да, легко опустить руки и сказать: “Я никогда не смогу сделать из этого сайта образец для подражания, я не художник!”, но, оказывается, существует множество хитростей, которые помогут сделать из вашего дизайна “конфетку”, даже если у вас нет опыта в графическом дизайне.

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


1. Используйте color и weight, вместо size, чтобы правильно выстроить иерархию

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Очень распространенная ошибка во время оформления текста в UI —  частое использование атрибута size для управления иерархией заголовков, вместо color и weight.

“Важный текст? Давайте сделаем его больше.”

“Второстепенный текст? Давайте сделаем его меньше.”

Вместо того, чтобы из раза в раз оформлять текст при помощи атрибута size, попробуйте использовать color и weight.

“Важный текст? Давайте сделаем его жирнее.

“Второстепенный текст? Давайте сделаем его светлее.

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

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Точно так же, для работы с UI обычно требуется два вида жирности шрифта:

  • Обычная (400 или 500 в зависимости от шрифта) для большинства текстов
  • Высокая (600 или 700) для текста, на котором вы хотите сделать акцент

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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


2. Не используйте текст серого цвета на цветном фоне
7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Сделать текст серым, чтобы тот гармонично сочетался с белым фоном — отличная идея, но на цветном фоне такой текст выглядит плохо.

Все потому что серый цвет на белом фоне уменьшает контрастность.

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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

1. Уменьшить непрозрачность белого текста

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

2. Подобрать цвет текста, основанный на цвете фона

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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


3. Сместите тени

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Вместо использования большого радиуса растяжения (spread) и размытия (blur) теней, используйте вертикальное смещение, чтобы сделать тени более заметными.

Получаются намного более естественные тени, так как нам кажется, что источник света находится сверху, также как и в реальном мире.

Это относится и к внутренним теням, которые вы можете использовать, например, в форме ввода данных.

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020


4. Используйте меньше границ (border) вокруг элементов

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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

Границы — это отличный способ оградить два элемента друг от друга, но частое их использование захламляет и перенасыщает деталями ваш UI.

Вместо использования границ, попробуйте одну из следующих идей:

1. Используйте тень блока (box shadow)

Тени блока отлично справляются с выделением границ! Но знали ли вы, что они могут выполнять ту же самую задачу, что и границы, будучи при этом более тонкими и не отвлекающими внимание?

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

2. Используйте два разных цвета фона

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

3. Увеличьте интервал между элементами

Существует ли более лучший способ разделения двух элементов друг от друга, нежели просто увеличить интервал? Большое расстояние между элементами — отличный способ создания границ между ними без внедрения какого-либо нового UI.

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020


5. Не делайте иконки больше, чем они должны быть

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Если вы работаете над проектом, где могут использоваться большие иконки (например, раздел “преимущества” в лендинге), то скорее всего вы инстинктивно скачаете бесплатный набор иконок, вроде Font Awesome или Zondicons и увеличите их размер до соответствующего вашим потребностям.

В конце концов, это векторные изображения, поэтому их качество ничуть пострадает, если вы увеличите размер, правильно?

Да, качество не испортится, но проблема в том, что иконки, нарисованные в размере 20px, никогда не будут выглядеть хорошо и профессионально, если их увеличить до 48px. Им не хватает деталей, они чувствуют себя непропорционально большими.

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Это позволит сохранить иконку в ее изначальном размере, в то же время заполняя больше пространства.

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


6. Добавьте больше красок в дизайн, акцентируя внимание на границе

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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

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

Например, рядом с предупреждающим сообщением:

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

…или рядом с выбранным элементом в меню:

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

…или даже в верхней части всего макета:

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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

Трудно подобрать цвета? Попробуйте ограниченную палитру цветов, вроде Dribbble’s color search, чтобы избежать чувства неопределенности, как при традиционном методе выбора цвета.


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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

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

Фреймворки, наподобие Bootstrap, поощряют это, предоставляя вам меню с выбором семантических стилей, когда вы добавляете новую кнопку:

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

“Это положительное действие? Сделаем кнопку зеленой.”

“Удаление данных? Сделаем кнопку красной.”

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

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

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

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

“А что насчет деструктивных действий? Разве они не должны быть всегда красного цвета?”

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

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Оставьте крупный, красный стиль на тот случай, если негативное действие на самом деле является первичным действием в интерфейсе, например, в окне подтверждения:

7 полезных советов для веб-дизайнеров | Nuances of programming — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

 

Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming