Как стать веб-дизайнером – пошаговое руководство

В статье план развития в веб-дизайне. Рассмотрела вопросы: с чего начать, что знать и уметь, к чему стремиться, как оформить портфолио, а также затронула зажигательные моменты профессии веб-дизайнер 👇🏻
Иллюстрация Haley Bridges: https://dribbble.com/shots/14284341-The-Creator-s-Journey

Современный веб-дизайн – это сплав бренд-дизайна (графики с учетом характера, ценностей, пристрастий и порывов бренда), сторителлинга (жизненных историй и презентаций) и дизайна интерфейсов (навигации, элементов управления созданных на основе данных). Как это все вместе работает? В этой статье мы достаточно глубоко занырнем и изучим в деталях как стать веб-дизайнером.

Фокус этой статьи: траектория, в которой больше практики и интенсивный рост навыков в веб-дизайне за кратчайший период. Старалась сделать так, чтобы статья стала для вас прямым путем в профессию веб-дизайнер. Чтобы вы получили опыт смелых и известных веб-студий, диджитал-агенств и экспертов международного уровня за приемлимый бюджет, да еще и сэкономили время. Давайте посмотрим, что у меня вышло 👇

Содержание:

Сила и ценность веб-дизайна для бизнеса

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

6 способов стать веб-дизайнером: онлайн, бесплатные и платные

  1. Способ 1. Онлайн-университет
  2. Способ 2. Самообразование
  3. Способ 3. Онлайн-курсы
  4. Способ 4. Мастер-классы и практикумы онлайн
  5. Способ 5. Фриланс
  6. Способ 6. Сбалансированный подход

Как я начинала в веб-дизайне

С чего лучше начать изучение в Веб-дизайне – первые 10 шагов в Веб-дизайне

  1. Погрузитесь в международную культуру веб-дизайна с помощью курса Рафаля Томаля
  2. Начните посещать ежедневно самые популярные веб-ресурсы и их соцсети от известных брендов на ру и глобале
  3. Повышайте насмотренность
  4. Возьмитесь за первый проект по веб-дизайну сделайте его вместе с наставником
  5. Изучите процессы и портфолио ТОП-диджитал агентств;
  6. Изучите ТОП-3 книги по веб-дизайну (международный ТОП);
  7. Выпишите TOP-10 навыков дизайнера и поразмышляйте о графике тренировок
  8. Вступите в самые популярные сообщества по дизайну и задайте самый волнующий вопрос
  9. Пройдите практику на настоящем сайте под руководством наставника
  10. Опубликуйте портфолио

Что дальше изучать по веб-дизайну: качайтесь в бренд-дизайне, анимации и иллюстрации

Вывод и рекомендация

Сила и ценность веб-дизайна для бизнеса

В чем ценность веб-дизайна для бизнеса

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

Сайт и бренд-дизайн от Focus Lab для калифорнийского кафе Gordo Taqueria
Веб-дизайн от Focus Lab для калифорнийского кафе Gordo Taqueria

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

Чем полезен веб-дизайнер

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

Выращивание сайта: вайрфреймы, стилизация и UiKit
Выращивание сайта: вайрфреймы, стилизация и UiKit

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

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

Информационная архитектура и вайрфреймы
by Bill S Kenney for Focus Lab in Assembly: информационная архитектура и вайрфреймы

Что такое хороший веб-дизайн

Хороший веб-дизайн эмоциональный и отвызчивый: на телефонах, планшетах, широкоформатных мониторах – во всех точках контакта. Хороший веб-дизайн вызывает у посетителей положительные эмоции. Удовольствие, радость, удивление, предвкушение в сочетании с яркой индивидуальностью. А еще он коммерчески эффективный, полезный и удобный в работе.

