Курс по
веб - дизайну

Овладейте востребованной онлайн-профессией веб-дизайнера за 60 дней.

Создавайте дизайны сайтов и зарабатывайте 40 000 – 200 000 рублей в месяц

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

В процессе создания сайта дизайн идет на первом месте. Именно с него все и начинается.

Веб-дизайнер – это тот, кто проектирует и создает понятный и удобный в использовании дизайн веб-сайта на основе анализа данных о целевой аудитории. Он проектирует страницу так, чтобы ею было удобно пользоваться.

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

Веб-дизайн входит в ТОП-5 самых 
востребованных онлайн-направлений

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

Figma – новое слово в веб-дизайне

Долгое время лидером и чуть ли не единственной массовой программой для создания макетов сайтов был Photoshop. Потом появился Sketch.

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

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

Почему мы обучаем
создавать дизайн в Figma

Доступность

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

Удобные инструменты

Photoshop изначально создавался как редактор фотографий, поэтому инструменты именно для рисования в нем — не самые удобные для дизайнеров. В Figma совершенно иной подход: удобный Pen Tool, удобное создание эффектов

Работа со шрифтами

В Photoshop или другой графической программе нельзя использовать для дизайна шрифт, который не установлен в системе. В Figma шрифты подтягиваются из Google Fonts либо автоматически подгружаются в проект

Удобный бэкап

Все версии и изменения хранятся в Figma. Можно в любой момент откатиться на нужную версию. Больше нет необходимости хранить много версий одного проекта на компьютере

Совместная работа

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

Хранение файлов

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

CODEFORMYSELF ПРЕДСТАВЛЯЕТ

Курс по веб-дизайну

Научись создавать современный дизайн сайтов в Figma по урокам
профессионала, у которого за плечами 1800+ работ!

Курс вам подойдет, если вы:

Начинающий веб-дизайнер

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

Веб-дизайнер с опытом

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

Ищете доходную профессию

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

Желаете сменить профессию

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

Посмотрите короткую видеопрезентацию от автора курса!

Как выглядит личный кабинет

Как проходит обучение

Вы получаете один из наиболее удобных форматов обучения – онлайн курс с круглосуточным доступом в режиме 24/7/365 и авторской поддержкой на всех этапах обучения и практики. Уроки уже записаны и упакованы в обучающую систему, которая доступна с любой точки мира и любого устройства.

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

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

  1. 1Прохождение курса на online-платформе
  2. 2Уроки доступны в любое удобное время
  3. 3Чёткая структура разделов по темам
  4. 4Домашние задания с поддержкой
  5. 5Поддержка наставника на каждом этапе обучения
  6. 6Доступ к чату студентов, которые также проходят курс
  7. 7Оформление портфолио на платформе Behance
  8. 8Твёрдые навыки в веб-дизайне
  9. 9Дипломный проект и Сертификат об окончании курса

Особенности обучения на онлайн-курсе

1

Смотрите видеоуроки и задаете вопросы

Во время обучения вы задаете вопросы в комментариях к уроку и гарантированно в течении 48 часов получаете полноценные ответы от куратора курса (исключение: выходные и праздничные дни).

2

Выполняете домашние задание с поддержкой куратора

Прикрепляете домашку в личном кабинете. За проверку отвечает ваш куратор. Он помогает с работой над ошибками и открывает доступ к следующим урокам.

3

Работаете над дипломный проектом

Даниил лично помогает и подсказывает на дипломной работе, которую в итоге будет не стыдно презентовать в своем портфолио. Зафиналиваете проект и получаете Сертификат!

Покупая курс, вы получаете:

Мега-актуальную теорию и бесценные навыки

Теории в курсе посвящено всего 30% от общего объема, и вся она тщательно отобрана на актуальность. В процессе учебы вы создадите адаптивный дизайн лендинга под все виды устройств. Научитесь делать дизайн сложных сайтов на примере интернет-магазина по дизайн-системе. Освоите Фигму, UX/UI, Grid-систему, UI kit, стили, Pixel Perfect и другие прогрессивные фишки, актуальные для 2020 года!

Низкий старт и пошаговая система для новичков

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

Онлайн-занятия из любой точки мира

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

Поддержка куратора и проверка заданий

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

Три крутые работы в портфолио 
и море практики

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

Доступ в специальную нетворкинг зону

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

Дипломный проект

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

Сертификат о прохождении курса

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

Что вы получаете
в итоге

заказать
  • Вы с нуля сможете овладеть самым продвинутым инструментом для веб-дизайнера – Figma. Если сейчас посмотреть все резюме на hh.ru, то в большей части из них есть требование владения Фигмой.
  • Вам не придется лазить по YouTube, разгребать тонны скорее всего устаревшей информации. Все что необходимо и актуально по состоянию на 2020 год, включая личные авторские секреты и наработки, собрано в одном месте.
  • Вы изучаете лишь самые современные инструменты и только востребованные подходы веб-дизайна. Вы сможете делать современный дизайн, используя лишь актуальные и востребованные инструменты, технологии и методы.
  • Вы узнаете, что такое UX/UI – не только в теории, но и на практике.
  • Вы научитесь придумывать яркие красивые дизайны – даже если совершенно не умеете рисовать и никогда не работали дизайнером.
  • Вы освоите актуальную и востребованную Grid-систему.
  • Вы научитесь создавать UI kit и работать с ним.
  • Вы сможете создавать стили для текста, цвета и сеток.
  • Вы научитесь создавать дизайн-систему.
  • Вы научитесь делать дизайны по технологии Pixel Perfect.
  • Вы научитесь создавать современные адаптивные лендинги. А в практическом модуле – сами создадите дизайн адаптивного лендинга под руководством куратора.
  • Вы сможете создать дизайн интернет-магазина по дизайн-системе. А в практическом модуле –создадите дизайн интернет-магазина под руководством закрепленного за вами куратора.
  • Вы научитесь создавать интерактивные прототипы.
  • Вы изучите всю необходимую техническую сторону для создания качественного веб-дизайна.
  • В итоге вы получите очень востребованный навык и актуальную профессию, которая входит в ТОП-5 наиболее популярных и высокооплачиваемых профессий в интернете.
  • Вы узнаете не только, как применять полученные знания на практике, но и как начать зарабатывать деньги либо в веб-студии, либо работая удаленно, или на фрилансе.
  • Вы получаете решение самой главной проблемы каждого новичка: «ГДЕ найти заказ или КАК найти работу».
заказать

Программа курса

Модуль 1 Основы Web UX/UI дизайна

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

Урок 1

Этапы создания дизайна. От идеи до реализации

07:26

В данном уроке поделимся опытом создания дизайна от А до Я. Мы разберем 12 этапов, которые помогут сделать создание дизайна более эффективным и быстрым.

Урок 2

Сетка, отступы и выравнивание

14:16

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

Урок 3

Формы, кнопки и скругления

04:53

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

Урок 4

Типографика

04:01

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

Урок 5

Цвета для сайта

02:56

В данном уроке мы затронем общие принципы подбора цветов для сайта.

Урок 6

Что такое UX/UI

02:52

В данном уроке мы разберем что такое UX и UI.

Модуль 2 Сервисы для веб-дизайнера

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

Урок 1

Все о шрифтах. Где искать и качать

03:33

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

Урок 2

Всё о стоках, платных и бесплатных

03:22

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

Урок 3

Качественный̆ бесплатный фотосток

01:33

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

Урок 4

Сервис иконок

03:18

В этом уроке вы узнаете о полезном сайте с огромным количеством качественных, векторных иконок.

Урок 5

Сервис по подбору палитры цветов

03:39

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

Урок 6

Сервис по подбору пары для шрифта

00:54

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

Урок 7

Сообщества дизайнеров

02:59

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

Модуль 3 Photoshop для веб-дизайнера

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

Урок 1

Инструмент ластик

02:55

В этом уроке я расскажу о том, как с помощью одного инструмента удалить фон у любого изображения.

Урок 2

Mockup

04:44

В этом практическом уроке я расскажу о том, где искать мокапы, зачем они нужны и как с ними работать

Модуль 4 Figma от А до Я

В этом модуле мы разберем детально, весь функционал Figma: как выглядит интерфейс, какие есть инструменты, какие есть настройки и функции.

Урок 1

Скачивание программы

01:05

В этом уроке мы сделаем аккаунт в Figma и скачаем десктоп версию на компьютер.

Урок 2

