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