Работы для веб-дизайнеров все еще очень много. Повсюду вокруг нас типовые и однообразные интернет-магазины, информационные порталы, сервисы и т.п. Однообразие — не лучший инструмент для привлечения клиентов. Альтернатива ему – выразительность, но попытки веб-разработчиков выделиться приводят к откровенно провальным результатам и вызывают у пользователей лишь раздражение. Чтобы делать лучше, требуется особая культура работы, чувственный опыт потребления товара и понимание культурного контекста клиента, с которым требуется установить контакт.

В современном веб-дизайне подчеркивают четыре ключевых компонента:

  1. Бренд-дизайн (Графический дизайн и коммуникация с целью развития бизнеса) – это графический дизайн, который применили с целью произвести впечатление и вызвать определенные чувства у определенной аудитории. Этот инструмент помогает нам увлечься изучением продукта;
  2. Сторителлинг (Копирайтинг) – это истории о культуре потребления бренда, которые раскрывают перед нами полезное действие продукта/компании/бренда и особый образ жизни с ними. Благодаря историям мы сознаем ценность. Истории разжигают желание обладать;
  3. Проектирование и дизайн интерфейсов (UX/UI) – это создание комфортных функциональных интерфейсов, которые обволакивают контент сайта, находятся под рукой и помогают перемещаться в пространстве;
  4. Интернет-маркетинг – информация о поведении клиентов собирается датчиками в реальном времени. Благодаря этой информации веб-дизайнер видит как организованы потоки клиентов, откуда они приходят, как-то покупают и может предлагать способы сделать сайт ценнее для клиентов и эффективнее для бизнеса;

Чек-лист качеств хорошего веб-дизайна:

  • Формирует сильное первое впечатление
  • Увеличивает ценность продукта в глазах клиента
  • Формирует доверие
  • Побуждает закупиться

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

Какие задачи решает веб-дизайнер и чем зажигает эта профессия

Веб-дизайнер создает лендинги, корпоративные сайты и промо-подачу. Он боец в команде диджитал-маркетинга. Есть еще UX/UI-дизайнеры – это ребята из продуктовой команды и больше работают над веб- и мобильными приложениями, приложениями для смарт-часов, TV и автомобилей.

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

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

Основные этапы работы над веб-проектом

Дизайн – итеративный процесс. Кратко его можно описать по формуле: исследуй, делай, проверяй. Предмет исследования определяется стратегией:

Процесс дизайна сайта по образу UX Process
Процесс дизайна сайта по образу UX Process
  1. Стратегия – вектор движения по развитию бренда с помощью сайта. Как правило приходит в формате маркетинговой обстановки по рынку (комплексный анализ конкурентов, мест обитания целевой аудитории, способов захвата ее внимания, прогнозы по выручке и т.д);
  2. Исследование – на этом этапе дизайнер погружается в культурную среду потенциальных клиентов, изучает их жизнь, трудности и неудачи, пристрастия и порывы;
  3. Анализ – здесь факты о клиентах склеиваются в портреты и происходит фокусировка на конкретной аудитории, которую планируется привлекать первым делом;
  4. Проектирование – конструкторская работа по созданию созданию макетов сайта, проработке навигации;
  5. Разработка – визуальный дизайн, программирование и тестирование;
  6. Beta-запуск – запуск первой версии сайта и проверка всех систем в работе. Настройка счетчиков аналитики и срез первых показателей. Настройка потоков посетителей;
  7. Оценка – анализ конверсионных маршрутов, коммерческих и поведенческих факторов и корректировка сайта;
  8. Запуск – официальный старт ресурса и постановка его на рельсы непрерывного развития; 

Особенности работы в компании, агентстве и на фрилансе

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

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

Агенство. Хороший способ получить опыт работы под руководством опытного наставника во множестве стилей, на множество проектов. Здесь обилие разноплановых проектов с высокими требованиями к креативности (если работать на международный рынок).

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

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

С кем в команде работает веб-дизайнер

Сайт помогает привлекать клиентов из интернета 24/7, рассказывая о пользе товаров/продуктов/услуг. Коммерческие сайты разрабатывают в команде. 

Focus Lab | We Build Brands That Lead And Inspire
Focus Lab | We Build Brands That Lead And Inspire

