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

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

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

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

Содержание статьи:

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

UX-дизайн

UX (от англ. User eXperience) — это опыт взаимодействия пользователя с интерфейсом

Проще говоря, UX-дизайн направлен на то, чтобы пользователю было удобно взаимодействовать с интерфейсом продукта. Продуктом может быть всё что угодно: от обычного лэндинга, до сложного мобильного приложения или desktop-программы.

На самом деле, UX встречается не только в веб-дизайне, но и в обычной жизни. Чтобы лучше понять эту дисциплину, давайте рассмотрим несколько реальных примеров из жизни:

  • UX — это когда вы идете домой по тротуару, а затем срезаете путь по вытоптанной на газоне тропинке, потому что она укорачивает вам путь до дома
  • UX — это когда кнопка ВКЛ./ВЫКЛ. на пульте от телевизора окрашена в красный цвет и немного больше всех остальных
  • UX — это когда самая важная информация на сайте бросается в глаза

Можно много перечислять подобных примеров, но у всех у них есть одна суть:

UX — это самый быстрый и удобный способ для пользователя достичь нужный ему результат

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

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

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

На стадии UX-дизайна выполняются следующие задачи:

  • Прорабатываются цели заказчика
  • Прорабатываются цели пользователей
  • Проводится анализ конкурентов и определяются требования к проекту
  • Составляется информационная архитектура
  • Проектируется взаимодействие
  • Исследуется и анализируется поведение пользователей

Возможно, по каждому из этих пунктов я напишу отдельные статьи, но пока что просто знайте о них 🙂 То есть UX — это в большей степени аналитическая работа, нежели креативная, но зато, в какой-то степени интересная 🙂

Веб-дизайн, он вам не Фотошоп

Многие полагают, что веб-дизайн = визуальный дизайн и всё. То есть, что веб-дизайн — это в основном создание иконок, кнопок, красивых менюшек, баннеров и картинок в Фотошопе (UI направление). Но это далеко не так.

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

Так вот, если вы хотите стать крутецким веб-дизайнером, тогда развивайте в себе 2 направления:

  • Учитесь проектировать и работать с целями пользователей (UX)
  • Развивайте чувство вкуса, чтобы красиво оформлять проекты (UI)

Web-дизайнер – это специалист, способный проложить результативный путь от владельца бизнеса до его потенциального клиента.

Плохой и хороший веб-дизайнер

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

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

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

Хороший веб-дизайнер

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

Чтобы стать хорошим веб-дизайнером, вам нужно научиться проводить исследования проекта. Кто-то может сказать, что это совершенно не относится к дизайну. Да, я бы мог с вами согласится, если бы этот разговор был лет 10 назад. Но сегодня рынок диктует свои правила, под которые нужно подстраиваться.

Поэтому прежде, чем приступать к разработке визуального оформления, сначала нужно определить 2 вещи:

  1. Потребности целевой аудитории заказчика
  2. Какую именно информацию хотят видеть пользователи в будущем продукте

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

Проектирование интерфейса

Это следующий шаг, после того, как вы провели исследования проекта. Здесь ваша задача — составить структуру будущего проекта и распределить информационные блоки по степени их важности для пользователя (вверху – самая важная информация, внизу – менее важная). По умному, создание такого «каркаса» называется Wireframe.

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

Проектирование интерфейсов

Для проектирования можно использовать специальные программы (например Axure), а в крайних случаях можно просто рисовать от руки на обычном листе бумаги (потом отсканировать и отправить клиенту на согласование). Также ваерфреймы можно делать в Figma или Sketch, или использовать онлайн сервисы на подобии wireframe.cc.

UI-дизайн

Вот мы и подобрались ко всем привычному UI-дизайну. Это как раз то, что многие себе представляют при слове «веб-дизайн». То есть UI — это визуальная часть проекта. На этом этапе как раз и происходит превращение продукта из гадкого утенка в прекрасного белого лебедя 🙂

Приступать к визуализации (UI-дизайну) можно только после того, как вы проработали UX-дизайн, провели исследования целевой аудитории и составили структуру проекта.

Раньше, для UI-дизайна использовали только Photoshop. Сейчас уже есть специальные программы для работы с UI, которые во многом удобнее старого доброго фотошопа. Это Figma, Sketch и Adobe XD. Я настоятельно рекомендую вам освоить хотя бы одну из них. Лучше всего Figma, а если вы пользуетесь MacOS, то Sketch. 

Основные правила визуального дизайна

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

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

Текст и ссылки:

  • Используйте удобочитаемые шрифты и не менее 12 pt
  • Используйте текстовую иерархию (заголовок h1 должен быть больше, чем h2 и так далее)
  • Используйте оптимальный интервал между строк
  • Используйте шрифты преимущественно с сайта fonts.google.com
  • Следите за читабельностью текста (например, не пишите светло черным по черному фону и т.п.)
  • Не используйте CAPS LOCK, если текст состоит из 5 и более слов
  • Делайте ссылки подчеркнутыми. Исключением могут быть только ссылки навигации и меню
  • Используйте “хлебные крошки”, если вложенность страниц на сайте больше 3х уровней

Графика, изображения, элементы:

  • Избегайте шаблонных фотографий в своём дизайне, то есть тех, которые используются на каждом 2 сайте. Лучше всего потратьте немного времени и постарайтесь найти менее “заезженные” снимки или же сделайте их самостоятельно.
  • Не используйте слишком маленькие отступы между элементами, делайте больше “воздуха”
  • Внешние отступы должны быть всегда больше внутренних
  • Не делайте иконки из обычных .jpeg изображений
  • Все иконки сайта должны быть в одном стиле
  • Масштабируйте изображения пропорционально их оригиналу

Цвет и композиция:

  • Используйте 1-2 акцентных цвета для сайта, но не более
  • Акцентными цветами помечайте только самые важные части сайта. Как правило, это кнопки, стрелки и тому подобное

Помимо этого, я подобрал для вас 2 классных видео на ютубе, которые объясняют понимание цвета и композиции. Советую вам их посмотреть.


Верстка

Да, да, сегодня веб-дизайнер должен обладать хотя бы базовыми навыками верстки. Я не говорю про углубление во Frontend-разработку (это уже совсем другое направление с акцентом на программирование JavaScript), но самые азы вы должны знать. А для этого вам нужно изучить HTML и CSS. В этом вам может помочь сайт htmlbook.ru.

Благодаря пониманию верстки, вы, как минимум, будете выделяться среди большого количество своих коллег, а как максимум — сможете создавать дизайн-макеты, которые можно будет сверстать без особых усилий и “костылей”. За это вас будут обожать frontend-разработчики, если устроитесь на работу в веб-студию 😊

Если вы будете работать на фрилансе, то со знанием вёрстки можно оказывать услугу веб-дизайна “под ключ”. А это уже совсем другой уровень и заказчики будут смотреть на вас совсем другими глазами. Более того, при таком подходе можно реализовать свою идею от начала и до конца, не передавая проект другим людям на дальнейшую доработку.

Вдохновение

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

  • Theme Forest — на этом ресурсе публикуются самые крутые работы веб-дизайнеров со всего мира. Там очень жесткая модерация и поэтому, каждый макет, представленный на этом сайте, отвечает всем основным канонам современного веб-дизайна
  • Behance — хороший сборник работ для вдохновения идеями
  • dribbble — еще одно тусовочное место веб-дизайнеров, где можно подсмотреть интересные для себя идеи и фишки

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

А чтобы начать практиковаться берите и повторяйте чужие работы. Отрисовывайте такие же макеты. Можете придумывать себе вымышленных заказчиков, которые просят у вас разработать дизайн для них на определенную тему. Придумали и начинаете прорабатывать сначала UX, а затем уже и UI. С таким подходом ваши скилы будут потихоньку улучшаться.

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

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

Если вы хотите работать в качестве фрилансера, тогда стремитесь стать full-stack дизайнером. Изучите UI, UX и учитесь верстать свои дизайн-макеты. Но будьте готовы, что на самостоятельное обучение может уйти не один год. При этом, нет никаких гарантий, что на середине пути вы не “перегорите” и не махнете на все рукой, как это часто и бывает…

Можно пойти более коротким путем и пройти онлайн-курс (например, этот). Его преимущество в том, что там вас с нуля будут обучать именитые веб-дизайнеры из известных компаний (Яндекс, Mail и других). Плюс такого пути в том, что вы сэкономите кучу своего времени и сразу получите практический опыт + возможность дальнейшего трудоустройства. Но есть и минус — курсы стоят денег и не у каждого они есть.

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

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

Дерзайте, и я надеюсь в скором времени у вас отпадет вопрос, как стать веб-дизайнером с нуля. Желаю вам успехов и карьерного роста!

С уважением, Георгий Тимофеев!

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...

Комментарии 2

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

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

    • То, сколько веб-дизайнер будет зарабатывать непременно зависит от самого человека и от его скилов. А по поводу графических редакторов, то поверьте — это не самое сложное, что есть в веб-дизайне 🙂 Например, Figmу можно освоить буквально за пару дней. Самое сложное — это начать, наработать практический опыт и не опустить руки на середине пути 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *