Senior Product Designer в OZON Tech
Без веб-дизайнеров сайты, на которые мы заходим каждый день, не были бы такими удобными и красивыми. Вместе с Антоном Илларионовым, Senior Product Designer в OZON, объясняем, как стать веб-дизайнером, с чего лучше начинать, какие программы стоит изучить и куда развиваться дальше.
Кто такой веб-дизайнер?
Веб-дизайнер — это архитектор удобных и красивых веб-страниц: лендингов, сайтов, блогов, интернет-магазинов, форумов. Первое впечатление от страницы, читаемость текста, дизайн меню и кнопок, расположение элементов — над этим работает веб-дизайнер. Еще он думает о цветах и композиции, отличиях от конкурентов, логике работы и скорости загрузки сайта, его комфортности и привлекательности для пользователей. Поэтому это одновременно и творческая, и техническая работа.
Станьте архитектором веб-пространства. Научитесь создавать удобные сайты.
Вот что следует уметь веб-дизайнеру:
- использовать графические редакторы (например Adobe Photoshop, Illustrator);
- создавать макеты будущих сайтов;
- изучать актуальные тенденции;
- продумывать, как пользователи будут взаимодействовать с сайтом;
- готовить содержание веб-проекта;
- адаптировать страницы под разные девайсы;
- общаться с клиентами.
Что нужно, чтобы стать веб-дизайнером?
Работать в программах
Adobe Photoshop
Если вы умеете работать в Adobe Photoshop, то можно создавать первые работы здесь. У сервиса огромное количество функций, стилей и шаблонов. Кроме того, все проекты сохраняются в формате PSD, к которому привыкли заказчики и верстальщики.
Figma
В этом онлайн-сервисе создают дизайн страниц. Это универсальный инструмент, который постоянно обновляется. В Figma есть режим совместной работы — можно работать над задачей вместе с командой. Еще в этом редакторе дружелюбный и понятный интерфейс:
Sketch
Для пользователей устройств на MacOS есть Sketch: здесь тоже можно создавать прототипы будущих сайтов и совместно редактировать векторные изображения. Интерфейс минималистичный, как любят в Apple:
Adobe After Effects
Редактор для анимации интерфейсов. Здесь можно настроить плавные переходы между элементами интерфейса, фиксацию на интересующем пользователя объекте или изменение масштаба. Интерфейс After Effects похож на другие программы Adobe:
Adobe XD
Здесь можно создавать вайрфреймы и мокапы — наброски будущего продукта. В Adobe XD меньше функций, чем в предыдущих инструментах, зато его возможно использовать на любой операционной системе.
Blender
В нем веб-дизайнеры создают 3D-графику. Этот фреймворк разработан российской компанией «Триумф». Трехмерная графика на сайте заменяет, например, дорогостоящую съемку или помогает показать продукт со всех сторон.
Tilda
Если вы только учитесь основам веб-дизайна, попробуйте готовые конструкторы сайтов, например Tilda. Здесь есть готовые шаблоны, которые помогают быстро создать сайт. Так вы сможете натренировать умение сочетать блоки, цвета и шрифты.
Знать теорию веб-дизайна
Многие недооценивают важность этого этапа. Без понимания основ композиции и сочетания цветов трудно добиться приятной картинки. Осваивать теорию лучше в такой последовательности:
1. Композиция
В этом разделе нужно изучить, как создавать визуальный порядок при помощи сетки и как сверстать макет в сайт. Понимание композиции помогает правильно расположить элементы на странице в целом и относительно друг друга.
2. Типографика
Типографика нужна для оформления текстовых блоков, иерархии заголовков и работы со списками.
3. Цвет
Сочетания цветов, ассоциативные ряды, оттенки и градиенты — важный момент для восприятия сайта. Зеленый цвет ассоциируется с природой и экологией, синий часто используют IT-компании, а красный — сильные и агрессивные бренды.
Уметь управлять проектами
Во-первых, всегда полезно уметь управлять временем. В этом помогают системы планирования, например Trello. С их помощью можно контролировать каждый этап работы, особенно если вы работаете в команде.
Во-вторых, ключевой этап — это брифинг заказчиков, когда вы обсуждаете цели, задачи, особенности проекта и узнаете пожелания. Нужно понимать, какие вводные нужны, чтобы начать работу над проектом, и как эти данные правильно от заказчика получить. Также это защитит вас от постоянных правок.
Знать основы веб-программирования
Понимать, как разрабатывается сайт — преимущество для веб-дизайнера. Для этого достаточно базовых знаний HTML и CSS и понимания особенностей работы сайта в разных браузерах и на разных устройствах. Еще это поможет найти общий язык с верстальщиком или фронтенд-разработчиком и донести до него свои идеи.
Хороший сайт — тот, которым удобно и приятно пользоваться. Научитесь создавать эффектный и продуманный дизайн
![](/wp-content/themes/reboot_child/assets/img/banners/b-2-7.png")
8 шагов новичка в веб-дизайне
1. Посещайте популярные веб-страницы
Не будем приводить конкретные примеры, потому что нужно отталкиваться от задач, которые сайт решает. Поэтому сначала определитесь, какова цель продукта. Затем зарегистрируйтесь на популярном ресурсе из вашей сферы.
Возьмем, к примеру, интернет-магазин одежды: попробуйте добавить товары в корзину, где это возможно, и обратите внимание на поиск информации на сайте. Спрашивайте себя: «Насколько этот раздел удобно расположен? Какие есть подсказки?» Запоминайте, что вам понравилось и не понравилось.
2. Развивайте насмотренность
Изучайте работы других дизайнеров. В этом помогают популярные ресурсы: Behance, deadsign, Awwwards, CSSDesignAwards, Pinterest. Можно подписаться на экспертов, работы которых вас привлекают, и вдохновляться их творчеством. Советую агентство ARTKAI, Tomasz Król, Evgeny Uprock.
Если у вас уже есть навыки в Photoshop, то разберите понравившуюся работу на части: поменяйте блоки местами, предложите другую композицию, поиграйте с оттенками. Это поможет набраться опыта и понять, насколько вам интересно развиваться в этой сфере.
3. Перенесите идеи на бумагу
Если вы не знакомы с Photoshop, но все равно хотите разобрать сайт по деталям— попробуйте упражняться на бумаге. Здесь не нужны навыки рисования. Ваша задача — внимательно изучить понравившуюся страницу, запомнить его и воспроизвести на листе. Затем дополните цветами, добавьте недостающие детали или уберите лишние, на ваш взгляд, элементы.
Если будете уделять этим тренировкам хотя бы 30 минут каждый день, то станете смелее в рисовании и будете лучше разбираться в композиции сайта.
4. Изучите портфолио топовых агентств и студий
Чтобы лучше понимать, из каких этапов состоит работа веб-дизайнера, следите за агентствами в этой сфере. Они показывают кейсы и рассказывают, какие задачи смогли решить. Это тоже часть насмотренности: вы сможете погрузиться не только в визуальную часть, но и в аналитическую, и техническую.
Согласно Рейтингу Рунета, лучшими в 2020-2021 годах стали эти студии:
- ДзенДизайн;
5. Изучите теорию
Начинающему специалисту рекомендуем эти книги:
- «Веб-дизайн», Якоб Нильсен;
- «Эмоциональный веб-дизайн», Аарон Уолтер;
- «Не заставляйте меня думать», Стив Круг.
Кроме основ веб-дизайна полезно будет также разобраться в цветах и композиции. Для этого тоже есть книги, подходящие для новичка:
- «Искусство цвета», Иоханнес Иттен;
- «Основы композиции», Ольга Голубева;
- «Типографика. Шрифт, верстка, дизайн», Джеймс Феличи.
6. Разберитесь в редакторах
Установите пробную версию Adobe Photoshop, чтобы попробовать все функции, которые там есть. Во время обучения веб-дизайну вам понадобится только треть из них. Но знание контекста поможет в работе.
Совет: в Photoshop всегда ставьте горизонтальную и вертикальную сетки. Они помогают в работе с разными размерами экрана пользовательского устройства и другими элементами масштабирования страницы.
7. Выберите курс
Вы самостоятельно изучили теорию, применили на практике, но брать проекты пока не решаетесь? Тогда лучше обратиться к профессионалам.
Сейчас обучающего материала достаточно для специалистов любого уровня. Можно найти качественные бесплатные курсы. Например, дизайнер Максим Солдаткин подготовил 12 видеоуроков на YouTube для начинающих. Здесь есть как текстовые материалы, так и практика.
8. Собирите портфолио
Со временем навыки будут улучшаться, и вы сможете создавать полноценные проекты. Самые удачные лучше сразу вкладывать в портфолио: так вы сможете показать будущему работодателю, что умеете и какие кейсы у вас уже есть.
У Антона есть несколько советов, которые пригодятся в оформлении портфолио и в работе:
- Устройтесь на стажировку в студию: там быстро наберетесь и опыта и работ, которые можно показать.
- Делайте фейковые проекты: разрабатывайте веб-дизайн для существующих или несуществующих брендов. Вам за них не заплатят, но сможете потренироваться. Это всегда лучше, чем искать работу без проектов.
- Если копируете чужое — делайте это максимально креативно, перерабатывая и добавляя свое.
В кейсах делайте фокус на вашей роли в проекте, хвастайтесь нестандартными решениями, но и не забывайте про оформление (вы же дизайнер 😉).
Можно ли стать веб-дизайнером без образования?
Сегодня есть доступная профессиональная литература и курсы, не говоря про Pinterest, Behance и Dribbble, в которых бесконечное количество примеров.
Когда Антон начал свой путь в дизайне четыре года назад, все было скуднее. Сегодняшним студентам в этом плане сильно повезло.
Где учиться веб-дизайну?
YouTube
Можем порекомендовать следующие каналы:
- DesignCourse — его ведет парень по имени Гэри, который раньше работал в LinkedIn, Lynda.com и других проектах.
- Dan Edwards — канал сфокусирован на карьерном пути дизайнера: как продвигаться в веб-дизайне, где обучаться и как управлять проектами.
- Sarah Doody — канал ведет девушка по имени Сара. В своих видео она рассказывает, как правильно составлять резюме дизайнеру, какие трудности могут быть в работе (выгорание, отсутствие идей) и как с ними справляться.
Тут есть минус: самообучение с нуля требует очень много сил и времени. Придется самостоятельно выстраивать программу обучения, проверять свои работы, искать ответы на вопросы, исправлять ошибки.
Онлайн-школы
Некоторые курсы — полноценная подготовка специалистов в сфере веб-дизайна. Обучение длится несколько месяцев под руководством профессионалов.
Мастер-классы, практикумы, воркшопы
Вариант, если хочется сразу в бой. Хорошо подойдет тем, кто имеет опыт и хочет набить руку. Теорию объяснять не будут — дадут только информацию, которая нужна в конкретном проекте. Искать мастер-классы и практикумы можно на сайтах школ дизайна.
Работа с куратором
Подходит в тех случаях, когда нужна практика, особенно если вы боитесь браться за проекты. Тогда куратор будет помогать вам в работе: давать обратную связь и обозначать вектор развития.
Если вы устраиваетесь на стажировку в агентство или в штат, вам поможет старший специалист. Он будет курировать работу и исправлять ошибки. Если вы работаете на себя, то куратором может быть ваш друг или знакомый, у которого есть опыт в дизайне.
Как выбрать образование?
Полностью самостоятельно освоить профессию возможно, но будет сложно. В дизайне нужен взгляд со стороны: более опытный специалист должен оценивать ваши работы на начальном этапе. Поэтому хороший вариант — выбрать курс под ваш уровень и потребности.
Вот несколько советов, которые помогут выбрать курс по веб-дизайну.
1. Обратите внимание на продолжительность курса
В освоении новой профессии не стоит торопиться. Обучение должно быть последовательным и включать в себя разбор программ, которые необходимы дизайнеру. Поэтому курсы продолжительностью месяц лучше не брать. Вряд ли специалисты смогут обучить вас за такой короткий срок всему необходимому: теории композиции и цвета, типографике и верстке.
То же самое касается бесплатных уроков. Там могут дать вводную часть: кто такой веб-дизайнер, что именно он делает и сколько зарабатывает. Но учить работать в Photoshop не будут, проверять домашнюю работу — тем более.
2. Узнайте программу курса
Минимальный список современного курса по веб-дизайну включает в себя:
- изучение целей сайта, анализа целевой аудитории и работу с информацией от заказчика;
- работу в Photoshop;
- колористику;
- типографику;
- модульные сетки;
- работу с фотостоками;
- обработку графики;
- UX-дизайн.
3. Посмотрите на портфолио преподавателей
Здесь отражается опыт того, кто будет оценивать вашу работу и давать обратную связь. К тому же на примере преподавателя вы сможете посмотреть, какой максимальный уровень развития навыков вас ждет, если вы будете продолжать обучение. Профессионалы не стесняются всего опыта: они умеют подробно рассказать, какие проекты вели и что сделали.
4. Почитайте отзывы
Это полезно не только, чтобы познакомиться с преподавателями. Отзывы дают взгляд со стороны — насколько полезный курс, чему научили и какие недостатки отметили те, кто его уже прошел. Можно даже написать выпускнику и задать все волнующие вопросы.
5. Узнайте про обратную связь и трудоустройство
Это самый важный момент: вашу работу должен оценить профессионал. Только так вы сможете понять, в правильном ли направлении двигаетесь. Преподаватель или куратор укажет на ошибки, поможет их исправить и похвалит сильные стороны каждой вашей работы. Это будет честное мнение опытного специалиста, который искренне хочет, чтобы у вас все получилось.
В онлайн-школе Contented на курсе веб-дизайна преподают специалисты, в портфолио которых работы для СБЕРа, Макдональдса, ВТБ, Яндекса и Билайна. Портфолио каждого можно посмотреть на сайте. Во время обучения наставники будут давать обратную связь. В конце курса у вас будет пять работ в портфолио — этого достаточно, чтобы предлагать свои услуги работодателям.
Что изучать после основ?
Хороший веб-дизайнер — мастер на все руки. Чтобы вы могли приносить как можно больше пользы работодателю, изучите смежные с дизайном дисциплины:
Графический дизайн
Эта сфера связана с графикой продукта: фирменным стилем, рекламными постерами, презентациями или упаковкой. Если научитесь разрабатывать крутые логотипы, сможете продавать их как дополнительную услугу клиентам, для которых разрабатываете веб-ресурс.
Читайте историю успеха студентки курса «Графический дизайн» Алисы Макаренко
Брендинг
Брендинг — это про идею, философию бизнеса и особую связь с клиентами.
Чтобы веб-дизайнеру лучше понимать, как его работа влияет на компанию, стоит разобраться в создании сильного и эффективного бренда. Классический пример — Apple. Их продукты и ресурсы не только привлекают красотой с точки зрения дизайна, но и заставляют клиентов чувствовать себя особенными.
UX/UI-дизайн
Если на курсе с основами веб-дизайна вам было недостаточно информации про пользовательский опыт, то пройдите дополнительный курс на эту тему.
Курс по работе с клиентами
Изучение основ коммуникации будет полезно тем, кто сталкивается с трудностями в общении. Если волнуетесь перед важным созвоном с клиентом, теряетесь в мыслях и не знаете, как фиксировать договоренности, то подобные уроки должны с этим помочь.
Создание иллюстраций
Так вы сможете разнообразить вашу работу с веб-страницами. Правда, придется учиться рисовать от руки. Обучаться с нуля проще на специальных графических планшетах, чем на бумаге.
Вот, например, сайт лондонской фирмы Pitch, которая сдает палатки напрокат. Все кнопки оформлены в едином стиле, а иллюстрации умиляют:
Копирайтинг
Текст — инструмент, который делает сайт привлекательным для клиента. Если вы работаете над проектом как дизайнер-фрилансер, то вам нужно знать, каким контентом его наполнить. Текст и дизайн должны дополнять друг друга, тогда работа точно понравится заказчику.
Как найти работу в веб-дизайне
Как и во многих digital-профессиях, у веб-дизайнеров есть разные способы реализовать себя. Давайте разберемся, чем отличается работа на себя, на агентство и в штате.
Агентство
Главное преимущество — работа поставлена на поток. Здесь не нужно переживать по поводу клиентов и документов, для этого в команде есть специальные люди. Плюс вы окружены профессионалами, это помогает развиваться и решать проблемы в работе мозговыми штурмами.
Но при этом вы ограничены в проектах. В агентстве у веб-дизайнера не всегда получится выбирать то, что интересно. Иногда придется работать с тем, что не нравится. А если ваше агентство только начало работать, то вряд ли сразу получится посотрудничать с крупными брендами.
Штат
В этом случае, как и с агентством, работу не нужно будет искать самому. Веб-дизайнеры в штате работают над ключевыми проектами компании. Если у бренда несколько хороших специалистов, то каждый из них курирует конкретный сайт или его раздел. Дизайнер в штате особенно нужен, когда сайт используется как основное место для привлечения клиентов. В этом случае нужно быть немного маркетологом, чтобы понимать, как продавать продукты или услуги бизнеса.
Фриланс
Плюс работы на себя в том, что сам выбираешь проекты и сам устанавливаешь цены за дизайн. К тому же можно работать из любой точки мира. Искать проекты можно на Freelancer, Upwork, Weblancer, FL.
Но минусы тоже есть. Один из них — поиск клиентов. Если вы только освоили профессию, придется много работать, чтобы о вас узнали. Еще нужно самостоятельно общаться с заказчиками, вести всю документацию и контролировать себя, чтобы вовремя выполнять задачи.
В заключении хотелось бы дать краткую шпаргалку с ответом на вопрос «Как стать веб-дизайнером?»:
- Практикуйтесь в специальных программах для работы.
- Изучите профильную литературу.
- Выберите курс или наставника, который будет давать обратную связь по вашей работе.
- Развивайте насмотренность, следите за работами лидеров в своей сфере.
- Соберите портфолио.
- Составьте резюме и начните поиск первых заказчиков.
- Получайте дополнительные знания.
веб-дизайнер
веб-дизайнер
Хороший сайт — тот, которым удобно и приятно пользоваться. Научитесь создавать эффектный и продуманный дизайн.
