Кто такой Front-End дизайнер и зачем он нужен?
Я начинал не как фронтенд-дизайнер, но моя история довольно проста. Когда я только начинал работать с дизайном, реализация таких вещей, как скругленные углы, представляла собой довольно сложную задачу. Сейчас же все это можно сделать с помощью всего одной строки CSS. Бывали случаи, когда я просил своих коллег реализовать что-то для меня, а в ответ получал: "Почему бы тебе не попробовать сделать это самому? В конце концов я попробовал, и так я научился кодить.
Сейчас мне кажется, что это был естественный шаг вперед на моем пути веб-дизайнера.
Но кто такой front-end дизайнер? Зачем он нужен в вашей команде? Какими навыками должен обладать хороший фронтенд-дизайнер? Вот несколько ответов, которые я получил, основываясь на собственном опыте.
Кто такой front-end дизайнер?
Термин front-end designer является достаточно новым для мира программирования. Он возник из необходимости назвать специалиста, как графический дизайнер, разбирающийся в front-end разработке. Front-end-дизайнеры сочетают в себе ключевые компоненты обеих профессий и живут между миром пикселей и инженерии:
- они понимают принципы и лучшие практики UX
- у них есть эстетическое чутье
- умеют писать на JavaScript
- они понимают возможности фронтенд-разработки.
Фронтенд-дизайн предполагает создание HTML, CSS и презентационного JavaScript-кода, из которых состоит пользовательский интерфейс.
Навыки фронтенд-дизайнера
Как уже говорилось выше, фронтенд-дизайнеры сочетают в себе навыки фронтенд-разработчика и дизайнера. Самое главное - необходимо иметь твердое понимание:
CSS И HTML
Самые основные строительные блоки веб-кодирования. Для создания статических веб-сайтов фронтенд-дизайнеры осваивают кодирование с помощью HTML и CSS. HTML используется для создания основы веб-страницы, а CSS - для создания макета, цветов, шрифтов и других стилей.
JavaScript
Позволяет добавлять на сайты как простые функции, так и создавать суперпродвинутые приложения. Большинство front-end-дизайнеров знакомы с такими JS-фреймворками, как Ember или React, но это не означает, что они разрабатывают на их основе продвинутые функции. Лично я работал с React, Ember и Vue, но не являюсь мастером ни в одном из них - достаточно, чтобы ориентироваться и знать, что возможно в рамках этой технологии. То же самое касается бэкенда, например Ruby on Rails, с которым я работаю с 2012 года. Это не означает, что я являюсь backend- или full-stack-разработчиком. Область охвата слишком широка, невозможно быть в курсе всего.
Зачем нужен frontend-дизайнер?
Зачем же нужен frontend-дизайнер, если есть frontend-разработчики и дизайнеры? Фронтенд-дизайнер позаботится о том, чтобы процесс реализации дизайна прошел как можно более гладко. Если между проектированием и реализацией происходят какие-либо изменения, то это улучшение, а не упущение/недосмотр. Наличие front-end-дизайнера также положительно скажется на:
Улучшение дизайна. Дизайнеры часто виноваты в том, что добавляют 24 различных размера шрифта, 30 оттенков серого, когда люди способны различить только 5 из них, или добавляют интервалы, которые не соответствуют никаким правилам. Вместо font-size: 36px будет 35, 36, 37px в зависимости от того, как дизайнер случайно нажмет на него. Дизайнеры иногда живут в идеальном пузыре своего дизайна и охватывают только идеальные сценарии, в то время как разработчикам зачастую все равно, будет ли отступ 10 или 20px. Хороший front-end-дизайнер объединяет эти два мира и создает идеальный дизайн.
Реализация. Недоброжелатели утверждают, что реализация собственных идей приводит к созданию худших дизайнов, поскольку вы знаете, сколько работы предстоит сделать. Лично я бы сказал, что это проблема подхода человека, а не того, что он является frontend-дизайнером. Со мной такое случалось слишком часто, я изгибался, когда создавал дизайн. Я знаю, что можно сделать с помощью простого CSS или как довести его до предела, и я знаю, когда мне нужна поддержка JS.
Иногда гораздо быстрее сделать что-то на CSS и представить изменения клиенту, чем воссоздавать все в Sketch или любом другом инструменте проектирования.
Будучи человеком, который создал дизайн, реализовать его гораздо проще, поскольку вы уже знаете все переменные и можете гораздо быстрее преобразовать их в код, без необходимости все измерять.
UX. UX лучше, поскольку мы обращаем внимание на контрастность, размер кнопок и шрифтов, расположение элементов или согласованность. Фронтенд-дизайнер, безусловно, сможет провести аудит UX и обеспечить первоклассный внешний вид.
Если заглянуть на сайт dribble, то можно заметить, что многие проекты там не учитывают ни доступность, ни удобство использования. Это отличное место для вдохновения, но многие из них не будут работать в реальной жизни.
Выводы
Фронтенд-дизайнер - это тот, кто обеспечивает хороший пользовательский опыт, используя как отличный визуальный дизайн, так и код. Они выступают в роли связующего звена между дизайном и разработкой, помогая удерживать кирпичики на месте.
Несмотря на то, что не каждый дизайнер должен уметь писать код, полезно понимать основы его работы, чтобы создавать более качественный дизайн и более эффективно общаться с разработчиками. Знание принципов работы HTML и CSS поможет лучше понять ограничения, связанные с разработкой веб-приложений.