Привет! Мы «е—б эдженси», и мы очень любим хороший дизайн (настолько любим, что стали № 1 молодым дизайн-агентство по версии Рейтинга Рунета в 2024 и в 2025 годах). Каждый наш проект начинается не с рисования красивых картинок, а с глубокой аналитики и поиска идей.

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

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

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

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

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

Как мы это делаем:

• Собираем 8−15 сайтов из других ниш. Например, для медицинского центра можем смотреть на проекты для премиальных отелей — там часто круто обыграна эстетика доверия
• Выбираем примеры разной степени смелости: от минималистичных до экспериментальных. Это помогает понять, к чему готов клиент, потому что иногда заказчик сам не знает, какой уровень креатива ему ближе.
• Обращаем внимание на детали: как оформлено меню, как работают анимации, какие шрифты сочетаются, что хорошего в композиции, можно ли взять оттенки в наш проект, что из графики подойдёт под нашу идею.

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

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

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

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

Так мы не утонем в деталях и сделаем дизайн осмысленным.

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

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

На этом этапе получается больше 10, а то и 20 разных вариантов — всё зависит от проекта. Чтобы выбрать из полученных вариантов самые рабочие, на проект подключается арт-директор. Он оценивает, какие экраны удачнее отражают концепцию, и выделяет версии, которые ещё можно докрутить. Иногда приходится перерисовывать с нуля — но это часть процесса.

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

Иногда под каждый блок мы собираем прям набор референсов — 6−10 референсов. Это такая база хорошего дизайна, которую мы используем при отрисовке конкретных блоков

Важные правила, которые помогают нам не потерять в качестве:

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

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

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

Готовьте расширенную базу референсов

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

Используйте нейросети

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

Работайте методом «прогрессивного джипега»

Сначала сделайте сырой дизайн всего сайта и только потом начинайте детализировать. Это помогает не застрять на одном экране и уложиться в сроки. А ещё у нас есть «чёрный ящик» — папка с заготовками и удачными решениями из прошлых проектов. Никогда не знаешь, когда пригодится приём, придуманный три года назад для совсем другого клиента

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

P. S. Если вам нужен хороший дизайн и вы не хотите делать его сами — напишите нам, мы поможем :)