WEB DESIGN
Онлайн-курс для тех, кто хочет стартовать в вебе
PROFESSION
и теории
ТАНЯ ЕРМОЛАЕВА
- сделала десяток проектов для Института «Стрелка»
- разработала айдентику для программы Архитекторы.рф
- провела воркшоп в Голландии в рамках проекта Hackers & Designers
- преподает дизайн в Британке
- вела instagram-аккаунт type.today
- дала интервью Readymag, Losko, type.today, It's Nice That
СЕРЕЖА ЗАХАРОВ
- зарелизил веб-проекты для дизайн-студии Electric Red, медиа Criticism.online, онлайн-школы Vector и других
- обновил журнал Strelka Mag, сделал два спецпроекта
- создал сайт для Future London Academy, который выиграл в конкурсе TDC
- работает с брендами и городами: KIA, Сбербанк, МегаФон, Нижний Новгород
PROGRAM
30/07
20:00
- Зачем нужен свой сайт и каким он может быть
- Где и как искать вдохновение веб-дизайнеру
- Знакомство с инструментами
- Введение в интерфейс Figma
- Как создать вайрфрейм от руки и в Figma
Домашнее задание: прочитать рекомендованные материалы, выбрать метафору для своего сайта, сделать вайрфреймы веб-страниц в нескольких вариантах.
04/08
20:00
- Что такое веб и как он работает
- Как работает браузер
- Как опубликовать свой сайт
- Что такое среда разработки и система контроля версий
- Знакомство с инструментами разработки
Домашнее задание: настроить окружение, создать репозиторий на GitHub, опубликовать страницу с текстом.
06/08
20:00
- Структура страницы
- Компоненты и стили
- Типографика в вебе
- Создание первой страницы
Домашнее задание: сделать веб-страницу любимого проекта в Figma.
11/08
20:00
- Структура страницы в браузере — HTML
- Основные HTML-теги
- Иерархия и семантика тегов
- Полезные ресурсы
Домашнее задание: сверстать HTML-страницу любимого проекта с помощью базовых тегов.
13/08
20:00
- Итеративный дизайн
- Отличия веб- и печатной типографики
- Где брать шрифты
- Как мы читаем онлайн
Домашнее задание: вторая итерация страницы любимого проекта.
18/08
19:00
- Стилизация в браузере — CSS
- Классы и селекторы
- Типографика в CSS
- Подключение стилей и шрифтов
Домашнее задание: подключить файл со стилями и добавить базовую стилизацию страницы проекта.
20/08
20:00
- Что такое сетка и зачем она нужна
- Обязательно ли использовать модульные сетки в вебе
- Примеры сеток в веб-дизайне
Домашнее задание: сделать макет сетки проектов от руки и в Figma.
25/08
20:00
- Как верстают сетки и располагают элементы в браузере
- Flexible box и Grid лэйауты в CSS
Домашнее задание: сверстать сетку проектов.
27/08
20:00
- Ревью сеток студентов
- Продолжение лекции про сетки
Домашнее задание: финализировать главную страницу и страницу проекта.
01/09
20:00
- Что такое флоу документа
- Режимы отображения тегов
- Позиционирование
Домашнее задание: доверстать сетку проектов.
03/09
20:00
- Зачем нужна навигация
- UX-паттерны: когда брать готовое, а когда изобретать новое
- Почему все сайты выглядят одинаково
- Пользовательские сценарии
Домашнее задание: объединить все страницы с помощью навигации, продумать user flow и сделать дизайн меню.
08/09
20:00
- Стандартные лэйауты страниц
- Навигация в вебе
- Программный интерактив в браузере — введение в Javascript
- Всё о ссылках
Домашнее задание: сверстать навигацию, объединить страницы с помощью ссылок.
10/09
20:00
- Функциональные состояния элементов
- Специфика навигации на мобильных устройствах
- Веб-дизайн для устройств с разными экранами
- Размеры экранов: зачем нужна статистика
- Варианты адаптации
Домашнее задание: адаптировать главную страницу сайта под мобильные устройства. Добавить и адаптировать дизайн страницы About.
15/09
20:00
- Интерактив в CSS — псевдоклассы
- Программный интерактив в браузере — Javascript
- Почему можно забыть статистику по размерам экранов
Домашнее задание: адаптировать главную страницу под разные экраны и добавить элементам функциональные состояния.
17/09
20:00
- Прототипирование в Principle
- Анимации в вебе
Домашнее задание: адаптировать все страницы. Придумать или выбрать интерактив/анимацию.
22/09
20:00
- Адаптив в браузере — media queries
- Различные подходы к адаптиву и респонсиву
Домашнее задание: адаптировать все страницы.
24/09
20:00
- Анимация в Principle
- Роль анимации в интерфейсах
Домашнее задание: визуализировать анимацию уже известными средствами прототипирования.
29/09
20:00
- Анимации в браузере — CSS и Javascript
- Интерактивные возможности браузера
Домашняя задание: сделать анимацию/интерактив по прототипу восьмой недели.
01/10
20:00
- Веб как кино или перформанс
- Композиция сайта во времени: интро, кульминация, аутро
Домашняя задание: доделать сайт.
06/10
20:00
- Функции сглаживания
- Библиотеки для анимации
- Метатеги, favicon, etc
Домашнее задание: закончить анимацию, добавить метатеги и favicon, опубликовать сайт.
ПOСЛЕ
KУРCA
PAБОТЫ ЛЕКТОРОВ
ДЛЯ
КОГО
ПЛАТФОРМА
Мы свяжемся и уточним, подходит ли тебе курс и сколько он стоит.