book-open 1 test
Курс «Интро в веб-дизайн»

Что должен уметь веб-дизайнер? Главные навыки веб-дизайнера | Глава 2

В прежние времена дизайнер сайта сам и проектировал, и кодил, и запускал сайт онлайн. Но тогда не было множества веб-приложений, а дизайн ограничивался тем, что можно было создать в рамках табличной верстки в HTML.
Иллюстрация tubik: https://dribbble.com/shots/5593389-Well-Done-UI-Illustration

← Назад | Продолжение (Глава 3) →

(Перед вами бесплатный курс Рафаля Томаля «Интро в веб-дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

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

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

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

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

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

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

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

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

Графический дизайнер — очень широкое понятие. Раньше граф дизайнер совмещал в себе все роли, которые я перечислю ниже. Для многих людей за пределами дизайн-индустрии, любой UI/UX-дизайнер, веб-дизайнер или бренд-дизайнер — это просто “графический дизайнер”. Так что если не хотите долго объяснять свою должность на очередном семейном ужине, просто говорите, что вы графический дизайнер.

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

Визуальный дизайнер

Рис 2.1: Визуальный дизайнер создает макеты сайтов, веб-приложений, мобильных приложений, а также руководства по стилю, шаблоны и т.п. Все примеры на картинке — работы с CreativeMarket.com.

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

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

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

Бренд-дизайнер

Рис 2.2: Бренд-дизайнер в основном создает логотипы, руководства по стилю, руководства по брендингу, цветовые палитры, руководства по шрифтам, иконки, иллюстрации и другие элементы визуальной айдентики. В примерах выше — работы Benjamin GarnerEddie Lobanovskiy и Claire Coullon.

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

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

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

Дизайнер интерфейсов (UI)

Рис 2.3: Дизайнер пользовательских интерфейсов создает макеты экранов приложений и руководства по стилю в интерфейсе. Примеры выше — работы Regen G.Cuberto и Greg Dlubacz.

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

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

UX-дизайнер

Рис 2.4: UX-дизайнер проводит исследования, интервью с пользователями и клиентами, создает пользовательские истории, пути пользователя (user flow), вайрфреймы и т.д. Примеры выше — работы Alex SailerJanna HaganAutumn Mariano, а также мои собственные проекты.

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

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

Работа по проектированию пользовательского опыта — это исследования пользователей, интервью с клиентами, определение проблем, поиск решений, рисование путей пользователя (user flows) и вайрфеймов.

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

Веб-дизайнер

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

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

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

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

— Анастасия Свеженцева, веб-дизайнер и продуктовый дизайнер (UX/UI)

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

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

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

Дизайнер-единорог

Рис 2.9: Дизайнер-единорог умеет дизайнить и кодить — и всегда сварганит чашечку чудесного кофе.

Ок, это не настоящая должность, а скорее внутрячковая шутка tech-стартаперов. Это такой универсал, который владеет и визуальным дизайном, и UI/UX, и проектированием взаимодействий, и продуктовым дизайном — ну и кодить конечно тоже умеет здорово.

Именно за этот невероятно редкий набор компетенций он и получил свое гордое название “дизайнер-единорог”.

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

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

Из-за обилия информации, может показаться, что освоить дизайн сложно. Сфера развивается так стремительно, постоянно появляются новые роли — например, дизайнер дополненной реальности или дизайнер 3D моделей.

Не ставьте себе цели изучить все: учитесь с умом и концентрируйтесь на том, что действительно хотите делать. Если вас привлекает цифровой дизайн (сайты, приложения, веб-инструменты и т.п.) — уделяйте максимум внимания визуальному и UI/UX дизайну.

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

Ни больше, ни меньше.

(с) Над переводом работали: Ольга Жолудова и Анастасия Свеженцева.


← Назад | Продолжение (Глава 3) →

Курс «Интро в веб-дизайн»