Обзор самых топовых курсов по веб-дизайну для новичков и профессионалов

Уроки на ЛофтБлог

Создатели портала бесплатных видеоуроков Loftblog.ru не хотят видеть своих посетителей унылыми и перегруженными потоком технической информации, поэтому обещают сделать обучение увлекательным и эффективным. Представление о механике работы можно получить, пройдя бесплатный курс по дизайну сайта-портфолио в редакторе Photoshop. На 4 уроках, заложенных в обучающий план, создается «шапка» интернет-ресурса, рассматриваются правила оформления контента, особенности перехода от шаблона обычного сайта к версии для мобильных устройств, приемы оптимизации работы с помощью модульной сетки. Для пользователей, в том числе, незарегистрированных, доступен и комплекс видеозанятий по оформлению landing page (посадочной страницы) в Adobe Muse.
 

YouTube-канал Дмитрия Волкова

На канале Уроки WEB-дизайна своим опытом делится арт-директор, проектировщик интерфейсов, создатель UX-продукта Дмитрий Волков.

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

Tilda Education

Материалы образовательного журнала Tilda.education адресованы пользователям, интересующимся созданием интернет-сайтов в Tilda Publishing — блочном конструкторе. Практические руководства предлагаются в форматах онлайн-учебников. Наличествуют цифровые пособия по созданию landing page, теории дизайна, анимации в вебе, развитию визуального вкуса. Текстовый контент учебников перемежается с наглядными тематическими иллюстрациями.
 

Блог Максима Шайхалова

В авторском блоге Шайхалова размещены статьи, обзоры литературы и подборки практических советов для осваивающих web-design. Имеются публикации об основах типографики, приемах повышения читаемости электронных текстов, диалоговых окнах в вебе, редизайне блога. В отдельные рубрики вынесены темы «Интерфейс», «Фотошоп», «Иллюстратор», «Фирменный стиль».
 

WebDesign Master

Плейлисты канала WebDesign Master формируются по разным принципам. Так, подборка «Мастер веб-дизайна» наполнена видеоуроками о процессах оформления ресурсов в зависимости от сфер деятельности их владельцев: салон красоты, пиццерия и другие.

В каталоге видеозаписей по созданию landing page — 13 уроков, демонстрирующих возможности WordPress. Имеется объемная подборка занятий, призванная обучить созданию «под ключ» заказных сайтов.

Дизайн Мания

На портале Design-mania.ru имеются как сборники разноплановых «исходников» (кистей, иконок, шрифтов), так и статьи, полезные заметки, рекомендации и тематические уроки. На последних изучаются основы верстки, юзабилити, типографики, оформления логотипов. Есть подраздел с примерами креативно оформленных интернет-ресурсов, обзоры дизайнерских блогов и теория по технологии флеш.
 

Видеоуроки Figma

Курс состоит из 84 уроков, на которых пользователей обучают работе в Figma.

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

Нетология

В своих программах онлайн-университет Netology.ru аккумулирует опыт лучших практикующих специалистов Рунета. Подготовить веб-дизайнера с нулевого уровня до позиции «middle» в университете обещают за 4,5 месяца регулярных занятий, проходящих в формате видеолекций с выполнением тематических заданий. В учебном плане — разбор этапов дизайна сайтов, обучение основам выбранного направления, знакомство с инструментарием Figma и Cinema 4D, анимирование интерфейсов в After Effects. Студенты создают макеты студийного качества, работают над собственным проектом для портфолио. Им помогают составить продающее резюме, готовят к собеседованию, а по завершении обучения выдают документ, подтверждающий квалификацию.

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

• Курс Дизайнер мобильных приложений для начинающих с выдачей диплома и поддержкой.
• Полуторагодичное обучение Профессии «Fullstaсk веб-дизайнер» с выдачей Диплома о профессиональной переподготовке установленного образца и помощью в трудоустройстве.

Если ещё не умеете, то учитесь рисовать

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

По рисованию есть много видео и курсов, а ещё обратите внимание на книги. Например, вот эти:

• Дмитрий Горелышев. «Простое рисование»;
• Марк Кистлер. «Вы сможете рисовать через 30 дней. Простая пошаговая система, проверенная практикой».

Типографика

Знание типографики — один из основных навыков любого дизайнера, и не важно, создает ли он интерфейсы, делает макеты печатных газет или верстает плакаты.

Важно!

Типографика на странице тесно связана с другими элементами интерфейса, поэтому нужно правильно ей пользоваться.

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

Дизайнер, который разбирается в типографике:

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

Exploring The North Face on Dribbble

Книги

• Александра Королькова. Живая типографика.
• Эрик Шпикерманн. О шрифте.
• Дизайн‑бюро Артема Горбунова. Типографика и верстка.

14 медиа о веб-дизайне

• http://webdesignerwall.com. Сайт посвящен не только созданию дизайна, но и затрагивает темы разработки, верстки, анимации и продвижения.
• http://houseofbuttons.tumblr.com. Здесь можно найти десятки интересных примеров оформления кнопок на сайте (многие с готовой анимацией).
• https://www.webdesignerdepot.com. Еще один информационный сайт для дизайнеров, затрагивающий самые разнообразные сферы, начиная с приемов оформления интерфейса и заканчивая организацией рабочего процесса.
• https://webdesignledger.com. Неплохой ресурс о веб-дизайне, на котором можно найти много различных подборок удачных решений, новые тренды, узнать больше о типографике и элементах дизайна сайтов.
• https://designyoutrust.com. Ежедневная подборка новостей, событий и тенденций в сфере дизайна.
• https://www.creativebloq.com/computer-arts-magazine. Международный интернет-журнал о цифровом искусстве.
• https://say-hi.me. Один из лучших русскоязычных ресурсов, рассказывающий о творчестве для креативных людей.
• https://designpub.ru. Рассказывают о событиях, типографике, дизайн-процессах, иллюстрации и саморазвитии.

«Дизайн-кабак» — сайт о дизайне и о том, что с ним связано

Два вредных мифа о дизайне

Миф первый: нельзя стать дизайнером без образования

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

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

Вот например, история о том, как бывшая сотрудница Microsoft самостоятельно выучилась на дизайнера и сменила профессию. Теперь она ведёт свой блог (на английском), где делится полезной информацией с другими новичками.

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

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

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

Миф второй: чтобы стать дизайнером, нужен врождённый талант

Талант и задатки действительно многое упрощают, но эти качества можно развивать. Кроме того, даже в дизайне нельзя успешно работать на одном таланте, без труда и упорства. Об этом, кстати, рассказывают в интервью многие известные дизайнеры. Нужно много знаний, навыков и умений. Даже если какой-то проект делается «одной левой», обычно за этим стоят годы развития в профессии и опыт.

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

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

История веб-дизайна начиналась в 1990 году, когда британский учёный Тим Бернерс-Ли разработал язык HTML (англ. HyperText Markup Language) — язык гипертекстовой разметки. С его помощью 6 августа 1991 года команда Бернерса-Ли сделала первый в мире сайт — http://info.cern.ch.

Главная страница первого в мире сайта info.cern.ch

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

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

Поисковик Yahoo! в 1993-м выглядел так
В 1997-м сайт Apple был далек от минимализма, который прославил компанию
Сайт, посвященный истории и развитию интернета в 1996 году

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

До 1996 года Консорциум выступал в роли консультативного органа, где крупнейшие мировые компании вырабатывали цельный подход к развитию HTML. Благодаря единым стандартам и набору тегов веб-сайты работают в разных браузерах и на разных устройствах. Сегодня мы называем это кросс-платформенностью.

Настоящий веб-дизайн, близкий к тому, который мы знаем сегодня, появился в период с 1994 по 1998 год. Тогда интернет-технологии совершили бешеный рывок вперёд.

1994

Первая версия браузера Opera.

1995

Появились Internet Explorer 1, JavaScript и PHP.

1996

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

1997

Релиз Internet Explorer 3 и HTML 4.0 — в мире уже 100 млн пользователей.

Именно технологический прорыв привёл к появлению веб-дизайна.

• Разрешение мониторов увеличилось до 800×600 пикселей.
• Мониторы стали отображать 256 цветов и оттенков, что привело к появлению сайтов с салатовым текстом на синем фоне.
• Первая типографика: на сайтах появились веб-шрифты Times New Roman и Courier New.
• Первая баннерная реклама, видеоплееры, анимированные GIF-изображения и цветные кнопки с 3D-эффектом.

Один из первых сайтов Рунета — tema.ru — сохранился в неизменном виде с 1995 года

Много ответственности и работы, но и большее вознаграждение

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

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

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

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

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

Oleander – тема для блога и магазина

Тема WordPress Biz Lady

Coastal – универсальная тема

Architekt – WP бизнес тема

Zircon II

Arvios – универсальная тема

Negation – адаптивный HTML5-шаблон

Bootstrap Starter Kit – Web Edition

