Воздух
Вы замечали, что на одних сайтах дышится легко, а на других тесно? Это работа воздуха. Когда элементы разложены просторно, глаз скользит по странице сам. Есть ли цифры? Есть.
Понимание текста до 20% лучше. Это выявлено в исследовании Д. Лина в 2004 году. И как бонус, одно исследование нашло, что воздух сильнее влияет на удовольствие от чтения, чем на понимание.
Воздух выглядит дорого, и это наука. В 2006 году в журнале Journal of Consumer Research вышло исследование: и покупатели, и рекламщики связывают заметный пустой простор вокруг слова или картинки с изысканным вкусом и высоким классом.
А теперь конкретные цифры. Международный стандарт доступности WCAG 2.1 задает ориентиры: межстрочный интервал не меньше 1,5 размера шрифта, отступ после абзаца не меньше 2 размеров шрифта.
Эффекты: не все сразу
Сейчас красивые эффекты доступны любому сайту, и очень велик соблазн поставить их все сразу. Чтобы карточка товара подпрыгивала, переворачивалась и светилась одновременно. Сделать так можно. Но нужно ли?
Нет. Глаз замечает движение раньше всего остального, так мы устроены. Когда двигается все, глаз пытается ухватиться за все подряд и в итоге не видит ничего.
Лучше один эффект, который направит взгляд туда, куда нужно вам. Например, фото товара чуть приближается, когда на него наводят мышку. Так смотрят на вещь, а не на рамку вокруг нее.
Фон не отвлекает
Когда вы собираете свой сайт, сразу хочется поставить яркий, запоминающийся фон, чтобы он бросался в глаза. Кажется, что так и привлекается внимание посетителя.
Но подумайте, о чем ваш сайт? О фоне? Или все-таки о вашем товаре? Могу поспорить, что не о картинке за карточкой.
Поэтому правила все те же: фокус на товаре и спокойный фон, который не отвлекает от главного. Например, светлый однотонный фон в тон вашим вещам: для свечей теплый молочный, для серебра прохладный светло-серый.
Темный однотонный фон тоже можно, не бойтесь его. На темном вещи выступают вперед, как в витрине вечером. Только снимайте товары на таком же темном фоне, иначе каждое фото станет ярким белым квадратом. И делайте текст покрупнее: мелкие светлые буквы на темном читаются хуже. Посмотрите, как это получилось у VALGALA.
Количество шрифтов
У шрифтов на сайте тоже есть свои правила. Давайте посмотрим, что и чем выделять.
У текста на сайте три роли:
Заголовок. Самый крупный и красивый. Он сразу бросается в глаза, и по нему посетитель понимает, о чем сайт.
Подзаголовок. Выделяет главную мысль раздела или карточки товара.
Основной текст. Спокойный шрифт, который не напрягает глаз при чтении.
Роли три, а шрифтов хватит двух. Подзаголовок делают тем же шрифтом, что заголовок или текст, только меньше или жирнее. Например, заголовки шрифтом с засечками, а все остальное простым шрифтом без засечек.
Скучно? Да, и так задумано. Именно эта сдержанность делает чтение спокойным, а сайт похожим на бутик. И еще одно правило: для одной и той же роли один и тот же шрифт по всему сайту.
Количество акцентов
О, на эту тему можно рассуждать бесконечно. Как же хочется показать посетителю все: и новинки, и хиты, и новогоднюю коллекцию, и скидки перед праздником. А раз шрифтов у нас всего два, хочется добавить акцента заглавными буквами, восклицательными знаками и еще выделить цветом, чтобы точно не пропустили.
Но когда выделено все, не выделено ничего. Глаз видит хаос и скользит мимо, а к концу страницы все эти крики сливаются в один шум.
Правило простое: один главный акцент на экран. Новинку отметьте маленькой пометкой «Новинка», а не заглавными буквами, восклицательным знаком и красным цветом сразу.
Не кричите на сайте. Пусть на сайте кричит ваша работа, ваше изделие.
Весь акцент на фото
И вот мы добрались до главных героев сайта мастера. Мы убрали все, что мешает посетителю рассмотреть ваши работы: подсчитали шрифты, дали воздуха, положили фотографии на приятный тон, даже ограничили эффекты.
А глаз все равно видит шум. Почему? Потому что фото сняты по-разному: на одном яркий фон, на другом белый, третье снято сверху, четвертое при желтой лампе. Глаз замечает эту разницу раньше, чем посетитель успевает понять, что ему мешает, и мечется от карточки к карточке.
Завершить премиальный вид сайта помогут фото в одном стиле. Это значит один и тот же фон, лучше в тон сайту, один и тот же свет, например дневной у окна, и одно расстояние до изделия. Тогда фото перестают спорить друг с другом, и остается то, ради чего все затевалось: ваша работа.
Вместо заключения
Да, все эти правила есть в интернете, и прочитать их может любой. Но прежде чем я сама разложила их для себя по полочкам, я набила много шишек.
На чем я училась? Оставлю ссылки:
nngroup.com: мой любимый сайт, кодовое название «лаборатория нажатия кнопочек».
practicaltypography.com: авторитетный онлайн-учебник по самой скучной теме, шрифтам.
w3.org/WAI/standards-guidelines/wcag: международный стандарт доступности, оттуда нормы для межстрочных интервалов и отступов.
Поэтому на платформе this is one я постаралась сделать так, чтобы ошибиться было очень сложно, даже без опыта в веб-дизайне и верстке. Эти правила заложены в каждую витрину, на любом тарифе. Попробовать можно бесплатно 30 дней.
