Для крутого дизайнера недостаточно просто красиво передвигать картинки. Широкий кругозор, прокаченная коммуникация с коллегами из смежных сфер, знание топовых инструментов — вот что определяет специалиста в крупной компании. Разбираемся на примере верстки, что должен уметь дизайнер и зачем.
Быть T-shaped дизайнером
Современные IT-компании нанимают T-shaped специалистов, которые гармонично сочетают широкий кругозор с углубленной экспертностью в одной из областей. T-shaped people прекрасно коммуницируют с профессионалами из смежных сфер, при этом обладая достаточным авторитетом в своей отрасли.
Ключевые обязанности UI/UX-дизайнера:
Анализ клиентов и конкурентов
Исследование пользователей по методологии UXD
Архитектура и бизнес логика
Каркасное моделирование
Тестирование и проверка гипотез
Координация с разработчиками и бизнесом на всем этапе разработки
Брендинг и костомизация
Визуальный дизайн и цвет / колористика
Типографика и правила сетки по UIkit
Дизайн исследования и анализ рынка и трендов в дизайне
Интерактивность и анимация
Прототипирование пользовательского интерфейса
Реализация с разработчиками и дизайн чек результата
В создании диджитал-продуктов участвуют аналитики, дизайнеры, front-ы, back-и, тестировщики, UX-райтеры. Чтобы сделать качественный продукт, недостаточно быть хорошим дизайнером, нужно понимать принципы верстки, разработки, принимать участие в аналитике и тестировании.
IT-специалисты, которые развивают свои знания во всех процессах создания диджитал-продуктов ценятся выше, больше зарабатывают, тратя меньше времени на работу
Чем больше знаний у участников команд, тем качественнее и быстрее проходит коммуникация между ними. «Прокаченные» команды говорят на «одном языке», запускают продукт быстрее, делают его крутым и с минимумом ошибок.
Не просто понимать, быть верстальщиком
Сегодня участие дизайнера необходимо во всех процессах разработки. Недостаточно просто нарисовать красивую картинку, нужно понимать, как встроить ее, как будут вести себя блоки при перестроении. Понимая, как будет реализован продукт, дизайнер делает более реалистичные и практичные интерфейсы.
Готовый дизайн — не окончательный вариант. Он гибкий, его можно менять и адаптировать под технические ограничения системы без утраты его изначальной сущности. Такие многократные и неизбежные изменения вносит сам дизайнер. Дизайнер-верстальщик в одном лице делает это гораздо быстрее, ведь разработчику не приходится повторно высылать ему макет. Именно в такие моменты часто возникают трения между специалистами.
Но не только дизайнеру нужно понимать верстку. Верстальщику также необходимо иметь компетенции в дизайне. Придавать должное значение качеству картинки, сетке, отступам и типографике.
Какие инструменты использовать для работы с версткой
Конструкторы
Конструкторы подходят для начинающих дизайнеров или владельцев бизнесов. Это сервисы, которые позволяют создавать простые сайты-визитки, лендинги, блоги и небольшие интернет-магазины из набора шаблонов, блоков и инструментов, а также администрировать их без каких-либо специализированных знаний.
Как правило, весь функционал и шаблоны, представленные на этих сервисах, проходят тестирование еще на этапе разработки, поэтому на выходе получается полностью рабочий продукт без багов. Благодаря конструкторам сайтов сложный, долгий и затратный процесс создания интернет-ресурса упрощается в разы. Здесь почти не требуются знания дизайна и верстки. Дизайнер может использовать конструкторы как источник вдохновения.
Сервисы
Сервисы можно разделить на две группы по ключевому функционалу:
Программы, в которых создается непосредственно дизайн. Здесь не получится собрать сайт, но это отличные инструменты для создания компонентов, библиотек для больших проектов, дизайн-макетов и прототипов — Figma, Sketch и др.
Сервисы, которые имеют более расширенный функционал в части верстки. Это такой конструктор с более тонкими настройками и требующий больше знаний. Здесь дизайнер может создать сайт из компонентов и элементов, настроить их, опубликовать и даже администрировать — Webflow, Pixli и др.
Остановимся на Figma и Webflow.
Figma
Мы делаем продукты экосистемы Своё и банковские сервисы Россельхозбанка в Figma. Это лучший сервис для дизайнеров интерфейсов. Его функционал огромен и постоянно расширяется, а возможность добавлять плагины в два клика делает его ещё круче.
Первый и самый главный плюс — Figma бесплатная. Конечно, за определенные финансовые вложения вы получите больше возможностей для командной работы, но и в бесплатной версии сервис выглядит достойно.
В Figma одновременно могут работать и дизайнеры, и разработчики, и PO. Теперь не нужно пересылать макеты, все, у кого есть доступ, могут смотреть их онлайн. Все хранится в облаке, нужен только браузер и интернет. И да, теперь не важно, какая у вас операционная система — Figma работает на Windows, MacOS, Linux.
В приложении Figma можно работать и без интернета, все изменения публикуются при первом подключении к сети. В 2020 году во время пандемии это позволило нам, в Банке, не останавливать процессы и не сбавлять темпы.
Экспорт, импорт, создание не только растровой, но и векторной графики позволяет сделать продукт на выходе быстрее и производительнее.
Возможностей для дизайнеров в Figma много, но вот для верстальщиков она таким набором инструментов похвастаться не может. К тому же Figma не всегда генерирует корректный код. Это один из немногих минусов сервиса. Возможно, в будущем все изменится, и сервис станет полноценным инструментом для всех специалистов.
Плагины для Figma
Количество плагинов в Figma только растет, и они могут сильно упростить работу дизайнера. Есть и такие, которые экспортируют дизайн в код. Например, Emailify HTML Email Builder.
Это конструктор писем в Figma, где много блоков и элементов, из которых можно создать письма с различными целевыми действиями, возможностью добавить видео и ссылки для перехода. Нажав на кнопку экспорта, вы получите две (desktop и mobile) сверстанные HTML страницы.
Из минусов: он не подойдет, если хотите сделать кастомное письмо — нет возможности менять шрифт. По умолчанию используется Arial.
Webflow
Webflow — стартап, который при запуске делал упор на полностью онлайн-работу сервиса почти во всех современных браузерах, где можно создавать, не зная кода. Команда сделала профессиональный инструмент для дизайнеров и продвинутых пользователей, который сразу создает чистый, экспортируемый код для десктопной, планшетной и мобильной версий сайта.
Главная фишка сервиса — большие возможности в настройке внешнего вида блоков, элементов, кнопок, иконок и текста. Можно вплоть до пикселя вымерять расстояния и размер слоев. Сразу при разработке настраивается отображение страницы на различных устройствах. Предусмотрена работа с компонентами: можно настраивать отображение повторяющихся объектов через редактирование только материнского компонента.
В Webflow можно встраивать Google Analytics, Shopify, PayPal, MailChimp и другие сервисы. Это позволит добавить на сайт функционал аналитики, оплаты, настройки рассылок.
Есть и недостатки: в бесплатной версии сервиса можно вести два проекта, количество элементов и функций ограниченно. Для полного доступа потребуется платная подписка. Нужно подключение к интернету. Если вести большие и сложные проекты, сильно возрастает нагрузка на ПК, что замедляет работу.
Webflow находится где-то посередине между полноценным графическим редактором и конструктором сайтов. Это инструмент для верстки здесь же созданных дизайн-макетов. В работе с сервисом нужно понимать правила взаимодействия блоков и элементов, типографику и т.д. Готовых шаблонов немного, большую часть работы придется делать вручную. Нужно знать основы HTML/CSS, чтобы понимать, что происходит при добавлении блоков и их позиционировании, выравнивании текста и добавления отступов. Сервис подойдет для знакомства с кодированием.
Дизайнер и верстальщик — друзья!
В больших компаниях и крупных проектах без дизайнеров и верстальщиков не обойтись. Но и тем, и другим нужно понимать специфику работы друг друга, выстраивать коммуникацию и помогать.
Дизайнеру — оставлять комментарии к макету, показывать больше экранов, так как не всегда верстальщик понимает, что дизайнер имел в виду. Говорить о своих решениях устно. Использовать вместе UI kit и библиотеку компонентов и стилей. Вести проект структурно, а не все экраны на одной странице. Подписывать слои и группы. Группировать слои (или разгруппировать), чтобы удобно экспортировать элементы. Проговаривать историю изменения макетов — иногда верстальщику тяжело понять, что именно изменилось: только отступы или порядок положения элементов в макете.
Верстальщику — быть внимательным к сетке и отступам, типографике, переносам текста и всегда задавать вопросы, если не понятно, что сделал дизайнер.
Мы работаем над одним и тем же продуктом, и каждый специалист преследует цель — сделать его хорошо.