Данная публикация является переводом статьи «How to Become a Web Designer» , подготовленная редакцией проекта.

Как научиться веб-дизайну с нуля?

Самое главное в процессе освоения веб-дизайна — иметь чёткий план, структуру, стратегию изучения

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

В отдельной статье на сайте мы разместили наш персональный план «Как стать веб-дизайнером за 5 шагов». Его можно использовать как некий «скелет» для организации дальнейшего обучения.

Курсы веб-дизайна с нуля

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

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

Полезные книги для веб-дизайнера

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

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

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

Ководство — Артемий Лебедев. Книга представляет из себя свод правил и принципов, применимых к самым разным областям дизайна. Руководитель самой известной дизайн-студии России рассказывает одновременно о законах композиции, и о том, какие кавычки использовать в макетах. Читать книгу можно с любого места, и в этом её прелесть. Скачать книгу →

Не заставляйте меня думать — Стив Круг. Настоящая кладезь знаний для всех, кто планирует связать свою жизнь с дизайном интерфейсом. Главная мысль автора заключается в том, что интерфейс (сайт или приложение) в руках пользователя не должен быть преградой для решения поставленных задач. И, конечно же, Стив Круг на примерах показывает, как сделать продукт в разы круче. Скачать книгу →

iПрезентация — Кармин Галло. Одна из первых книг в моей коллекции. Она не связана напрямую с веб-дизайном — автор делает большой упор на презентации и storytelling и берёт за основу самые популярные и эффектные презентации продуктов от компании Apple. Однако, принципы, используемые для создания крутых презентаций и промо-сайтов примерно во многом похожи. Скачать книгу →

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

GeekUniversity

Обучение веб-дизайну на портале с гарантированным трудоустройством GeekBrains организовано на факультете с одноименным названием. Студентов в течение года подготавливают к последующей работе в кросс-функциональной команде, обучая дизайну разных направлений: веб, продуктовому, UX/UI. Помимо основных занятий, на которых учат анализировать целевую аудиторию, прототипировать и пользоваться графическими редакторами, есть узкоспециальные уроки — в частности, для пользователей с ограниченными возможностями и по преодолению боязни «чистого листа».
 
За каждым слушателем онлайн-курса закрепляется куратор, который помогает разбираться с материалом. Портфолио выпускников, получающих свидетельства об окончании курсов GeekBrains, позволяет претендовать на позиции Junior либо Intern Designer.
 
Образовательный портал регулярно предлагает бесплатные интенсивы, пройдя которые, можно освоить Photoshop и научиться создавать посадочные страницы. 
 

Skillbox

Университет востребованных профессий Skillbox.ru регулярно анонсирует онлайн-курсы с гарантированным трудоустройством либо стажировкой.
 
Первый вариант получить новую работу и специальность веб-дизайнера — это профессиональное 2-годичное обучение, в ходе которого студенты получают первые оплачиваемые заказы уже спустя 4 месяца. В числе преподавателей — исключительно дизайнеры-практики. Стартовая половина курса отведена под получение профессиональных навыков с нулевого уровня до PRO, ознакомление с UX-дизайном и освоение Photoshop. В оставшийся период студенты определяются со специализацией (работа с рекламой, мобильными приложениями или промо-сайтами), вникают в UI-дизайн, практикуются в графических редакторах интерфейсов.
 
Вторая из популярных программ Skillbox имеет схожий, но более компактный учебный план, который рассчитан на 8 месяцев. Видеоуроки можно смотреть на любых устройствах, задания отправляются на проверку в удобное для слушателя время, ошибки разбираются с куратором. К моменту получения диплома выпускники собирают портфолио из 15 самостоятельно выполненных работ.
 
Больше онлайн-курсов по digital-дизайну можно найти в каталоге учебных программ университета.
 

Как сделать красивый сайт

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

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

Readymag

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

Tilda

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

Photoshop

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

Sketch

Подойдёт в том случае, если вы используете продукты компании Apple, так как программа пока доступна лишь для iOS.

Figma

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

Выберите интересное направление

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

Какой бывает дизайн:

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

