Веб-дизайн

Студент изучит структуру и принципы работы с ТЗ и брифом, системы ведение проектов и сможет самостоятельно брифовать заказчика.
Студент изучит интерфейс и рабочую область программы Figma и сможет создавать в ней фреймы и макеты сайтов.
Студент изучит проектирование взаимодействия и создасть 7 Job Stories для сайта.
Студент изучит базовую теорию дизайна: законы и принципы визуального восприятия, принцип модульности, анатомия построения сеток, типографика, теория цвета, - и сможет создать модульную сетку сайта, работать со стилями типографики, отрисовать макет с нескольких цветовых схемах.
Студент изучит принципы протитипирования, поймет ход работы над прототипом, что такое дизайн-концепция сайта, из чего может состоять анимация, культуры кейса и создания портфолио. Сможет работать с референсами, искать стиль под любую задачу, работать с адаптивными решениями, создавать анимацию для сайта и портфолио с помощью Behance.net

Часов в программе

39,00 часов

лекции

39,00 часов

практика

22,00 часа

самостоятельная

10,00 часов

промежуточная аттестация

110,00 часов

всего

Материально-технические условия реализации программы:

Вид занятий: Видеолекции
Требуемое ПО:
MS Office, Google Docs, Figma, Miro, Principle (Mac), Protopie (Windows)
Онлайн редакторы:
Repl.it (Replit.com),
VSCode,
codpen.io (Кодпен),
онлайн редактор, (аналогичный Фотошопу) - рекомендуем Фотопеа.
Можно использовать любые другие программы, например, VSCode по желанию

Информационные ресуры

Полезные ресурсы:
revision.ru
behance.net
awwwards.com
Адаптив как стандарт mediaqueri.es
Анимация появления конента (при загрузке и при скролле) http://jqueryui.com/easing/
http://www.redmadrobot.ru/projects
Фильмы для начинающих веб дизайнеров http://blog.tilda.cc/moviesfordesigners
Идеи и стиль https://lstore.graphics/conceptlibrary/fullpreview/#
Книги для начинающих веб дизайнеров http://blog.tilda.cc/booksfordesigners
Использование изображений
8 шагов к эффективному лендингу
Правило внутреннего и внешнего
Интернет-магазин
90 ресурсов и инструментов для дизайнеров
Разбираемся в профессиях Бородкин https://netology.ru/blog/dizaynerskie-professii
Тонкости продуктового дизайна https://habr.com/post/420009/

Полезные ресурсы и материалы:
CMS magazine
Техническое задание на сайт
Электронный обмен данными по стандарту CommerceML, вторая редакция
Интеграция с 1С
Интеграция с 1С: Управление торговлей
Углубленный курс по XSLT и интеграции с 1С
Дизайн-системы в клиентских проектах
Примеры ТЗ и Брифов

Примеры брифов для вдохновения:
http://www.orangelabel.ru/brief/website
http://genor.ru/sites/brief/
http://www.crealines.com/brief/webdesign/

Упоминаемые ресурсы:
trello
basecamp

Статьи по теме:
Про канбан
Про trello
Про basecamp

Почитать дополнительно о рассмотренных темах:
SMART
CYNEFIN
КАНБАН
Цикл Деминга
Agile
SCRUM
Project Management Body of Knowledge
PMI

Упоминаемые ресурсы:
(информация про дизайн и смежные темы для ежедневного мониторинга)
Дизайн и около:
designmodo.com
fastcompany.com
ffffound.com
designcollector.net
behance.net
baubauhaus.com
designspiration.net
designtaxi.com
thedieline.com
fubiz.net
booooooom.com
lovelypackage.com
garancedore.fr
hqroom.ru
awwwards.com
siteinspire.com
cssawards.net
httpster.net
wolffolins.com
designdaily.ru
Мода:
lookbook.nu
thesartorialist.com
Медиа
cossa.ru
adme.ru
lookatme.ru
furfur.me
hopesandfears.com
mtrpl.ru
w-o-s.ru
Музыка:
aerostat.rpod.ru