Минимальный состав команды:

  • Интернет-маркетер — придумывает концепцию подачи продукта и выстраивает систему привлечения клиентов из интернета
  • Копирайтер — на простом и понятном для потребителя языке пишет статьи и тексты для сайта в которых раскрывает ценность продукта
  • Веб-дизайнер — создает выразительный дизайн сайта и помогает подать продукт в интернете так, чтобы клиент понял, что это «то, что нужно»
  • Веб-разработчик — придумывает, как воплотить дизайн сайта с помощью технологий HTML/CSS/JavaScript/CMS и запускает его в плавание

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

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

Какими знаниями, личными качествами и навыками обладает веб-дизайнер

  1. Графический дизайн. Веб-дизайнеры работают с цветом, шрифтами, фото, иллюстрацией и композицией – все это помогает рассказать захватывающую убедительную историю и вызвать определенные чувства целевой аудитории.
  2. UX-дизайн и дизайн интерфейсов. Основы UX помогают проектировать сценарии на сайте с учетом нюансов психологии пользователя – такой подход чаще помогает попадать в базовые ожидания клиентов;
  3. Веб-дизайн заточенный на конверсии. Cайт – система, задача которой – продавать. А значит нужно понимать с помощью каких действий можно влиять на конверсию сайта;
  4. Веб-разработка. Хотя некоторые дизайнеры ограничивают свою работу проектированием сайтов, многие также берут на себя часть кода, особенно интерфейсную разработку.
  5. Интернет-маркетинг. Веб-дизайнер работает плечом к плечу с диджитал-маркетингом (SEO-профи, SMM-спецы, Копирайтеры и Контент-маркетологи). Фронт работа задает контент, а понимание контекста всегда плюс один к смелости и точности.
  6. Работа с клиентами и управление проектами. После запуска сайта работа только начинается, развитие сайта – это отдельная большая работа по увеличению конверсии с помощью новых блоков, доработок, создания выразительной графики и запуска новых страниц. А еще здесь много психологических тонкостей по работе с клиентом, которые можно учесть, если подойти грамотно к организации работы.

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

В запуске сайта с нуля есть минимум три digital-стратегии: 

  1. Приводить клиентов из поисковиков (SEO): по поисковым запросам из Yandex, Google
  2. Приводить клиентов из соцсетей (SMM): Instagram, ВКонтакте, Facebook
  3. Приводить клиентов с рекламы (PPC/Target): Контекстная реклама (Google Ads, Yandex.Директ), Таргетированная реклама(Instagram, ВКонтакте, Facebook, TikTok, MyTarget)

Идеальный заказчик тот, кто уже решил вопросы связанные с интернет-маркетингом и диджитал-стратегией. Т.е заказчик изучил рынок и решил клиентов с какими потребностями и из каких каналов (SMM, PPC, SEO) он будет привлекать на старте. И ему требуется помощь в создании эффективной и полезной интерактивной витрины и поток клиентов будет приходить из поисковиков Yandex/Google.

Основные инструменты работы над веб-проектом по готовой диджитал-стратегии (то, что любят веб-дизайнеры):

  1. Сбор ТЗ (Маркетинг-кит): Google Docs, Miro;
  2. Визуальный анализ конкурентов и Поиск креативных концепций подачи: Pinterest, Dribbble, Behance, Figma;
  3. Поиск интерактивных (UX/UI) дизайн-концепций: InVision Studio;
  4. Требования к контенту и информационная архитектура сайта: Figma;
  5. Дизайн интерфейсов и навигации: Figma, Sketch;
  6. Бренд-дизайн и разработка уникальной графики: Photoshop, ProCreate;
  7. Верстка и запуск сайта: Tilda, WebFlow, Readymag;

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

Какие инструменты помогут проверить диджитал-стратегию заказчика и скорректировать курс:

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

