LOGOHERE
WORK
SERVICES
ABOUT
CONTACT
Раздел 2. Графический дизайн в конструировании сайтов
Social media
Down to schedule
Тема 1.
Основные принципы дизайн-мышления
Тема 2.
Особенности поиска информации на Интернет-ресурсах
Тема 3.
Пользовательский опыт при взаимодействии с сайтом
Фирменный стиль
Что такое гайдлайн и зачем он нужен?
В гайдлайне не всегда присутствует описание компании, он отличается от брендбука и тем более логобука, но что в нём точно содержится, так это принципы построения и правила использования элементов фирменного стиля.
Вообще, слово «guidelines» для нашей страны, в отличие от слова «brand», не совсем привычное, именно поэтому, наш гайдлайн называют «руководством». Например, «Руководство по использованию фирменного стиля» или просто «Руководство по фирменному стилю», реже «Руководство по визуальной идентификации бренда». Бывает, конечно, что и брендбук называют «руководством», но отличить их друг от друга можно невооруженным глазом.
Отличие от брендбука
Разобраться в разнице брендбука и гайдлайна довольно просто: брендбук может использоваться внутри организации для всех сотрудников, среди партнёров, а также клиентов, а гайдлайн — это документ для узких специалистов: дизайнеров, маркетологов и компаний-подрядчиков, например, производителей стендов для выставки или рекламных агентств.
В брендбуке вы найдете информацию по характеру бренда, его ценностям, тональности, аудитории, преимуществам, константам бренда, увидите, как должна выглядеть деловая документация и рекламная продукция. В гайдлайне же показывается, как конкретно используются константы бренда и дополнительные стилеобразующие элементы на различных носителях, как они строятся через модульную сетку, каковы их размеры, прописаны границы возможных вариантов их использования.
Если брендбук выступает общедоступной книгой, то гайдлайн — специализированный документ.
Конечно, в гайдлайне также может быть прописана платформа бренда, его архитектура, реже история, миссия, позиционирование, но эта информация даётся в редких случаях и в малом объеме, так как основная часть заложена в брендбуке.
И это правильно. Действительно, зачем эта информация нужна, к примеру, швейному производству, которое будет изготавливать для компании очередную партию корпоративной одежды. Для них скорее важны такие вещи, как расположение логотипа, слогана, необходимые в данном случае цвета куртки или штанов, материал и другие детали. Детали — это то, чего в гайдлайне действительно много.
Какие преимущества дает гайдлайн
Основными задачами такого документа, который формулирует правила использования фирменного стиля, являются:
Гайдлайн состоит из стандартов размещения фирменного знака и логотипа, стилеобразующих элементов, их описания, кодировок основных и дополнительных цветов, определения шрифтов и их начертаний для различных поверхностей, подходы к размещению фотографий, графиков или иллюстраций. В гайдлайне присутствуют правила верстки для деловой документации, рекламных материалов, а также электронных носителей — сайта, презентаций или социальных сетей.
В гайдлайнах крупных компаний прописаны стандарты оформления офисов или магазинов, внутренней навигации в них, экстерьера, транспорта, униформы. Также в гайдлайне показана сувенирная продукция, её верстка и материалы, из которых она изготавливается.
Виды гайдлайна
Гайдлайны условно делятся на 2 вида: технические и коммуникационные. Технические — свод правил, а коммуникационные — свод правил, а также дополнительная информация о слогане и концепции.
Конечно, большинство гайдлайнов — технические, так как в них присутствует огромное количество информации по точным правилам размещения элементов фирменного стиля, отступы, размеры, материалы изготовления. Коммуникационные встречаются значительно реже, поэтому и разделение довольно условное.
У иностранных компаний встречаются «digital guidelines», которые определяют правила использования элементов бренда в сети интернет. С развитием общей диджитализации компаний, возможен такой вариант, при котором раздел «digital» появятся в гайдлайнах российских фирм, а позже также произойдет создание отдельного документа.
Структура гайдлайна
Структура гайдлайна может быть разной в зависимости от размера компании и направления её работы, но практически всегда используются следующие блоки:
Константы фирменного стиля
К константам фирменного стиля относятся фирменный блок (знак и логотип), цвета, основные и дополнительные шрифты. Иногда в данный блок включают инфографику, пиктограммы, стилеобразующие элементы и даже слоган.
Фирменный блок
Представляет собой соединение фирменного знака и логотипа, дескриптора. В данном разделе показываются принципы построения элементов фирменного блока, горизонтальное и вертикальное исполнение, англоязычное написание, монохромное использование, минимальные размеры. Здесь наглядно демонстрируется, как нельзя использовать знак с логотипом, указываются рекомендации по размещению на фотографиях, обязательно обозначается охранное поле и другие возможные вариации использования логотипа.
Цвета
Также являются элементами фирменного стиля, бывают основными и дополнительными. Основные цвета составляют базовую корпоративную палитру, а дополнительные могут использоваться в презентациях, инфографике или на сайте.
В данном разделе описывается, какие цвета могут взаимодействовать друг с другом, а какие нет, какие можно использовать под фон, а какие категорически запрещено. Также показана возможность изменения интенсивности цветов или места или использование градиента.
В этом разделе к каждому цвету идет его код в различных цветовых схемах: Pantone, CMYK, RGB.
Шрифты
В разделе показаны основные и дополнительные шрифты, которые используются во внутренних и внешних коммуникациях. Здесь обозначены начертания, которые могут использоваться в конкретных ситуациях, например, жирное начертание Bold часто используют для создания заголовков. В этом разделе также указаны минимальные размеры шрифтов для разных носителей, их разрядка, интерлиньяж.
Дополнительные стилеобразующие элементы
Данный блок показывает, что не только логотип и фирменный знак могут быть важными элементами идентификации бренда. Дополнительными стилеобразующими элементами могут служить фирменные декоративные волны, паттерн, лента и даже цветные плашки. В этом блоке показывается, как образуются дополнительные элементы, как и на каких носителях их можно использовать, их недопустимое изображение.
Фотографии
Изображения также являются важным стилеобразующим элементом коммуникаций. Они несут дополнительную информацию и создают эмоциональную связь с потребителем, тем самым усиливая влияние бренда.
В этом блоке показывают основные рекомендации по экспозиции и освещению, фокусу и глубине, разрешению и работе с искажениями, а также рассматривают примеры изображений, которые лучше переснять.
Деловая документация
В этом блоке наглядно показаны общий вид, место расположения логотипа, основные принципы построения модульной сетки, её размеры, выравнивание текста, а также другая информация, необходимая для создания готовых макетов конвертов, бланков, писем, папок, приглашений и другой деловой документации.
Рекламные материалы
Этот блок демонстрирует, как на различных рекламных материалах лучше расположить основное изображение, логотип, цветные плашки, заголовок, основной текст. Здесь показаны примеры, вёрстка, шрифты, допустимые и недопустимые варианты для различных рекламных материалов и поверхностей — от постера до билборда.
Электронные носители
Под электронными носителями подразумевается визуальное оформление пластиковых карт, структура и верстка презентаций, принципы построения сайта и групп в социальных сетях, приложения для смартфонов.
Сувенирная продукция
Подарки сотрудникам, партнёрам и клиентам, а также прочая раздаточная продукция, которая используется на выставках и различных мероприятиях, также прописывается в гайдлайне. Конечно, при этом сам носитель фирменного стиля не должен негативно влиять на имидж компании.
К каждой сувенирной продукции прописывается способ нанесения фирменного блока, описывается материал изготовления, размеры, а также прочие рекомендации.
Как разработать гайдлайн и принципы его создания
Разработка гайдлайна, как и брендбука — задача для целой команды специалистов: дизайнера, маркетолога, руководства, фотографа, технических специалистов из разных сфер.
Начать разработку лучше со сбора и структурирования информации, дополнения её, визуализации. Гайдлайн можно сделать в таких программах, как Adobe InDesign, Illustrator, Photoshop.
При разработке важно придерживаться следующих принципов:
Для того, чтобы вы могли лучше понять, что такое гайдлайн и из чего он состоит, рекомендуем ознакомиться с примерами существующих компаний
Обязательно посмотрите данные примеры и тогда вы будете понимать, как должен выглядеть хороший гайдлайн. Удачи.
В гайдлайне не всегда присутствует описание компании, он отличается от брендбука и тем более логобука, но что в нём точно содержится, так это принципы построения и правила использования элементов фирменного стиля.
- 1. Отличие от брендбука
- 2. Какие преимущества дает гайдлайн
- 3. Задачи гайдлайна
- 4. Что входит в гайдлайн
- 5. Виды гайдлайна
- 6. Структура гайдлайна
- 7. Как разработать гайдлайн и принципы его создания
- 8. Примеры гайдлайнов
Вообще, слово «guidelines» для нашей страны, в отличие от слова «brand», не совсем привычное, именно поэтому, наш гайдлайн называют «руководством». Например, «Руководство по использованию фирменного стиля» или просто «Руководство по фирменному стилю», реже «Руководство по визуальной идентификации бренда». Бывает, конечно, что и брендбук называют «руководством», но отличить их друг от друга можно невооруженным глазом.
Отличие от брендбука
Разобраться в разнице брендбука и гайдлайна довольно просто: брендбук может использоваться внутри организации для всех сотрудников, среди партнёров, а также клиентов, а гайдлайн — это документ для узких специалистов: дизайнеров, маркетологов и компаний-подрядчиков, например, производителей стендов для выставки или рекламных агентств.
В брендбуке вы найдете информацию по характеру бренда, его ценностям, тональности, аудитории, преимуществам, константам бренда, увидите, как должна выглядеть деловая документация и рекламная продукция. В гайдлайне же показывается, как конкретно используются константы бренда и дополнительные стилеобразующие элементы на различных носителях, как они строятся через модульную сетку, каковы их размеры, прописаны границы возможных вариантов их использования.
Если брендбук выступает общедоступной книгой, то гайдлайн — специализированный документ.
Конечно, в гайдлайне также может быть прописана платформа бренда, его архитектура, реже история, миссия, позиционирование, но эта информация даётся в редких случаях и в малом объеме, так как основная часть заложена в брендбуке.
И это правильно. Действительно, зачем эта информация нужна, к примеру, швейному производству, которое будет изготавливать для компании очередную партию корпоративной одежды. Для них скорее важны такие вещи, как расположение логотипа, слогана, необходимые в данном случае цвета куртки или штанов, материал и другие детали. Детали — это то, чего в гайдлайне действительно много.
Какие преимущества дает гайдлайн
- Стандартизация. Единый графический стиль обеспечивает компании большую узнаваемость, создаёт целостность восприятия бренда. Гайдлайн позволяет быть уверенным в том, что во всех филиалах компании будут использованы верные элементы фирменного стиля.
- Экономия ресурсов. Гайдлайн экономит ресурсы компании за счёт того, что сотрудники не тратят время для создания дизайна с нуля, а используют уже существующие правила и принципы построения макетов для различных носителей. Для новых специалистов в компании, гайдлайн — необходимый помощник, который в полной мере раскрывает большое количество предстоящей работы и указывает верное направление при решении ежедневных задач.
- Снижение рисков. Гайдлайн значительно снижает ошибки при работе с поставщиками или партнёрами. К техническому заданию вы прикладываете страницы из гайдлайна, соответствующие необходимой задаче, что позволяет вам быть уверенным в том, что для поставщика точно обозначен готовый результат или границы дозволенных отклонений.
Основными задачами такого документа, который формулирует правила использования фирменного стиля, являются:
- сохранение целостности и узнаваемости бренда;
- повышение эффективности коммуникаций;
- создание единого позитивного восприятия компании у клиентов;
- достижение ощущения сплоченности и принадлежности к единому целому внутри компании;
- экономия ресурсов.
Гайдлайн состоит из стандартов размещения фирменного знака и логотипа, стилеобразующих элементов, их описания, кодировок основных и дополнительных цветов, определения шрифтов и их начертаний для различных поверхностей, подходы к размещению фотографий, графиков или иллюстраций. В гайдлайне присутствуют правила верстки для деловой документации, рекламных материалов, а также электронных носителей — сайта, презентаций или социальных сетей.
В гайдлайнах крупных компаний прописаны стандарты оформления офисов или магазинов, внутренней навигации в них, экстерьера, транспорта, униформы. Также в гайдлайне показана сувенирная продукция, её верстка и материалы, из которых она изготавливается.
Виды гайдлайна
Гайдлайны условно делятся на 2 вида: технические и коммуникационные. Технические — свод правил, а коммуникационные — свод правил, а также дополнительная информация о слогане и концепции.
Конечно, большинство гайдлайнов — технические, так как в них присутствует огромное количество информации по точным правилам размещения элементов фирменного стиля, отступы, размеры, материалы изготовления. Коммуникационные встречаются значительно реже, поэтому и разделение довольно условное.
У иностранных компаний встречаются «digital guidelines», которые определяют правила использования элементов бренда в сети интернет. С развитием общей диджитализации компаний, возможен такой вариант, при котором раздел «digital» появятся в гайдлайнах российских фирм, а позже также произойдет создание отдельного документа.
Структура гайдлайна
Структура гайдлайна может быть разной в зависимости от размера компании и направления её работы, но практически всегда используются следующие блоки:
- константы фирменного стиля;
- дополнительные стилеобразующие элементы;
- фотографии;
- деловая документация;
- рекламные материалы;
- электронные носители;
- сувенирная продукция;
- интерьер и экстерьер;
- униформа;
- автотранспорт.
Константы фирменного стиля
К константам фирменного стиля относятся фирменный блок (знак и логотип), цвета, основные и дополнительные шрифты. Иногда в данный блок включают инфографику, пиктограммы, стилеобразующие элементы и даже слоган.
Фирменный блок
Представляет собой соединение фирменного знака и логотипа, дескриптора. В данном разделе показываются принципы построения элементов фирменного блока, горизонтальное и вертикальное исполнение, англоязычное написание, монохромное использование, минимальные размеры. Здесь наглядно демонстрируется, как нельзя использовать знак с логотипом, указываются рекомендации по размещению на фотографиях, обязательно обозначается охранное поле и другие возможные вариации использования логотипа.
Цвета
Также являются элементами фирменного стиля, бывают основными и дополнительными. Основные цвета составляют базовую корпоративную палитру, а дополнительные могут использоваться в презентациях, инфографике или на сайте.
В данном разделе описывается, какие цвета могут взаимодействовать друг с другом, а какие нет, какие можно использовать под фон, а какие категорически запрещено. Также показана возможность изменения интенсивности цветов или места или использование градиента.
В этом разделе к каждому цвету идет его код в различных цветовых схемах: Pantone, CMYK, RGB.
Шрифты
В разделе показаны основные и дополнительные шрифты, которые используются во внутренних и внешних коммуникациях. Здесь обозначены начертания, которые могут использоваться в конкретных ситуациях, например, жирное начертание Bold часто используют для создания заголовков. В этом разделе также указаны минимальные размеры шрифтов для разных носителей, их разрядка, интерлиньяж.
Дополнительные стилеобразующие элементы
Данный блок показывает, что не только логотип и фирменный знак могут быть важными элементами идентификации бренда. Дополнительными стилеобразующими элементами могут служить фирменные декоративные волны, паттерн, лента и даже цветные плашки. В этом блоке показывается, как образуются дополнительные элементы, как и на каких носителях их можно использовать, их недопустимое изображение.
Фотографии
Изображения также являются важным стилеобразующим элементом коммуникаций. Они несут дополнительную информацию и создают эмоциональную связь с потребителем, тем самым усиливая влияние бренда.
В этом блоке показывают основные рекомендации по экспозиции и освещению, фокусу и глубине, разрешению и работе с искажениями, а также рассматривают примеры изображений, которые лучше переснять.
Деловая документация
В этом блоке наглядно показаны общий вид, место расположения логотипа, основные принципы построения модульной сетки, её размеры, выравнивание текста, а также другая информация, необходимая для создания готовых макетов конвертов, бланков, писем, папок, приглашений и другой деловой документации.
Рекламные материалы
Этот блок демонстрирует, как на различных рекламных материалах лучше расположить основное изображение, логотип, цветные плашки, заголовок, основной текст. Здесь показаны примеры, вёрстка, шрифты, допустимые и недопустимые варианты для различных рекламных материалов и поверхностей — от постера до билборда.
Электронные носители
Под электронными носителями подразумевается визуальное оформление пластиковых карт, структура и верстка презентаций, принципы построения сайта и групп в социальных сетях, приложения для смартфонов.
Сувенирная продукция
Подарки сотрудникам, партнёрам и клиентам, а также прочая раздаточная продукция, которая используется на выставках и различных мероприятиях, также прописывается в гайдлайне. Конечно, при этом сам носитель фирменного стиля не должен негативно влиять на имидж компании.
К каждой сувенирной продукции прописывается способ нанесения фирменного блока, описывается материал изготовления, размеры, а также прочие рекомендации.
Как разработать гайдлайн и принципы его создания
Разработка гайдлайна, как и брендбука — задача для целой команды специалистов: дизайнера, маркетолога, руководства, фотографа, технических специалистов из разных сфер.
Начать разработку лучше со сбора и структурирования информации, дополнения её, визуализации. Гайдлайн можно сделать в таких программах, как Adobe InDesign, Illustrator, Photoshop.
При разработке важно придерживаться следующих принципов:
- Визуализация. Покажите, как должен выглядеть готовый вариант и вариант, который точно нельзя использовать.
- Простота. Хоть гайдлайн в целом больше технический документ, но читать его будут не всегда специалисты с техническим образованием, поэтому эффективнее будет описывать разделы простыми словами, за исключением тех случаев, когда это действительно важно.
- Детализация. Точно покажите модульные сетки, верстку, размеры, материал изготовления.
Для того, чтобы вы могли лучше понять, что такое гайдлайн и из чего он состоит, рекомендуем ознакомиться с примерами существующих компаний
Обязательно посмотрите данные примеры и тогда вы будете понимать, как должен выглядеть хороший гайдлайн. Удачи.
Айдентика
Айдентика, как одна из составляющих брендинга, более известная под названиями фирменный стиль или brand ID — это визуальная часть бренда, задачи которой повысить его узнаваемость на рынке и создать целостный, отличный от других образ у ЦА (целевая аудитория).
Вопреки мнению многих, о том, что айдентика это логотип, бланки и визитки, все же это нечто большее — целый организм, состоящий из большого количества элементов, работающих исключительно вместе, по заданным правилам.
Хорошая и сильная айдентика откладывается в головах потребителей, повышает доверие к бренду, укрепляет позиции компании на рынке. Эта целостность экономит затраты на рекламу, снижает значимость маркетологов в компании.
Существует некий базис элементов, унифицированный для большего количества компаний.
Базовые элементы айдентики
Основные виды айдентики
Традиционная (классическая)
Классика вечна! Вспомним яркие примеры традиционной айдентики, такие как — Coca-Cola, Pepsi Co, McDonald's.
Визуальный образ этих брендов — кропотливая работа по слиянию фирменного знака, слогана, цвета… Сложно представить себе, как бы они выглядели, замени хотя бы одну из составляющих.
Такого рода образы достигаются благодаря разработке не просто отдельных элементов, но еще и созданию правил использования.
В традиционной айдентике, разработанные элементы живут по определенным законам взаимоотношений — гайдлайнам, максимально сводя к нулю вероятность разработки макета, выпадающего из общего визуального стиля.
Несмотря на то, что вышесказанное является несомненным плюсом, и подходит для подавляющего большинства компаний, в современном мире, с постоянным ростом каналов коммуникации с ЦА, частым запуском новых продуктов, традиционная айдентика становится неактуальной для компаний, работающих на рынке диджитал и IT, т.к. придется постоянно разрабатывать новые константы, правила и элементы. Именно это стало предпосылкой к появлению динамической айдентики.
Динамическая (генерирующая)
Мир и общество активно изменяются в последние годы, стремительные изменения происходят и в сфере визуальных коммуникаций, что диктует и новые правила разработки айдентики. Однин из нетрадиоднных и современных вариантов — динамическая айдентика.
Если в традиционном стиле все элементы подчиняются жестким константам, то в динамической айдентике все гораздо гибче в использовании.
Правила никуда не пропадают, но становятся некими векторами, а элементы становятся вариативными, но требующими более глубокой проработки. Все менять как хочется нельзя, изменчивость должна происходить по определенным условиям. Только так бренд не станет хаотичным и сохранит свою узнаваемость перед аудиторией.
Частным случаем динамической айдентики является полиморфный логотип.
Это когда в основе фирменного стиля лежит логотип, состоящий из набора элементов, как конструктор. Эти элементы и являются стилеобразующими бренда, и вся коммуникация строится на них. Логотип постоянно адаптируется под определенные задачи коммуникации.
Вопреки мнению многих, о том, что айдентика это логотип, бланки и визитки, все же это нечто большее — целый организм, состоящий из большого количества элементов, работающих исключительно вместе, по заданным правилам.
Хорошая и сильная айдентика откладывается в головах потребителей, повышает доверие к бренду, укрепляет позиции компании на рынке. Эта целостность экономит затраты на рекламу, снижает значимость маркетологов в компании.
Существует некий базис элементов, унифицированный для большего количества компаний.
Базовые элементы айдентики
- логотип
- шрифты
- палитра цветов
- паттерн
Основные виды айдентики
Традиционная (классическая)
Классика вечна! Вспомним яркие примеры традиционной айдентики, такие как — Coca-Cola, Pepsi Co, McDonald's.
Визуальный образ этих брендов — кропотливая работа по слиянию фирменного знака, слогана, цвета… Сложно представить себе, как бы они выглядели, замени хотя бы одну из составляющих.
Такого рода образы достигаются благодаря разработке не просто отдельных элементов, но еще и созданию правил использования.
В традиционной айдентике, разработанные элементы живут по определенным законам взаимоотношений — гайдлайнам, максимально сводя к нулю вероятность разработки макета, выпадающего из общего визуального стиля.
Несмотря на то, что вышесказанное является несомненным плюсом, и подходит для подавляющего большинства компаний, в современном мире, с постоянным ростом каналов коммуникации с ЦА, частым запуском новых продуктов, традиционная айдентика становится неактуальной для компаний, работающих на рынке диджитал и IT, т.к. придется постоянно разрабатывать новые константы, правила и элементы. Именно это стало предпосылкой к появлению динамической айдентики.
Динамическая (генерирующая)
Мир и общество активно изменяются в последние годы, стремительные изменения происходят и в сфере визуальных коммуникаций, что диктует и новые правила разработки айдентики. Однин из нетрадиоднных и современных вариантов — динамическая айдентика.
Если в традиционном стиле все элементы подчиняются жестким константам, то в динамической айдентике все гораздо гибче в использовании.
Правила никуда не пропадают, но становятся некими векторами, а элементы становятся вариативными, но требующими более глубокой проработки. Все менять как хочется нельзя, изменчивость должна происходить по определенным условиям. Только так бренд не станет хаотичным и сохранит свою узнаваемость перед аудиторией.
Частным случаем динамической айдентики является полиморфный логотип.
Это когда в основе фирменного стиля лежит логотип, состоящий из набора элементов, как конструктор. Эти элементы и являются стилеобразующими бренда, и вся коммуникация строится на них. Логотип постоянно адаптируется под определенные задачи коммуникации.
Tilda Publishing
UX/UI дизайн
Tilda Publishing
С чего начать изучение UX/UI дизайна – первые 10 шагов в UX-дизайне
Изучать ролики на YouTube, нужно ли брать уроки Photoshop на мастер-классах или все же поступить на специальность в онлайн-университет? Разбираем, как стать ui ux дизайнером, когда все вокруг так стремительно развивается.
Шаг 1. Начните использовать ежедневно самые свежие версии топовых приложений
Черпаните побольше современной UX-культуры и зажгитесь предметом. Вот подборка приложений, которые важно пощупать на деле. Все они уже стали культовыми, каждый из брендов силен особой культурой и атмосферой, признан на международной арене и притягивает пользователей со всего мира. Это бренды, которых ежедневно касается миллионная аудитория:
Desktop: Figma, Jetbrans
Веб-приложения: Stripe, Mailchimp, Intercom
Мобильные приложения: Uber, Airbnb, Spotify
Шаг 2. Изучите лучшие UX-кейсы и международные практики
Понаблюдайте в работе за профессиональными командами. Распечатайте инсайдерские фото их процессов работы, покрутите в руках.
Дизайн-платформа Uber: https://ux-journal.ru/dizajn-platforma-uber.html
UI/UX кейс: Uber Navigation — дизайн приложения для таксистов: https://ux-journal.ru/uber-navigation-dizajn-prilozheniya-s-navigatsiej-dlya-teh-kto-taksuet.html
Проектирование нового Foursquare: https://ux-journal.ru/proektirovanie-novogo-foursquare.html
UI/UX кейс: Продуктовый дизайн панели инструментов Stripe под iPhone: https://ux-journal.ru/produktovyj-dizajn-paneli-instrumentov-stripe-pod-iphone.html
Шаг 3. Возьмитесь за первый проект и сделайте его вместе с наставником
Подыщите курс с легким стартом и ассортиментом интересных и жизненных проектов. К примеру, курсы UX/UI на Breezzly. Задизайните веб-сервис, приложение для смарт-часов или мобильное приложения для бронирования кафе, а затем уже погружайтесь дальше через очные курсы с командной работой (поможет сильнее прочувствовать весь дух профессии).
Шаг 4. Изучите ТОП-3 книги по UX (международный ТОП)
Мои первые три книги, которые прямо зашли и разожгли интерес к ux-дизайну:
Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия
Не заставляйте меня думать. Веб-юзабилити и здравый смысл. 3-е издание
Интерфейс. Основы проектирования взаимодействия | Купер Алан, Рейманн Роберт М.
Эти книги хороши живой подачей, обилием иллюстраций, алгоритмами, схемами, кейсами и проверенными боем на международном рынке советами.
Шаг 5. Распечатайте процесс работы UX-дизайнера и пощупайте каждый этап как можно раньше
Ваша программа максимум – пощупать каждый этап процесса работы UX-дизайнера. Это карта вашего путешествия в мир продуктового (UX/UI) дизайна. Кстати, именно по этой карте работают международные компании. Опытный UX-дизайнер назвал бы эту карту CJM или Customer Journey Map.
Процесс проектирования и разработки цифрового продукта (UX Process, User Centered Design).
Шаг 6. Выпишите TOP-10 UX навыков и поразмышляйте о графике тренировок
На тему навыков есть содержательная статья TOP-10 UX навыков, чтобы начать работать UX дизайнером. Возьмите и распечатайте этот чек-лист. А дальше, к примеру, качайте раз в квартал по навыку. В этой статье автор задает амбициозную цель по горизонту развития (а мы же дизайнеры так и любим!).
Шаг 7. Вступите в самые популярные UX-сообщества и задайте самый волнующий вопрос
Есть три самых насыщенных информацией сообщества в рунете на тему продуктового дизайна. Вступайте же:
UxJournal | Максимально полезные статьи для дизайнеров: https://www.facebook.com/groups/uxjournal
UxClub | Форум практиков продуктового дизайна: https://www.facebook.com/groups/uxclubs
Дайджест продуктового дизайна: https://www.facebook.com/groups/pdigest
Шаг 8. Пройдите практику на боевом продукте
Первые 7 шагов – это предподготовка. А вот эти три проекта могут стать хорошим планом ближайших высот. Каждый пункт – это серьезный профессиональный рост.
Выявить барьеры в существующем продукте и предложить интерактивный прототип, который улучшит UX для определенного сегмента (без потери качества для других);
Собрать новый модуль для существующего продукта с нуля, применив полный процесс проектирования;
Собрать продукт с нуля и воплотить его вместе с командой;
Шаг 9. Опубликуйте портфолио
Упакуйте достижения в портфолио и доработайте подачу по обратной связи от профи в сообществе или руководителей в компаниях, где хотите работать (можно через мессенджеры, а лучше личные встречи). Это поможет вам почувствовать себя увереннее и двигаться к новым высотам (Минутка мотивации!).
Вы можете собрать подробное портфолио в Readymag, Tilda или Webflow:
Важный момент. При подготовке портфолио фокусируйтесь на демонстрации навыков, умений и подхода, а не только на классной и интересной картинке. И старайтесь следовать принципу “один экран/слайд – одна мысль”.
А еще Readymag, Tilda и Dribbble поддерживают установку счетчика веб- аналитики, так вы сможете видеть с каких стран/регионов и в каком количестве каждый день к вам заходят новые клиенты и чем они интересуются.
Шаг 10. Совершенствуйтесь: осваивайте новые инструменты, качайте навыки, пробуйте новые методы
Выработайте собственные ритмы: в квартал по навыку, в неделю по книге, в год по рубежу, в пятилетку по проекту. Мне такой распорядок помогает периодически оценивать прошлое и еще более драйвово проводить время в настоящем и даже моделировать будущее (а мы же дизайнеры и любим моделировать!).
Помните, инструменты приходят и уходят, культура достижений, команда и эмоции остаются. Берите новые высоты, пробуйте и внедряйте новые инструменты, собирайте единомышленников, растите и развивайтесь.
Изучать ролики на YouTube, нужно ли брать уроки Photoshop на мастер-классах или все же поступить на специальность в онлайн-университет? Разбираем, как стать ui ux дизайнером, когда все вокруг так стремительно развивается.
Шаг 1. Начните использовать ежедневно самые свежие версии топовых приложений
Черпаните побольше современной UX-культуры и зажгитесь предметом. Вот подборка приложений, которые важно пощупать на деле. Все они уже стали культовыми, каждый из брендов силен особой культурой и атмосферой, признан на международной арене и притягивает пользователей со всего мира. Это бренды, которых ежедневно касается миллионная аудитория:
Desktop: Figma, Jetbrans
Веб-приложения: Stripe, Mailchimp, Intercom
Мобильные приложения: Uber, Airbnb, Spotify
Шаг 2. Изучите лучшие UX-кейсы и международные практики
Понаблюдайте в работе за профессиональными командами. Распечатайте инсайдерские фото их процессов работы, покрутите в руках.
Дизайн-платформа Uber: https://ux-journal.ru/dizajn-platforma-uber.html
UI/UX кейс: Uber Navigation — дизайн приложения для таксистов: https://ux-journal.ru/uber-navigation-dizajn-prilozheniya-s-navigatsiej-dlya-teh-kto-taksuet.html
Проектирование нового Foursquare: https://ux-journal.ru/proektirovanie-novogo-foursquare.html
UI/UX кейс: Продуктовый дизайн панели инструментов Stripe под iPhone: https://ux-journal.ru/produktovyj-dizajn-paneli-instrumentov-stripe-pod-iphone.html
Шаг 3. Возьмитесь за первый проект и сделайте его вместе с наставником
Подыщите курс с легким стартом и ассортиментом интересных и жизненных проектов. К примеру, курсы UX/UI на Breezzly. Задизайните веб-сервис, приложение для смарт-часов или мобильное приложения для бронирования кафе, а затем уже погружайтесь дальше через очные курсы с командной работой (поможет сильнее прочувствовать весь дух профессии).
Шаг 4. Изучите ТОП-3 книги по UX (международный ТОП)
Мои первые три книги, которые прямо зашли и разожгли интерес к ux-дизайну:
Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия
Не заставляйте меня думать. Веб-юзабилити и здравый смысл. 3-е издание
Интерфейс. Основы проектирования взаимодействия | Купер Алан, Рейманн Роберт М.
Эти книги хороши живой подачей, обилием иллюстраций, алгоритмами, схемами, кейсами и проверенными боем на международном рынке советами.
Шаг 5. Распечатайте процесс работы UX-дизайнера и пощупайте каждый этап как можно раньше
Ваша программа максимум – пощупать каждый этап процесса работы UX-дизайнера. Это карта вашего путешествия в мир продуктового (UX/UI) дизайна. Кстати, именно по этой карте работают международные компании. Опытный UX-дизайнер назвал бы эту карту CJM или Customer Journey Map.
Процесс проектирования и разработки цифрового продукта (UX Process, User Centered Design).
Шаг 6. Выпишите TOP-10 UX навыков и поразмышляйте о графике тренировок
На тему навыков есть содержательная статья TOP-10 UX навыков, чтобы начать работать UX дизайнером. Возьмите и распечатайте этот чек-лист. А дальше, к примеру, качайте раз в квартал по навыку. В этой статье автор задает амбициозную цель по горизонту развития (а мы же дизайнеры так и любим!).
Шаг 7. Вступите в самые популярные UX-сообщества и задайте самый волнующий вопрос
Есть три самых насыщенных информацией сообщества в рунете на тему продуктового дизайна. Вступайте же:
UxJournal | Максимально полезные статьи для дизайнеров: https://www.facebook.com/groups/uxjournal
UxClub | Форум практиков продуктового дизайна: https://www.facebook.com/groups/uxclubs
Дайджест продуктового дизайна: https://www.facebook.com/groups/pdigest
Шаг 8. Пройдите практику на боевом продукте
Первые 7 шагов – это предподготовка. А вот эти три проекта могут стать хорошим планом ближайших высот. Каждый пункт – это серьезный профессиональный рост.
Выявить барьеры в существующем продукте и предложить интерактивный прототип, который улучшит UX для определенного сегмента (без потери качества для других);
Собрать новый модуль для существующего продукта с нуля, применив полный процесс проектирования;
Собрать продукт с нуля и воплотить его вместе с командой;
Шаг 9. Опубликуйте портфолио
Упакуйте достижения в портфолио и доработайте подачу по обратной связи от профи в сообществе или руководителей в компаниях, где хотите работать (можно через мессенджеры, а лучше личные встречи). Это поможет вам почувствовать себя увереннее и двигаться к новым высотам (Минутка мотивации!).
Вы можете собрать подробное портфолио в Readymag, Tilda или Webflow:
Важный момент. При подготовке портфолио фокусируйтесь на демонстрации навыков, умений и подхода, а не только на классной и интересной картинке. И старайтесь следовать принципу “один экран/слайд – одна мысль”.
А еще Readymag, Tilda и Dribbble поддерживают установку счетчика веб- аналитики, так вы сможете видеть с каких стран/регионов и в каком количестве каждый день к вам заходят новые клиенты и чем они интересуются.
Шаг 10. Совершенствуйтесь: осваивайте новые инструменты, качайте навыки, пробуйте новые методы
Выработайте собственные ритмы: в квартал по навыку, в неделю по книге, в год по рубежу, в пятилетку по проекту. Мне такой распорядок помогает периодически оценивать прошлое и еще более драйвово проводить время в настоящем и даже моделировать будущее (а мы же дизайнеры и любим моделировать!).
Помните, инструменты приходят и уходят, культура достижений, команда и эмоции остаются. Берите новые высоты, пробуйте и внедряйте новые инструменты, собирайте единомышленников, растите и развивайтесь.
ПРАКТИКА
ТЕМА 1
● Доклад: «Брендбуки и гайдлайны известных фирм» (PowerPoint, Canva)
● Кейсы на анализ художественного замысла дизайна сайта (выбор цветовой гаммы по тематике сайта, подбор шрифтов по содержательному наполнению, подбор визуальных элементов в соответствии с инфографикой и т.д.
Обсуждение кейсов (карта понятий)
● Кейсы на анализ художественного замысла дизайна сайта (выбор цветовой гаммы по тематике сайта, подбор шрифтов по содержательному наполнению, подбор визуальных элементов в соответствии с инфографикой и т.д.
Обсуждение кейсов (карта понятий)
ТЕМА 2
Практическое задание: выбрать трендовый цвет года, анализируя сервис Behance, и привести примеры сайтов с использованием его сочетаний
● Творческая работа «Шрифтовые сочетания»: создать рекламную шрифтовую композицию
● Практическая работа «Правило весов в композиции»: скомпоновать главный экран сайта, используя различные приемы композиции
● Творческая работа «Шрифтовые сочетания»: создать рекламную шрифтовую композицию
● Практическая работа «Правило весов в композиции»: скомпоновать главный экран сайта, используя различные приемы композиции
ТЕМА 3
● Практическая работа в доске Miro: «Платформы для работы веб-дизайнера»
РАБОТЫ ОТПРАВЛЯЙТЕ НА ПОЧТУ.
OLAYALEX777@GMAIL.COM
