30 дней дизайна — пример брендинга

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

Обычно существует два типа проектов, с которыми сталкивается каждый дизайнер в своей карьере: «Мне нужен дизайн, ориентированный на пользователя, который соответствует моему проекту, без жестких сроков; Я просто хочу лучшее решение»… Это мечта любого дизайнера. Но давайте посмотрим правде в глаза; на самом деле все всегда сложнее.

«Мне нужно нестандартное, инновационное и креативное решение — хороший UX, действительно приятный пользовательский интерфейс… и мне это нужно еще вчера».

Так что же происходит, когда вы понимаете, что у вас есть 30 дней на создание логотипа и основных элементов бренда, веб-сайта, мобильных интерфейсов и рекламы/графики в социальных сетях?

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

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

Несмотря ни на что, всегда есть эти мучительные вопросы:

• Стоит ли делать с такими временными ограничениями?
• Приведут ли ограничения по времени к ухудшению качества проектирования?
• Стал бы я работать лучше, если бы у меня было больше времени?

Абсолютно да!

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

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

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

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

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

Дни 1-2: Перво-наперво — план!

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

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

Создавайте рабочие процессы и следуйте им.

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

Исследование

Узнайте все о бизнесе вашего клиента:

• Какова суть их бизнеса и какова их основная деятельность?
• Кто их целевая аудитория и каковы их потребности?
• Каковы их цели и какую задачу необходимо решить с помощью дизайна?
• Кто составляет конкуренцию и как вы можете быть лучше?

Анкета или дизайн-бриф — один из самых удобных и эффективных способов сбора вышеупомянутой информации.

Создать доску настроения

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

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

День 3: Создайте концепцию дизайна

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

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

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

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

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

День 4: Дизайн визуальных элементов бренда

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

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

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

Дни 7-15: Дизайн веб-сайта

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

Карта сайта

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

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

Это может означать, что вы зададите своему клиенту несколько вопросов:

• Какое количество страниц на сайте?
• Какие страницы самые важные?
• Есть ли подстраницы?

Это нарисует четкую картину структуры веб-сайта и даст вам хорошее представление о масштабах проекта.

Копировать первым

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

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

Дизайн домашней страницы

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

Домашняя страница — это первое, что видят пользователи, когда заходят на сайт, и, следовательно, это самая важная страница. Применение принципа Парето показывает, что главная страница содержит 80% направления дизайна (контекст, типографика, цвета, повторяющиеся элементы и т. д.), а остальные страницы — 20%.

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

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

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

Дни 15-25: Применение универсального дизайна

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

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

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

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

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

Блок-схема

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

Один из способов сделать процесс создания UX проще и понятнее — создать блок-схему пользователя.

Существует несколько методов и инструментов, которые вы можете использовать для создания блок-схем. Обычной практикой является создание графических диаграмм с короткими заголовками и, при необходимости, текстом пояснений. Я предпочитаю использовать для этого Sketch или Illustrator, но для этой задачи подойдет любой инструмент, позволяющий создавать и перемещать элементы.

Уилл Литтл дал отличную интерпретацию этого:

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

Сделайте его высоким, сделав его низким

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

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

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

Единый дизайн

После внесения некоторых изменений в UX у вас есть все необходимое для создания логичного и четко определенного пользовательского интерфейса, позволяющего настроить его в соответствии с визуальными требованиями платформ iOS и Android. Поскольку у iOS есть некоторые очень специфические рекомендации по дизайну, которые могут помешать вам попасть в Apple App Store, вы должны ознакомиться с этими правилами и тщательно проверить, как ваш дизайн реализуется на этапе разработки.

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

Дни 25-30: создавайте рекламу синхронно с брендингом

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

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

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

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

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

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

Бенджамин Франклин выразился лучше всего: «Не готовясь, вы готовитесь к поражению».

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки
• Пустые состояния — самый недооцененный аспект UX
• Простота — это ключ — изучение минимального веб-дизайна
• Эвристические принципы для мобильных интерфейсов
• Дизайн для удобочитаемости — руководство по веб-типографике