0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>3 авг 2022</li>
2
<ul><li>3 авг 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Как сделать дизайн‑концепцию сайта</h2>
4
</ul><h2>Как сделать дизайн‑концепцию сайта</h2>
5
<p>С чего начинают работу над внешним видом интерфейсов и почему этот этап важен для хороших отношений с клиентом.</p>
5
<p>С чего начинают работу над внешним видом интерфейсов и почему этот этап важен для хороших отношений с клиентом.</p>
6
<p>Фото: Klaus Vedfelt / Getty Images</p>
6
<p>Фото: Klaus Vedfelt / Getty Images</p>
7
<p>Прежде чем погружаться в подбор гарнитур и отрисовку UI-элементов, нужно хорошо представлять, каким в итоге должен получиться сайт. Для этого и составляют дизайн‑концепцию.</p>
7
<p>Прежде чем погружаться в подбор гарнитур и отрисовку UI-элементов, нужно хорошо представлять, каким в итоге должен получиться сайт. Для этого и составляют дизайн‑концепцию.</p>
8
<p>Читайте:</p>
8
<p>Читайте:</p>
9
<ul><li><a>что такое дизайн-концепция сайта</a>и как она помогает найти общий язык с клиентом;</li>
9
<ul><li><a>что такое дизайн-концепция сайта</a>и как она помогает найти общий язык с клиентом;</li>
10
<li><a>что нужно сделать</a>, чтобы подготовить качественную концепцию;</li>
10
<li><a>что нужно сделать</a>, чтобы подготовить качественную концепцию;</li>
11
<li><a>о чём важно помнить</a>при разработке дизайна.</li>
11
<li><a>о чём важно помнить</a>при разработке дизайна.</li>
12
</ul><p>Дизайн-концепция - то, как вы представляете себе будущий сайт, приложение или лендинг. Она примерно показывает, какие у финального продукта будут функции и как он будет выглядеть.</p>
12
</ul><p>Дизайн-концепция - то, как вы представляете себе будущий сайт, приложение или лендинг. Она примерно показывает, какие у финального продукта будут функции и как он будет выглядеть.</p>
13
<p>Не путайте дизайн-концепцию с черновиком на скорую руку или набором случайных картинок. Она должна иллюстрировать и пояснять, как сайт будет решать задачи бизнеса и пользователя.</p>
13
<p>Не путайте дизайн-концепцию с черновиком на скорую руку или набором случайных картинок. Она должна иллюстрировать и пояснять, как сайт будет решать задачи бизнеса и пользователя.</p>
14
<p>Кроме того, это инструмент диалога между дизайнером и заказчиком. Обсуждение, корректировка и согласование дизайн-концепции помогают дизайнеру понять, в каком направлении работать, а клиенту - чего ожидать в итоге.</p>
14
<p>Кроме того, это инструмент диалога между дизайнером и заказчиком. Обсуждение, корректировка и согласование дизайн-концепции помогают дизайнеру понять, в каком направлении работать, а клиенту - чего ожидать в итоге.</p>
15
<ul><li><strong>Получите от заказчика бриф</strong>. Работа над концепцией начинается с разговора с клиентом и заполнения брифа - особой анкеты с вопросами о бизнесе и желаемом результате. На этом этапе дизайнер должен разобраться, чем занимается компания, зачем ей нужен этот конкретный проект, что не устраивает в существующем сайте и на какие визуальные образы ориентируется клиент.</li>
15
<ul><li><strong>Получите от заказчика бриф</strong>. Работа над концепцией начинается с разговора с клиентом и заполнения брифа - особой анкеты с вопросами о бизнесе и желаемом результате. На этом этапе дизайнер должен разобраться, чем занимается компания, зачем ей нужен этот конкретный проект, что не устраивает в существующем сайте и на какие визуальные образы ориентируется клиент.</li>
16
</ul><p>Этот этап критически важен для понимания задач и объёмов работы: придётся ли создавать полностью новый продукт или достаточно внести косметические изменения в существующий сайт или лендинг.</p>
16
</ul><p>Этот этап критически важен для понимания задач и объёмов работы: придётся ли создавать полностью новый продукт или достаточно внести косметические изменения в существующий сайт или лендинг.</p>
17
<ul><li><strong>Изучите контекст</strong>. В брифе вы можете спросить заказчика о конкурентах и их цифровых продуктах. Однако чтобы лучше понимать задачу, стоит провести самостоятельное исследование контекста. Причём не только конкурентов из этой же ниши, но и из смежных или даже совсем не связанных областей. Например, если нужно создать дизайн-концепцию сайта для арт-галереи, можно изучить элементы и стиль страниц не только выставочных пространств и музеев, но и архитектурных бюро или магазинов одежды.</li>
17
<ul><li><strong>Изучите контекст</strong>. В брифе вы можете спросить заказчика о конкурентах и их цифровых продуктах. Однако чтобы лучше понимать задачу, стоит провести самостоятельное исследование контекста. Причём не только конкурентов из этой же ниши, но и из смежных или даже совсем не связанных областей. Например, если нужно создать дизайн-концепцию сайта для арт-галереи, можно изучить элементы и стиль страниц не только выставочных пространств и музеев, но и архитектурных бюро или магазинов одежды.</li>
18
</ul><p>И обязательно уделите внимание трендам в веб-дизайне: в некоторых случаях стоит основывать концепцию на них, а иногда наоборот, лучше держаться от модных решений подальше.</p>
18
</ul><p>И обязательно уделите внимание трендам в веб-дизайне: в некоторых случаях стоит основывать концепцию на них, а иногда наоборот, лучше держаться от модных решений подальше.</p>
19
<ul><li><strong>Соберите мудборд и покажите его заказчику</strong>. Референсы, которые вам показал клиент, и свои находки необходимо скомпоновать в понятную рабочую схему.</li>
19
<ul><li><strong>Соберите мудборд и покажите его заказчику</strong>. Референсы, которые вам показал клиент, и свои находки необходимо скомпоновать в понятную рабочую схему.</li>
20
</ul><p>Из хаотичной подборки иллюстраций, скриншотов, цветовых схем, шрифтов и графических элементов должен получиться мудборд - визуальная основа концепции. Это стандартный рабочий инструмент дизайнера: он помогает доступно объяснять своё видение заказчику и согласовывать с ним идеи. Обсуждение мудборда до разработки дизайн-концепции поможет ещё раз сверить часы и убедиться, что вы и клиент правильно понимаете друг друга.</p>
20
</ul><p>Из хаотичной подборки иллюстраций, скриншотов, цветовых схем, шрифтов и графических элементов должен получиться мудборд - визуальная основа концепции. Это стандартный рабочий инструмент дизайнера: он помогает доступно объяснять своё видение заказчику и согласовывать с ним идеи. Обсуждение мудборда до разработки дизайн-концепции поможет ещё раз сверить часы и убедиться, что вы и клиент правильно понимаете друг друга.</p>
21
<p>Если у компании есть<a>брендбук</a>, то его требования нужно учитывать при составлении мудборда и, как следствие, при разработке самой дизайн-концепции.</p>
21
<p>Если у компании есть<a>брендбук</a>, то его требования нужно учитывать при составлении мудборда и, как следствие, при разработке самой дизайн-концепции.</p>
22
<p>Подробно о мудбордах в дизайне -<a>здесь</a>.</p>
22
<p>Подробно о мудбордах в дизайне -<a>здесь</a>.</p>
23
Пример мудборда. Для стороннего наблюдателя сочетание картинок может выглядеть странно, но дизайнеру и заказчику этот коллаж должен быть понятен<em>Изображение: Lucila Lizano /<a>Behance</a></em><ul><li><strong>Продумайте и утвердите структуру</strong>. Дизайн-концепцию "примеряют" на готовую и согласованную с клиентом структуру сайта. Это позволяет увидеть, как может выглядеть и работать финальный продукт, и вовремя внести все правки и изменения.</li>
23
Пример мудборда. Для стороннего наблюдателя сочетание картинок может выглядеть странно, но дизайнеру и заказчику этот коллаж должен быть понятен<em>Изображение: Lucila Lizano /<a>Behance</a></em><ul><li><strong>Продумайте и утвердите структуру</strong>. Дизайн-концепцию "примеряют" на готовую и согласованную с клиентом структуру сайта. Это позволяет увидеть, как может выглядеть и работать финальный продукт, и вовремя внести все правки и изменения.</li>
24
</ul><p>Разработать структуру страниц и функциональных блоков тоже помогут референсы - сайты или лендинги конкурентов или других бизнесов.</p>
24
</ul><p>Разработать структуру страниц и функциональных блоков тоже помогут референсы - сайты или лендинги конкурентов или других бизнесов.</p>
25
<ul><li><strong>Разработайте дизайн-концепцию</strong>. Этот процесс не предполагает погружения в мельчайшие детали отрисовки - важнее отразить базовые идеи проекта. Концепция должна показывать тематику сайта, цветовую схему, типографику, основные иллюстрации и тексты. Погружаться в интерактив и прорабатывать кнопки и формы на этом этапе не нужно. Но если дизайн сайта предполагает, что важную роль будет играть анимация, то стоит её обозначить.</li>
25
<ul><li><strong>Разработайте дизайн-концепцию</strong>. Этот процесс не предполагает погружения в мельчайшие детали отрисовки - важнее отразить базовые идеи проекта. Концепция должна показывать тематику сайта, цветовую схему, типографику, основные иллюстрации и тексты. Погружаться в интерактив и прорабатывать кнопки и формы на этом этапе не нужно. Но если дизайн сайта предполагает, что важную роль будет играть анимация, то стоит её обозначить.</li>
26
</ul><p>Собирать дизайн-концепцию лучше в общем рабочем пространстве в InVision или Figma, чтобы клиенту было удобно работать с документом.</p>
26
</ul><p>Собирать дизайн-концепцию лучше в общем рабочем пространстве в InVision или Figma, чтобы клиенту было удобно работать с документом.</p>
27
<p>Собрали бесплатный самоучитель по Figma.<a>Изучайте</a>!</p>
27
<p>Собрали бесплатный самоучитель по Figma.<a>Изучайте</a>!</p>
28
<ul><li><strong>Покажите концепцию клиенту</strong>. Готовый набросок дизайна нужно презентовать заказчику, чтобы получить от него обратную связь. Это ещё одна возможность убедиться, что его пожелания и ваше видение работы пересекаются.</li>
28
<ul><li><strong>Покажите концепцию клиенту</strong>. Готовый набросок дизайна нужно презентовать заказчику, чтобы получить от него обратную связь. Это ещё одна возможность убедиться, что его пожелания и ваше видение работы пересекаются.</li>
29
</ul><p>Если в концепции есть смелые идеи, предлагайте их бонусом - и будьте готовы обосновывать и защищать их. Стандартные решения в этом случае тоже нужны, но как альтернатива - чтобы у вас и клиента был и "безопасный" вариант.</p>
29
</ul><p>Если в концепции есть смелые идеи, предлагайте их бонусом - и будьте готовы обосновывать и защищать их. Стандартные решения в этом случае тоже нужны, но как альтернатива - чтобы у вас и клиента был и "безопасный" вариант.</p>
30
<p>Как дизайнеру успешно презентовать идеи? Объясняем, что такое питчинг,<a>в этой статье</a>.</p>
30
<p>Как дизайнеру успешно презентовать идеи? Объясняем, что такое питчинг,<a>в этой статье</a>.</p>
31
Концепция веб-сервиса прогнозов погоды показывает только предварительные визуальные решения<em>Изображение: "Гисметео" /<a>Бюро Горбунова</a>/ Skillbox Media</em><p>Не стоит излишне детализировать дизайн-концепцию и отражать в ней абсолютно все идеи, которые приходят в голову. Помните, что это подготовительный этап работы, и в этот документ и вы, и клиент будете вносить много исправлений. Сосредоточьтесь на основной задаче и не инвестируйте в проработку деталей слишком много сил и времени.</p>
31
Концепция веб-сервиса прогнозов погоды показывает только предварительные визуальные решения<em>Изображение: "Гисметео" /<a>Бюро Горбунова</a>/ Skillbox Media</em><p>Не стоит излишне детализировать дизайн-концепцию и отражать в ней абсолютно все идеи, которые приходят в голову. Помните, что это подготовительный этап работы, и в этот документ и вы, и клиент будете вносить много исправлений. Сосредоточьтесь на основной задаче и не инвестируйте в проработку деталей слишком много сил и времени.</p>
32
<p>Делайте мудборды, упражняйтесь в разработке дизайн-концепций "для себя". Когда придёт реальный клиент, вы потратите меньше ресурсов на поиск и проработку идеи.</p>
32
<p>Делайте мудборды, упражняйтесь в разработке дизайн-концепций "для себя". Когда придёт реальный клиент, вы потратите меньше ресурсов на поиск и проработку идеи.</p>
33
<p>Во время первого обсуждения проекта вы уже можете начать работу над концепцией: спросить у заказчика о его идеях и мыслях и предложить свою интерпретацию. Это подскажет примерное направление работы.</p>
33
<p>Во время первого обсуждения проекта вы уже можете начать работу над концепцией: спросить у заказчика о его идеях и мыслях и предложить свою интерпретацию. Это подскажет примерное направление работы.</p>
34
<p>Когда получите от клиента комментарии, попросите о развёрнутых пояснениях к ним. Это не только даст вам больше полезных данных для решения задачи, но и покажет клиенту вашу вовлечённость и заинтересованность в отличном результате работы.</p>
34
<p>Когда получите от клиента комментарии, попросите о развёрнутых пояснениях к ним. Это не только даст вам больше полезных данных для решения задачи, но и покажет клиенту вашу вовлечённость и заинтересованность в отличном результате работы.</p>
35
<p>Как правильно общаться с клиентом, чтобы не потерять его и себя? Рассказываем<a>в этом материале</a>.</p>
35
<p>Как правильно общаться с клиентом, чтобы не потерять его и себя? Рассказываем<a>в этом материале</a>.</p>
36
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
36
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>