А вот клиентов, которые стартуют сайт с нуля, лучше проверить хотя бы по базовым параметрам SEO. Все инструменты из разряда: просто закинь ссылку или задай вектор куда-копать.

  1. Wordstat – подскажет, что и какими словами ищут клиенты заказчика в сети и сколько раз в месяц;
  2. Кластеризатор – найдет конкурентов по найденным поисковым запросам в интернете (1 кластер = 1 страница сайта). Пригодится для анализа структуры, навигации и подачи каждого конкурента, который борется за внимание той же аудитории;
  3. SEO META in 1 CLICK – подскажет позиционирование конкурентов в поисковой выдаче (Title, Description). Напомню что в Title должен содержать поисковый запрос из wordstat (чем ближе к началу заголовка, тем лучше);

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

  1. Сайт как интерактивная книга с историей, навигацией и подачей
  2. Сайт как продукт полезен в определенных ситуациях
  3. Первый экран каждой страницы сайта как вывеска – сообщает самое интересное для целевой аудитории и призывает начать
  4. Сайт как презентация – 1 блок = 1 мысль;
  5. Концепция точек контакта и CJM помогает улучшить сценарий взаимодействия на различных экранах в различных ситуациях: мобильник, планшет, ноутбук;
  6. Атомарный дизайн. Паттерны проектирования и дизайн-системы помогают попадать в ожидания на любой платформе и ускорить проектирование и дихайн сайта;
  7. Визуальный дизайн сайта – отражение характера, культуры и ценностей бренда
  8. Сайт как столица вселенной бренда в диджитал;
  9. Сайт как кино, захватывает внимание и разогревает интерес
  10. Сила итерации: думай-делай-проверяй

6 способов стать веб-дизайнером: онлайн, бесплатные и платные

Смотреть ролики на YouTube, брать уроки Photoshop на мастер-классах или все же поступить на специальность в вуз? Узнаем, как стать веб-дизайнером, когда все вокруг стремительно развивается.

Способ 1. Онлайн-университет

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

Плюсы

  • Учиться можно в удобное время (если дедлайны не жесткие);
  • Диплом государственного образца (смотря где);
  • Обещают работу (частенько * не ставят);

Минусы

  • Узковатый кругозор по творчеству и мало живых командных практик за приличные деньги. Даже на долгих курсах не преподают все лучшие преподаватели из лучших студий в стране и в мире. Перед вами просто частная практика, как и везде;
  • Частенько даже траектория 2 года – это как купить разом просто серию краткосрочных курсов в одном пакете. Тогда в чем ее комплексность;
  • 1-3%+ трудоустроенных по итогам обучения (найдете онлайн-университет, где вероятность хотя бы 50%, присылайте);

Способ 2. Самообразование

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

Плюсы

  • Учиться можно в удобное время;
  • Почти все можно найти бесплатно;
  • Международный кругозор по теории, готовым дизайн-решениям и хорошая планка;

Минусы

  • Путь потребует значительного времени на эксперименты, настойчивости, увлеченности и воли к победе;
  • Нужно самостоятельно найти проект и наставника, иначе все, что будете изучать, может не сложиться в единую картину;
  • Есть риск подобрать не лучшие агентства (особенно без знания английского). Поэтому предподготовку в Google нужно сделать внимательно;

Способ 3. Онлайн-курсы

Хороший вариант для старта. Если внимательно изучить преподавателей, их работы и подход. Пройти бесплатный кусочек и потом решить.

Плюсы

  • Учиться можно в удобное время;
  • Можно купить в рассрочку;
  • Обещают работу;

Минусы

  • Скорее всего, потребуется еще серия курсов;
  • Бывает попадаются дорогие траектории с упором на инструменты, а не проекты и навыки (хотя бы приближенные к реальности), а называются курсы;
  • 1-3%+ трудоустроенных по итогам обучения (найдете курс, где хотя бы 50%, присылайте);

Способ 4. Мастер-классы и практикумы онлайн

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

 Плюсы

  • Сразу в бой;
  • Содержат актуальную и прикладную информацию;
  • Научитесь решать задачи, приближенные к действительности;