• Дизайн пользовательских интерфейсов (UX-дизайн, от англ. User Experience). Это оформление систем, через которые пользователь взаимодействует с продуктом: например, меню программы, клавиатура телефона, программная панель у микроволновки и тому подобное. Задача UX-дизайнера — сделать так, чтобы пользоваться устройством или программой было просто и комфортно.
• Дизайнер мобильных приложений. Разработка внешнего вида приложений под iOS и Android и проектирование мобильных интерфейсов. Смежное направление с UX-дизайном. Мобильные телефоны и планшеты развиваются и могут всё больше, так что это очень перспективное направление.
• Веб-дизайн. Работа с сайтами. Они должны быть не только красивыми, но и удобными, иметь ясную структуру, а информация должна легко восприниматься. И есть ещё множество тонкостей, которые нужно учесть.
• Графический дизайн. Разработка логотипов и символики, дизайн упаковок, книжных обложек, обложек музыкальных дисков, уличных рекламных баннеров, рекламных блоков в бумажных и сетевых изданиях… и многое другое.
• Гейм-дизайн. Создание компьютерных игр — и не только продумывание их визуальной составляющей, но и разработка уровней, систем вознаграждения, игровых механик, обучения. Сложная и многогранная работа на стыке программирования, дизайна и даже менеджмента.
• Дизайн интерьера. Внутреннее оформление помещений: жилых, офисных, торговых, производственных… Как зонировать пространство? Можно ли поставить перегородку? А снести стену? Как поставить мебель так, чтобы было удобно и всё поместилось? Как продумать освещение? Какой стиль и цветовую гамму выбрать?.. Ответы на все эти вопросы должен найти дизайнер интерьера.
• Дизайн одежды, или фэшн-дизайн (Fashion Design). Должна одежда быть удобной? Или практичной? А может быть, красивой? Или всё это одновременно?.. Это темы фэшн-дизайна.

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

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

Определитесь с типом сайта

Лендинг

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

Яркий пример Landing Page — вся основная информация на одной странице

Корпоративный сайт

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

Сайты банков — классический пример корпоративных сайтов

Сайты банков — классический пример корпоративных сайтов

Эти сайты знакомы каждому: AliExpress, OZON, «М.Видео» и десятки других аналогичных. Главный вызов дизайнеру здесь — в объёмах информации и товаров, а также в проектировании страницы заказа.

6 сайтов для дизайнеров о шрифтах и типографике

• https://ilovetypography.com. Один из лучших ресурсов для тех, кто небезразличен к буквам. На этом сайте вы найдете массу полезных и просто интересных заметок о типографике и том, что с ней связано.
• https://fonts.google.com. Подборка бесплатных шрифтов от Google, которой чаще всего пользуются дизайнеры. Самое полезное — возможность посмотреть, с какими шрифтами чаще всего сочетается выбранный вами вариант.
• https://www.paratype.ru. Отличный сайт с хорошей подборкой шрифтов. Из приятного — можно без особого труда подобрать даже красивый русский шрифт, из печального — большинство шрифтов придется приобретать (но на сайте часто проводятся распродажи).
• https://fontshop.com. Магазин шрифтов, где можно подобрать удачное решение для своего проекта. Но особенно интересен сайт даже не количеством самих шрифтов, а примерами их применения, которые позволяют лучше оценить, насколько выбранный шрифт подходит для вашей задачи.
• https://www.dafont.com. Огромная подборка шрифтов для самых разных задач, а еще — удобный интерфейс и много новинок.
• https://typejournal.ru. Полезный интернет-журнал о типографике и шрифтах.

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

Рабочий процесс дизайнера выглядит так:

• Дизайнер получает данные от заказчика — зачем нужен сайт, как он будет работать, какие пользователи будут на него заходить. Хороший вариант, если заказчик точно знает, что нужно. Но так бывает не всегда, поэтому дизайнер должен сам задавать вопросы и получать ответы. Задачу, требования к сайту и ответы на вопросы дизайнер записывает в бриф.
• Веб-дизайнер создаёт наброски или прототипы будущего сайта: на бумаге или в специальных программах. Прототипы больше похожи на схемы, где указывается расположение основных элементов на страницах сайта.
• На основе прототипов дизайнер рисует цветной макет. Тут уже можно работать над сочетаниями цветов, добавлять анимацию.
• Готовый макет дизайнер передаёт заказчику или разработчикам, которые перенесут его на сайт.

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

Кому стоит изучать веб-дизайн?

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

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

1. Способность обучаться. Если вы умеете самостоятельно искать ответы на свои вопросы, а также находить, изучать и, самое главное, понимать новый материал, ваш рост в веб-дизайне будет более стремительным.
2. Эмпатия. Умение ставить себя на место другого человека (пользователя вашего будущего сайта), поможет вам создавать проекты, ориентированные на финального потребителя и решающие реальные задачи.
3. Собранность и дисциплинированность. Работа (и обучение) веб-дизайнера с нуля — сложный многошаговый процесс. Иногда что-то может не получаться. Без жёсткого стержня внутри принимать свои недостатки и исправлять ошибки будет немного труднее.

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

