Комментарии
Как разбираться в дизайне, если ты ни грамма не дизайнер (а разбираться всё равно нужно)
Good VS Bad design
Как разбираться в дизайне, если ты ни грамма не дизайнер (а разбираться всё равно нужно)
Казалось бы, принципы достойного дизайна стары, как мир. Но говносайтов с упоротыми шрифтами, зашакаленной графикой и вырвиглазными решениями по-прежнему полно в сети. Причина обычно простая: тот, кто принимал этот дизайн, ничерта в нём не понимал и доверился мнению «специалиста». А ведь дизайнер дизайнеру — рознь.

Хватит это терпеть. Наши дизайнеры собрали крутую презентацию о принципах хорошего и не очень дизайна, а мы написали по ней материал — чтобы в мире стало меньше так-себе-сайтов из-под руки трусливых и ленивых дизайнеров, прикрывающихся фразой «я так вижу».
Принципы хорошего дизайна
Контраст во всём
1) Фон контрастен контенту
2) Одни экраны сайта контрастируют с другими
3) Заголовки контрастируют с основным текстом
Ниже — антипримеры, где с контрастом беда: либо текст и фон недостаточно контрастируют, либо текст на фоне вообще не читается.
Приближенность (отступы)
Общее правило: связанные по смыслу и структуре элементы должны располагаться рядом. Например, пункты из списка должны быть ближе друг к другу, чем обобщающий заголовок этого списка. На примерах ниже:
1) фамилии прилипли к спискам,
2) кнопка прилипла к тексту,
3) одинаковые отступы между текстом, жирным текстом и кнопкой — неясно, что главнее.
А вот на этих примерах отступ от заголовка до текста больше межстрочного расстояния, а отступ от кнопки до текста ещё больше. И это правильно :)
Больше воздуха
Чем больше свободного пространства вокруг элементов, тем проще их воспринимать. Особенно это касается текста. Если «воздуха» между текстовыми блоками мало, пользователь чувствует себя некомфортно: ему тесно, плохо и он напрягается, чтобы найти нужное. Чем больше воздуха, тем проще читать и воспринимать.

Сравните примеры ниже: слева хаос, справа — всё чётко.
Грамотное выравнивание
Типографисты зовут выравнивание выключкой. И для полиграфии выравнивание по ширине считается нормой. Но только не в вебе — из-за такого приёма на разных разрешениях начинается чехарда с текстом: слова отдаляются на неестественные расстояния друг от друга, и это невозможно читать. Поэтому в вебе выравнивание по левому краю — правило хорошего тона. И да, давно доказано, что пользователи не читают текст полностью, а скользят по нему согласно F-кривой, которая как раз концентрируется в левой области экрана.
Отцентрированный текст может быть на странице, но в заголовке или в качестве акцента. Во всех остальных случаях это не прибавляет читабельности и только всё портит.
Картинка 1 — отцентрированные заголовки плюс описания по левому краю — смотрится хаотично. Картинка 2 — отцентрированный текст на плашках ещё более-менее считывается, а вот ниже — уже нет. Картинка 3 — Мелкий отцентрированный текст — кровь из глаз.
Преемственность
Разный дизайн элементов на разных страницах — такое себе. Чтобы этого не происходило, опытные и хорошие дизайнеры создают UI kit — гайд по использованию типовых элементов, которые наследуются на всех страницах проекта.
Один и тот же элемент, нарисованный по-разному
UI kit
Типографика
Для типографики на сайтах действуют вышеупомянутые принципы: контраст, выравнивание, отступы, преемственность. На примерах ниже всё хорошо:
Общее правило: не использовать больше двух шрифтовых начертаний. И вообще не использовать (никогда, ни при каких условиях) вычурные шрифты. Иначе вот что получится:
Неопытные дизайнеры часто играются с настройками шрифтов. Но всё хорошо в меру:


Регистр

Капс допустим, но не для всего текста на странице, иначе пользователю покажется, будто на на него кричат. Для акцентных заголовков — на здоровье.
нет/да
Треккинг (межсимвольное расстояние)

Почти всегда — атата за игры с треккингом. Но когда нужен акцентный заголовок капсом, расстояние между заглавными буквами допустимо слегка увеличить.
нет/да
Интерлиньяж (межстрочное расстояние)

Общее правило: расстояние между строками в тексте равно величине шрифта плюс 10 пикселей. Если меньше — текст неприятно слипается, и его тяжело читать.
нет/да
Пропорции

Без комментариев :(
Ширина текстового блока

12-колоночные блоки сложно читать: вы сами попробуйте. Глазам приходится напрягаться, чтобы не перескакивать со строки на строку, а смысл текста тяжело удерживать в памяти. Блоки шириной 6−8 колонок — оптимальны.
Символы

Использование некорректных типографских символов испортит даже самый классный дизайн. Так что следите за кавычками, тире, минусами, списками и, конечно, висящими предлогами (стандарт веба).
Теория цвета
Всё просто: для гармоничных сочетаний цвета в дизайне есть три базовых принципа. В основе каждого — цветовой круг:
Распространённое правило — использовать в дизайне элементов не более трёх цветов. Чёрный, белый и серый не в счёт — это база, которой можно дополнять палитру. На примерах ниже — грамотные сочетания и вырвиглазные решения, которые идут вразрез с принципами гармонии (и всякого здравого смысла).
Работа с графикой

Ничто так не портит дизайн, как плохие картинки. А получаются они в трёх случаях:

  • у дизайнера руки из одного места, и он не умеет убирать фон (или вставляет в макет картинки с водяными знаками, как ни в чем ни бывало),
  • дизайнеру пофиг на качество, и все изображения зашакаленные (пиксельные),
  • дизайнер не понимает разницы между адекватным контентом и «успешным успехом» с фотостоков (лучше бы вконтактике взял фотки настоящих людей).
Ещё хуже, когда фотографии сочетают с векторными изображениями или плоские иллюстрации с объёмными — получается каша.
А теперь — минутка треша :) На этих сайтах играет музыка, бегают пантеры, искрятся заголовки и происходит ещё много всего странного и мозговыносящего.
Уместность
Дизайнеру важно понимать цель и аудиторию проекта — от этого зависит уместность его креативов.

