WebValley Studio

WebValley Studio

70+ ошибок в веб‑дизайне, которые убивают сайт и просаживают конверсию

Одни сайты выглядят эстетично, гармонично, завершённо, а другие, даже если они вполне современные, вызывают чувство, что с ними что-то не так. Мы научим, как отличить ТОПовый дизайн от халтуры.

РАССЧИТАТЬ СТОИМОСТЬ

Главная
→
Статьи
→
SEO умерло – развеиваем популярный миф

Оглавление

Готовое руководство по всем ошибкам, которое поможет сделать сайт грамотно и профессионально
Ошибки юзабилити
Ошибки в структуре макета
Ошибки в визуале сайта
Ошибки в типографике сайта
Веб-дизайн в вакууме
Откуда берутся ошибки в дизайне сайтов

Готовое руководство по всем ошибкам, которое поможет сделать сайт грамотно и профессионально

Бывает, смотришь на сайт и ловишь себя на мысли, что что-то не нравится, но никак не поймёшь, что именно. Ведущие дизайнеры нашей студии покажут, как правильно, а как нет, как можно исправить ошибку, и вообще, почему это считается ошибкой.

Ошибки юзабилити

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

Упоротая навигация

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

Правильно организовать удобную навигацию помогут такие инструменты, как:

Пункты меню;
Хлебные крошки;
Поиск по сайту;
Уровни вложенности;
Навигационные кнопки;
Структура страницы.

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

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

Пример дизайна большого каталога с правильной навигацией в виде хлебных крошек

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

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

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

А иногда объём и структура сайта такие, что просто нет смысла что-то искать без поиска, например, на маркетплейсах или фотостоках.

Пример поиска на маркетплейсе Ozon

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

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

Выдача поисковой системы при вводе правильного запроса в Pinterest

Выдача поисковой системы при вводе неправильного запроса в Pinterest

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

А вот так работает поиск в сервисе онлайн-кинотеатра Кинопоиск:

Пример ввода запроса в поисковую строку на сервисе Kinopoisk

При вводе запроса с опечаткой сервис всё равно выдал похожий по логике и искомый фильм.

Казалось бы, а при чём тут дизайнер? Как он это должен изобразить? Это точно ко мне? Да! Дизайнер должен не только нарисовать элемент, но и прописать логику его работы.

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

Пример дизайна с перегруженным меню на сайте auto ru

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

Пример дизайна многоуровневого структурированного меню на сайте Agat Group

Или вынести важные пункты в открытое меню, а остальные скрыть в разделе Ещё.

Пример большого меню, где часть разделов вынесены во вкладку Ещё на сайте drom ru

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

Пример большого меню на отдельной странице на сайте компании Металл Профиль

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

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

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

Если вложенность логичная, то не страшно, что она большая.

Большую роль играет то, на каком движке будет сделан сайт. На примере ниже можно увидеть два разных подхода. У мебельной компании Дятьково каталог имеет более глубокую вложенность, и каждый подраздел вынесен на отдельную страницу (Главная → Каталог → Шкафы → Шкафы-витрины), что выглядит логично и удобно. А у мебельной компании Диван.ру, в похожем разделе, виды шкафов уже оформлены в фильтр на той же странице (Главная → Шкафы и стеллажи), что в целом также удобно.

ошибки начинающих графических дизайнеров

Более глубокий уровень вложенности разделов каталога на сайте Дятьково

Менее глубокий уровень вложенности разделов каталога на сайте Диван ру

Если проектируемый сайт будет размещён, например, на платформе Tilda Publishing, то предпочтительней, чтобы у каждого раздела была своя отдельная страница. У Tilda очень плохо продвигаются карточки товаров, и если не сделать отдельные страницы разделов, подразделов и так далее, то вообще маловероятно, что на каталог будет идти какой-то трафик.

Если сайт на Bitrix Аспро, который изначально создавался под интернет-магазины, можно всё реализовать фильтрами без ущерба для SEO, потому что у Bitrix есть классный инструмент — умные фильтры, которые фактически генерируют динамические страницы. Это происходит автоматически при выборе какого-то набора фильтров.

Дизайнер должен быть подкованным в этом вопросе и понимать, а как этот сайт будет продвигаться, и на какой платформе будет размещён.

Отсутствие кнопок на продающих лендингах
Основная задача продающего лендинга — продать. То есть плавно подвести пользователя к конверсионному действию: купить продукт, услугу, подписаться, связаться. Как пользователь сможет совершить это действие, если вовремя не предложить ему нужную кнопку? Никак.

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

Адовый перебор с конверсионными элементами на сайте

Нужны кнопки или нет, зависит от задачи проекта:

Пример дизайна персональной страницы, где уместно отсутствует конверсионное действие. Сайт Дениса Косьяненко

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

Пример дизайна персональной страницы, где присутствует конверсионное действие. Сайт Eliza Pichulina

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

Ещё один пример лендинга услуги — фотостудия. На обложке не видно имя фотографа или названия студии, бросающегося в глаза. Главный герой экрана: уникальное предложение студии — фото без посторонних, и сразу кнопка записаться.

Пример дизайна персональной страницы, где присутствует конверсионное действие. Сайт фотостудии Повод

Кнопка СТА важна, если главная задача — продать. И не всегда нужна, если вы хотите просто познакомить пользователя с персоной или продуктом.

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

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

