Кто за что отвечает в веб-разработке: разбираемся в специализациях

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

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

Дизайнер анализирует требования заказчика, смотрит, что предлагают конкуренты, и делает макет будущего сайта или приложения. Его рабочие инструменты — графические редакторы, и это не только всем известный Photoshop. В зависимости от политики компании может использоваться Adobe Illustrator, CorelDRAW или один из редакторов для создания прототипов (макетов) — например, Figma или Sketch.

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

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

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

• UI-дизайнеры ближе к художникам. Итоговый макет сайта придумывают и рисуют именно они.
• UX-дизайнеры ближе к маркетологам и проектировщикам. Их задача — понять потребности пользователей: какие задачи тем нужно будет решить с помощью будущего сайта. Эти специалисты проектируют логические схемы работы с сайтом — так называемый пользовательский путь. Они же тестируют прототипы на целевой аудитории и по итогам составляют техническое задание для UI-дизайнеров.

Если же всем этим занимается один человек, то его можно обозвать не просто веб-дизайнером, а UX/UI-дизайнером.

Верстальщик

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

Верстальщик открывает макет дизайнера в редакторе — например, том же Adobe Photoshop или Figma, скрупулёзно вымеряет все размеры блоков и расстояния между ними, чтобы повторить всё это в вёрстке. Так что хоть сам верстальщик картинки и не рисует, но уметь пользоваться редакторами он обязан.

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

Бедному верстальщику приходится думать не только о том, что у разных пользователей могут быть устройства с разными размерами экрана, но ещё и о том, что будущий сайт кто-то откроет в Google Chrome, кто-то — в Mozilla Firefox, а главбух Иван Васильевич — и вовсе в древнем Internet Explorer, потому что начальство в его организации не дало добро на обновление программного обеспечения.

Крутой спец умеет делать вёрстку, которая будет одинаково выглядеть во всех браузерах и подстраиваться под разные размеры экрана. Если же какую-то функцию невозможно реализовать в старом браузере, пользователь хотя бы увидит понятное сообщение об этом. Так что Иван Васильевич сможет объяснить начальству, что ради этого сайта нужно установить на компьютеры что-то посвежее Windows XP.

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

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

Фронтенд-разработчик

Заполнили на сайте все обязательные поля, а кнопка «Отправить» всё равно недоступна? Или после нажатия злосчастной кнопки страница просто обновилась, а ваши данные никуда не ушли? Похоже, тут замешан недобросовестный фронтенд-разработчик.

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

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

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

Бэкенд-разработчик

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

Если же вы дождались ответа, но вместо своих данных увидели сведения о Васе Пупкине (а вы — не Вася), бэкендер провалился почти наверняка.

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

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

Фулстек-разработчик

Фулстек-разработчик — это универсальный солдат: что называется, и в бэк, и во фронт. Соответственно, всегда и во всём виноват 😀

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

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

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

Что в итоге

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