15 идей дизайна сайтов для вдохновения

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

В последние годы компании экспериментируют с более сложными визуальными решениями, появляются новые тренды UX/UI-дизайна.  Например, это глассморфизм, имитирующий стеклянные плашки, или клейморфизм, где используют объемные «глиняные» элементы. Пока такие радикальные тренды не приживаются, но есть более простые способы зацепить пользователя. Делимся интересными примерами.

Чтобы привлечь внимание

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

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

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

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

Неоновые цвета на темном фоне. Обычно задача темной темы — сделать сайт более комфортным для глаз. Но также на черном фоне яркие оттенки кажутся еще ярче — цветные объекты будут привлекать повышенное внимание. Этот прием важно использовать с осторожностью: если на сайте много разноцветных элементов, они могут создавать ощущение хаоса. Попробуйте подобрать гармоничную палитру с помощью сервисов для подбора цветов. Добавляя яркие оттенки в меру, можно достичь впечатляющих эффектов. Один из хороших примеров — подсветка на странице тарифов «Яндекс 360»: притягивает взгляд, но не раздражает.

Чтобы рассказать о продукте

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

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

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

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

Чтобы оформить каталог товаров

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

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

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

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

Чтобы призывать заполнить форму обратной связи

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

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

Нестандартная верстка. Еще один способ выделить форму без иллюстраций, фотографий и анимаций. Можно сделать ее очень узкой, наклонной, растянуть на всю ширину экрана или, как на скриншоте ниже, на 3/4 ширины. Выглядит неожиданно, а готический шрифт добавляет изюминку.

Где искать вдохновение

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

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

Behance — ресурс, на котором дизайнеры размещают свои портфолио. Есть работы из разных областей, в частности и из веб-дизайна — просто введите свой запрос в поисковую строку.

Dribbble — аналогичная платформа с портфолио: пользуйтесь расширенным поиском и ищите сайты под свои критерии.