Дизайн и разработка веб-плаката

Содержание

Практическая часть проводит от самой идеи до публикации работы. Каждая глава — этап процесса. Сначала понимаем, что хотим сделать, только потом проектируем.

2.2 Идея и концепция

Теория · 3 статьи

Теория · 6 минут

Как придумать тему

Откуда брать идеи и как проверить, что тема не слишком абстрактная и не развалится в процессе.

Теория · 4 минуты

Как найти стиль

Минимализм, хаос, пиксели, коллажи и прочее, как найти стиль для развития нарратива плаката

Теория · 4 минуты

Статичные и динамичные модули

Определяем интерактив и анимации в веб-плакате на этапе концепции

2.2 Разработка макета

Дизайн · 5 статей

Дизайн · 12 минут

Сетка и композиция

Концептуальный и функциональный обзор сеток в вебе и композиции в веб-плакатах

Дизайн · 5 минут

Доработка главного экрана

О важности первого экрана и какие особенности стоит учитывать при его разработке

Дизайн · 5 минут

Адаптивный и респонсивный дизайн

В чём разница между подходами и зачем нужны адаптивы вообще

Дизайн · 5 минут

Разработка адаптивов

В чём разница между подходами и зачем нужны адаптивы вообще

Дизайн · 5 минут

Подготовка графики и фотографий

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

2.3 Вёрстка веб-плаката

Кодинг · 5 статей

Кодинг · 6 минут

Организация проекта

Структура папок, именование файлов, подключение стилей

Кодинг · 12 минут

Grid, Flex и Absolute на практике

Три подхода к вёрстке с примерами кода. Как использовать и комбинировать

Кодинг · 8 минут

Относительные и абсолютные величины

Как различные единицы измерения влияют на поведение макета

Кодинг · 7 минут

Использование SVG

Особенности работы с SVG форматом и как можно его анимировать

Кодинг · 12 минут

Вёрстка адаптивов

Несколько видов типичных технических решений в вёрстке адаптивного дизайна

2.4 Анимации в CSS

Кодинг · 3 статьи

Кодинг · 10 минут

Базовые анимации и @keyframes

Синтаксис keyframes, свойство animation и как запустить анимацию в браузере

Кодинг · 7 минут

Timing-функции и характер движения

Как темп анимации влияет на восприятие пользователя

Кодинг · 5 минут

Transition и hover-эффекты

Особенности ховера и как сгладить переходы между анимациями

2.5 Интерактив с JavaScript

Кодинг · 3 статьи

Кодинг · 8 минут

Добавление интерактивных элементов

Как отслеживать действия пользователя и менять страницу в ответ

Кодинг · 8 минут

Случайность и генеративность

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

Кодинг · 7 минут

Динамический курсор

Добавляем обычному курсору крутых процедурных эффектов с помощью отслуживания его координат

2.6 Публикация и продвижение

Теория · 2 статьи

Кодинг · 8 минут

Публикация на GitHub Pages

Пошаговая инструкция как превратить локальную папку в публичную ссылку в интернете

Теория · 6 минут

Где рассказать о своём плакате

Выбираем площадки и тематические сообщества, чтобы весь мир увидел ваш проект