{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","buttonText":"","imageUuid":""}

3 смертельные ошибки в дизайне сайтов

В поисках референсов для клиентских проектов просматриваешь десятки макетов сайтов каждый день. Со временем начинаешь видеть, что от макета к макету веб-дизайнеры допускают одни и те же ошибки.

В этой статье хочу показать 3 смертельные ошибки в дизайне сайтов, которые довольно часто можно встретить в работах наших коллег. Поехали!

Ошибка 1: Несоблюдение иерархии. На картинке выше есть две кнопки одного порядка.

Есть три порядка кнопок: первый - залитые цветом, второй - имеют только контуры и третий - в виде текста. На экране сейчас конфликт двух действий. Не понятно, какое важнее? Перейти в каталог или задать вопрос?!

Дополнительная ошибка на макете: Отсутствие контактных данных вверху сайта. Сразу в шапке должен быть ,как минимум номер телефона для моментального звонка. По некоторым проектам у меня из 400 заявок в месяц 300 приходит в виде звонка.

Ошибка 2. Нарушение правила внутренних и внешних отступов.

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

Для примера, расстояние от чемодана до блока с текстом 20px, а расстояние между буллитами 10px.

Дополнительная ошибка на макете: На картинке очень сильно не хватает "воздуха.

Буллиты выглядят скученно, хочется их визуально раздвинуть. Хочется добавить более широкие поля для карточек.

Ошибка 3: Нарушение закона ассоциаций

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

Понравилась статья?

Подпишись на телеграм-канал Дизайн склад

Там топовые мокапы, платные шрифты, книги по дизайну, свежие PNG и советы по дизайну

0
6 комментариев
Написать комментарий...
Алексей Свечкин

Статью стоило назвать «3 смертельные ошибки дизайнера-стажёра».

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

Ответить
Развернуть ветку
Дмитрий Ольшевский

душнила =)

Ответить
Развернуть ветку
Прозектор на удаленке
Ответить
Развернуть ветку
Александр

Ошибки действительно смертельные. У меня так друг умер

Ответить
Развернуть ветку
Дарья Третьяк

а вас на первом скрине реально кроме кнопок ничего не смутило?

Ответить
Развернуть ветку
Дмитрий Сёмин

Посмотрел на картинки и сразу пошли флешбеки из 2010)

Ответить
Развернуть ветку
3 комментария
Раскрывать всегда