На примере слева услуга на первом месте. Структура выстроена таким образом: сначала всё об услуге, её преимущества, для кого, успешные кейсы и лишь потом о самой компании (выделено красным). На примере справа, напротив, главный герой — адвокат. На первом месте информация о личности и его заслуги, и лишь потом перечислены услуги.

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

Отсутствие меню и логотипа
Пользователи привыкли, что попасть на Главную страницу можно, кликнув на логотип компании. Это веб-стандарт. Наличие пункта в меню «Главная» не так актуально, как раньше. Но важно помнить, кто ваша целевая аудитория. Если она возрастная, то, возможно, этот пункт стоит всё же оставить, так как раньше он был обязателен в меню, и привычен для навигации старшему поколению.

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

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

В примере слева в меню отсутствуют навигационные разделы. В примере справа — основные разделы навигации есть

Перегруженные формы

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

Если всё же большая форма необходима, например, это уже ввод данных при покупке или анкета на услугу, вакансию, то её заполнение должно быть как можно более удобным для пользователя:

Разбейте форму на шаги или разделы, чтобы она не выглядела сильно устрашающей:

Сложная форма на сайте Solok Cosmetics разбита на отдельные разделы и на две колонки, за счёт чего не выглядит такой устрашающей. Проект WebValley Studio

Добавьте подсказки к полям, чтобы сориентировать пользователя:

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

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

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

Отсутствие призывов к действию

Правильно спроектированный призыв к действию играет важную роль в конверсии сайта. Его цель — привлечь внимание пользователя, подвести его к совершению целевого действия. Поэтому важно, где он расположен, насколько заметен, и что в себе содержит. СТА должен подсказать пользователю, что нужно делать с информацией, которую он только что получил.

Пример правильного блока призыва в дизайне сайта Lojer

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

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

Игнорирование поведенческих паттернов

Слишком большие формы ввода данных негативно влияют на поведенческий фактор посетителей сайта. Такие формы, скорее, отпугнут, чем привлекут внимание. Человеку может быть лень или некогда заполнять большое количество полей, или он может отвлечься в#nbОбращали внимание, что многие схожие по тематике ресурсы выглядят одинаково? Например, сайты маркетплейсов. Это неспроста. У посетителей сайта формируется определённый поведенческий паттерн, и проектировщики стараются его соблюдать, чтобы пользователю было комфортно находиться на сайте. Это закон Якоба.

Закон Якоба — пользователи проводят большую часть времени на других сайтах. И они предпочитают интерфейсы, которые функционируют привычным образом.sp;процессе и не вернуться позже. Также пользователя может насторожить, если в форме запрашивается сразу много информации о нём.

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

Дизайн интерфейсов маркетплейсов

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

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

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

Отсутствие подсказок, инструкций и всплывающих окон

Не путать с бесячими навязчивыми попапами, которые неожиданно выскакивают при открытии страницы или каждую минуту =))

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

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

Сообщение об успешной отправке данных

Какие могут быть подсказки в интерфейсе
- Тултипы — всплывающая подсказка. Появляется при подведении курсора к объекту — чаще всего это иконка с каким-то знаком внутри. Помогает пользователю получить подсказку или описание чего-либо.

Пример тултипа — иконка с? внутри, при наведении на который, всплывает подсказка

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

Пример всплывающего уведомления на сайте Social Dance Studio

Пример всплывающего уведомления на сайте Skillbox

Объяснения к функциям и разделам — подсказки, помогающие разобраться с инструментами интерфейса.

Подсказка в Figma, сообщающая пользователю, что нажимая на плюс, он может создать новую страницу в файле

Контекстная помощь — сообщения с информацией или инструкциями при посещении первый раз какого-либо сервиса.

Сообщение о возможностях сервиса при первой загрузке приложения. Instiries сообщает новому пользователю о функциях сервиса.

Инструкции к формам — помогают понять, как правильно заполнить форму, или сориентировать пользователя, для чего он отправляет данные.

Инструкции к форме регистрации на сайте Solok Cosmetics. Проект WebValley Studio

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

Пример подсказки в поле на сайте https://web-valley.ru/kontakty

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

И не забудьте добавить иконку закрытия при проектировке подсказки =))

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

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

Блок с кейсами в портфолио на сайте WebValley

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

Пример блока с отзывами на сайте курса El Maximo

Пример блока с отзывами на сайте Skillbox

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

Добавьте ссылку на сайт при оформлении портфолио, распишите подробно этапы работы или результаты от точки, А до точки В при оформлении кейса.

Блок кейса и отзыва на сайте Revive System. Проект WebValley Studio

Если в отзывах и портфолио вы размещаете ссылки на другие сайты, помните, что их задача лишь в том, чтобы усилить доверие. Их наличие не отменяет того, что информация на сайте должна быть полной. В ваших интересах, чтобы пользователь оставался на вашем сайте, а не уходил на чужие. Кроме того, SEO-специалист может потребовать удалить все эти ссылки. И задача дизайнера, чтобы даже без них информативность сайта не пострадала.

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

Как избежать такой ситуации:
- При проектировании важно составить карту User flow, которая поможет понять, все ли сценарии учтены, и нет ли где-то тупика.

Пример User flow

Интерактивный прототип поможет протестировать путь пользователя и выявить ошибки в сценарии

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

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

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

Структура макета;
Визуал элементов;
Типографика;
Анимация.

Рассмотрим каждый из них детальнее.

Обсудить проект

Ошибки в структуре макета

Если кажется, что дизайн — это творческая работа свободного художника, то это далеко не так. У дизайнера есть задачи и ограничения, куча правил, чтобы работа была выполнена на отлично. Дизайнер, как волшебник, должен угодить сразу всем: с одной стороны, нужно выполнить дизайн, согласно материалам аналитического этапа и ТЗ, при этом, нужно учесть хотелки заказчика. С другой стороны, сайт в итоге должен быть удобным, понятным и приятным для пользователя. И с третьей (о чём часто забывают) — сайт должен соответствовать стандартам вёрстки, чтобы разработчик вам сказал спасибо, а не ругался последними словами, верстая кривой дизайн.

Основные ошибки в структуре макета, которые могут негативно повлиять на итоговый результат:

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

Основные преимущества использования сеток:
- Экономия времени — сетка помогает быстрее создавать страницы или вносить изменения в макет.
- Стандарт расположения элементов — благодаря сетке, в проекте присутствует логика и последовательность, макет выглядит как общий целостный дизайн.
- Масштабируемость — сетка поможет в том случае, если над проектом работают несколько человек, так как новым участникам проекта не придётся придумывать, куда же воткнуть тот или иной элемент, так как уже есть сетка и определённая логика в проекте.
- Эстетика — все элементы смотрятся гармонично, структурировано, сайт выглядит аккуратно.
Сетка также помогает удобно адаптировать контент под различные разрешения экрана.

Подробнее о сетках в веб-дизайне →

Пример дизайн макета, в котором пренебрегли сеткой и выравниванием контента

Пример упорядоченного по сетке макета

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

Нет разделения на смысловые блоки
Если посмотреть на страницу в целом, то можно условно разделить её на смысловые блоки (О нас, Услуги, Этапы, Отзывы, Контакты). Если не поделить всю информацию на группы, то выглядеть она будет как одна большая портянка текста.

Есть несколько способов избавиться от этой ошибки:
- Отделить смысловые группы при помощи отступов.

Сравнение двух вариантов вёрстки страницы, где в одной — недостаточные отступы между блоками, а на другой — отступы разбили контент на отдельные группы

Макет справа выглядит лучше, информацию на нём читать гораздо удобней.

Усилить эффект разбивки можно также за счёт чередования цвета фона в блоках.

Пример разбивки контентных блоков при помощи цвета

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

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

Пример верстки со сменой направляющей силовой линии

За счёт смены направляющей, макет стал выглядеть более минималистично и стильно, информация воспринимается легче (вариант справа). Хотя и вариант слева выглядит аккуратно, просто более шаблонно.

Отступы гуляют
Принцип равноудалённости смысловых блоков на странице облегчает восприятие информации и создаёт единый красивый внешний вид сайта.

Если отступы между контентными блоками будут разного размера, то макет может выглядеть неряшливо:

Сравнение дизайн макетов с разными и одинаковыми отступами между блоками

Помимо принципа равноудалённости, важен также размер отступов: не нужно делать слишком маленькое расстояние между контентными блоками, иначе информация сольётся в один кирпич, будет выглядеть слишком нагружено.

Пример слишком маленьких отступов между блоками

Пример слишком больших отступов между блоками

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

Важно соблюдать адекватные размеры отступов между блоками. В единичных случаях можно отступить от правил. Например:

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

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

Пример сравнения отступов между блоками с единым цветом фона.

Закон близости — если объекты расположены рядом, они воспринимаются как единая группа.

Пример Закона близости

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

Каждый внутренний отступ должен быть меньше или равен внешнему отступу.

Пример соотношения внешних и внутренних отступов внутри группы

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

Схема правильных отступов в дизайне по правилам внешнего и внутреннего

Неправильные отступы между элементами внутри блока

Правильные отступы между элементами внутри блока

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

Внутри карточек также мы видим неудачное выравнивание: заголовок отбился, и как бы очевидная группа «заголовок + текст» — разбилась. На примере справа — более удачное оформление контента. Самая глубокая секция — это заголовок и текст внутри карточки. У них самый маленький отступ (до линии между ними). Далее в этой же карточке присутствует картинка. Она тоже элемент этой группы, но она уже на шаг выше находится, поэтому отступ у неё чуть больше. Вторая отдельная группа — это вторая, аналогичная карточка. Третья отдельная группа — это заголовочная секция. Внутри неё отступ меньше, чем до карточки. Все элементы по итогу образуют одну большую общую группу. У неё уровень — самый высокий, соответственно, отступы сверху и снизу — самые большие.

Какие ещё отступы должны быть подчинены логике: однотипные отступы в единообразных элементах. Например, если отступ от заголовка до подзаголовка 40 рх, то так должно быть на всех страницах, во всех похожих блоках, если нет необходимости намеренно сделать его больше или меньше.

Пример сравнения дизайн макетов с равномерными и неравномерными отступами от заголовков

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

Мало воздуха

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

Пример перегруженного экрана сайта Energo Belarus

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

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

Пример сравнения макетов с налепленным дизайном и с эстетичным лёгким визуалом

Визуальная иерархия

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

В этом примере иерархия нарушена — Заголовок H1 на первом экране — 72 рх, а заголовок второго блока Н2 — 90 рх. Это не правильно, должно быть наоборот. Чем выше уровень заголовка, тем больше его размер

