Как сделать дизайн-концепцию сайта, если вы новичок

Клиент просит создать дизайн-концепцию сайта, а вы не знаете, с чего начать? Рассказываем, как выполнить задачу и впечатлить заказчика.

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

Что такое
дизайн-концепция
сайта

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

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

Жанна Травкина

Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.


Этапы разработки
дизайн-концепции сайта

Работа над концепцией делится на четыре стадии: предварительный анализ, разработка, получение фидбека и доработка идеи. У каждого есть свои особенности, которые важно учитывать.

Создание брифа

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

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

Изучение целевой аудитории

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

Подготовка мудборда

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

На создание мудборда стоит потратить побольше времени, чтобы найти достаточное количество референсов

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

Разработка дизайн-концепции сайта

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

Дизайн-концепция сайта должна показать клиенту, как будет выглядеть сайт после окончания работы

Если прототипа нет, нужно потратить немного времени, чтобы продумать структуру главной страницы. Все детали вы сможете проработать, когда клиент утвердит концепцию.

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

Как презентовать
дизайн-концепцию

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

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

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


Если вам предстоит защищать концепцию на встрече с несколькими руководителями, позаботьтесь о поддержке и попросите менеджера и арт-директора присутствовать. И создайте общее рабочее пространство для всей команды — сделайте концепцию в InVision или Figma, эти сервисы позволяют одновременно работать с документом нескольким участникам.


5 советов для создания концепции, которая понравится клиенту

1. Упрощайте

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

2. Практикуйтесь

Делайте мудборды, упражняйтесь в разработке дизайн-концепций «для себя». Когда придет реальный клиент, вы потратите меньше ресурсов на проработку идеи.

Следите за временем

Вы не должны тратить на поиск идеи слишком много времени. Потом вы еще сможете заняться детализацией, но в начале важно сосредоточиться на главном.

Не стесняйтесь задавать вопросы

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

Общайтесь с клиентом

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

17 принципов создания дизайн-концепции сайта

Заключение

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

Курс

Веб-дизайн с 0 до PRO


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

Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox