Всем привет!

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

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

Насмотренность

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

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

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

Ещё один важнейший элемент веб-дизайна – это типографика, то есть оформление текстового материала. Мне особенно запомнились отличия работы с кириллицей и латиницей. В частности, в силу того, что в кириллице слова статистически длиннее, чем в латинице, многие визуальные решения не могут быть в принципе такими же лаконичными. Более того, в кириллице гораздо больше выносных элементов (это, например, хвостики у букв «ц», «щ», «у», точки над «ё» и так далее). В латинице таких элементов существенно меньше, и это тоже влияет на визуальное восприятие. При всем при этом именно кириллица сейчас переживает период возрождения и популярности на мировом рынке. Многие бренды типа Гоши Рубчинского сделали кириллицу настоящим трендом.

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

Figma: от основ до дизайн-макетов

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

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

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

Дальше мы вышли на новый уровень освоения Figma и стали работать с так называемым Auto Layout. Это технология, которая создает динамические фреймы, реагирующие на содержимое. Она существенно облегчает работу с макетом и минимизирует ручной труд. Здесь же мы детальнее изучали компоненты и так называемый UI-kit – набор готовых решений для интерфейса, элементов, с которыми взаимодействует пользователь.

После этого мы перешли к созданию интерактивных прототипов. Они моделируют взаимодействие пользователя с создаваемым макетом. Например, с помощью прототипа можно проверить смену состоянии кнопки при вводе пароля. Также в прототипе есть режим удаленного наблюдения, благодаря которому вы можете видеть пользователя, тестирующего ваш интерфейс, но при этом не стоять у него «над душой».

В этом же блоке мы рисовали макеты под руководством приглашенного эксперта. Было очень удобно, что какие-то действия можно было просто повторять за ней, отрабатывать и прояснять. Помимо этого, мы также учились делать анимацию. Благодаря ей создаются, например, интерактивные кнопки типа «включение-выключение». В этом же блоке мы рассмотрели понятие брендбука, который оказался гораздо более многогранным и содержательным, чем я предполагал. И на мой взгляд, брендбук – один из самых сложных продуктов для дизайнера.

Создание визуального дизайна

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

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

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

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

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

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

Создание портфолио

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

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

Создание сайтов на Tilda

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

Мы начали с разбора стандартных блоков, и уже с их помощью создали свою первую страницу. В первую очередь мы создали меню, работали с заголовком и логотипом. После этого создавали блоки «О проекте», «Преимущества», «Отзывы», «Контакты», «Форма». На отдельном воркшопе мы с экспертом разбирали созданные нами лендинги и получили по ним обратную связь. Только после этого мы начали заниматься глубокими настройками сайта, а именно ссылками, навигацией, кнопками и создавали кликабельные контакты.

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

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

Знакомство с графическими редакторами для дизайнера

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

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

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

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

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

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

Здесь же мы говорили о том, что необходимо понимать мотивы пользователя, чтобы сделать продукт максимально удобным для него. Для этого используется такое понятие, как JTBD (Jobs To Be Done) – это фреймворк, который помогает командам понять, чего пытается достичь клиент, используя продукт компании. Для точного понимания этого необходимо проводить полноценные исследования.

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

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

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

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