Как стать веб-дизайнером с нуля

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

Что входит в обязанности веб-дизайнера 

У разных компаний свои требования к специалисту по дизайну. Кому-то нужна только разработка макетов, а кто-то требует их еще и верстать. Как правило, веб-дизайнер:

• Проектирует и создает макеты сайтов, интерфейсы: от разработки концепции до подготовки детализированных прототипов с готовым дизайном.
• Разрабатывает дизайн мобильных приложений, иконок, баннеров.
• Придумывает и внедряет креативные идеи.
• Создавает сценарии работы интерактивных элементов страниц (заставок, баннеров, различных анимаций).
• Готовит макеты к верстке или сам верстает их.

Где могут работать веб-дизайнеры

У веб-дизайнера есть несколько вариантов трудоустройства:

В digital-агентство

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

В крупную компанию

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

Стать фрилансером

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

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

Какими навыками должен обладать веб-дизайнер 

Знать теорию дизайна

Специалисту нужно изучить:

• Основы композиции, чтобы уметь расположить элементы в красивое целое.
• Типографику, чтобы привлекательно вписать в дизайн тексты.
• Колористику, чтобы правильно подбирать цвета и сочетать их между собой.

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

Понимать принципы UI/UX

В первую очередь дизайн должен быть удобным, а уже затем красивым. Никто не будет любоваться витиеватой шапкой сайта, если на ней не понятно, где меню. Любой интерфейс должен отвечать принципам UI/UX-дизайна, то есть быть понятным.

UI-дизайн (User Interface, «пользовательский интерфейс») отвечает за то, как интерфейс выглядит. UI-дизайнер должен сделать так, чтобы пользователь верно понимал назначение элементов во всех состояниях экрана. Например, что зеленый прямоугольник — это кнопка для заказа. 

UX — это User Experience, «опыт пользователя». Он отвечает за то, как интерфейс работает и насколько удобно с ним взаимодействовать. UX-дизайнер должен создать интуитивно понятный сайт или приложение, в которых пользователю удобно ориентироваться и достигать нужных целей (покупка, регистрация, поиск нужной информации и пр.)

Многие работодатели ищут не просто веб-дизайнера, а специалиста, который разбирается в UI/UX. 

Знать основы маркетинга

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

Знать основы верстки

Умение профессионально верстать сайты нужно не всем работодателям. Однако знание основ верстки (HTML, CSS) позволит говорить с разработчиками на одном языке, а также понимать, возможно ли реализовать то или иное решение с технической точки зрения. Знать программирование веб-дизайнеру не нужно. 

Уметь работать с графическими редакторами 

Веб-дизайнер должен уметь работать со следующими программами:

• Adobe Photoshop: позволяет обрабатывать фото, создавать иллюстрации, прототипы и макеты.
• Adobe Illustrator: также позволяет создавать макеты и интерфейсы, иконки, логотипы и др. элементы.
• Figma: это графический онлайн-редактор, в котором можно создать прототип сайта, приложения.
• Sketch: еще один графический редактор для создания веб- и мобильных интерфейсов.

Иметь насмотренность

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

Кому подходит профессия веб-дизайнера

Дизайн подходит творческим и креативным людям, которые способны уделять работе много часов подряд. Уметь рисовать не обязательно, но лишним не будет. 

Немаловажно обладать такими софт-скиллами, как:

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

Где научиться веб-дизайну: платные курсы

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

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

Яндекс Практикум

А здесь можно изучить UX/UI-дизайн и научиться создавать удобные интерфейсы. Обучение идет в особой среде. Теория находится в интерактивном учебнике. Там же расположены интерактивные задания, в которых нужно проходить тесты, прокачивать насмотренность, выполнять мини-задания для отработки навыков. 

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

Skillbox

Площадка предлагает более 500 видеоматериалов с обратной связью, которые помогут освоить веб- и UX-дизайн. Спикерами являются арт-директоры и дизайнеры крупных компаний: Wildberries, Тинькофф, Райффайзенбанка и др. Есть программа трудоустройства, которая поможет найти первую работу.

Нетология

Обучение длится год, за который вы изучите Figma, Adobe Photoshop и Illustrator. Также вы освоите основы дизайна, научитесь проводить UX-исследование, верстать сайты и создавать лендинги на Tilda.

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

Можно ли учиться на веб-дизайнера в ВУЗе

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

Британская школа дизайна

Это учреждение считается лучшей школой дизайна в РФ. Оно является партнером британского университета Хартфордшира и специализируется на профессиональном образовании в творческой и бизнес-индустрии. 

Здесь можно поступить на обучение в сфере классического дизайна и искусства. Тем, кто хочет получить профессию веб-дизайнера, будет интересно их направление по погружению в UX/UI. Обучение длится 3 месяца, а чтобы на него попасть, нужно пройти онлайн-собеседование. Формат обучения: онлайн-лекции и офлайн-встречи (Москва, ул. Нижняя Сыромятническая, 10).

