18.08.2023

15 мин

Дизайн-концепция и визуальные метафоры: где находить идеи и как работать над проектом

Автор

Алла Иванникова

Содержание

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

Получите подборку файлов от Московского Института Технологий и Управления

Как прокачать свои скиллы. 5 советов графическому дизайнеру.pdf

Что нужно знать графическому дизайнеру-новичку, чтобы брать первые заказы.pdf

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAMAAAAC2hU0AAAAJ1BMVEVMaXHHzv/K0f/M0//Hzf/a2v7H0f/AyP/Byf7ByP/Byf/M0//V3f9xXKgzAAAAC3RSTlMA/kSCUwdqoO4hx7bPwFgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAqSURBVHicY2DAAKzMzGwsDAwMTDw8PNwgmpGREUYzgsW5uUE0JzsXByMADosApcEMAPQAAAAASUVORK5CYII=

Зачем нужна дизайн-концепция

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

корпоративный брендбук

назначение интернет-проекта

текущие тренды

пожелания клиента

мнение дизайнеров исполнителя

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

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

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

Дизайн-концепция дает общее видение будущего проекта

Что такое визуальные метафоры и зачем их использовать

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

Используются два типа метафор:

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

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

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

Неконвенциональные визуальные метафоры привлекают внимание пользователя к сайту или рекламе

Как используют метафоры в дизайне

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

привлечение внимания посетителя

создание контекста

емкое изложение информации

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

Расположение объектов для сравнения

Замена одного предмета другим

Визуальное придание свойств одного предмета другому

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

Пример использования метафоры в дизайне

Где находить идеи

Редко когда визуальная метафора возникает «с нуля». В большинстве случаев при работе над концепцией дизайна разработчики сайта вдохновляются чужими решениями. Они не используются в чистом виде. Происходит переосмысление образа.

Откуда можно брать вдохновение для своих работ:

Искусство

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

Поп-культура и актуальная повестка

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

Другие сферы деятельности

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

Искусственный интеллект

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

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

Источником вдохновения для поиска метафор могут стать классические произведения искусства

Как развивать креативность

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

Мозговой штурм

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

Мозговой штурм — классический способ развития креативности

Свободное письмо

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

Суть способа заключается в том, что человек излагает любые мысли на бумаге от руки в течение 10 или 15 минут. У дизайнера может не быть отправной точки, поэтому возникает проблема «чистого листа». Для преодоления этого препятствия необходимо конкретизировать задачу для себя.

Варианты:

описание нерешенной проблемы

объяснение профессиональных терминов

беседа с несуществующим оппонентом

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

Скетчи

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

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

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

Ментальные карты

Это метод визуализации мышления человека. С помощью интеллектуальных карт можно зафиксировать различные понятия, факты и информацию, а затем создать связи между ними.

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

Ментальные карты помогают визуализировать мыслительную деятельность человека.

Способ Диснея

Другое название — «метод трех стульев». Его часто использовал известный мультипликатор Уолт Дисней. Но популярность он приобрел благодаря психологу Роберту Дилтсу, который внес некоторые доработки и рассказал о нем аудитории. Суть состоит в том, чтобы рассмотреть идею с трех позиций:

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

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

Критика — он анализирует негативные последствия, которые могут наступить при воплощении придуманной концепции. Он находит и оценивает возможные риски

Только те варианты дизайна сайта или другие идеи, которые прошли все три «стадии», можно реализовывать на практике.

Использование референсов

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

на художественных выставках

в музеях искусств

в аккаунтах дизайнеров

в фотографиях

в собственных скетчах

в музыке

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

По теме

6 типов модульных сеток в ux/ui дизайне и для чего они нужны

Инструменты для работы с идеями и концепциями

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

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

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

FigJam — интерактивная «белая доска». На ней можно создавать концепцию дизайна проекта, работая в группе. Встроенные инструменты позволяют составлять карты, проводить мозговые штурмы, создавать мудборды

Behance и Dribble — сайты для размещения портфолио. Здесь представлены варианты дизайнов сайтов, можно подписаться на пользователей, сохранять свои коллекции и использовать их в качестве референсов

Также подходят и неспециализированные инструменты. Например, Google Keep — онлайн-сервис для ведения заметок с облачной синхронизацией.

Курс по теме

Графический дизайн

Как стать востребованным специалистом

Освоить все тонкости дизайна, в том числе визуальными концепциями проекта, можно с помощью программы обучения «Графический дизайн» от MITM.

Важно! Мы настоятельно рекомендуем ознакомиться с нашими курсами, где тема данной статьи раскрывается более подробно:

Графический дизайнОсвойте профессию графического дизайнера и начните быстрый старт в новой карьере

*В этом месяце мы подготовили для вас скидку 30% на все курсы! Спешите записаться на обучение, ведь количество мест ограничено