Чеклист: дизайн сайта. Часть первая: 3 вещи выдающие плохой дизайн

Важно! Achtung! Увага!

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

Работа с цветом

Тут сложно и четких правил нет. Я сознательно не лезу в цветовые круги и прочие сложности. Совет простой и наглядный.

Как проверить насколько адекватно исполнитель подбирал цвета?

Откройте PSD макет и возьмите пипетку. Соберите цвета элементов (кнопки, ссылки, иконки, заголовки и т.д.) в палитру и окиньте их взглядом. Черный и белый - не считаются. Они сочетаются? Все хорошо. Их вышло 3-4? Отлично.

Проиллюстрирую на практике. Запрос "стоматология" в гугле. Сайт клиники "Вероника" (http://www.veronica.ru/):

Проблемы с цветом:

1. Цвета не сочетаются. Палитра не выглядит гармоничной. Особенно выделяется ярко-красный.
2. Сайт страдает бесконтрольным размножением цветов. Зачем два синих близких по оттенку? Почему нельзя оставить один зеленый?
3. Градиент на кнопке. Сразу видно, что дизайнера заперли в подвале и не подпускали к компьютеру лет 5. Он пропустил смерть градиентов на кнопках. И не знает, что в современном WEB-е так топорно они не делаются.

Кстати! Можно проверить online на сверстанном макете. Установите в Хроме расширение Eye Dropper и будет вам счастье.

Шрифты

С этим проще. Макеты плохого дизайнера страдают от следующих напастей:

1. Используется слишком много или слишком мало шрифтов. В идеале их два. Акцентный. Используется для заголовков и в кнопках, если хорошо смотрится. Основной. Для текстов, пояснений, гиперссылок. Больше шрифтов - проблемы верстки, визуальная пестрота и прочие симптомы "Shit дизайна"
2. Необратимое расширение размерного ряда шрифтов. Сюда же отнесем пеструю палитру жирности шрифтов. Ну и несколько цветов шрифта. Если у вас 6 размеров шрифта и 6 степеней жирности, то вы не умеете строить иерархию информации. И вместо того, чтобы подумать как выделить информацию - просто лепите шрифт пожирней и побольше. И красным сделать, чтобы совсем красота.
3. Слипшиеся шрифты. Строчки прилипли друг к другу. Заголовок тоже прилип к тексту. Ненужная компактность, мешающая читать текст.

Иллюстрируем на практике (сайт http://topservicespb.ru). Используется аж 7 размеров одного шрифта:

Загадка. Что мешает сделать размер шрифта в блоке отзывов и причин выбора клиентами, без ответа. Почему подзаголовок отзывы написан жирным и слева, а заголовок "Почему нас выбрали 15 000 клиентов" выровнен по центру и нежирный? Точнее причина проста - дизайнеру было пох... всеравно.

Тут же, есть проблема с прилипшими заголовками. Зачем 22 года на рынке так прижимать к тексту? Дайте ему воздуха. Специально выделил красными квадратами текст, а обводкой межстрочный интервал. Разницы, фактический нет. На выходе - котлета текста, которую сложно читать. Расстояние от заголовка до текста, минимум 150% от размера шрифта. Если заголовок 20px, то расстояние от текста от 30px.

Чтобы проверить межстрочные интервалы и количество шрифтов воспользуйтесь инструментом WhatFont. Бесплатно и в Гугл хроме.

Картинки

Качественные. Не выглядящие тупым стоком. Соответствующие тематике сайта и специфике бизнеса. В идеале подходящие по цветам (да, придется дизайнеру тонировать). Идеал - фотографии от нанятого фотографа или картинки от иллюстратора. Иначе у вас получится такое:

Аццкий сток...

Картинка не соответствует написанному на баннере. Booking это про бронирование отелей. Причем тут воздушные шары:

Отдельным пунктом я бы вывел использование штампов. Роботы на плохих сайтах про SEO, ракеты на стартапах и "японские свечи" на финансовых сайтах. Про это расписывать не буду, т.к. MAD RABBIT в статье "Дурные штампы в плоской графике" расписал все до меня.

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