НИТУ «МИСиС»

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

Форма обучения — очная. Обучение идет 2 года в дистанционном формате. Студенты проходят обязательную стажировку. 

Школа дизайна ВШЭ

Это подразделение Высшей школы экономики, одного из ведущих ВУЗов страны. По дизайну оно предлагает сразу несколько направлений:

• Коммуникационный дизайн: дисциплина, в которой студенты освоят теорию, motion-дизайн и брендинг.
• Дизайн и программирование: это направление позволяет стать дизайнером полного цикла (от создания визуала до верстки на  JavaScript).
• Дизайн и продвижение цифрового продукта: профиль научит не только создавать дизайн продукта, но и вести эффективную рекламную кампанию для его продвижения.

Обучение длится 4 года. Чтобы поступить, нужно сдать ЕГЭ по русскому языку и литературе не ниже, чем на 60 баллов, а также подготовить творческий проект (концепцию цифрового продукта). 

У Школы есть и онлайн-обучение по этим дисциплинам, для которого требуется сдать ЕГЭ и творческий проект на 50 баллов. 

Российский экономический университет имени Г.В. Плеханова

Учреждение предлагает пройти переподготовку по направлению «WEB-разработка и дизайн». Оно позволяет освоить создание визуала, а также верстку на HTML5, CSS и JavaScript.

Обучение идет онлайн. Для  поступления требуется свидетельство получении высшего/среднего профессионального образования.

Как освоить веб-дизайн самостоятельно и бесплатно

Изучить теорию

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

•  «Живая Типографика» от Александры Корольковой. Эта книга нужна всем, кто планирует работать со шрифтами. Ее можно скачать бесплатно в PDF.
• «Школа дизайна: макет» от Ричарда Пулина. Практическое руководство с фундаментальными основами, правилами и примерами составления композиционных схем верстки. 
• «Графический дизайн. Принцип сетки» от Кимберли Элам. Книга позволит научиться основам композиции и проектировать изображения и страницы на основе сетки.
• «Искусство цвета» от Иоханнеса Иттена. Создатель известного цветового круга в своей культовой книге рассказывает о цветовой гармонии и цветовом конструировании. Она подойдет не только дизайнерам, но и иллюстраторам, фотографам и художникам.

Пройти бесплатные курсы 

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

Coursera 

Этот портал англоязычный, но многие материалы имеют русскоязычные субтитры. Для веб-дизайнеров могут быть интересны курсы по адаптивному веб-дизайну и UI/UX-дизайну. 

Учиться можно бесплатно, но в этом случае не будет обратной связи и сертификата об окончании. Если эти вещи вам важны, курс можно купить за 49 $ в месяц. Можно оформить финансовую помощь, чтобы пройти полноценное обучение бесплатно — заявка рассматривается примерно 2 недели. 

Hackdesign

Эта рассылка на английском от специалистов Facebook, Google, Techcrunch. Каждую неделю в течение 3 месяцев будут приходить письма с теорией и практическими заданиями по азам дизайна . 

Codecademy

Если вы хотите попробовать себя в верстке, на этом сайте можно пройти бесплатный курс. С помощью HTML5, CSS3 и Bootstrap вы создадите 4 простых сайта, которые можно положить в портфолио.

Постоянно практиковаться 

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

Зарегистрироваться на бирже дизайнеров

На сайтах 99designs, Designcrowd, Crowdspring заказчики размещают задания, по которым исполнители создают дизайны. Лучший вариант получает гонорар. 

Вы можете участвовать в конкурсе: так вы научитесь работать по настоящему ТЗ и решать поставленные задачи. Работу новичка вряд ли оплатят, зато созданный макет вы можете положить в портфолио. К слову, его можно оформить на этих же сайтах.

Тренировать насмотренность

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

Искать вдохновение можно в Behance, Dribbble и Pinterest.

Сколько зарабатывают веб-дизайнеры

Зарплата дизайнера может быть разной. Если смотреть на hh. ru, компании предлагают от 30 тыс. руб. специалистам с опытом от 1 года. Middle-дизайнеры могут претендовать на оплату от 50 тыс. руб., ведущие специалисты — от 80 тыс. руб. 

Согласно исследованию рекрутингового агентства RealHR, средняя ЗП Junior-дизайнера составляет 80 459 руб., специалиста уровня Middle — 123 563 руб., а Senior-дизайнера — от 201 149 руб. Минимальную и максимальную ЗП (согласно исследованию) можно увидеть во втором столбце на изображении ниже: 

Заработок фрилансера зависит лишь от его способности продавать свои услуги. Поначалу гонорары могут составлять 3-5 тыс. рублей за проект, затем можно брать от 10 тыс. и постепенно повышать ценник. 

Заключение

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

Статья содержит рекламу. Информация о рекламодателях по ссылкам на сайтах.