Если хотите делать сайты, но писать код для вас сродни походу на Эверест или прыжка с парашютом — присмотритесь к профессии веб-дизайнера. Он прикладывает руку к созданию сайтов: без программирования и приёмов рисования.
Что делает веб-дизайнер
Веб-дизайнер — это специалист в IT, который в команде делает сайты и мобильные приложения. Он рисует лендинги, многостраничные сайты, макеты интернет-магазинов и веб-приложений. Оформление Netflix или сайта Rozetka — работа веб-дизайнера.
Представим, что сайт — это витрина. Задача веб-дизайнера — сделать так, чтобы эта витрина была удобной, интересной и полезной. Рассмотрим на примерах.
Допустим, мы продаём велосипед на OLX. Чтобы найти доску объявлений, заходим в браузер и вводим в поисковой строке «интернет-маркетплейс» или «OLX».
Для нас важно найти сайт OLX в поисковой системе. Лучше — если это будет первая строчка списка.
Жмём Enter, открывается панель Google-поиска по запросу — поисковая выдача. В ней список ссылок — первая OLX. Кроме ссылки поисковик показывает тематические категории: авто, ручная работа, спорт и туризм. Можно сразу кликнуть и перейти на избранную категорию.
Справа — информация о компании, логотип. Дополнительное подтверждение, что мы не ошиблись и идём на OLX, а не на «Новую Почту».
Быстро, удобно и без навязчивых деталей — так работает веб-дизайн в поисковой системе.
Кликаем и переходим на сайт компании. Здесь — совершенно новый дизайн: меню на чёрном фоне, большая строка поиска по центру, а внизу — готовые категории товаров. Удобно нажать на поиск и ввести «велосипед». Допустим, чтобы купить ребёнку или узнать среднюю цену на похожий с нашим велосипед.
Это — дизайнерское решение OLX. Компания сделала сайт простым и интуитивно понятным. Человек, далёкий от интернета и дизайна, продаёт ключи, свёрла или велосипеды — без помех и писем в техническую поддержку. Так работает веб-дизайн на доске объявлений — для удобства клиента и экономии времени OLX.
Пример работы в портфолио веб-дизайнера на площадке Dribbble
Допустим, мы продали велосипед. На прибыль покупаем место в онлайн-хранилище. Например, чтобы сохранить мемы с котиками.
Нам попался один из таких сайтов. Фото вверху — веб-дизайн рекламной страницы онлайн-хранилища. Видим разные цвета, расположение кнопок, картинки и графику. Выглядит просто и понятно. Это пример продуктового веб-дизайна.
Задача веб-дизайнера в Интернете — сделать читателю привлекательный вид сайта — с графическими элементами. А также интуитивно простой и понятный интерфейс. На таком сайте читатель понимает назначение кнопок, почему здесь такая картинка или за что отвечает текст.
Часто архитектура сайта начинается с макета — чёрно-белого наброска. После на макет веб-дизайнер накинет цвет, картинки и текст. Без макетов сайты не делают.
Веб-дизайнер — архитектор для сайтов. Он придумает расположение элементов и цвета, картинки — так, чтобы это было удобно посетителям сайта. А владелец сайта получал выгоду от продукта: клиенты находят нужный товар, страницу блога или могут прочитать важный текст, вроде выгод покупки.
Он не программирует, а создаёт архитектуру. Если говорить проще – он рисует картинку сайта. Дальше программист с помощью кода переносит картинку на рабочий сайт. Дополнительно настраивает товары, кнопки, ссылки и другие интерактивные элементы.
Когда обращаются к веб-дизайнеру
К веб-дизайнеру приходят, когда клиенту нужен уникальный, полезный и отзывчивый дизайн сайта.
Уникальный — для сайтов придумали много готовых шаблонов. У них есть блоки для текста, картинки и визуальные элементы — линии, стрелки, кружочки или прыгающая собака на главном экране. К веб-дизайнеру приходят, чтобы изменить элементы шаблона или нарисовать свой. Задача уникального веб-дизайна — отличаться от конкурентов.
Одно из правил сборки сайтов — строить макеты по специальной сетке и в колонках
Полезный. Если разместить кнопку в неправильном месте, посетитель её не найдёт. Товар не купят, статью не прочитают — клиент потеряет читателя. Веб-дизайнер делает всё по правилам расстановки элементов на сайте. Задача — сделать комфортный для читателя сайт: в несколько кликов оформить заказ или глазами найти нужную кнопку.
Отзывчивый — веб-дизайн делают удобным для разных экранов: телефона, планшета или компьютера. Сложность в разных разрешениях экрана: если нарисовать версию только для ПК, пользователям мобильных будет неудобно. Они пойдут туда, где удобно.
Вот как выглядит рабочий процесс веб-дизайнера:
-
Встретиться с заказчиком и получить Техническое задание. В компании его выдаст менеджер или арт-директор. В ТЗ, как правило, есть описание продукта, примеры (референсы), маркетинговое исследование, сроки и цена проекта.
-
Вникнуть в задачу. Например, изучить референсы и сайты конкурентов. Найти лучшие в сфере решения и взять для задачи.
-
Создать эскизы. Это не готовый сайт, а набросок — с применением фишек конкурентов, референсов, стилей, цветов и картинок. Вроде черновика для автора.
-
Создать прототип. Помните о чёрно-белой расстановке элементов? Это здесь. Прототип — это предпоследний шаг перед оформлением сайта в цвете и картинках.
-
Разработка готового макета. Сделать картинки сайта или платформы под требования клиента. Подготовить макеты в нужных форматах для работы программиста: ПК, планшет, мобильный телефон. Если проект большой — написать ТЗ для разработчика, чтобы тот не заблудился.
Визуально процесс работы веб-дизайнера выглядит так.
Что должен уметь веб-дизайнер
Главное для специалиста — дизайн в веб-среде: работа с сайтами, сервисами, приложениями.
Остальное нужно знать в основах. Не нужно писать рекламные тексты или досконально верстать сайты. Достаточно пройти вводные курсы, чтобы разобраться в сфере и правилах. Копирайтеру подскажете, где текста много и он не поместится. А неопытному верстальщику — как перенести блок или кнопку, если не получается.
Профессиональные навыки можно освоить во время обучения и практики:
-
Редакторы для дизайна. Лучший — Figma по двум причинам: в нём показывает готовый код стилей для верстальщика и редактор делали для веб-проектов: настройки для макетов, перенос картинок в два клика, работа на одной странице в команде. Дополнительно учат графические и фоторедакторы, например Adobe Illustrator или Photoshop.
-
Основы дизайна: композиции, перспективы, типографики и цветовая палитра.
-
Основы дизайна интерфейсов (UX и UI-дизайн) — понимать, куда в сайтах размещать элементы и почему это правильно, удобно и полезно для посетителей.
-
Основы анимации — сейчас популярны сайты с эффектами, вроде мерцающих кнопок, всплывающего текста или движущихся картинок. Их может сделать и веб-дизайнер.
Гибкие навыки:
-
Умение работать в команде. Сайт — это не работа одного: маркетолог придумывает стратегию сайта, копирайтер пишет рекламный текст, аналитики подключают счётчики просмотров сайта, верстальщики переносят сайт. Чтобы сайт получился — с ними нужно общаться.
Иногда программиста может заменить и веб-дизайнер. Для этого пользуются визуальными редакторами сайтов. В нём можно перенести картинку в отзывчивый сайт без знания кода. Редактируешь, как в Фотошопе, а получается готовый продукт. Быстро и удобно.
-
Умение общаться с клиентами. Чаще всего клиенты могут не разбираются в дизайне и вебе. Им нужно доходчиво рассказать и найти верное решение: по бюджету, времени и потребностям клиента.
-
Насмотренность — опытный дизайнер на глаз может определить, когда картинки или шрифты не подходят и нужно поискать другие варианты. Для этого он много смотрит на других — собирает удачные примеры. А в неудачных прокачивается ищет недочёты, чтобы не попадаться в своих проектах.
-
Усидчивость — работа над макетом может растянуться на пять-шесть часов. А ещё время на связь с командой или клиентом. Остаётся перерыв на перекусы и вечерний отдых. В начале пути придётся работать побольше — параллельно с обучением делать портфолио. Всё это требует терпения и умения долго сидеть за компьютером, быстро варить кофе и ждать ответа коллег и клиента.
Без портфолио в дизайне перспектив мало. Разве что работать стажёром в студии.
Сколько за это платят
В среднем зарплата по вакансии «Веб-дизайнер» в Украине — 900 долларов. Стажёры получают около 300-350 долларов.
Если много времени — можно работать на компанию и на фриланс-бирже. Например, пойти стажёром в местную студию и брать заказы на Upwork. Тогда к 12 тысячам добавляют ещё 150-700 долларов. Вилка цен отличается скорости поиска заказа и платежеспособности клиента.
В местных дизайн-студиях не засиживаются, а переходят на фул-тайм фриланс или работу в международной компании. Здесь платят от 1000 долларов и выше. Всё зависит от самопрезентации, портфолио и требований вакансии веб-дизайнера: одним нужны специалисты на шаблоны сайтов — это дешевле. Другим — дизайнеры на многостраничные сайты и веб-сервисы.
Куда растёт веб-дизайнер
Прокачиваться можно в двух направлениях: горизонтально и вертикально.
Горизонтальный рост — продуктовый или проектный менеджер, дизайнер продуктов или разработчик. Чтобы двигаться горизонтально, нужно учиться в новых сферах, вроде управления командой или Front-end разработке. Веб-дизайн послужит отправной точкой: научитесь работать с сайтами, поймёте принципы дизайна в Интернете, познакомитесь с командной работой и сферой обслуживания.
Можно расти вертикально — стать арт-директором в компании, открыть свою дизайн-студию или возглавить удалённую студию, если работаете в разных городах. Для этого нужно развивать навыки управления командой и проектами, активно включаться в бизнес-процессы и следить за трендами рынка.
Как стать веб-дизайнером
Книги — дают базу для дизайна, композиции или размещения элементов в вебе (UX-дизайна):
-
Познакомиться с основами и современной культурой веб-дизайна — «Бесплатное руководство по Основам Web-дизайна» Рафаля Томаля.
-
Прокачать мышление через графику — «Визуальное мышление. Как продавать свои идеи при помощи визуальных образов», Дэн Роэм.
-
Искать идеи для веб-дизайна — «Эмоциональный веб-дизайн» Аарона Уолтера.
-
Для карьерного роста в студии или продуктовой компании — «Дизайн-мышление в бизнесе».
На Dribbble есть отдельная категория — Web Design. Вводим в поиске нишу сайта и смотрим решения коллег.
Где смотреть примеры коллег:
-
Pinterest — по запросу Web Design примеров больше, чем на похожих сайтах.
-
Design Awards — ежегодная премия в веб-дизайне. Смотрим крутые работы коллег, собираем вишенки на торте и вдохновляемся.
Здесь веб-дизайнеры размещают портфолио с проектами: от одностраничных сайтов до полноценных продуктовых многостраничников и интернет-магазинов. Можно подсмотреть удачное решение, найти в своих работах ошибки. Или поучиться на чужих.
Профессиональное обучение получают на онлайн-курсах. Не нужно ходить в школу, искать наставника — всё под рукой: от записанных уроков до проверки домашних заданий. На обучающей программе «Компьютерная графика и дизайн» IT STEP учим веб-дизайнеров работать с проектами в диджитал, командой и клиентами.
Студенты получают лучшие домашки в виде проектных работ. А ещё сертификат о выпуске IT STEP Academy. Присоединяйтесь!.
Резюме: кто такой веб-дизайнер
Веб-дизайнер — это специалист в IT, который рисует сайты, веб-приложения и мобильные приложения. Он работает с графикой и интерфейсом. Не рисует, как графический дизайнер. И не программирует — это задача верстальщика.
Хороший веб-дизайнер может разобрать ТЗ, сделать первичный анализ конкурентов и посетителей. Соберёт макет и переведёт в готовую работу.
Чаще всего веб-дизайнеры собирают макеты в Figma. После верстальщик сам или с помощью дизайнера переносит рисунки на движок — сайт или приложение.