Часть третья: Wireframing, каркасное моделирование

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

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

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

Забудьте о стилизации и акцентируйте внимание на структуре

Для создания каркаса можно воспользоваться специальным приложением или нарисовать от руки на бумаге в клеточку или в точечку, после чего отсканировать и положить в папку с материалами проекта. Я обычно использую онлайн приложение wireframe.cc, так как можно в реальном времени вносить правки и согласовывать с клиентом. Но иногда и прорабатываю структуру страниц на бумаге, если лень садиться за комп.

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

6 сайтов для подбора цветовой палитры

• https://www.materialpalette.com. Сервис для подбора палитры работает очень просто: выбираете два основных цвета, и сайт предлагает вам расширенную цветовую схему.
• http://www.flatuicolorpicker.com. Множество очень красивых оттенков, разбитых по категориям: красные, фиолетовые, синие, зеленые, желтые, оранжевые и серые.
• https://coolors.co. Онлайн-генератор цветовых схем для сайта создает подборку из пяти оттенков, каждый из которых вы можете изменить по своему усмотрению. Чтобы эффективнее пользоваться сервисом, советуем не пропускать инструкцию в самом начале.
• https://colorfulgradients.tumblr.com. Очень хорошая подборка градиентов на любой вкус.
• http://paletton.com. Один из самых удобных генераторов цветовых палитр. Его ценят за широкие возможности и гибкие настройки.
• https://color.adobe.com/ru/create/color-wheel/. Неплохой и функциональный инструмент для создания палитры от Adobe. Обязательно попробуйте!

Часть вторая: Исследование

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

Вы должны чётко понимать, ПОЧЕМУ вы создаёте именно такую секцию, именно такие элементы, именно такой порядок на Web странице. Все ваши действия должны быть подкреплены железобетонным основанием. Довольно странно будет звучать объяснение на вопрос «Почему здесь эти круглешочки?» в виде — «Потому, что я где-то увидел такие и решил данную форму применить под ваш выдуманный контент, так как у меня не работает фантазия». Странно, не правда ли?

Right Way — исследование. Исследование — это самый первый шаг дизайнера при работе над любым проектом. Нужно чётко вывести группу пользователей, максимально узнать аудиторию, под которую вы разрабатываете интерфейс, узнать потребности этой аудитории. Конечно, основываясь только на своем личном опыте и своих ощущениях довольно сложно прийти к объективно правильному решению в интерфейсе, ведь вы не беспристрастны по отношению к результату вашего творчества и ваш личный опыт относительно конкретного продукта может быть весьма ограниченным. Тем не менее, если вы хорошо изучили продукт, для которого делаете дизайн сайта, то можете сделать какие-то выводы, принять решения. Самый минимум, который вы просто обязаны сделать, если вы фриансер, работаете один и у вас нет своей команды UX специалистов — изучить текущий опыт бизнеса, накидать портрет среднего потребителя продукта. Например, если вы создаёте посадочную страницу для продажи сельскохозяйственной техники, скорее всего, потенциальные клиенты не ищут особых изысков в визуальном исполнении сайта, их более интересуют каталог продукции, фотографии, сроки и способы дставки именно в их регион, цены и возможные скидки. Последний пункт говорит о том, что проектирование UX очень тесно связано с бизнесом. Это то, о чём обычно не говорят веб-дизайнеры, но думают все.

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

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

Наименование персоны	Что ценят в первую очередь?	Каковы цели посетителей?
Трактористка Глаша	Сроки постаки (не опоздать на посев) Удобство доставки в регион (жд, авто, авиа) Качество оборудования (чтобы не сломалось посреди поля) Простота подключения (консультации по сложному агрегату)
Персона #2	…..	…..
Персона #3	…..	…..

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

Заключение

Выбирая программу для создания сайта, ещё раз подумайте над своими целями. Если нужно сдать проект через несколько дней, то стоит ли копаться в настройках Photoshop? И напротив, если вы решили сменить профессию, то без знания основных программ не обойтись.

Рассмотренные в статье принципы — первый шаг на пути становления дизайнера. Если вы действительно заинтересованы в создании классных продуктов, вам предстоит открыть для себя ещё очень много нового и интересного. Начать можно с наших вебинаров, а стать настоящим профессионалом — с помощью годового курса «Веб-дизайн с нуля до PRO».