Веб-дизайн с 0 до PRO
skillbox.ruНачинающим дизайнерам
У которых за плечами есть несколько работ и которые хотят существенно прокачать свой скилл в сфере веб-дизайна и добавить пару дюжин ярких работ в свое портфолио. А кроме того, — научиться зарабатывать серьезные деньги в этой профессии и создавать по-настоящему выдающиеся проекты.
Программа курса
Курс длится 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 рублей из любой точки мира
- Трудоустройство в компанию