Минусы

  • Иногда почему-то стоят крайне дорого, возможно потому что содержат много текстов и тестов, как в учебнике по математике (а как мы знаем, что даже после учебников по математике на живом проекте всегда много чего не хватает из навыков);
  • Спектр комплексных задач может быть маловат, однотипен или сосредоточен вокруг частной практики конкретной группы экспертов (у которых очень однообразное портфолио);
  • Если купить большую пачку мастер-классов разом, то может стать скучно учиться на однотипном подходе и делать примерно одно и тоже. Творчество – штука разноплановая, разноформатная;

Способ 5. Фриланс

На рынке очень много клиентов, которым просто нужно помочь. На кону часто не стоит чья-то жизнь или бизнес, просто требуется помочь с дизайном (проверить идею за дешево). Идеальной для работы и обучения.

 Плюсы

  • Сразу в бой;
  • Возможность получить настоящий кейс в портфолио;
  • Сможете попробовать все, что захотите;

Минусы

  • Можно взять больше, чем сможешь унести, надорваться и перегореть;
  • Чтобы уложиться в срок, возможно придется поработать ночами или без выходных (совмещать с основной работой);
  • Стандарты формируете сами, планку ставите себе сами. В итоге может пострадать качество;

Способ 6. Сбалансированный подход: серия разноформатных курсов с выходом на тестовое задание/стажировку

Размяться в инструментах на боевых проектах. Далее наработать кругозор и смелость через серию краткосрочных курсов от известных дизайн-агентств и компаний. И упаковать портфолио. А затем начать оставлять заявки на тестовые задания прикладывая портфолио и логотипы агентств, где учились (покажет ваш серьезный настрой).

Плюсы

  • Учиться можно в удобное время;
  • Гарантированно учитесь у опытных экспертов и студий страны и получаете кругозор по практике; 
  • Международный кругозор по теории, готовым дизайн-решениям и хорошая международная планка;
  • Получите только актуальную и прикладную информацию;
  • Научитесь решать задачи, приближенные к действительности;
  • Получите серьезную предподготовку перед боем;
  • Соберете разноплановое портфолио (со статусными логотипами студий) и покажете серьезный настрой перед заходом на тестовое задание и проект;
  • За меньшее время и деньги получите больше боевого опыта;
  • Все можно купить недорого;

Минусы

  • Нужно хорошо разведать экспертов и компании, у которых стоит поучиться и спланировать свое развитие;
  • Диплом государственного образца и диплом международного уровня не получите (хотя, это можно наверстать, как устроитесь на работу);
  • Вам не обещают работу и не ведут за ручку, вы сами боретесь за свой успех (но так как пока нет вуза с хотя бы с 50% вероятностью успеха с трудоустройством (100 начали обучение и 50 трудоустроены) – это, вроде бы, не минус);

Как я начинала в веб-дизайне

В веб-дизайн я пришла через веб-разработку. Иногда, верстая сайты, мне казалось, что дизайн пришел какой-то не такой, в общем я исправляла ошибки дизайнера и искала пути как сделать лучше, понятнее и удобней для пользователя (по крайней мере мне так казалось). В общем считаем, что глубина исследований у меня тогда была не запредельная, но мои версии сайтов вполне нравились клиентам, так как в них что-то да было поудобнее 🙂 Тогда я и поняла, что что хочу создавать действительно удобные полезные и интересные сайты. Ну, чтобы сочненько было в общем.

Однажды я наткнулась на видео Юзабилити лаб с Дмитрием Сатиным и заинтересовалась темой юзабилити исследований. Мне нравилось как разбирают кейсы и находят точки по улучшению сайтов. Тут я и поняла, что в этом деле есть все-таки система, а значит это можно вполне себе изучить за какой-то конкретный срок. Но все-таки в то время все равно не могла понять почему сайт Apple в 2009 году был крайне странным.

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

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

С чего лучше начать изучение в Веб-дизайне – первые 10 шагов в Веб-дизайне