Во втором варианте заголовок Н2 меньше по размеру, и это правильный вариант визуальной иерархии

Соблюдать иерархию в типографике необходимо также внутри блока при оформлении текста. Подзаголовок не должен быть больше заголовка, а заголовок Н2 должен быть больше заголовка Н3.

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

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

В этом примере правильно оформленная иерархия текста внутри блока.

Готовы создать сайт прямо сейчас. А вы?

Ошибки в визуале сайта

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

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

Борщ из элементов
Слишком много элементов на странице на 1 кв.м. дизайн точно не украсят.

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

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

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

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

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

В этом дизайн макете явно перебор с оформлением. Ненужные украшательства, не знаешь, на что смотреть. Тут и лапки — ну, это же ветеринарка, как же без них =)) И элемент лого на фоне, и ещё фото на заднем плане, и подложка под фотографией

А так выглядит аккуратный, эстетичный макет, в котором присутствует только нужная информация

Пустой дизайн и перебор с негативным пространством

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

Пример чрезмерного злоупотребления негативным пространством

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

Пример гармоничного использования негативного пространства в дизайне

Негативное пространство — это не всегда пустой белый фон. Это может быть что-то цветное или какой-то объект:

Если сравнить два скриншота, то видно, что в первом случае — пустой фон выглядит слишком аскетично и не красит макет. Во втором варианте, добавив на задний фон векторный объект, мы добавили дизайну объёма и глубины, при этом экран выглядит всё также минималистично. Негативное пространство по прежнему присутствует, но уже не выглядит так незавершенно.

Перебор с цветом

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

Но это не означает, что нужно разукрасить сайт всеми цветами радуги =))

Плохой пример использования цвета (и те только цвета) на сайте компании ПРО СВЕТ

Есть формула эффективного использования цвета на сайте — 60/30/10. Она означает, что 60% на сайте должен занимать цвет фона, 30% — второстепенный цвет и только 10% — цвет акцентный.

Для акцентного цвета, как правило, используется один цвет. Реже 2 или 3.

Пример с использованием одного акцентного цвета в дизайне — золотого

Ещё пример с использованием одного акцентного цвета — изумрудного

Пример гармоничного сочетания нескольких акцентных цветов на сайте HOWDOG STORE. Проект студентки курса по веб-дизайну PRO Web

Пример плохой работы с цветом. Мешанина из ярких кислотных цветов на шумном фоне сайт точно не красит

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

Пример UI-кита для яркого цветного проекта

Пример использования цвета для идентификации направлений компании

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

Пример гармоничного сочетания сразу нескольких акцентных цветов в одном макете на сайте Habsida

Ошибки с цветом, которые часто допускают дизайнеры:

Неудачный цвет;
Цвет не подходит по контексту;
Недостаточная контрастность;
Грязные цвета;
Слишком много цвета.

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

1) Достаточно ли универсальный выбранный акцентный цвет?

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

Пример использования яркого жёлтого цвета на чёрном фоне на сайте WebValley Studio

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

Жёлтые цифры на светлом фоне совершенно не видны

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

Так выглядят фавиконы некоторых сайтов в тёмном интерфейсе. Их совершенно не видно. Аналогичная ситуация может быть и со светлым.

2) Не сливается ли цвет с элементами управления?

Для элементов управления в веб-пространстве принято использовать определённые цвета: для ошибки — красный, для успеха — зелёный, для информационного сообщения — синий. При выборе цвета убедитесь, что ваш красный не совпадает с красным, предназначенным для системных ошибок. Спроектируйте интерфейс так, чтобы пользователь не путался, когда всё ок, а когда произошла ошибка.

Неудачный пример с использованием акцентного красного цвета в успешном сообщении

3) Не присутствует ли в макете эффект халяции?

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

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

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

4) Сочетается ли выбранный цвет с другими?

Если есть необходимость в нескольких акцентных цветах на сайте, надо убедиться, сочетаются ли они друг с другом и гармонично ли выглядят на сайте.

Пример гармонично сочетающихся цветов в дизайне сайта

Пример использования цвета для идентификации направлений компании

Не подходящий по контексту цвет

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

Сравнение сайта стоматологической клиники с разным акцентным цветом в дизайне. Макет студентки курса PROWeb, Натальи Грудининой.

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

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

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

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

Ситуация: акцентным цветом в проекте был выбран яркий оранжевый цвет, который неплохо смотрелся в кнопках, как на светлом фоне, так и на тёмном.

А потом заказчик потребовал сделать яркий оранжевый блок с формой:

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

В этой ситуации лучшее решение — отказаться от использования акцентного оранжевого цвета, как фонового.

Грязные цвета

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

Чтобы не создавать подобный эффект, соблюдайте контрастность элементов, таких как: фон и текст, картинки и фон, и так далее.

Серый фон сильно тёмный, прям гнетущий, эффект шума — лишний, а голубой — сильно бледный и малоконтрастный. Создаётся эффект, что дизайн грязный.

Как тени и цвет влияют на впечатление от сайта. Грязный гнетущий дизайн слева и чистый воздушный справа.

Дизайн сильно привязан к цвету

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

Посмотрим на пример в монохроме, который классно выглядит и привлекает внимание:

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

Казалось бы, такое решение точно не подойдёт для коммерческого сайта. Но смотрите на следующий пример:

Пример классного дизайна Dini Ag, где цвет играет в плюс, подчёркивая стилистику и бренд компании

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

А если представить сайт поликлиники с таким интерфейсом. Как думаете, пользователям будет удобно на нём находиться? Будет удобно найти нужную функцию, кнопку, раздел? А бедные дальтоники… Везде должна быть мера и холодная голова.

Или вот ещё пример

Казалось бы дичь дичная и явный перебор. Но! В данном контексте — это крутое решение для сайта стилиста

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

Шумный фон для текста
Текст поверх картинок — дно. Особенно, если его много. Особенно, если он мелкий.

Если на карточке должен быть текст, например, при наведении, то стоит убрать в этот момент изображение, заменив его однотонным фоном. Если есть возможность вынести текст под картинку — это будет лучшим решением

Часто такая ошибка возникает не по вине или неопытности веб-дизайнера, а потому, что дизайн делается без окончательных картинок:

Дизайн сайта на стадии разработки

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

Сайт в реальности

Фотографии оказались слишком шумными, и текст на них не читается. Картинка в макет просто не села.

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

1) Тёмный фильтр VS белый фильтр
Создать фильтр поверх изображения в целом допустимая техника, но важно понимать, как хорошо, а как плохо, и подходит ли этот вариант для тематики проекта.

Например, добавить тёмный фильтр на фон для сайта в сфере промышленности можно, так как фото здесь больше для идентификации ниши.

Пример затемнения фонового изображения на сайте Полар Гидравлика. Проект WebValley Studio

А вот если на изображении продукт компании, то затемнять его — плохая идея:

На экране в примере и текст потерялся, и букет цветов не видно. В этом случае лучше отказаться от фильтров и переделать композицию

Альтернативная версия размещения элементов. Текст прекрасно читаем, изображение сохранило свою красочность, продукт подан в лучшем виде.

Или заменить изображение на более подходящее:

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

Вот ещё один пример, когда фильтр на фото отрицательно влияет на впечатление:

Голубой цвет воды передаёт атмосферу, привлекает потенциального покупателя, вызывает у него эмоции. Затемнив фон, мы сделали картинку не вкусной и грязной

А что с белым фильтром? Просто забудьте про него, пожалуйста =))

Привет из 2010-го =))

2) Подложка
Так любимые непрофессиональными дизайнерами плашки под текст. Чаще всего это дичь. Если есть возможность избежать плашек, то так и нужно сделать. К тому же, разработчик вам не скажет спасибо, если вы дополнительно нагрузите интерфейс лишними элементами.

Дизайн сайта компании АвтоБетон. Плашка в этом примере и картинку перекрыла, и текст на ней нечитабельный из-за прозрачности

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

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

Но в некоторых случаях плашка поверх фотофона может неплохо выглядеть и быть уместной:

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

Крутое решение — плашка, как часть фона следующего блока:

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

Текст накладывается на важные части изображения.

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

Плохой пример расположения светлого заголовка на слишком шумном фоне из-за фактуры шубы. К тому же шуба — товар, а его просто закрыли.

Плохой пример с фото на обложке: и текст не читается, и лицо текстом перекрыли, и шубу не видно. Фото слишком шумное, не подходящее для фонового изображения.

Фото должно быть отформатировано так, чтобы освободить место под текст. Либо надо подвинуть текст так, чтобы он не перекрывал фото:

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

Устаревший дизайн

Сайт — как машина времени, открываешь, и ты снова в 2010 =))

Сайт требует постоянного обновления и оптимизации. Это не тот случай, когда сделал и забыл. Вы же не покупаете телефон на 15 лет, а, скорее всего, будете его обновлять каждые 2−3 года, может чаще, потому что хочется получить более новую, оптимизированную и современную модель. Так и с сайтом. Если сайт спроектирован достаточно давно, то стоит подумать о его редизайне.

Пример устаревшего дизайна сайта

Но самый треш, когда сайт не старый, а дизайн — морально устаревший:

Получше, чем предыдущий динозаврик, но для сайта сделанного пару лет назад, такой дизайн непростителен

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

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

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

Сайт-портфолио веб-дизайнера. Пример со смещением текста, который уже просто повсюду — выглядит не всегда хорошо. Этим трендом надо уметь пользоватся, чтобы дизайн не выглядел неряшливо и перегружено. К тому же, это классный визуал, но что с разметкой? Семантические заголовки потеряны, так как текст верстается кусками. Это аукнется при продвижении сайта.

Есть ниши, в которых рулят именно тренды веб-дизайна, например, портфолио дизайнера. Но нужно быть готовым к тому, что через пару лет нужно будет обновлять дизайн и переделывать портфолио. Именно этим часто страдают дизайнеры =))

ПИК Кинотеатриум — лендинг крупнейшего застройщика, сообщающий о мероприятиях под открытым небом для жителей ЖК. Сайт выглядит ярко, задорно и смело. Но именно этот лендинг для конкретной цели, с фиксированными датами, выглядит здорово. Скорее всего, его не потребуется масштабировать в будущем, он актуален на сегодня. Но при этом его можно использовать как шаблон, за счёт универсальности — не проблема немного изменить визуал баннеров. Основной контент здесь выглядит универсально.

Отдельная секта — любители ориентироваться на цвет года Pantone, а не на нишу заказчика, ожидания пользователя и продукт. В следующем году трендовый цвет будет уже другой, а как быть с сайтом? Будет ли он всё таким же трендовым?

В 2024 году цвет года Pantone — «Peach Fuzz» или по-русски «персиковый пушок». Цвет достаточно универсальный и может быть отличным вариантом для многих направлений.

Пример трендового портфолио на сайте MW.S

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

«Peach Fuzz» вызывает такие ассоциации, как:

радость;
счастье;
экологичность;
свет;
тепло;
фрукты;
объятия;
любовь;
натуральность;
экологичность.

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

А если вспомнить прошлый год?

Цвет года Pantone 2024 «Peach Fuzz»

Героем года 2023 стал карминово-красный — «Viva Magenta». Он далёк от универсальности, яркий, насыщенный. Такой цвет надо использовать с осторожностью, в небольших количествах, для выделения важных элементов интерфейса.

Тренды — хорошо, но фокус должен быть на задачах бизнеса. Если они совпадают — супер. Если нет — оцените ситуацию трезво.

Цвет года Pantone 2023 « Viva Magenta»

Всратый логотип в премиальном дизайне

Частая боль веб-студий — дизайн сайта запилили, а лого трогать не стали. Заказчику всё ок =)) Но по итогу выглядит так себе. Всратый логотип сильно портит премиальный дизайн сайта. Если логотип такой же убогий и устаревший, как и сайт-динозавр, требующий редизайна, то его стоит также переделать.

Реальный пример из практики WebValley Studio — редизайн сайта компании по производству пластиковых ампул.

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

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

Макет для вёрстки выглядел так:

Макет сайта на стадии разработки

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

Дизайн сайта ПластХимПак. Проект WebValley Studio

Стрёмные иконки контактов и кривая вёрстка программистов заказчика завершили картину. Получился аккуратный современный сайт с убогим всратым меню =))

Ещё одна ситуация, тоже из практики. Логотип уже не такой стоково-дичный, но у заказчика осталась только устаревшая версия PNG, которая выглядит замыленно и портит страницы с новеньким дизайном. Не миритесь с такой ситуацией. Предложите заказчику обновить лого без редизайна, чтобы он выглядел чётко и не портил общее впечатление. Мы так и сделали:

Логотип компании Полар Гидравлика. Переотрисовка в векторе

Иконки из разных наборов

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

Пример использования иконок в интерфейсе

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

Пример использования иконок в интерфейсе сайта

Чтобы иконки гармонично вписались в стилистику и не испортили дизайн интерфейса, с ними надо правильно работать:

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

Если нет возможности самостоятельно отрисовать иконки (сжатые сроки, маленький бюджет, отсутствие навыков в отрисовке векторных объектов), то постарайтесь найти единый пак иконок или хотя бы похожие.

Признаки однообразности иконок:

линии одной толщины:

Сравнение иконок по толщине линий

одинаковый радиус углов:

Сравнение иконок по радиусу углов

одинаковые цвета:

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

одинаковые стили— с заливкой или без:

Плохой пример иконок с разной стилистикой

одинаковые элементы оформления:

У иконок из примера есть схожий синий акцент, одинаковые скругления, единый стиль в оформлении.

2. Иконки должны быть в векторном формате (SVG). Так они останутся чёткими в любом разрешении при любом размере.

В верхнем ряду иконки пиксельные, так как выгружены в формате PNG, внизу — иконки в векторе, они будут чёткие в любом размере

3. Иконки должны быть простыми и понятными. Так пользователю будет проще взаимодействовать с интерфейсом

Пример привычных иконок в интерфейсе

4. Иконки должны быть одинакового размера. Необходимо добавить картинку во фрейм определённого размера. Размер должен подчиняться системе сетки, заложенной в проект:

Пример правильного и некорректного формата иконок

Стили кнопок

Сколько стилей кнопок необходимо проекту — зависит от его масштабов. Но нужно адекватно подойти к вопросу. Если мы работаем над дизайн-системой Ozon, то большое количество кнопок необходимо: для основного и второстепенного действия, для разных направлений, для разных разрешений и так далее.

Кнопки дизайн-системы компании Ozon

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

Пример вариантов кнопок в небольшой дизайн-системе.

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

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

Стоковые бессмысленные картинки

Если картинки не несут смысла, а просто заполняют место на сайте — сайт никогда не будет выглядеть современно и стильно.

Фото типа пожатых рук, девушек у телефона и довольных бизнесменов испортят даже самый красивый и минималистичный дизайн:

Пример дизайна с использованием стокового фото

Так же неуместно выглядят фото, не отражающие специфику продукта:

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

А эти коллажи из 2000-х =)) Ощущение, что видишь баннер 1000 мелочей на стене соседнего здания…

Пример плохого оформления изображения на сайте

И «любимые» плашки тут завершают картину и создают комбо для отрицательного впечатления от сайта.

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

Когда среди спокойных реальных фотографий заказчика попадается кричащая яркая стоковая картинка — она сильно выбивается, перетягивает на себя внимание, смотрится неуместно и неестественно:

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

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

Стоковая фотография в галерее выглядит инородно

Иллюстрации для сайта детского лагеря Гарсар. Проект WebValley Studio

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

Каталог товаров на сайте Диван ру. Все фото в одном стиле

Каталог товаров на сайте Ваша комната. Фото с фоном и без, с инфографикой и без, картинка занимает разную площадь в карточках, фото сделаны с неодинаковых ракурсов.

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

Некачественные картинки
Загружая фотографии на сайт важно следить за многими их параметрами: весом, качеством, правильным форматом. Замыленные, пиксельные фоточки точно дизайн не украсят.

Если изображение надо вырезать, то это нужно сделать качественно. Плохо вырезанные фото выглядят инородно и неряшливо.

Фото на экране плохого качества, портит впечатление о сайте

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

Пример плохо вырезанного фото

Обрезанные люди, повисшие в воздухе — ещё один пример плохо выполненного дизайна. Следите за тем, чтобы фото примыкало к какой-то границе, например, к следующему блоку или к краю экрана.

Фото выглядит инородно. Холодный тон сайта — серый, синий, и тёплое фото мужчины летного цветотипа.

Пример, как не следует размещать фото в пространстве, если у него есть обрезанные границы.

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

Растянутые или отражённые картинки выглядят несуразно:

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

Растянутые лица выглядят плохо

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

Не стоит отражать картинки с текстом, иначе он выдаст вашу манипуляцию =))

Позиционирование кадра

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

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

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

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

Пример правильного и не правильного расположения товара относительно заголовка

Если фото должно выходить за пределы грид-контейнера, следите, чтобы не обрезались важные детали:

Если забыть про grid-контейнер (обозначен синим цветом), можно получить нежелательный эффект при позиционировании фото. На небольших экранах получится так, как показано на примере слева.

Любители обводки

Пример неправильного использования обводки — кнопка с цветной заливкой и дополнительной обводкой. Лучше выбирать один из вариантов: либо сделать кнопку целиком цветной, либо добавить только обводку без заливки.

Сравнение кнопок с уместной и неуместной обводкой

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

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

Пример 1 — кнопка в меню с заливкой и без обводки

Пример 2 — кнопка в меню с обводкой и заливкой

На скриншотах выше два примера. В первом варианте в меню есть кнопка — с заливкой и без обводки. Во втором варианте дизайнер намеренно добавил обводку к кнопке меню, имеющей заливку. Почему в этом случае второй вариант выглядит лучше, чем первый, хотя нарушены правила использования заливки и обводки вместе? Потому что в данном случае у проекта строгий UI-кит. Крутить разные варианты и подбирать альтернативные варианты нельзя. А те цвета, которые имеет в доступе дизайнер, не подходят для того, чтобы кнопка выглядела хорошо только с заливкой. В данном случае можно заметить, что кнопка с одним и тем же конверсионным действием присутствует как в обложке, так и в меню. То есть у человека на экране будет сразу две кнопки с одним и тем же призывом. Убрать одну из кнопок — недопустимо, исходя из аналитики. Что нужно делать в этом случае? Покрасить две кнопки в яркий синий цвет будет неверно, так как эти кнопки будут дублировать друг друга и запутают пользователя: куда нажать, какую из них выбрать? Поэтому главной кнопкой выступает та, что находится на обложке. И дополнительной, второстепенной, менее акцентной кнопкой — та, что находится в меню. Их нельзя делать одинаковыми. Кнопку в меню решено сделать дополнительной (по дизайну — это светлый белый цвет). Но, так как фон меню тоже достаточно светлый, белая кнопка на этом фоне выглядит бледно. Кнопка только с заливкой как будто бы немного растекается и не совсем заметна. Поэтому, дизайнер специально применил и заливку, и обводку, но подобрал цвет заливки достаточно приглушённый относительно цвета обводки, чтобы кнопка выглядела аккуратно, не резко. В данном случае, симбиоз заливки и обводки, сделал кнопку более заметной, аккуратной, и обозначил её границы более чётко.

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

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

Пример группы в блоке на сайте

Если выделение цветом необходимо, то нужно отделить всю группу:

Пример, когда дизайнер выделил заголовки в отдельные блоки, нарушив структуру страницы

Картинки стык в стык с отступом между ними

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

Цветом залит весь смысловой блок, а не только заголовочная секция

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

Пример, как правильно стыковать полноэкранные изображения

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

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

Вот так не стоит стыковать блоки на сайте

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

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

Пример сайта в стиле гранж

Пример сайта в стиле минимализм

Опытный дизайнер может смешивать стили, даже такие противоположные, как минимализм и гранж:

Пример смешения стилей минимализм и гранж

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

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

Нежелательные или неожиданные визуальные эффекты

Покажем на примере Альфа Банка. У компании фирменный стиль с ярко красным цветом. Одним из решений дизайнера при разработке блока FAQ (часто задаваемые вопросы), было выделить важные части текста фирменным цветом. Блок-аккордеон подразумевал навигационный элемент в виде стрелки вниз, нажимая на которую, раскрывалась информация по вопросу. Пока всё звучит адекватно, нормальное классическое решение =))

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

Индекс доверия инвесторов к Альфа‑банку ↓

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

Часто эта проблема возникает из-за того, что дизайн создаётся в отрыве от реального текста. Веб‑дизайнеру дали рыба-текст, он сделал красивый визуал, оторванный от контекста. Такие нежелательные визуальные эффекты — не редкость. Поэтому важно, чтобы на этапе дизайна уже был готовый текст и картинки.

Пример редизайна бренда Ozon. Уместный и неуместный визуал в рамках фирменного стиля компании

Грязные тени

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

Но не каждая тень украсит интерфейс. При неправильном её использовании можно всё испортить.

