PROFESSION

На красивом макете веб-дизайн не заканчивается. Поэтому мы объединили двух лекторов, которые знают, как сочетать графику и технологии.
Об этом — на курсе. За два месяца мы научимся разрабатывать дизайн сайтов, разберемся в UX/UI и поймем принципы программирования.
Ты создашь личный сайт-портфолио и получишь скилл, с которым хоть на фриланс, хоть в агентство.
30 ИЮЛЯ  —  6 ОКТЯБРЯ
2
месяца
20
занятий
50+
часов практики
и теории
Teacher

ТАНЯ ЕРМОЛАЕВА

междисциплинарный дизайнер-исследователь
  • сделала десяток проектов для Института «Стрелка»
  • разработала айдентику для программы Архитекторы.рф
  • провела воркшоп в Голландии в рамках проекта Hackers & Designers
  • преподает дизайн в Британке
  • вела instagram-аккаунт type.today
  • дала интервью Readymag, Losko, type.today, It's Nice That

СЕРЕЖА ЗАХАРОВ

8 лет в программировании, 4 из них — в вебе
  • зарелизил веб-проекты для дизайн-студии Electric Red, медиа Criticism.online, онлайн-школы Vector и других
  • обновил журнал Strelka Mag, сделал два спецпроекта
  • создал сайт для Future London Academy, который выиграл в конкурсе TDC
  • работает с брендами и городами: KIA, Сбербанк, МегаФон, Нижний Новгород

 

PROGRAM

01
Четверг

30/07
20:00
Сайт глазами дизайнера
  • Зачем нужен свой сайт и каким он может быть
  • Где и как искать вдохновение веб-дизайнеру
  • Знакомство с инструментами
  • Введение в интерфейс Figma
  • Как создать вайрфрейм от руки и в Figma

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

02
Вторник

04/08
20:00
Сайт глазами разработчика
  • Что такое веб и как он работает
  • Как работает браузер
  • Как опубликовать свой сайт
  • Что такое среда разработки и система контроля версий
  • Знакомство с инструментами разработки

Домашнее задание: настроить окружение, создать репозиторий на GitHub, опубликовать страницу с текстом.

03
Четверг

06/08
20:00
Как сделать страницу сайта. Дизайн
  • Структура страницы
  • Компоненты и стили
  • Типографика в вебе
  • Создание первой страницы

Домашнее задание: сделать веб-страницу любимого проекта в Figma.

04
Вторник

11/08
20:00
Как сделать страницу сайта. Разработка
  • Структура страницы в браузере — HTML
  • Основные HTML-теги
  • Иерархия и семантика тегов
  • Полезные ресурсы

Домашнее задание: сверстать HTML-страницу любимого проекта с помощью базовых тегов.

05
Четверг

13/08
20:00
Типографика. Дизайн
  • Итеративный дизайн
  • Отличия веб- и печатной типографики
  • Где брать шрифты
  • Как мы читаем онлайн

Домашнее задание: вторая итерация страницы любимого проекта.

06
Вторник

18/08
19:00
Типографика. Разработка
  • Стилизация в браузере — CSS
  • Классы и селекторы
  • Типографика в CSS
  • Подключение стилей и шрифтов

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

07
Четверг

20/08
20:00
Сетки. Дизайн
  • Что такое сетка и зачем она нужна
  • Обязательно ли использовать модульные сетки в вебе
  • Примеры сеток в веб-дизайне

Домашнее задание: сделать макет сетки проектов от руки и в Figma.

08
Вторник

25/08
20:00
Сетки. Разработка
  • Как верстают сетки и располагают элементы в браузере
  • Flexible box и Grid лэйауты в CSS

Домашнее задание: сверстать сетку проектов.

09
Четверг

27/08
20:00
Сетки. Дизайн
  • Ревью сеток студентов
  • Продолжение лекции про сетки

Домашнее задание: финализировать главную страницу и страницу проекта.

10
Вторник

01/09
20:00
Сетки. Разработка
  • Что такое флоу документа
  • Режимы отображения тегов
  • Позиционирование

Домашнее задание: доверстать сетку проектов.

11
Четверг

03/09
20:00
Навигация и UX. Дизайн
  • Зачем нужна навигация
  • UX-паттерны: когда брать готовое, а когда изобретать новое
  • Почему все сайты выглядят одинаково
  • Пользовательские сценарии

Домашнее задание: объединить все страницы с помощью навигации, продумать user flow и сделать дизайн меню.

12
Вторник

08/09
20:00
Навигация и UX. Разработка
  • Стандартные лэйауты страниц
  • Навигация в вебе
  • Программный интерактив в браузере — введение в Javascript
  • Всё о ссылках

Домашнее задание: сверстать навигацию, объединить страницы с помощью ссылок.

13
Четверг

10/09
20:00
Навигация для разных устройств. Дизайн
  • Функциональные состояния элементов
  • Специфика навигации на мобильных устройствах
  • Веб-дизайн для устройств с разными экранами
  • Размеры экранов: зачем нужна статистика
  • Варианты адаптации

Домашнее задание: адаптировать главную страницу сайта под мобильные устройства. Добавить и адаптировать дизайн страницы About.

14
Вторник

15/09
20:00
Навигация для разных устройств. Разработка
  • Интерактив в CSS — псевдоклассы
  • Программный интерактив в браузере — Javascript
  • Почему можно забыть статистику по размерам экранов

Домашнее задание: адаптировать главную страницу под разные экраны и добавить элементам функциональные состояния.

15
Четверг

17/09
20:00
Прототипирование. Дизайн
  • Прототипирование в Principle
  • Анимации в вебе

Домашнее задание: адаптировать все страницы. Придумать или выбрать интерактив/анимацию.

16
Вторник

22/09
20:00
Адаптив и респонсив. Разработка
  • Адаптив в браузере — media queries
  • Различные подходы к адаптиву и респонсиву

Домашнее задание: адаптировать все страницы.

17
Четверг

24/09
20:00
Анимация. Дизайн
  • Анимация в Principle
  • Роль анимации в интерфейсах

Домашнее задание: визуализировать анимацию уже известными средствами прототипирования.

18
Вторник

29/09
20:00
Анимация. Разработка
  • Анимации в браузере — CSS и Javascript
  • Интерактивные возможности браузера

Домашняя задание: сделать анимацию/интерактив по прототипу восьмой недели.

19
Четверг

01/10
20:00
Интерактив. Дизайн
  • Веб как кино или перформанс
  • Композиция сайта во времени: интро, кульминация, аутро

Домашняя задание: доделать сайт.

20
Вторник

06/10
20:00
Интерактив. Разработка
  • Функции сглаживания
  • Библиотеки для анимации
  • Метатеги, favicon, etc

Домашнее задание: закончить анимацию, добавить метатеги и favicon, опубликовать сайт.

 

ПOСЛЕ
KУРCA

Скиллы
Анализируешь поведение пользователей. Создаешь прототипы и адаптивы. Разрабатываешь макеты для верстки.
Юзабилити
Разбираешься в UX/UI — делаешь не только красиво, но и функционально.
Профит
Сделаешь личный сайт-портфолио веб-дизайнера. Понимаешь, как презентовать проект клиенту и где брать заказы.

PAБОТЫ ЛЕКТОРОВ

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ДЛЯ
КОГО

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

ПЛАТФОРМА

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

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

 
Регистрируясь и нажимая кнопку “Оставить заявку”, вы соглашаетесь с условиями договора-оферты и политикой конфиденциальности