Шаг 1. Погрузитесь в международную культуру веб-дизайна с помощью курса Рафаля Томаля

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

Шаг 2. Начните посещать ежедневно самые популярные веб-ресурсы

Регулярно посещайте сайты и соцсети известных брендов в РФ и глобалии: блоги, интернет-магазины, лендинги, сайты продуктовых компаний.

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

Вот несколько сайтов для разбора: mailchimp, intercom, ozon, stripe, airbnb, apple, тинькофф журнал, inmyroom.

Шаг 3. Повышайте насмотренность

Собирайте дизайны на доски в Pinterest. Так вы сможете повысить насмотренность. А еще попробуйте делать чуть больше. Возьмите сайт, который вам нравится, схватите руками и помните его, порежьте на части, попереставляйте блоки, предложите альтернативный вариант композиции из обрывков. Затем возьмите лист A4 и перерисуйте оригинальный сайт и сделайте разбор плюсов и минусов.

Развивайте приавычку каждый день лазить на land-book.com нырять в 5 разных сайтов, восстанавливать по ним скетчи. Дополняйте скетчи цветовыми пятнами, как в оригинальном дизайне. Это задание можно выполнять в своем скетчбуке или на планшете. Всего 5-7 минут в день и через месяц вы уже набьете руку более чем на 100 сайтах и станете смелее в композициях.

Как станете смелее в скетчах, возьмите сайт с уникальным дизайном и повторите его во всех деталях в Figma. Старайтесь добиться полного сходства, обращайте внимание на стили и пропорции элементов, как строится работа со свободным пространством. Восстановите сетку и доску стиля, проработайте состояния для элементов (наведенные и активные состояния для кнопок и полей ввода). Проработайте навигацию, типографику, работу с цветом и палитру.

Шаг 4. Возьмитесь за первый проект по веб-дизайну и сделайте его вместе с наставником

Подыщите курс с легким стартом и ассортиментом интересных и жизненных проектов. К примеру курсы UX/UI на Breezzly. Задизайните промо шапку, затем попробуйте себя в интерактивном дизайне эффектной промошапки магазина скейтов и соберите эффектную карусель транзишн-переходом, а затем уже погружайтесь дальше через очные курсы с командной работой (поможет сильнее прочувствовать весь дух профессии).

Шаг 5. Изучите процессы и портфолио ТОП-диджитал агентств

Следите за работами диджитал-агентств, многие из них делятся своими кейсами и процессом работы. Вот некоторые из них: Focus lab, Ueno.

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

Пример дизайн-кейса Braze

Шаг 6. Изучите ТОП-3 книги по веб-дизайну (международный ТОП)

Сейчас я рекомендую всем следующую подборку книг для старта:

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

Шаг 7. Выпишите TOP-10 навыков дизайнера и поразмышляйте о графике тренировок

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

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

Шаг 8. Вступите в самые популярные сообщества по дизайну и задайте самый волнующий вопрос

Есть три самых насыщенных информацией сообщества в рунете на тему веб-дизайна. И задайте самый волнующий вопрос. Вступайте же:

Шаг 9. Пройдите практику на настоящем сайте под руководством наставника

Первые 8 шагов – это предподготовка. А вот эти три проекта могут стать хорошим планом ближайших серьезных высот. Каждый пункт – это серьезный профессиональный рост.

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

  • Задизайните форму для сайта научитесь работать с существующими компонентами сайта(заголовок, текст, кнопки, поля ввода, ссылки), проработайте все состояния элементов (наведенные и активные состояния для кнопок и полей ввода) и не забудьте про дизайн подтверждения отправленной заявки.
  • Спроектируйте страницу отписки от рассылок. В этой задаче можно поработать со сценарием путешествия пользователя. Кроме этого эта задача интересна по проработке текстов, ведь интерфейс вступает в диалог с пользователем, чтобы помочь ему достичь цели; 
  • Создайте лендинг продукта с полезной и интересной историей. Вас должно немножко злить, что нечто важное, все еще никто не знает во всех деталях – это и называется сторителлинг. Расскажите чем хорош продукт, подкрепите рассказ элементами доверия и продумайте конверсионные элементы. Используйте весь свой арсенал инструментов: типографика, цвет, композиция и работа со свободным пространством, сетка и модуль. 

