Общепринятой единой классификации дизайна сайтов нет: можно делить по цвету, сетке, количеству графики, стилю. Для заказа полезнее деление по задаче страницы. Новости и регламент требуют спокойного чтения. Карточка товара — честного фото и свойств. Промо акции — акцента и срока. Смешивать три задачи на одном первом экране обычно вредно.
Два сайта одной ниши с похожими позициями в поиске дают разный результат, если у одного понятная иерархия и кнопки, а у второго графика спорит с текстом. Секрета нет: один проектировали под действие, второй — «чтобы было красиво».
Ориентиры, а не вкусовщина
«Сделайте красиво» нельзя принять в работу. Понятия о красоте расходятся. Сайт делают для аудитории сделки, не для личного вкуса директора и не для портфолио дизайнера. Экстремальный спорт и канцелярия для школы требуют разного темпа и плотности.
- контентные страницы: мало отвлекающей графики, читаемая ширина, ясные заголовки;
- каталог и магазин: фото предмета, цена, фильтр, сравнение без декора ради декора;
- промо: сильный кадр, но навигация и внутренние страницы тоже должны жить;
- сервисные кабинеты: плотность данных, статусы, меньше «атмосферы».
Технические рамки дизайна
Макет проверяют на типичных ширинах, не только на макете 1920. Кнопки на пальце, не перекрытые виджетами. Шрифты — те, что можно подключить легально. Экзотика без веб-шрифта превращается в «квадратики» у части посетителей.
Цвет. Если есть брендбук — его несут в макет, а не переизобретают. Если нет, лучше заказать минимальные правила вместе с сайтом, чем потом склеивать визитку, вывеску и шапку разными оттенками.
Юзабилити
Люди ищут телефон, корзину, фильтр там, где привыкли. Ломать привычку можно, только если выигрыш огромный. В ТЗ на дизайн сразу пишут состояния: ошибка, пустой список, товар без фото, длинное название.
Дизайн магазина без карточки и оформления заказа — неполный. Смотрите сценарий покупки целиком. Уникальную корзину ради картинки рисовать не стоит: человек ищет привычные шаги, а не авторский маршрут к кнопке.
Как принимать макет
Сверяйте с задачей, с брендбуком, с мобильным эскизом, с реальным текстом, не с «Lorem». Спрашивайте, что будет, если заголовок в два раза длиннее. Доверяйте студии в типографике и отступах: это не рекламный плакат к выставке, здесь человек читает и действует.
Хороший дизайн сайта незаметен на пути к заявке и заметен в аккуратности деталей. Если замечают только «вау» и не находят кнопку — тип выбран не тот.
Состояния и контент в макете
Просите макеты не только «счастливой» главной. Нужны длинный заголовок, карточка без фото, корзина с одной позицией, ошибка оплаты, 404. Дизайн, который живёт только на идеальном тексте, в проде разваливается.
Реальные фото в макете лучше стоковых. Стоки создают ложное ощущение готовности. Когда подставляют ваши тёмные цеховые кадры, внезапно нужны другие отступы и другой фон.
Анимация и видео на первом экране должны иметь запас: если ролик не загрузился, страница всё равно объясняет, кто вы и что нажать. Дизайн без этого запаса хрупок.
Сверяйте макет с юридическими блоками: согласие, cookie, мелкий текст оферты. Их часто «потом влепят» и портят аккуратную сетку. Лучше сразу дать им место, чем ломать отступы на приёмке.
