Веб-дизайн с 0 до PRO

skillbox.ru

https://skillbox.ru/webdesign/?utm_source=telegram&utm_medium=partner&utm_campaign=awdee&utm_content=post&utm_term=21-06-2018

Начинающим дизайнерам

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

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

Курс длится 12 месяцев и состоит из 4 основных блоков

1. Веб‑дизайн Базовый:

1 Модуль. Интерфейс

Photoshop перестанет быть для тебя терра инкогнита. Ты узнаешь основные элементы для управления программой и сможешь создать свой первый дизайн-проект.

Как ориентироваться в Photoshop? Основные элементы интерфейса

Функционал основных панелей и их параметры

Цвет и цветовые модели в Photoshop

Color Picker и основы работы с ним

Панель слоев и управление слоями

Разновидности слоев

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

Создание и правильное сохранение документа

Организация работы: история версий в веб‑дизайне

Настройки документа

Canvas Size и Image Size

Скрытые инструменты Photoshop: сетки и направляющие

Меню настроек Photoshop: самое важное

2 Модуль. Базовые знания о типографике

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

Как подбирать сочетания шрифтов для сайтов
Основы работы со шрифтами
Шрифты в вебе: особенности и ограничения
Шрифтовые слои и их свойства
Управление символами в панели Character
Работа с абзацами в панели Paragraph
Принципы красоты и удобства в вебе
Настройка интерлиньяжа и кернинга
Традиции кириллической типографики
Акциденция (заголовочные шрифты) и наборный текст
Верстка универсальных текстовых блоков
Шрифты в своем многообразии
Тонкости типографики в Photoshop: сглаживание шрифтов

3 Модуль. Основы работы с графикой

Photoshop — один из лучших инструментов для работы с воображением. Ты сделаешь первый шаг к работе с изображениями и их последующей обработке, а также поймешь главные принципы работы со слоями.

Где брать материалы для работы
Качественные исходники (рефы) без труда
Рефы, от которых нужно отказываться, едва увидев
Выделения и работа с масками
Инструменты обтравки (вырезания) объектов на картинке
Необходимые основы цветокоррекция
Необходимые основы ретуши
Основы композиции в веб‑дизайне
Ускорители работы
Способы развития хорошего вкуса

4 Модуль.Формы и кнопки

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

Зачем нужны формы
Анатомия форм: от простого к сложному
Основные задачи полей и их многообразие
Как верстать поля в формах
Как верстать подписи к полям
Комментарии, плейсхолдеры (подсказки) и сообщения об ошибках
Какими бывают кнопки
Модальные (всплывающие) окна

5 Модуль. Универсальные элементы сайтов

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

Как нарисовать шапку на сайте (хэдер)
Как нарисовать футер (подвал)
Гайдлайны и правила для повторяющихся элементов
Дизайн блока ключевых фишек (key features)
Дизайн ценовых планов для коммерческих сайтов
Использование модульных сеток
Теория струн: упрощенная модель сеток
Разновидности меню и общие принципы навигации
Как сохранить оригинальность веб‑дизайна

6 Модуль. Интерактивные элементы

Многие веб-ресурсы обладают большими объемами медийного контента, и эта тенденция растет. Ты поймешь, как создавать красивые и простые фото- галереи, а также использовать видео-контент для сайта.

Основные виды и задачи интерактивных элементов
Создание и настройка фотогалереи
Простая и сложная навигация на сайте
Чем могут быть полезны слайдеры
Интеграция видео: как сделать его естественной частью дизайна
Состояния интерактивных элементов и обратная связь для пользователя
Анимация и интерактивные эффекты

7 Модуль. Инфографика

Визуально воспринимать информацию проще, понятнее и приятнее. А ин- формация окружает нас везде и всюду. Ты научишься складывать и вычитать факты, сохраняя самое важное, чтобы донести это просто и со вкусом.

От сложной идеи к ее упрощению
Зачем и для кого? Два самых важных вопроса инфографики
Структура и композиция контента
Как сделать страницу яркой и контрастной
Выбор цветов для инфографики
Основы визуализации информации
Иконки, пиктограммы и иллюстрации: самые наглядные инструменты инфографики
Работа с цифрами и численной информацией
Упорядочивание хаотического контента

8 Модуль. Финализация

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

Зачем готовить проект к передаче
Подготовка макета к верстке и экспортирование графики
Жесткие стандарты Mokselle для работы в команде
Бонус: необходимые скрипты Photoshop
Бонус: внешние модули и плагины
Бонус: Photoshop Actions: примеры и принципы

2. Основные принципы дизайна

9 Модуль. Цели сайта и цели дизайнера

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

Короткая история современного веб‑дизайна
Какие сайты делать: выбор дизайнерской стратегии
Современные тренды
Три вида целей клиента и работа с ними
Цели дизайнера (твои цели в дизайне)
Чего хотят посетители сайтов
Как быстро придумать концепцию сайта
Где брать вдохновение для работы
Как работать на 120%: концентрация на дизайне
Хорошие и плохие примеры веб‑дизайна
Организация банков и личных библиотек
Как не потеряться в файлах: организация работы

10 Модуль. Веб типографика

Что отличает хороший дизайн от плохого
Почему в мире так много плохого дизайна
Почему клиент портит дизайн
На что нужно обращать внимание во время работы
Стандарты и традиции типографики
Интерлиньяж: межстрочное расстояние
Невидимые линии в дизайне: теория оптических струн
Кернинг и трекинг: как быстро испортить себе жизнь
Правило близости. Правило внутреннего и внешнего
Организация контента: пустота, линии, плашки
Два слова о модульных сетках
Принципы оптической компенсации
Как делать дизайн элегантно и красиво

11 Модуль. Графика для сайтов

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

Что отличает хорошую графику от плохой?
Внутренняя модель и «шкурка» сайтов
15 этапов создания с рекламной графикой
Как отличать хорошие рефы (исходники) от плохих
С какими рефами никогда нельзя работать
Разновидности исходников
Бесплатные источники классной графики
Пятишаговый алгоритм создания композиции
Правильная обтравка (вырезание объектов из исходника)
Что делать в сложных случаях обтравки
Основы цветокоррекции
Растровая и векторная графика
Флэшфорвард: два слова об иконках

12 Модуль. Формы и кнопки: интерактивные инструменты

В чем смысл существования сайтов
Хорошие и плохие формы
Современный подход к дизайну форм
Типичные ошибки начинающих
Логика и сценарные ошибки в формах
ЦА: целевая аудитория
Портрет пользователя
Выстраивание сценариев
Как рисовать правильные формы
Примеры хороших форм
Как рисовать кнопки
Создание банков форм
Элегантный дизайн

13 Модуль. Цвет, атмосфера, тексты и здравый смысл

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

Основы когнитивного дизайна
Атмосфера и настроение на сайте
Выбор визуального стиля сайта
Стилеобразующие элементы
Как выбрать цвета для сайта и его элементов
Кулер, кулорс, цветовые круги и другие (бес)полезные инструменты
Текстуры и узоры: где брать и как использовать
Черно-белые и цветные сайты
Моделирование цветовых схем в веб‑дизайне
Необходимые основы копирайтинга

14 Модуль. Интерактивные элементы

Устаревшие и современные концепции
Основные веб-элементы
UI-киты: наборы интерактивных элементов
Дизайн галерей и слайдеров
Повторяющиеся элементы
Навигация
Шапка сайта (хэдер) и подвал (футер)
Как научиться делать хорошие интерфейсы
Главные правила разработки интерфейсов
Примеры хороших интерфейсов
«Волшебные» кнопки
Где искать вдохновение
Организация банка работающих моделей

15 Модуль. Инфографика: как сделать сайты интересными

Визуально воспринимать информацию проще, понятнее и приятнее. А ин- формация окружает нас везде и всюду. Ты научишься складывать и вычи- тать факты, сохраняя самое важное, чтобы донести это просто и со вкусом.

Что такое контраст и зачем он нужен в веб‑дизайне
Способы создания контраста
Работа с пустым пространством
Цветовой контраст
Контраст размеров
Швейцарская (или международная) типографика
Выделенные (контрастные) блоки
Пестрые и спокойные элементы: два слова о текстах и текстурах
Смысловые акценты
Бутафория и стилизация
Иерархия контента и слои восприятия (время реакции)
Простой и сложный контент
Способы отделения блоков сайта друг от друга

16 Модуль. Финальный день

Флэшфорвард: модульные сетки и профессиональный дизайн
История модульных сеток
Польза и вред модульных сеток
«Квадратно-гнездовой» и динамичный подходы
Создание гайдлайнов для сайта
Флэшфорвард: рисование таблиц
Полный алгоритм разработки сайта
Двухмесячный набор заданий для тренировки
Что делать дальше?

3. Веб‑дизайн PRO

17 Модуль. Введение в практику

Этапы творческого проекта
Где искать вдохновение
Инструменты дизайнера и как на них не отвлекаться
3 концепции за пол часа
Задание

18 Модуль. Три правила качественного дизайна

Управляй ассоциативными уровнями
Используй гештальт-психологию
Включай критическое мышление
Собираем кей вижуал с помощью уровней, гештальта и критического мышления
Задание

19 Модуль. Пропорции

Золотое сечение и другие пропорции
1, 10, 15. Про шаг и удобство запоминания
Юай киты и гайды (HIG)
Систематизируй это. Систематизация величин
Создать гайд с описанием: всех заголовков, наборного текста, списков, таблиц, изображений, цветов, шрифтов и отступов/расстояний.

20 Модуль. Копирайтинг

Почему без текста нельзя начинать дизайн
Что делать, если текста нет
Как писать заголовки
Как оформлять текст
Инструменты копирайтера
Написать и оформить текст о себе

21 Модуль. Сетка

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

22 Модуль. Типографика

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

23 Модуль. Проектирование

Что это и зачем нужно
Юзабилити, опыт взаимодействия и эмпатия
Вайрфрейм или прототип
Собираем кликабельный прототип
Тестирование
Запроектировать интерфейс микроволновки и собрать прототип

24 Модуль. Графика

Зачем вообще нужна графика
Где брать достойные и бесплатные ресурсы
Должен ли дизайнер уметь рисовать?
Как быстро подобрать картинку
Какие бывают способы подачи и зачем они нужны
Сделать продуктовое описание (подачу) вашей микроволновки

25 Модуль. Пиктограммы

Пиктограммы раньше и в наши дни
Как сделать качественную пиктограмму за 5 мину Хитрости
Практическое применение пиктограмм
Где найти качественные пиктограммы, если на отрисовку нет времени
Отрисовать 10 пиктограмм в одном стиле за пол часа

26 Модуль. Составные блоки

Навигация
Карусель и галерея
Карточки
Формы
Таблицы и перечни
Используя составные блоки, собрать страницу отправки заявки на продажу своей микроволновки

27 Модуль. Разновидности сайтов

Какие бывают сайты
Лендинги
Корпоративные сайты
Промо
Портфолио
Найти на просторах интернета 15 разных сайтов и классифицировать их. Ссылки и описание отправить нам

28 Модуль. Интерактивный дизайн

Интерактив в универсуме
Как добиться естественного восприятия в интерфейсе
Смотрим примеры интерактива
Описать словами поведение элементов

29 Модуль. Портфолио

Что делать, если нечего показать клиенту
Как нарабатывать портфолио, которое будет вас продавать
Кейсы на коленке за 5 минут
Делаем собственное портфолио
Сделать главную страницу портфолио

30 Модуль. Дизайн в браузере

Тут про программирование и зачем это нужно
Дизайнер должен уметь верстать
Сервисы для “непрограммистов”
Товарищ инспектор. Про дизайн в браузере
Привет SVG, пока PNG
Поменять на странице (какого-нибудь сайта) цвет текста, кегли, что-нибудь еще и прислать скриншоты

31 Модуль. Мобилизация