E-commerce

Задача дизайнера в проектах для электронной коммерции — копировать поведение пользователя на кассе. Продумать, какой путь отделяет его от покупки, в какой последовательности тот будет совершать действия на сайте, что при этом будет думать и чувствовать, и каким должно быть общее впечатление проекта, чтобы точно попасть в ожидания ЦА. Поэтому UX — повелитель екоммерс.

Фактически, дизайнер оформляет бизнес заказчика для клиента. Поэтому в основе хорошего дизайна могут быть фишки UX, которые выделят проект на фоне остальных:

  • начальная страница продукта, которая сразу даёт представление о фирме, товаре или услуге (и пользователь понимает, подходит ему это или нет),

  • реальные фотографии товаров (лучше работают не витринные фото, а фото на модели или в момент использования),

  • встроенные видео (которые помогут снять барьеры перед покупкой),

  • красивые страницы категорий (с понятной навигацией и уютным расположением товаров),

  • нетипичные фотографии товаров (крупные — для вау-эффекта),

  • скроллинг фото продуктов (вместо привычного слайдера — горизонтальный скролл).
Здесь сразу понятно, на кого ориентирован продукт: на мужчин, которым офисный дресс-код нипочём
Носки с корги — рядом лежит настоящий корги. Носки с бостон-терьером — рядом терьер
По фото сложно понять, как серьги будут смотреться на ухе — видео показывает их на модели со всех сторон
В категории смешаны сразу все товары, но справа их можно отсортировать, выбрать нужную подкатегорию
Фото детских игрушек не выглядят каталожными — они сразу показаны в естественной среде
Вместо типичного слайдера — горизонтальный скролл для переключения между товарами
Сайты создаются не для красоты, а для бизнеса — поэтому на страницах всегда есть CTA (call to action): кнопки бронирования, заказа, обратной связи, подписки или шаринга. От их внешнего вида и оформления зависит, будет ли по ним кликать пользователь.
Кнопка бронирования спа выглядит активной и уместной. В примере с букетами кнопки будто кричат на пользователя.
На сайте банка кнопка яркая и подчиняется иерархии страницы. На втором примере — кнопка почти незаметна.
Форма подписки Главреда рассказывает о пользе, второй пример — только задаётся вопросами (и выглядит так себе)
Всплывающие окна всех бесят, а когда шаринг ещё бессмысленный, он не работает. Другое дело, когда вы вдруг леопард — сразу хочется рассказать о тесте друзьям.
Промо-сайты

У промо совсем другие правила — его цель: зацепить пользователя, показать продукт с несвойственной стороны. Поэтому дизайн важнее UX.

UX-приёмы в промо-сайтах отличаются от традиционных: они ориентируются на:

  • интересы,
  • слабости,
  • страхи,
  • хайп или тренды.
И сайт необязательно должен быть «дорогим» — главное, чтобы он выделял отличительные особенности бренда.
Если интерес пользователя — видеоигры, почему бы не воплотить их на сайте?
А если пользователь слаб к алкоголю — можно и это обыграть
Какое-то время назад античные статуи были в теме — и сайты с ними были хайповыми
Где искать референсы
Если вы заказчик — здесь можно поискать примеры того, каким вы хотите видеть свой будущий проект. Если вы руководитель проекта или начинающий дизайнер — подготовиться к брейншторму.

Awwwards
Удобен тем, что есть поиск с сортировкой. Другой плюс — превью с анимациями, благодаря которым подсматривать фишки для сайтов куда проще, чем заходить в каждый проект отдельно :)
Dribbble
Устроен по принципу соцсети, поэтому придётся завести свой аккаунт. Поиск похож на Pinterest (о нём ниже) — можно также собирать понравившиеся проекты у себя. Минус в том, что некоторые проекты скрыты авторами от посторонних лиц, и вы сможете их увидеть, только если автор работы вас добавит в список разрешенных пользователей.

Webdesignerdepot
Собирает все события со всех площадок. Удобен, если нужно быстро посмотреть топовые тренды. Или почитать свежайшие статьи о дизайне.

Behance
Тоже лучше завести аккаунт. Через поиск можно искать проекты или мудборды, есть категории. Проекты тоже можно забирать к себе на доски и делать подборки.
Pinterest
Тоже нужен аккаунт. И тоже можно искать по категориям в поиске. Удобен тем, что на превью есть ссылки на реальные проекты — их можно копировать и сохранять.

Instagram

Тут вам не только селфи чужие смотреть — дизайн-проектов тоже очень много. Искать можно по тегам, а понравившиеся сохранять в закладки. Закладки группируются (ну вдруг вы не знали).
GoogleFonts
Сборник бесплатных шрифтов на все случаи жизни. Тоже есть поиск и фильтрация. Ну, а если вы сомневаетесь в выборе шрифтовой пары, загляните на FontPair.
Дочитали до конца? Ура, теперь вы сможете сказать дизайнеру, что тот сделал лажу, вместо пространного «ну… что-то не то». И сможете управлять дизайном на этапе создания, а не постфактум, когда окажется, что реально всё не то. Успехов!
Крутая презентация с котиками от Кристины и Глеба
доступна в нашем Телеграм-канале.
Подписывайтесь, изучайте и творите хороший дизайн!