Дизайн сайта, который решает бизнес-задачи

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

Параллельно погружаемся в вашу аудиторию. Кто эти люди? Что их цепляет? На каком устройстве они сидят — с телефона в метро или с макбука в уютном кресле? Как они принимают решение о покупке — импульсивно или после недели сравнений?

На выходе — чёткий портрет: «Наш клиент — женщина 30–45, владелица малого бизнеса, заходит в основном с телефона между 10 и 12 утра, хочет быстро найти цену и телефон, не готова заполнять длинные формы». Исходя из этого, проектируем интерфейс под неё, а не под абстрактного «пользователя».

Бриф написан, портреты нарисованы, теперь рисуем скелет без цвета, без картинок, без шрифтов. Только серые прямоугольники и надписи «заголовок», «кнопка», «цены».

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

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

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

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

Почему Figma? Потому что это уже стандарт индустрии. Всё в облаке, не нужно качать файлы, вы смотрите макеты в браузере с любого устройства, оставляете комментарии прямо на экране. «Кнопку левее», «шрифт крупнее», «фото заменить» — пишете там же, мы видим, правим, пересылаем заново. Никакой беготни с письмами «ваш файл открылся битым». Photoshop — если кто-то из команды привык к старой школе, тоже можем, но Figma удобнее для согласований.

Рисуем:

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

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

Самый нервный этап для клиента — и самый понятный для нас. Мы не отправляем макет в Telegram со словами «посмотрите, всё ок?». Мы делаем системно, загружаем макеты в Figma, даём ссылку с доступом на комментирование. Пишем сопроводиловку, где указываем, что сделали, на что просим обратить внимание, что осталось за скобками (и почему). Задаём конкретные вопросы, а не «ну как вам?».

Например:

• «Заголовок отражает смысл предложения? Или переформулируем?»
• «Слайдер на главной оставляем или убираем?»
• «Кнопка красная — норм или перебор?»

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

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

Что внутри:

• Все слои названы по-человечески, не «прямоугольник 24», а «button-submit», «card-title», «header-logo». Программисту сразу понятно, что к чему относится.
• Цвета вынесены в переменные — 2–3 базовых, остальные от них пляшут.
• Шрифты — тоже переменные с указанием размера, начертания, межстрочного интервала.
• Сетка — единая для всех страниц.
• Все состояния кнопок, полей ввода, ссылок — нарисованы отдельными фреймами.
• Мобильная и десктопная версии — в одном файле с понятной навигацией.

Что получает ваша команда (или наша, если закажете вёрстку): чистый, понятный материал, с которым можно работать без вопросов. Экономия времени разработчика — от 20 до 30 % от общего бюджета на вёрстку. Потому что он не тратит часы на расшифровку, так как всё уже готово, бери и делай.