Медиа. Размеры макетов для разных девайсов
Доступность и удобство объектов
Устоявшиеся паттерны поведения
Делаем макеты под разные разрешения
Отрисовать свое портфолио под разные опорные точки

32 Модуль. Работа в команде и уровни ответственности

Работа с другими дизайнерами и недизайнерами
Передача исходников дизайнерам
Как взаимодействовать с разработчиками
Передача ресурсов верстальщикам
Как работать на прямую с клиентом
Подготовить свое портфолио к верстке и написать ТЗ

4. Верстка для дизайнера

33 Модуль. Интернет глазами профессионала

Как передаётся информация через интернет
Протоколы TCP/IP — понятия, термины
Принципы работы DNS, как браузеры находят сайты
Концепция HTTP-сайта, роль сервера и браузера
Язык HTML, основные понятия (тэги, атрибуты, заголовки), пример простейшей странички
Протокол HTTP — основные принципы, знакомство
Простейшая страничка, размещённая на сервере
Кроссбраузерность — знакомство с концепцией

34 Модуль. HTML. Общая структура

HTML-документа
Основные параметры синтаксиса — спецсимволы, комментарии
Первые тэги: гиперссылки, изображения, простейшие представления текста, структурные тэги
Об изображениях для веб-сайтов: параметры, форматы, принятые практики
HTML таблицы. Основные тэги HTML-таблиц. Форматирование страницы при помощи таблиц. Основные атрибуты тэгов таблиц

35 Модуль. HTML. Формы

Основные элементы формы
Методы GET и POST
Взаимодействие с сервером, загрузка ответа

36 Модуль. CSS. Знакомство со стилями

Виды включения информации о стилях в код страницы
Селекторы, атрибуты
Работа с атрибутами текста при помощи CSS
Работа с изображениями при помощи CSS
Управление внешним видом таблиц при помощи CSS
Видимость
Шрифты

37 Модуль. Позиционирование при помощи CSS

Управление рендерингом страницы
Слои

38 Модуль. JavaScript

Знакомство, концепция, логика выполнения скриптов браузером
Динамическая генерация частей HTML-документа
Объекты, атрибуты тэгов, события — знакомство
DOM (Document Object Model)
BOM (Browser Object Model)
Вопросы кроссбраузерности — логика введения новых компонентнов Javascript ведущими браузерами
Практическая сторона процесса стандартизации
Управление CSS атрибутами из Javascript

39 Модуль. Javascript — события

Модель обработки
событий
События указателя — мышь (нажатия, перемещение)
Обобщение на тач-интерфейс

40 Модуль. Javascript — события

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

41 Модуль. Javascript — события

Таймеры
Анимация

42 Модуль. PHP. Место в структуре сайта

Синтаксис. Динамическая генерация страниц на сервере
Основные структуры языка — циклы, ветвления
Переменные и массивы — особенности типирования, scope

43 Модуль. PHP — Пользовательские функции

Передача параметров
Способы вернуть результат
Переменные среды, получение
информации о клиенте

44 Модуль. PHP — Генерация, работа с изображениями

Библиотека GD
Динамически создаваемые изображения
Шрифты в GD (TTF)

45 Модуль. PHP — Работа с файловой системой

Создание и работа с файлами и директориями
Работа с временными файлами

46 Модуль. PHP — Взаимодействие с браузером

Формы, Iframe, AJAX
Создание запроса, корректная обработка результатов
Доступ к БД
Текстовый файл в качестве БД
Написание PHP-компоненты сайта для работы с абстрактным бэк-эндом БД
Сессии
Аутентификация пользователя

47 Модуль. SQL БД. Концепция, назначение

Место в методиках хранения данных,
преимущества и недостатки
Причины рождения NoSQL
Доступ к Postgresql из PHP

48 Модуль. Замена текстового файла на Postgresql в качестве бэк-энда

Польза от соблюдения корректных практик при написании сайта — изоляция структурных компонентов друг от друга

49 Модуль. Дополнительный модуль

Работа на фрилансе
Как зарабатывать на фрилансе
от 100 000 рублей из любой точки мира
Трудоустройство в компанию