Обзор интерфейса

04:23

В этом уроке мы познакомимся с интерфейсом.

Урок 3

Frame

02:18

Из этого урока вы узнаете о таком инструменте как Frame, о его свойствах и как с ним работать.

Урок 4

Move и Scale

02:43

Из этого урока вы узнаете о таком инструментах как Move и Scale, о его свойствах и как с ним работать.

Урок 5

Инструмент формы

03:39

В этом уроке мы разберем такой инструмент как формы и разберем их свойства.

Урок 6

Перо и карандаш

01:36

Из этого урока вы узнаете о таком инструменте как Перо и карандаш, о его свойствах и как с ним работать.

Урок 7

Инструмент текст

05:00

В этом уроке мы разберем инструмент Текст и его свойства.

Урок 8

Комментарии

01:05

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

Урок 9

Экспорт

01:24

В этом уроке мы разберем экспорт, какие форматы экспорта бывают и другие его свойства.

Урок 10

Смарт выравнивание

03:23

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

Урок 11

Маска слоя

02:12

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

Урок 12

Share

01:57

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

Урок 13

Модульная сетка

01:27

В этом уроке мы разберем функцию добавления сетки и ее свойства.

Урок 14

Режим смешивания

03:33

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

Урок 15

Стили для текста

03:31

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

Урок 16

Стили для цвета

04:13

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

Урок 17

Компоненты

07:47

В этом уроке мы разберем компоненты, их виды и как их создавать.

Урок 18

Адаптивные элементы

03:58

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

Урок 19

Прототипирование

03:14

В этом уроке мы разберем функцию прототипирования макета.

Урок 20

Плагины

02:37

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

Урок 21

Гифки в Figma

01:38

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

Модуль 5 Дизайн адаптивного лендинга

В данном модуле мы будем создавать дизайн лендинга от А до Я. Мы поработаем с UX и UI. Сделаем дизайн по дизайн системе – с библиотеками цветов, шрифтов, сеток и компонентов. Сделаем адаптив под планшет и мобильные устройства. Плюс весь дизайн мы сделаем по технологии Pixel Perfect.

Часть 1. Десктоп версия

Урок 1

Создаём фрейм и сетку

01:19

В этом уроке мы создадим фрейм и сетку.

Урок 2

Идея, концепция и UX. Проектируем дизайн

08:42

В этом уроке мы разберем ТЗ, набросаем концепцию и определим цель лендинга.

Урок 3

Первый̆ экран

09:53

В этом уроке мы соберем структуру первого экрана. Поработаем с инструментом текст, формами, создадим компоненты и проставим им адаптив.

Урок 4

Второй̆ блок

06:45

В этом уроке мы создадим три карточки на основе компонентов.

Урок 5

Третий̆ блок

07:14

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

Урок 6

Четвёртый блок

04:25

В этом уроке мы создадим на основе компонента блок с объяснением шагов.

Урок 7

Форма заявки и футер

09:44

В этом уроке мы сделаем блок с формой подписки, поработаем с текстом, формами и компонентами, сделаем футер.

Урок 8

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

11:44

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

Урок 9

Работа с мокапами и доработка первого экрана

12:43

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

Урок 10

Учимся подбирать графику

12:58

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

Урок 11

Работаем с градиентами и добавляем фон

06:01

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

Урок 12

Создаем библиотеку цветов для текста

06:08

В этом уроке мы создадим свою библиотеку цветов.

Урок 13

Подбираем цвета для иконок и кнопок

13:09

В этом уроке мы подберем цвета для всех иконок и для кнопок.

Урок 14

Дорабатываем дизайн

10:24

В этом уроке мы пройдемся по ошибкам и исправим их.

Урок 15

Плагин Logo Creator

02:38

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

Урок 16

Выравниваем все элементы

06:04

В этом уроке мы выровняем все элементы по системе Pixel Perfect.

Урок 17

Интерактивные элементы

01:34

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

Урок 18

Component Master Manager

01:25

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

Урок 19

Проставляем адаптив элементов

04:57

В финале мы проставим адаптив для всех элементов, для того чтобы было более удобно создавать версию для планшета и телефона.

Часть 2. Версия для планшета

Урок 1

Создаем фрейм и сетку

01:27

