Графический дизайн в диджитал — Дизайн-кабак

01

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

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

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

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

Как изучать

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

1. Изучить Sketch / Figma
   Оба эти инструмента очень сильно отличаются от фотошопа, иллюстратора и индизайна, и заточены специально под проблемы разработки. Интерфейсы аппов выглядят очень просто (после Adobe-то), но не останавливайтесь на общем понимании как создать прямоугольник и покрасить его: изучите плагины и разные интеграции, вымучайте сетку, прикрепления к краям, поделайте прототипы, создайте библиотеку компонентов и стилей и тд. По результату вам уже станут понятнее ограничения, с которыми придется работать.
2. Сделайте сайт на Тильде
   Этот не совсем очевидный способ углубит понимания основных ограничений: уделите особое внимание адаптиву зеро блоков и интеграцию своего CSS (можно брать в сообществах и смотреть как они работают). Органичения, которые вы там встретите, будут очень близки к тем, что встретит front-end разработчик при работе с вашим проектом. Для тех, кто хочет покапаться глубже предлагаю изучить еще и Webflow. Оговорюсь, что Readymag для этих целей не подходит, потому что позволяет по сути сделать сайты-слайды в интернете, хотя он подойдет дальше для изучения анимации.
3. Изучите Principle / Flinto
   Наблюдала, что многие граф дизайнеры не используют возможности анимации, а делают сайт как буклет: можно распечатать его на принтере и прочитать красиво поданную информацию — ничего не изменится. Но возможности веба шире. Их хорошо демонстрируют Principle и Flinto, сложных штук там не сделать, но 80% анимации в вебе как раз такая. Изучите добросовестно, покопайтесь в сообществах, поломайте законы этих аппов и вы уже не сделаете что-то совсем возмутительное для реального проекта. Или хотя бы будете понимать с какой идеей вам надо идти обсуждать сроки и возможность реализации с разработчиком. Забудьте на время After Effects, вам не на киностудию сайт отдавать потом, переборщите точно.
4. Пройдите HTML Academy
   Вам не нужно учиться верстать, чтобы делать сайты, но и полностью игнорировать эту сферу нельзя. Необходимо говорить более-менее на одном языке с коллегами, готовить понятные спецификации, представлять какая фича будет сколько делаться по времени и чем ее можно заменить если надо быстрее — без этого ваши проекты будут оседать в портфолио или сильно урезаться на выходе. Помните, что HTML и CSS это просто логичное и простое описание графики, которую вы создаете.

На чем это все изучать: на сайтах, которые вам понравились. Просто перерисовывайте их. Увидели симпотичный прелоадер в слак? Сделайте такой же в Principle. Посмотрели на крутой сайт в портфолио агентства — разложите на компоненты в Figma и соберите заново. После делайте сайты для проектов, фирменный стиль которым вы уже делали.

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

Приведу цитату Сергея Сурганова из лекции для Bang Bang Education:

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

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

Но важно понимать, что на Site of the Day попадает 1 сайт из тех десятков тысяч, которые создаются в этот день. Но это не значит, что конкуренция большая —нет —просто не всем проектам это нужно. Сайты на Awwwards это эксперименты, выламывание рук разработчикам и расширение границ возможного. Вы выйдете на этот уровень потом, если захотите, но поверьте, люди, которые делают проекты под конкурсы, прекрасно знают какие ограничения нужно ломать, как и когда. Ваша задача сначала просто их увидеть.

UX в коммуникационных сайтах

Я здесь хочу остановиться на важном моменте — UX (user experience), который очень всех интересует и прекрасно продает обучающие курсы. В корпоративных сайтах и лендингах под UX понимаются: логичная, не скрытая навигация, ясная структура, понятные тексты, удобный адаптив и расположение основных call to actions, а также попадение в целевую аудиторию и передача ценностей бренда через визуал и анимации.

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

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