Пример поиска на маркетплейсе Ozon
Пример дизайна с перегруженным меню на сайте auto ru
Пример дизайна персональной страницы, где уместно отсутствует конверсионное действие. Сайт Дениса Косьяненко
Пример дизайна персональной страницы, где присутствует конверсионное действие. Сайт фотостудии Повод
На примере слева услуга на первом месте. Структура выстроена таким образом: сначала всё об услуге, её преимущества, для кого, успешные кейсы и лишь потом о самой компании (выделено красным). На примере справа, напротив, главный герой — адвокат. На первом месте информация о личности и его заслуги, и лишь потом перечислены услуги.
В примере слева в меню отсутствуют навигационные разделы. В примере справа — основные разделы навигации есть
Пример правильного блока призыва в дизайне сайта Lojer
Сообщение об успешной отправке данных
Пример тултипа — иконка с? внутри, при наведении на который, всплывает подсказка
Блок с кейсами в портфолио на сайте WebValley
Пример User flow
Сравнение двух вариантов вёрстки страницы, где в одной — недостаточные отступы между блоками, а на другой — отступы разбили контент на отдельные группы
Сравнение дизайн макетов с разными и одинаковыми отступами между блоками
Пример дизайна сайта, который собрал целую гору всевозможных ошибок. Тут и плохой контраст, и много разных цветов, 2 равнозначные кнопки, которые путают пользователя, куча контактов на один квадратный метр, дичная обводка и заливка у кнопок. Всё это отпугивает покупателя. Если так выглядит сайт компании, которая делает рекламные вывески, то как же выглядят сами вывески =))
Ещё один пример перегруженного экрана, где целый борщ из всевозможных элементов дизайна и украшательств. Замыленное фото на заднем фоне создает ощущение грязного экрана и отвлекает, поверх — такие же полувидимые облака усиливают этот эффект. На экране куча разной информации: тут и про автора, и предлагают видео посмотреть, и место сразу бронировать. Сложно выбрать, что именно делать. Много лишних элементов, которые перегружают дизайн: линии, плашки, тени, кнопка слишком большая, типографика пестрит разными вариантами начертаний.
Пример гармоничного сочетания сразу нескольких акцентных цветов в одном макете на сайте Habsida
Пример использования яркого жёлтого цвета на чёрном фоне на сайте WebValley Studio
Так выглядят фавиконы некоторых сайтов в тёмном интерфейсе. Их совершенно не видно. Аналогичная ситуация может быть и со светлым.
На этом сайте плашка выглядит очень хорошо, за счёт эффекта блюра, глассморфизма и умелых рук дизайнера
В данном случае, если нет возможности заменить фото, и работать приходится с этим вертикальным изображением — такое размещение самое удачное, так как и текст читается, и продукт хорошо виден.
Макет сайта на стадии разработки
Пример вариантов кнопок в небольшой дизайн-системе.
Иллюстрации для сайта детского лагеря Гарсар. Проект WebValley Studio
Растянутые лица выглядят плохо
Пример того, как плохо может выглядеть дизайн, если заказчик сам наполняет сайт фотографиями после вёрстки, и не умеет работать с кадрированием.
При разном цвете фона и объекта тень не требуется
Пример, как правильно настроить тень