В этом уроке мы создадим фрейм под планшет и добавим ему свою сетку.

Урок 2

Первый̆ блок

05:20

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

Урок 3

Второй̆ блок

03:26

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

Урок 4

Третий̆ блок

05:01

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

Урок 5

Четвёртый̆ блок

06:41

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

Урок 6

Пятый̆ блок

02:48

В этом уроке мы перенесем пятый блок из десктоп-версии и адаптируем его под планшет.

Урок 7

Переносим фон

01:55

В этом уроке мы перенесем весь фон из десктоп-версии и адаптируем его под планшет.

Урок 8

Выравниваем по 8-пиксельной сетке

03:24

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

Часть 3. Мобильная версия

Урок 1

Фрейм и сетка

01:13

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

Урок 2

Первый̆ блок

07:07

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

Урок 3

Редактируем версию для планшета

07:55

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

Урок 4

Второй̆ блок

05:01

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

Урок 5

Третий̆ блок

01:42

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

Урок 6

Четвёртый̆ блок

05:17

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

Урок 7

Пятый̆ блок

03:43

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

Урок 8

Шестой̆ блок

03:55

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

Урок 9

Седьмой̆ блок

08:00

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

Часть 4. Финальные штрихи

Урок 1

Component Master Manager

02:09

В этом уроке мы опять воспользуемся плагином Component Master Manager и снова перенесем новые созданные мастер компоненты на отдельную страницу.

Урок 2

Delete hidden layers

00:54

В этом уроке мы в один клик удалим все лишние слои.

Урок 3

Подготавливаем макет для верстки

04:08

В этом уроке мы подготовим макет для верстки.

Урок 4

Интерактивный̆ прототип

05:01

В этом уроке мы создадим интерактивный прототип для презентации дизайна клиенту или другим лицам.

Модуль 6 Интернет-магазин по дизайн-системе

В данном модуле мы будем создавать полноценный дизайн интернет-магазина. Мы хорошо поработаем с UX. Также создадим UI-кит с библиотекой цветов, шрифтов, сеток и компонентов.

Весь дизайн будет сделан по дизайн системе. В дизайне будет несколько страниц. Также мы все сделаем по системе Pixel Perfect. И по итогу сделаем интерактивный прототип.

Урок 1

Создаем фрейм и библиотеку сеток

04:01

В этом уроке мы создадим фрейм для десктоп-версии и создадим библиотеку сеток.

Урок 2

Проектируем прототип

15:39

В этом уроке мы спроектируем прототип будущего дизайна.

Урок 3

Меню

07:55

В этом уроке мы создадим меню.

Урок 4

Лого, поиск, избранное, корзина и категории

13:20

В этом уроке я покажу как уместить много информации в компактный блок.

Урок 5

Выгоды

04:05

В этом уроке мы поработаем с компонентами и сделаем блок с выгодами.

Урок 6

Популярные разделы

04:07

В этом уроке мы сделаем из одного компонента 18 карточек.

Урок 7

Спец. предложение

05:46

В этом уроке мы сделаем блок со спец. предложением.

Урок 8

Бестселлер, новинки, популярное

09:26

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

Урок 9

Пять карточек товара

08:54

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

Урок 10

Популярная категория

05:18

В этом уроке мы снова на основе компонентов соберем блок с популярной категорией товаров в интернет-магазине.

Урок 11

Последние товары

08:43

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

Урок 12

Полезные статьи

04:40

В этом уроке мы сделаем шаблон из компонентов для блока со статьями.

Урок 13

Блок инстаграм

02:10

В этом блоке мы создадим шаблон блока для фотографий из инстаграма.

Урок 14

Три карточки

02:39

В этом уроке мы сделаем 3 шаблона карточек на основе компонентов.

Урок 15

Футер

08:11

В этом уроке я покажу как грамотно структурировать и располагать информацию в футере.

Урок 16

Подготавливаем фрейм для новых страниц

02:08

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

Урок 17

Создаем страницу категории

07:52

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

Урок 18

Делаем попап

05:22

В этом уроке я покажу как сделать попап, который будет выезжать справа.

Урок 19

Страница товара

11:30

В этом уроке мы создадим новую страницу с подробным описанием товара.

Урок 20

Подготавливаем фрейм для страницы с корзиной

̆01:28

В этом уроке мы создадим свой фрейм для страницы с корзиной.

Урок 21

Карточка товара

07:53

В этом уроке мы создадим шаблон карточки товара для корзины.

Урок 22

Доделываем страницу корзины

08:23

В этом уроке мы создадим фиксированный блок со всей информацией о корзине пользователя.

Урок 23

Grid-система выравнивания

09:54

В этом уроке мы используем технологию Pixel Perfect и выровняем все элементы в дизайне.

Урок 24

Component Master Manager

01:29

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

Урок 25

Модульная сетка

01:27

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

Урок 25

Структурируем папки

04:20

В этом уроке мы структурируем все созданные слои по папкам для более удобной работы с макетом.

Урок 26

Плагин Similayer

02:37

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

Урок 27

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

19:47

В этом уроке мы добавим все иконки в макет по дизайн системе.

Урок 28

Где взять качественную графику?

03:57

В этом уроке я расскажу, где можно взять качественную графику.

Урок 29

Добавляем графику. 1 вариант

05:04

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

Урок 30

Плагин Avtocrop

03:26

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

Урок 31

Плагин Unsplash

03:03

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

Урок 32

Подбираем цвета для сайта + плагин Uigradients

15:26

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

Урок 33

Делаем более живой̆ сайт

01:13

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

Урок 34

Дорабатываем блок полезные статьи

03:19

В этом уроке мы доработаем блок с полезными статьями.

Урок 35

Сканер компонентов

02:12

В этом уроке мы используем сканер макета, который позволит найти все косяки и разбитые компоненты.

Урок 36

Делаем интерактивный̆ прототип

12:23

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

Урок 37

Плагин Delete Hidden Layers

01:13

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

Урок 38

Интерактивные элементы

04:37

В этом уроке мы создадим все интерактивные элементы.

Модуль 7 Фриланс

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

Урок 1

Как быстро наработать портфолио

03:16

В этом уроке я расскажу о 4-х способах того, как быстро наработать портфолио.

Урок 2

Декомпозиция

02:49

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

Урок 3

Как определить сроки и уложиться в них

02:12

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

Урок 4

Как определить стоимость за дизайн и за час

04:06

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

Урок 5

Техническое задание и бриф

02:55

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

Урок 6

Где искать клиентов

06:23

В этом уроке я расскажу о 9 источниках, где можно искать клиентов.

Урок 7

Предоплата

03:28

В этом уроке я расскажу о предоплате, зачем она нужна, что будет если ее брать и если не брать.

Урок 8

Ошибки общения с клиентами

06:32

В этом уроке я расскажу о 10 ошибках общения с клиентами, которые лучше не допускать.

Урок 9

Как из клиента сделать партнера

02:39

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

Урок 10

Дополнительный̆ заработок

02:29

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

Модуль 8 Трудоустройство

В этом модуле мы разберем две темы: как оформить портфолио для того, чтобы презентовать ее работодателю и то, как оформить резюме.

Урок 1

Оформляем портфолио Behance

07:13

В этом уроке я расскажу о Behance, о том какую информацию стоит там указывать и как добавлять свои работы.

Урок 2

HH.ru: оформляем резюме и ищем работу

10:57

В этом уроке мы познакомимся с сайтом hh.ru, создадим резюме, поймем какую заработную плату ставить.

Бонусы к курсу

Бонус 1.

Поддержка куратором и проверка заданий

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

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

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

Бонус 2.

Доступ в нетворкинг-зону

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

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

Бонус 3.

Портфолио на Behance и резюме на hh.ru

Ежедневно Behance посещают 1 500 000 пользователей со всего мира, в том числе заказчики и руководители топовых студий.

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

HH.ru – крупнейший сайт по поиску работы в рунете. По урокам курса вы грамотно оформите свое резюме и определите уровень зарплаты, а также разместите его на этом портале.

Бонус 4.

Дипломный проект и Сертификат

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

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

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

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

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

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

Если рассматривать работу в веб-студии на полный рабочий день, то в среднем можно зарабатывать 70 000 рублей.