Про Mindmaping:
Подборка статей на Habrahabr

Инструменты:
mindmeister.com
simpleapps.eu/simplemind

Полезные ссылки:
Идеи на тему “Вайфрейм”
Руководство по вайфреймам для начинающих
Что такое футер и как его использовать

Фреймворк: Jobs-To-Be-Done (JTBD)

Шрифты:
https://www.paratype.ru/
https://typekit.com/fonts
https://www.myfonts.com/
https://fonts.google.com/

Сочетание шрифтов:
https://www.paratype.ru/fontorium/typoscope/
http://fontpair.co/
http://font-combinator.com/
https://fontsinuse.com/

Калькулятор типографики:
https://pearsonified.com/typography/

Журнал «Шрифт»:
http://typejournal.ru/

Менеджеры шрифтов:
https://skyfonts.com/
https://rightfontapp.com/

Полезные статьи:
Анатомия тысячи шрифтов
10 советов по типографике в веб-дизайне
Краткая история теории цвета

Упоминаемые ресурсы и сервисы:
kuler.adobe.com
web.colorotate.org
pictaculous.com
colorscheme.ru
flatuicolors.com
Название цветов по коду
Online испытание - собери градиент

Инструменты:
https://webflow.com/
https://www.invisionapp.com/
https://www.axure.com/
https://www.uxpin.com/

Создание скетчей онлайн:
https://ninjamock.com
https://wireframe.cc/

Полезные ссылки:
Примеры интерактивных прототипов
Сохранение прототипа
Уроки Axure
Tools for Sketching User Experiences
Мокап, вайрфрейм, прототип

Руководства по веб-технологиям. https://webref.ru/
Ресурсы для разработчиков от разработчиков https://developer.mozilla.org/ru/
Изучай CSS! https://web.dev/learn/css/
HTML & CSS https://www.codecademy.com/catalog/language/html-css

Образовательные ресуры

Ресурсы LMS ООО “Нетология”

Учебно-методические материалы

Методы, формы и технологии

Видеолекции для асинхронного обучения
Практические задания
Тестирования
Самостоятельная работа

Методические разработки

Кейсы
Верстка по образцу
Шаблоны

Материалы курса

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

Верстка по образцу:
Шапка сайта
Новинки кино
Награды
Новостные карточки
Портрет
Телефонная книга
Услуги компании
Наша команда
Печать плаката
Мобильное меню
Блок «Услуги» для персонального сайта фотографа
Попап регистрации
Достопримечательности мира
Веб-версия карточки семейного альбома
Детальная страница новости
Заглушка для сайта фронтенд-разработчика
Верстка блока «Услуги» для устройств с повышенной плотностью пикселя
Туристическое агентство
Страница «О компании»
Список курсов компании Нетология
Улучшение отображения карточек городов для турагентства

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

Учебная литература

Книга про буквы от Аа до Яя (Юрий Гордон)
Типографика (Эмиль Рудер)
Типографика. Порядок и хаос (Владимир Лаптев)
Основы стиля в типографике (Роберт Брингхерст)
Живая типографика (Александра Королькова)
О шрифте (Эрик Шпикерманн)
Типографика и вёрстка (Дизайн‑бюро Артёма Горбунова)
Иоханнес Иттен - «Искусство цвета», конспект книги Искусство цвета
Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design. @Amazon
Дэн Роэм, Визуальное мышление (The Back of The Napkin) @МИФ / @Amazon
В. Олифер, Н. Олифер. Компьютерные сети. Принципы, технологии, протоколы / В. Олифер, Н. Олифер, Издательство Питер, 2016

Темы

Инструменты и рабочее место Графические редакторы Проектирование пользовательского опыта Базовая теория дизайна Создание сайта

Лекции
10,00ч

Самостоятельная работа
5,00ч

Всего
15,00ч

Промежуточная аттестация 10,00 часов

Практические задания кейсового характера с проверкой эксперта, тестирования для закрепления теории и знаний на практике.