Полезный совет: иногда хорошая иллюстрация, коллаж или анимированная гифка на странице помогут лучше рассказать историю, чем несколько абзацев текста, например как тут  https://marvelapp.com/ 

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

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

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

Шаг 10. Опубликуйте портфолио

Упакуйте свои наработки в портфолио и доработайте подачу по обратной связи от практиков в сообществе или руководителей в компаниях, где хотите работать (можно через мессенджеры, а лучше личные встречи). Такой шаг поможет вам почувствовать себя увереннее и пойти к новым высотам (Минутка мотивации!).

Вы можете собрать подробное портфолио в Readymag, Tilda или Webflow:

Или поделиться примерами работ, кусочками процесса прямо в dribbble: https://dribbble.com/NewWingsAsya 

Очень важно. В портфолио фокусируйтесь на презентации навыков, умений и подхода, а не только на клевом и интересном визуале. Следуйте принципу “один экран/слайд – одна мысль”.

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

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

А еще, Readymag, Tilda и Dribbble поддерживают установку счетчика веб- аналитики, так вы сможете видеть с каких стран/регионов и в каком количестве каждый день к вам заходят новые клиенты и чем они интересуются.

Что дальше изучать по веб-дизайну: качайтесь в бренд-дизайне, анимации и иллюстрации

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

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

  • Controforma. Брендинг. Смелость, основанная на понимании. Курс от брендингово агенства Шишки. Курс создан для людей, которые хотят более свободно чувствовать себя в мире брендинга. Здесь уделяют немалое внимание всем этапам создания фирменного стиля — от стратегии до визуала.
  • Controforma. Слово дизайнера. Для всех кто сталкивается с барьером при коммуникации в работе. Потеют ладошки на сцене, нужные слова приходят после встречи, в очередной раз не выходит убедить в правильности своих идей или рассказать о себе и своей работе.
  • Пройдите курс по работе с клиентом. Есть классный курс у Ильяхова: Курс о работе с клиентом для редактора. Для веб-дизайнеров он тоже годится.
  • Освойте iPad для создания концептов и иллюстраций. Мне освоить иллюстрацию на iPad помогала Настя Никсен.
  • Пройдите GoPractice: Курс управления продуктом на основе аналитики. Курс поможет увидеть пользу цифр для принятия творческих решений и корректировки курса.
  • Изучите книгу Загмайстер и Уолш: О Красоте. Книгу создали известные дизайнеры Стефан Загмайстер и Джессика Уолш. В книге со смаком раскрыта сущность красоты и продемонстрирована сила эстетически красивого дизайна. Мне прямо зашла.

Вывод и рекомендация

Если вас интересует творческая сторона веб-дизайна и быстрый системный ответ на вопрос как стать веб-дизайнером, то вы можете пройти сначала практику в проектах на курсах Breezzly, затем изучить копирайтинг и основы работы с клиентом у Ильяхова, основы типографики, бренд-дизайна и работы с клиентам в Contoforoma, а затем уже подбирать следующую серию курсов.

Кто такие UI-дизайнеры и чем они занимаются

Посты в категории UI-дизайн

Кто такие UI-дизайнеры и чем они занимаются

Анастасия Свеженцева

6 сентября 2020

Посты в категории UI-дизайн

Обзор 5 лучших UI курсов – обучение на дизайнера пользовательских интерфейсов

Анастасия Свеженцева

5 августа 2020

Посты в категории UI-дизайн

Обзор 5 лучших курсов по Figma: онлайн, бесплатные и платные

Анастасия Свеженцева

4 августа 2020

18 000+ участников – здесь ваши друзья, напарники и новые идеи

Присоединиться

Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов