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

Веб-дизайнер с нуля до PRO: дизайн и программирование

Готовим дизайнеров со знанием кода и разработчиков со знанием дизайна

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

Сможете искать работу и проходить собеседования уже с середины обучения

Когда
20 октября 2021 — 12 июля 2023
Набор вот-вот закончится
Курс стартовал, но еще можно попасть в этот набор
Формат обучения

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

Уровень

С нуля

Документ

Диплом о профессиональной переподготовке

Fullstaсk-дизайнер может самостоятельно делать веб-сайты под ключ

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

Сможете не просто всё делать в одиночку, но и руководить полным циклом работ.

Для кого этот курс

  • Для новичков в дизайне и разработке

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

  • Для веб- и графических дизайнеров

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

  • Для верстальщиков и frontend-разработчиков

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

На курсе вы изучите

Основы дизайна

Научитесь работать с композицией, сетками, типографикой, цветом, фото- и видеоконтентом

Гибкие методологии

Сможете выстраивать рабочий процесс и взаимодействие в команде по Scrum и Kanban

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

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

Принципы вёрстки на HTML и CSS

Сможете сверстать свой дизайн и получите навыки мобильной и адаптивной вёрстки

Основы программирования

Научитесь писать код на JavaScript и использовать библиотеку React

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

Сможете составлять формы так, чтобы они правильно работали

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

  • Видеолекции и вебинары

    Смотрите лекции в удобное время и участвуйте в вебинарах. Если пропустили — сможете посмотреть запись

  • Много практики

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

  • Сопровождение

    Сможете общаться с экспертами курса, получить помощь координатора и однокурсников в общем чате

  • Помощь в карьере

    Поможем составить резюме и подготовиться к собеседованию. Предложим интересные вакансии партнёров Нетологии

Программа

Fullstack-дизайнеру одинаково важны навыки в дизайне и программировании. Курс состоит из этих двух модулей.

Модуль 1. Разработка дизайна

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

Основы Adobe Photoshop

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

6 часов теории


Введение в Photoshop

Двойная экспозиция

Ретушь и цветокоррекция

Постер

Тонированное изображение

Сайт в Photoshop

Мокап

Gif-анимация

Иллюстрация

Веб-дизайн

Разберёте, как эффективнее организовать процесс создания сайта. Научитесь работать в Figma и создавать кликабельные прототипы. Освоите базовые принципы UX-проектирования, узнаете о роли композиции, цвета и типографики. Погрузитесь в полный цикл создания сайта: от поиска дизайн-концепции до анимаций и презентации проекта на Behance. Выполните дипломный проект на закрепление полученных навыков.

40 часов теории

34 часа практики

Введение в профессию веб-дизайнера

Основы работы в Figma

Адаптивный дизайн

Состоятние элементов

Подходы к проектированию интерфейсов

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

Фреймворки CJM / Метод персон / Jobs to be done

Композиция

Теория цвета

Типографика

Модульные сетки

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

Основы анимации интерфейсов в Principle

Презентация работ и подготовка портфолио на Behance

Теория и анализ потребностей

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

15 часов теории

10 часов практики

Роль аналитики в UX

Инструменты дизайн-мышления

Методы анализа: основы

Бизнес-аналитика

Феномены зрительного восприятия

Моделирование поведения

Методы анализа: customer development

Особенности качественных исследований

Особенности количественных исследований

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

Рассмотрите аналитические инструменты и исследование информационной архитектуры. Изучите A/B-тестирование. Узнаете, когда проводить тесты, а когда они бесполезны. Поймёте, что такое accessibility-статистика, портрет аудитории и её специфика. Научитесь проводить eyetracking-тестирование.

8 часов теории

4 часа практики

Обзор аналитических инструментов

Особенности мобильной аналитики

Математика A/B-тестов

Accessibility-статистика

Eye-tracking-тестирования

Модуль 2. Frontend-разработка на JavaScript

Познакомитесь с азами программирования. Напишете первые строки кода и создадите простые проекты на популярном языке JavaScript. Освоите одну из самых популярных библиотек — React.

Вёрстка на HTML и CSS
Научитесь верстать сайты на HTML и CSS и вносить изменения в существующую вёрстку. 
8 часов теории
48 часов практики
Теги для вёрстки контента страницы
Теги для вёрстки структуры страницы
Теги для вёрстки форм
Селекторы CSS
Определение контекста элементов
Блочная модель
Позиционирование элементов
Оформление текста
Оформление декоративных элементов
Состояние интерактивных элементов
Адаптивная и мобильная вёрстка

Научитесь создавать вёрстку под любой тип устройств — компьютер, планшет, смартфон.

9 часов теории

51 час практики

Вёрстка резинового макета
Резиновые изображения

Медиазапросы и медиафункции

Особенности вёрстки для мобильных устройств

Адаптивная типографика, breakpoints

Адаптивные изображения

Основы программирования

На практике познакомитесь с азами программирования с помощью языка JavaScript. Поймёте работу frontend-части сайта.

8 часов теории

48 часов практики

Алгоритмы

Переменные, числа и строки

Логика и математика

Ветвление кода

Алгоритм с множественным выбором

Ошибки в коде

Массивы

Циклы

Подпрограмма, функция

Объекты

Синхронное и асинхронное выполнение алгоритма

Основы JavaScript

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

8 часов теории

56 часов практики

Работа браузера: HTML, CSS и JS

Npm и рабочее окружение

JS: переменные, типы данных, условия

JS: массивы, циклы

JS: объекты

JS: функции

GitHub Pages: публикация приложения онлайн

DOM API: Document, Node, Element

DOM API: обработка событий

DOM API: работа со стилями

DOM API: геометрия элементов

Анимации: CSS, JS

DOM API: работа с формами, валидация

XHR: работа с HTTP — запросы, лоадеры, обработка ошибок

Загрузка файлов

Библиотека React

Освоите одну из самых популярных библиотек на JavaScript — React. Cможете создавать интерактивные пользовательские интерфейсы и инкапсулированные компоненты с собственным состоянием, а затем объединять их в сложные пользовательские интерфейсы.

13 часов теории

76 часов практики

Концепция компонентов, Create React App

Props для связывания компонентов и передачи данных

State для хранения внутреннего состояния

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

Обработка событий

Context — хранение общего состояния для дерева компонентов

Context — сложные состояния, диспатчер, action creators

Promise, async/await — получение данных в современном стиле

Обработка побочных эффектов

Работа с DOM — фокус, scroll, медиа-элементы (audio/video)

Работа с DOM — файлы

Анимации в React

Создание и публикация UIKit

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

30 часов практики

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

Вас будет поддерживать дипломный руководитель. Он даст рекомендации по работе и поможет её улучшить.

Преподаватели и эксперты

За время курса соберёте портфолио из 9 работ

Макет сайта с адаптивной версией и анимацией элементов
UX-анализ сайта и UX-исследование пользователей
Спроектированный пользовательский интерфейс
HTML - вёрстка сайта

Проекты наших студентов


Больше работ студентов — на Behance

Что вы получите в результате обучения

Fullstack web-дизайнер
    Ключевые навыки
  • Базовая теория дизайна: композиция, сетки, типографика, работа с цветом, работа с фото- и видеоконтентом
  • Методологии командной работы: Kanban, Scrum
  • Понимание информационной архитектуры

  • Проектирование пользовательского опыта
  • Создание адаптивного дизайна
  • Навыки web-анимации
  • Навыки мобильной и адаптивной вёрстки
  • Программирование на JavaScript
  • Работа с HTML-формами

Инструменты, которые вы освоите

CSS3

CSS3

Язык для описания внешнего вида страниц сайта. CSS3 — самая масштабная и разрабатываемая спецификация, позволяющая создавать анимации без использования JavaScript

HTML5

HTML5

Язык для структурирования и представления содержимого веб-страниц

Figma
Figma

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

Customer Journey Mapping

Customer Journey Mapping

Методика создания карты пути клиента

Библиотека React

Библиотека React

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

Git

Git

Распределённая система управления версиями

Invision studio

Invision studio

Бесплатный облачный инструмент для создания дизайна, прототипов и анимаций

Principle

Principle

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

Adobe Photoshop

Adobe Photoshop

Многофункциональный графический редактор

Adobe Illustrator

Adobe Illustrator

Векторный графический редактор

Вашу квалификацию подтвердят официальные документы

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

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

Мы трудоустраиваем наших выпускников

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

Оформите резюме, чтобы оно заинтересовало работодателя


Передадим ваше резюме партнёрам Нетологии


Научитесь проходить собеседования


Сможете получить работу по новой специальности


Соберёте портфолио так, чтобы не было сомнений в ваших навыках

Мы трудоустроили своих выпускников в компании