Good VS Bad design
Как разбираться в дизайне, если ты ни грамма не дизайнер (а разбираться всё равно нужно)
Казалось бы, принципы достойного дизайна стары, как мир. Но говносайтов с упоротыми шрифтами, зашакаленной графикой и вырвиглазными решениями по-прежнему полно в сети. Причина обычно простая: тот, кто принимал этот дизайн, ничерта в нём не понимал и доверился мнению «специалиста». А ведь дизайнер дизайнеру — рознь.
Хватит это терпеть. Наши дизайнеры собрали крутую презентацию о принципах хорошего и не очень дизайна, а мы написали по ней материал — чтобы в мире стало меньше так-себе-сайтов из-под руки трусливых и ленивых дизайнеров, прикрывающихся фразой «я так вижу».
Хватит это терпеть. Наши дизайнеры собрали крутую презентацию о принципах хорошего и не очень дизайна, а мы написали по ней материал — чтобы в мире стало меньше так-себе-сайтов из-под руки трусливых и ленивых дизайнеров, прикрывающихся фразой «я так вижу».
Принципы хорошего дизайна
Контраст во всём
1) Фон контрастен контенту
2) Одни экраны сайта контрастируют с другими
3) Заголовки контрастируют с основным текстом
Ниже — антипримеры, где с контрастом беда: либо текст и фон недостаточно контрастируют, либо текст на фоне вообще не читается.
Приближенность (отступы)
Общее правило: связанные по смыслу и структуре элементы должны располагаться рядом. Например, пункты из списка должны быть ближе друг к другу, чем обобщающий заголовок этого списка. На примерах ниже:
1) фамилии прилипли к спискам,
2) кнопка прилипла к тексту,
3) одинаковые отступы между текстом, жирным текстом и кнопкой — неясно, что главнее.
1) фамилии прилипли к спискам,
2) кнопка прилипла к тексту,
3) одинаковые отступы между текстом, жирным текстом и кнопкой — неясно, что главнее.
А вот на этих примерах отступ от заголовка до текста больше межстрочного расстояния, а отступ от кнопки до текста ещё больше. И это правильно :)
Больше воздуха
Чем больше свободного пространства вокруг элементов, тем проще их воспринимать. Особенно это касается текста. Если «воздуха» между текстовыми блоками мало, пользователь чувствует себя некомфортно: ему тесно, плохо и он напрягается, чтобы найти нужное. Чем больше воздуха, тем проще читать и воспринимать.
Сравните примеры ниже: слева хаос, справа — всё чётко.
Сравните примеры ниже: слева хаос, справа — всё чётко.
Грамотное выравнивание
Типографисты зовут выравнивание выключкой. И для полиграфии выравнивание по ширине считается нормой. Но только не в вебе — из-за такого приёма на разных разрешениях начинается чехарда с текстом: слова отдаляются на неестественные расстояния друг от друга, и это невозможно читать. Поэтому в вебе выравнивание по левому краю — правило хорошего тона. И да, давно доказано, что пользователи не читают текст полностью, а скользят по нему согласно F-кривой, которая как раз концентрируется в левой области экрана.
Отцентрированный текст может быть на странице, но в заголовке или в качестве акцента. Во всех остальных случаях это не прибавляет читабельности и только всё портит.
Картинка 1 — отцентрированные заголовки плюс описания по левому краю — смотрится хаотично. Картинка 2 — отцентрированный текст на плашках ещё более-менее считывается, а вот ниже — уже нет. Картинка 3 — Мелкий отцентрированный текст — кровь из глаз.
Преемственность
Разный дизайн элементов на разных страницах — такое себе. Чтобы этого не происходило, опытные и хорошие дизайнеры создают UI kit — гайд по использованию типовых элементов, которые наследуются на всех страницах проекта.
Один и тот же элемент, нарисованный по-разному
UI kit
Типографика
Для типографики на сайтах действуют вышеупомянутые принципы: контраст, выравнивание, отступы, преемственность. На примерах ниже всё хорошо:
Общее правило: не использовать больше двух шрифтовых начертаний. И вообще не использовать (никогда, ни при каких условиях) вычурные шрифты. Иначе вот что получится:
Неопытные дизайнеры часто играются с настройками шрифтов. Но всё хорошо в меру:
Регистр
Капс допустим, но не для всего текста на странице, иначе пользователю покажется, будто на на него кричат. Для акцентных заголовков — на здоровье.
Регистр
Капс допустим, но не для всего текста на странице, иначе пользователю покажется, будто на на него кричат. Для акцентных заголовков — на здоровье.
нет/да
Треккинг (межсимвольное расстояние)
Почти всегда — атата за игры с треккингом. Но когда нужен акцентный заголовок капсом, расстояние между заглавными буквами допустимо слегка увеличить.
Почти всегда — атата за игры с треккингом. Но когда нужен акцентный заголовок капсом, расстояние между заглавными буквами допустимо слегка увеличить.
нет/да
Интерлиньяж (межстрочное расстояние)
Общее правило: расстояние между строками в тексте равно величине шрифта плюс 10 пикселей. Если меньше — текст неприятно слипается, и его тяжело читать.
Общее правило: расстояние между строками в тексте равно величине шрифта плюс 10 пикселей. Если меньше — текст неприятно слипается, и его тяжело читать.
нет/да
Пропорции
Без комментариев :(
Без комментариев :(
Ширина текстового блока
12-колоночные блоки сложно читать: вы сами попробуйте. Глазам приходится напрягаться, чтобы не перескакивать со строки на строку, а смысл текста тяжело удерживать в памяти. Блоки шириной 6−8 колонок — оптимальны.
12-колоночные блоки сложно читать: вы сами попробуйте. Глазам приходится напрягаться, чтобы не перескакивать со строки на строку, а смысл текста тяжело удерживать в памяти. Блоки шириной 6−8 колонок — оптимальны.
 |
 |
Символы
Использование некорректных типографских символов испортит даже самый классный дизайн. Так что следите за кавычками, тире, минусами, списками и, конечно, висящими предлогами (стандарт веба).
Использование некорректных типографских символов испортит даже самый классный дизайн. Так что следите за кавычками, тире, минусами, списками и, конечно, висящими предлогами (стандарт веба).
Теория цвета
Всё просто: для гармоничных сочетаний цвета в дизайне есть три базовых принципа. В основе каждого — цветовой круг:
Распространённое правило — использовать в дизайне элементов не более трёх цветов. Чёрный, белый и серый не в счёт — это база, которой можно дополнять палитру. На примерах ниже — грамотные сочетания и вырвиглазные решения, которые идут вразрез с принципами гармонии (и всякого здравого смысла).
Работа с графикой
Ничто так не портит дизайн, как плохие картинки. А получаются они в трёх случаях:
- у дизайнера руки из одного места, и он не умеет убирать фон (или вставляет в макет картинки с водяными знаками, как ни в чем ни бывало),
- дизайнеру пофиг на качество, и все изображения зашакаленные (пиксельные),
- дизайнер не понимает разницы между адекватным контентом и «успешным успехом» с фотостоков (лучше бы вконтактике взял фотки настоящих людей).
Ещё хуже, когда фотографии сочетают с векторными изображениями или плоские иллюстрации с объёмными — получается каша.
А теперь — минутка треша :) На этих сайтах играет музыка, бегают пантеры, искрятся заголовки и происходит ещё много всего странного и мозговыносящего.
Уместность
Дизайнеру важно понимать цель и аудиторию проекта — от этого зависит уместность его креативов.
E-commerce
E-commerce
Задача дизайнера в проектах для электронной коммерции — копировать поведение пользователя на кассе. Продумать, какой путь отделяет его от покупки, в какой последовательности тот будет совершать действия на сайте, что при этом будет думать и чувствовать, и каким должно быть общее впечатление проекта, чтобы точно попасть в ожидания ЦА. Поэтому UX — повелитель екоммерс.
Фактически, дизайнер оформляет бизнес заказчика для клиента. Поэтому в основе хорошего дизайна могут быть фишки UX, которые выделят проект на фоне остальных:
- начальная страница продукта, которая сразу даёт представление о фирме, товаре или услуге (и пользователь понимает, подходит ему это или нет),
- реальные фотографии товаров (лучше работают не витринные фото, а фото на модели или в момент использования),
- встроенные видео (которые помогут снять барьеры перед покупкой),
- красивые страницы категорий (с понятной навигацией и уютным расположением товаров),
- нетипичные фотографии товаров (крупные — для вау-эффекта),
- скроллинг фото продуктов (вместо привычного слайдера — горизонтальный скролл).
Здесь сразу понятно, на кого ориентирован продукт: на мужчин, которым офисный дресс-код нипочём
Носки с корги — рядом лежит настоящий корги. Носки с бостон-терьером — рядом терьер
По фото сложно понять, как серьги будут смотреться на ухе — видео показывает их на модели со всех сторон
В категории смешаны сразу все товары, но справа их можно отсортировать, выбрать нужную подкатегорию
Фото детских игрушек не выглядят каталожными — они сразу показаны в естественной среде
Вместо типичного слайдера — горизонтальный скролл для переключения между товарами
Сайты создаются не для красоты, а для бизнеса — поэтому на страницах всегда есть CTA (call to action): кнопки бронирования, заказа, обратной связи, подписки или шаринга. От их внешнего вида и оформления зависит, будет ли по ним кликать пользователь.
Кнопка бронирования спа выглядит активной и уместной. В примере с букетами кнопки будто кричат на пользователя.
На сайте банка кнопка яркая и подчиняется иерархии страницы. На втором примере — кнопка почти незаметна.
Форма подписки Главреда рассказывает о пользе, второй пример — только задаётся вопросами (и выглядит так себе)
Всплывающие окна всех бесят, а когда шаринг ещё бессмысленный, он не работает. Другое дело, когда вы вдруг леопард — сразу хочется рассказать о тесте друзьям.
Промо-сайты
У промо совсем другие правила — его цель: зацепить пользователя, показать продукт с несвойственной стороны. Поэтому дизайн важнее UX.
У промо совсем другие правила — его цель: зацепить пользователя, показать продукт с несвойственной стороны. Поэтому дизайн важнее UX.
UX-приёмы в промо-сайтах отличаются от традиционных: они ориентируются на:
- интересы,
- слабости,
- страхи,
- хайп или тренды.
Если интерес пользователя — видеоигры, почему бы не воплотить их на сайте?
А если пользователь слаб к алкоголю — можно и это обыграть
Какое-то время назад античные статуи были в теме — и сайты с ними были хайповыми
Где искать референсы
Если вы заказчик — здесь можно поискать примеры того, каким вы хотите видеть свой будущий проект. Если вы руководитель проекта или начинающий дизайнер — подготовиться к брейншторму.
Awwwards
Удобен тем, что есть поиск с сортировкой. Другой плюс — превью с анимациями, благодаря которым подсматривать фишки для сайтов куда проще, чем заходить в каждый проект отдельно :)
Awwwards
Удобен тем, что есть поиск с сортировкой. Другой плюс — превью с анимациями, благодаря которым подсматривать фишки для сайтов куда проще, чем заходить в каждый проект отдельно :)
Dribbble
Устроен по принципу соцсети, поэтому придётся завести свой аккаунт. Поиск похож на Pinterest (о нём ниже) — можно также собирать понравившиеся проекты у себя. Минус в том, что некоторые проекты скрыты авторами от посторонних лиц, и вы сможете их увидеть, только если автор работы вас добавит в список разрешенных пользователей.
Webdesignerdepot
Собирает все события со всех площадок. Удобен, если нужно быстро посмотреть топовые тренды. Или почитать свежайшие статьи о дизайне.
Behance
Тоже лучше завести аккаунт. Через поиск можно искать проекты или мудборды, есть категории. Проекты тоже можно забирать к себе на доски и делать подборки.
Устроен по принципу соцсети, поэтому придётся завести свой аккаунт. Поиск похож на Pinterest (о нём ниже) — можно также собирать понравившиеся проекты у себя. Минус в том, что некоторые проекты скрыты авторами от посторонних лиц, и вы сможете их увидеть, только если автор работы вас добавит в список разрешенных пользователей.
Webdesignerdepot
Собирает все события со всех площадок. Удобен, если нужно быстро посмотреть топовые тренды. Или почитать свежайшие статьи о дизайне.
Behance
Тоже лучше завести аккаунт. Через поиск можно искать проекты или мудборды, есть категории. Проекты тоже можно забирать к себе на доски и делать подборки.
Pinterest
Тоже нужен аккаунт. И тоже можно искать по категориям в поиске. Удобен тем, что на превью есть ссылки на реальные проекты — их можно копировать и сохранять.
Instagram
Тут вам не только селфи чужие смотреть — дизайн-проектов тоже очень много. Искать можно по тегам, а понравившиеся сохранять в закладки. Закладки группируются (ну вдруг вы не знали).
Тоже нужен аккаунт. И тоже можно искать по категориям в поиске. Удобен тем, что на превью есть ссылки на реальные проекты — их можно копировать и сохранять.
Тут вам не только селфи чужие смотреть — дизайн-проектов тоже очень много. Искать можно по тегам, а понравившиеся сохранять в закладки. Закладки группируются (ну вдруг вы не знали).
GoogleFonts
Сборник бесплатных шрифтов на все случаи жизни. Тоже есть поиск и фильтрация. Ну, а если вы сомневаетесь в выборе шрифтовой пары, загляните на FontPair.
Сборник бесплатных шрифтов на все случаи жизни. Тоже есть поиск и фильтрация. Ну, а если вы сомневаетесь в выборе шрифтовой пары, загляните на FontPair.
Дочитали до конца? Ура, теперь вы сможете сказать дизайнеру, что тот сделал лажу, вместо пространного «ну… что-то не то». И сможете управлять дизайном на этапе создания, а не постфактум, когда окажется, что реально всё не то. Успехов!
Крутая презентация с котиками от Кристины и Глеба
доступна в нашем Телеграм-канале.
Подписывайтесь, изучайте и творите хороший дизайн!
доступна в нашем Телеграм-канале.
Подписывайтесь, изучайте и творите хороший дизайн!