fbpx

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

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

Вы изучите этапы создания дизайн макета сайта, его технические аспекты (прототипирование, модульные сетки, типографика, композиция), типы и компоненты сайта, UI/UX, актуальные тренды. А также: дизайн в социальных сетях, баннеры и гиф-баннеры, синемаграфия. На курсе вы научитесь работать в таких программах: Adobe Illustrator, Sketch, Adobe Experience Design, Figma, Marvel, Affinity.

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

Знакомство. Уточнение понятия дизайн, вэб дизайн. Краткий ответ на вопрос что же такое вэб дизайн.

по-крупному решаем вопрос «что такое Web Дизайн?». Кто такой вэбдизайнер, какие цели у вэб дизайна и какие основные задачи дизайнера. Открываем для себя страшный и ужасный Photoshop, его основной инструментарий и так далее.

UX и UI. Что это такое, и почему оно так важно. Так же говорим про юзабилити. Попробуем в первый раз прописать свою ЦА и персону, и сделаем более сложный баннер. И даже нарисуем каркас сайта.

Что такое браузер? Как он обрабатывает ваш запрос? Что такое хостинг? Что такое HTML? Основы верстки. Атрибуты тегов. Что такое “семантика”? Обзор редактора кода Sublime Text. Emmet для Sublime Text. Настройка среды разработки. Правильная структура проекта.

Основы CSS. Что такое CSS правила? Что такое CSS свойства? Как писать стили? Что такое атрибуты в html тегах? Какие есть типы селекторов? Комбинирование свойства CSS. Что такое абсолютный и относительный путь? Как подключить CSS к проекту? Как подключить шрифты?

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

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

Инструмент разработчика. CSS Позиционирование. CSS Flexbox. Псевдоэлементы. Валидация кода. Проходим игру

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

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

Flexbox на практике. Методология БЭМ. Верстаем сайт с Figma

Золотое сечение – путь к богатству? *спойлер: нет! Illustrator не такой же он и страшный, отрисовываем логотип, учимся работать с перьями и кривыми Безье.

Продолжаем работать над сайтом.

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

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

Добиваем ДЗ. GitHub. Что это такое? Основы и как хранить проекты. Пробуем запушить свой сайт на гитхаб в любом состоянии.

конец основ композиции. Говорим о «Z» и «F» паттернах. Знакомимся с Figma. Понимаем, что вся наша жизнь была ложью. Смотрим основные инструменты, стараемся сделать первую мобильную версию сайта.

Меняем редактор на VS Code. Настройка редактора. Медиазапросы. Делаем сайт под мобильную версию.

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

Добиваем адаптив

решили-таки все делать в Photoshop, тогда говорим про Bootstrap. А вообще теории все меньше, практики все больше! Не доделали дома десктоп, доделываем на лекции, плюс рисуем к нему мобильное приложение.

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

Что такое Bootstrap? Где использовать и как? Практика по документации.

пробегаемся по канонам размещения элементов, смотрим как правильно готовить проект к сдаче в работу. Продолжаем доводить свой «большой» проект до ума, еще и сделаем анимацию в Figma, прям что бы выглядело круто! UI Guide & UI Kit - что это за страшные аббревиатуры.. Плюс смотрим на разные плюшки в Figma.

Подача проекта. Как сделать красиво и интересно, а главное не стыдно. Вдохновляемся и погнали работать.

Закрываем все долги. Вопрос-ответ. Подготовка материала к диплому. Рассказать все, что может пригодится в работе. Подготовка к диплому. Знакомство с дипломной работой - сайт из 5 страниц и адаптивом. Создаем еще один репозиторий для сайта. Начинаем работу с сайтом.

Теория все. Дальше только практика. Но не время останавливаться. Анимация в AE. Плавно, красиво, круто.

итак, получаем дипломные работы. Трудимся.

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

Дописываем сайт. Минимизируем его, сжимаем картинки и загружаем на хостинг

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

Доп.занятие

НАЧАЛО КУРСА

14 января

РАСПИСАНИЕ

Вт/Пт (18.00 - 20.00)

ПРОДОЛЖИТЕЛЬНОСТЬ

32 занятия по 2 часа

СТОИМОСТЬ

2500 грн/мес

ЕСЛИ ВЫ ХОТИТЕ ЗАБРОНИРОВАТЬ МЕСТО В ГРУППЕ, ЗАПОЛНИТЕ КОНТАКТНУЮ ФОРМУ.

TOP