Когда применять тень, а когда стоит от неё отказаться
- Тень впишется в дизайн, если оттенок элемента и фона совпадают. При помощи тени можно добавить элементу дополнительный контраст:

Если элемент цветной, то и тень стоит настроить из схожего цвета. Чистая чёрная тень будет выглядеть более грязной и тяжёлой:

Элемент с тенью более выглядит более выражено

Если фон и элемент цветные, скорее всего, тень не потребуется, и только всё испортит:

Цветная тень выглядит гармоничнее, чем чёрная

При разном цвете фона и объекта тень не требуется

Как правильно настроить тень
- Для тени не стоит использовать чистый черный цвет #000000. Такая тень будет слишком тяжёлой и грязной:

Пример, как правильно настроить тень

Не стоит оставлять стандартную тень, предложенную Figma. Она выглядит так:

Настройки тени по умолчанию в Figma

Если немного покрутить настройки и добавить смещение по Y, плюс увеличить Blur, то тень станет более аккуратной и мягкой. Стоит помнить, что для разных по величине или контрасту объектов могут потребоваться разные настройки. В идеале создать для проекта сразу несколько вариантов теней:

Набор теней в дизайн-системе

Не используйте слишком большую прозрачность. По умолчанию она 25% и стоит настроить её в меньшую сторону или оставить такой:

Пример сравнения теней с разной яркостью

Не стоит делать тень слишком большой, так как можно получить эффект грязного фона:

Большая тень создает эффект грязи за кнопками

Скругления в углах

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

Радиус углов всех элементов должен быть одинаковый. Если элемент имеет скругленную форму, то и другие элементы внутри него должны иметь такую же форму:

Правильное соотношение углов у элементов одной группы

Если элемент имеет меньший размер, то и угол также должен пропорционально уменьшаться.

У небольших элементов можно уменьшить размер угла в 2 раза:

Правильное скругление углов у элементов одной группы

Если нужно уменьшить скругление у карточки при адаптации, можно воспользоваться формулой:

Простая формула успешного скругления
A — B = C

Где A — радиус скругления внешней (большей) фигуры, B — расстояние между внутренней (меньшей) и внешней (большей) фигурой, и C — радиус скругления внутренней (меньшей) фигуры.

Убогая кнопка
Не все кнопки в интерфейсе выглядят гармонично и стильно.
Есть правила оформления кнопки, которые помогут сделать её круто.

Как правило, у хорошей кнопки должна быть либо заливка, либо обводка:

В правильной кнопке размер шрифта в диапазоне 14−18 рх. Зависит от шрифта, так как разные шрифты могут иметь разную величину. Также текст в кнопке может быть написан капсом, в этом случае не стоит делать слишком большой размер шрифта:

Пример правильной кнопки

Размер самой кнопки должен быть в диапазоне 54−64 рх — для стандартной основной. Размер кнопок в карточках и маленьких элементах может быть меньше, например 44рх.

Пример правильного оформления текста внутри кнопки

Скруглять углы надо правильно. У кнопки есть 3 хороших варианта оформления углов:

без скругления;
полное скругление;
скругление 2−5 рх.

Пример правильного оформления размера кнопки

Отступы внутри кнопки по бокам должны быть в 2 раза больше, чем сверху и снизу.

Пример правильного оформления скругления углов кнопки

Если в кнопке есть иконка, то расстояния справа и слева не должны быть одинаковыми

Пример правильного оформления отступов внутри кнопки

Несогласованность оформления страниц

Работая над дизайном м

70+ ошибок в веб‑дизайне, которые убивают сайт и просаживают конверсию

Готовое руководство по всем ошибкам, которое поможет сделать сайт грамотно и профессионально

Ошибки юзабилити

Упоротая навигация

Отсутствие хлебных крошек

Отсутствие поиска

Перегруженное меню

Слишком много уровней вложенности

Отсутствие кнопок на продающих лендингах

Непонятное расположение блоков

Отсутствие меню и логотипа

Перегруженные формы

Отсутствие призывов к действию

Игнорирование поведенческих паттернов

Отсутствие подсказок, инструкций и всплывающих окон

Какие могут быть подсказки в интерфейсе

Тупиковый сценарий

Ошибки в структуре макета

Сайт не по сетке

Нет разделения на смысловые блоки

Отступы гуляют

Мало воздуха

Визуальная иерархия

Ошибки в визуале сайта

Борщ из элементов

А нужен ли декор

Пустой дизайн и перебор с негативным пространством

Перебор с цветом

Неудачно подобранный цвет

Не подходящий по контексту цвет

Недостаточный контраст в цвете

Грязные цвета

Дизайн сильно привязан к цвету

Шумный фон для текста

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

Текст накладывается на важные части изображения.

Устаревший дизайн

Слепое следование трендам

Всратый логотип в премиальном дизайне

Иконки из разных наборов

Стили кнопок

Стоковые бессмысленные картинки

Изображения из разных наборов

Некачественные картинки

Позиционирование кадра

Любители обводки

Узкие цветные блоки для заголовков

Картинки стык в стык с отступом между ними

Стилистика гуляет

Дизайн сайта не соответствует фирменному стилю

Нежелательные или неожиданные визуальные эффекты

Грязные тени

Когда применять тень, а когда стоит от неё отказаться

Как правильно настроить тень

Скругления в углах

Убогая кнопка

Несогласованность оформления страниц