Автор курса

  • 10 лет в сфере дизайна
  • №1 в сфере дизайна для инфобизнеса, работает с топами в этой теме Сделал более 1800 работ
  • За всю карьеру ни потратил ни рубля на рекламу
  • Обучил более 1500 человек веб-дизайну
  • В 19 лет (!) поставил цель за 12 месяцев заработать на новую BMW 3-й серии и успешно ее достиг
  • Стабильный ежемесячный доход на дизайне колеблется у отметки 200 тысяч рублей

Преподаватель курсов:

Основы коммерческого дизайна,
Дизайн-система,
Веб-Дизайн (UX/UI),
Веб-дизайнер профессионал,
Дизайн+Верстка

Специализация:

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

Владение инструментами:

  • Photoshop

  • Illustrator

  • Sketch

  • Figma

behance.net/daniilvolosatov

Несколько работ Даниила Волосатова:

Средний заработок
веб-дизайнера на фрилансе

40 000 – 80 000 рублей

По данным сайта фриланса fl.ru, средний гонорар веб-дизайнеров составляет

Лендинг от 14 000 до 40 000 руб. за 1 страницу

Веб-сайт от 20 000 до 80 000 руб. за 3 страницы

Веб-дизайнер — профессия творческая, а оценка дизайна для многих проходит очень субъективно. Поэтому заработок может очень сильно варьироваться и достигать и 200 000, и даже 300 000 рублей в месяц.

Мы даем уникальную
4-уровневую гарантию

заказать

Гарантия №1 БЕЗУСЛОВНЫЙ ВОЗВРАТ ДЕНЕЖНЫХ СРЕДСТВ ПО ПЕРВОМУ ТРЕБОВАНИЮ

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

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

Деньги вы сможете получить обратно любым удобным вам способом по первому требованию.

Срок действия гарантии возврата средств – 15 дней с момента получения доступа к курсу.

Гарантия №2 ВЫСОЧАЙШЕЕ КАЧЕСТВО

Все уроки — авторские, актуальные, подробные и тщательно подготовлены лично автором курса: профессиональным дизайнером Даниилом Волосатовым.

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

Гарантия №3 ПОЛУЧЕНИЕ КУРСА

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

Если вдруг (всякое бывает!) ссылка не пришла или не работает — просто напишите в службу поддержки. Мы сразу устраним проблему, и вы в кратчайшие сроки начнете работать с курсом.

Гарантия №4 ПОСЛЕПРОДАЖНАЯ ПОДДЕРЖКА

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

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

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

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

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

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

Вопросы и ответы

Потому что мы предлагаем:

Обучение в онлайн-формате с индивидуальным графиком и комфортными условиями.

Реально много практики и крутые работы в портфолио.

Сертификат о прохождении обучения – получат только те, кто будут выполнять все задания и инструкции!

Ответы на вопросы по урокам, домашним заданиям и материалам курса от закрепленного куратора-практика.

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

Проверка домашних заданий и итоговых проектов.

Мы делимся только практическими наработками, которые востребованы на рынке.

И все это по цене в 5-10 раз ниже, чем у большинства конкурентов за аналогичный объем и качество обучения, поддержки и практики!

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

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

Мы рекомендуем выполнять каждое домашнее задание, так вы полностью овладеете всеми навыками в веб-дизайне. Для получения Сертификата выполнение всех домашних заданий, проектов и дипломной работы – обязательны!

Да. Данный курс можно смотреть как в Windows, так и в OS X (Mac OS).

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

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

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

То есть с нашей стороны сделано все, чтобы вы успешно выполнили программу и начали зарабатывать в среднем около 70 000 рублей. И все это вы получаете по цене в разы ниже, чем у большинства конкурентов за аналогичный объем и качество обучения!

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

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

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

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

В среднем курс рассчитан на 2 месяца изучения. Кто-то усвоит быстрее, кто-то – медленнее, но в среднем можете ориентироваться на эти сроки.

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

Мы работаем с Яндекс.Кассой – у вас есть возможность оплаты следующими способами: банковскими картами Visa, MasterCard, Сбербанк.Онлайн, Личный кабинет Альфабанка , электронные деньги (Киви, Яндекс-деньги), наличными в салонах связи (на кассе) (Евросеть, Связной, Мегафон, МТС), наличными через терминалы (Сбербанк, Связной, Московский Кредитный Банк, ПАО «Почта Банк», Новоплат и др.), системы переводов и платежей (Юнистрим).

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

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

заказать