Отстаньте от веб-дизайнеров или правила которые не работают

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

Итак, 6 мифов, к которым нужно относится осторожно.

01 — Психология цвета

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

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

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

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

То есть не то чтобы этим совсем никто не пользуется, но очевидно о том какого цвета ДОЛЖЕН БЫТЬ логотип банка дизайнеры задумывались далеко не в первую очередь. И это касается всех сфер. Логотип Facebook, например, вообще синий только потому, что у Цукерберга частичный дальтонизм и он не различает другие цвета))

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

02 — Люди читают "буквой F"

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

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

Только пользователи НЕ ВСЕГДА читают "буквой F". Это касается в основном больших монотонных кусков текста.

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

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

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

03 — Всё ровнять по бутстрапу

Когда я впервые прочитал про Bootstrap и его 12 колонок, по которым нужно выравнивать макет страницы, я буквально понял, что каждый элемент должен быть привязан к этим линейкам. На деле всё вообще не так.

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

04 — Pixel perfect веб-дизайн

Стоит признать, что pixel perfect подход не работает в вебе. Вернее работает, но только на макете, ровно до того момента как он попадёт в руки верстальщику и станет живой страничкой.

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

Допустим в дизайне есть прямоугольный блок с иконкой и текстом. Хороший дизайнер знает, что расстояние от верхнего края блока до иконки и от текста до нижнего края блока должно быть одинаковым. И пока он думает, что именно считать нижней границей текста (базовую линию или нижнюю точку букв у, j, q), верстальщик ехидно улыбается, потому что в его понимании нижняя граница абзаца вообще зависит от межстрочного интервала.

Дело в том, что в вёрстке вообще не существует понятия межстрочный интервал. Его заменяет высота строки (свойство line-height), разница в том, что эта высота есть у каждой строки, и у самой нижней тоже, а это приводит к интересным последствиям.

В итоге параметры заданы в соответствии с макетом, а визуально готовая старница всё равно отличается от дизайна. И это только один пример.

Во-вторых, как мы уже выяснили в пункте 3, часть размеров на странице привязаны к колонкам Bootstrap и будут зависить от ширины экрана, а часть задается конкретным числом пикселей. Поэтому, например, нет никакого смысла выстраивать гармонию между вертикальными и горизонтальными отсупами. Сайт будет выглядеть так как нарисовал дизайнер ровно на тех разрешениях, для которых был отрисован макет. Стоит открыть окно браузера не на весь экран, как текст съедет, часть блоков станет у́же и гармония потеряется.

05 — Как победители авввордс

Насмотренность — важное качество каждого дизайнера, поэтому кажется правильным искать best practics среди победителей международных конкурсов типа FWA или Awwwards.

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

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

06 — Визуальный вес фигур

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

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

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

Мне кажется, это действительно работает, и форма справа выглядит гармоничнее. Но это только на макете легко нарисовать кнопку "чуть шире" и подвинуть что-то на пиксель в сторону. Реальная страница, её разметка задается ограниченным набором свойств. Нужно как-то объяснить браузеру как это "чуть" должно меняться в зависимости от ширины самой формы при адаптации. Ни один верстальщик не станет этого придумывать такую мелочь, а значит и для дизайнера эта информация бесполезна. Веб-дизайнер не просто рисует красивую картинку, он должен задумываться о том, что его идею потом нужно будет реализовать кодом.

Этот пример хорошо иллюстрирует, что есть вещи которые хороши только в теории.