Курс по веб-дизайну
с нуля

Теория: Сколько реально можно заработать денег на сайтах? Что важно для заказчиков сайтов на фрилансе? 7 преимуществ работы в Тильде Какие сайты можно сделать на Тильде? Наш подход к обучению создания сайтов С чего начать в веб-дизайне? Что такое одностраничный сайт? Из чего состоит Landing Page? 2 вида обложек, заголовок, текст, формы Стандартный блок и Zero Block в Tilda Что такое браузер и основные типы браузеров Базовые понятие работы с сайтами для новичков Что такое нейросетевая графика? 2 сайта с генерацией нейросетевой графики Делаем вместе (по видео): Создание сайта в Тильде Сохранение картинок и добавление на сайт Создание шапки сайта в Zero Block Правила именования файлов для сайтов Добавление эффекта огня и искр на сайте Способы размещения слоев в Zero Block Как масштабировать рабочее пространство? Как скрывать и блокировать слои? Как редактировать прозрачность слоев? Создание анимации появления текста (Basic Animation) Создание параллакс-эффекта по движению мышки Как опубликовать сайт в интернете? Как сделать, чтобы сайт хорошо отображался на телефоне? Создание нейросетевого пейзажа Как активировать бесплатный пробный период на Тильде? Базовое, продвинутое и лидерское задание для самостоятельного выполнения

Практика к уроку 1 Базовое задание 1. Создайте аккаунт в Тильде, если у вас его ещё нет. 2. Соберите страницу с бургером в Zero Block для трёх размеров экрана. 3. Опубликуйте страницу и проверьте её на разных экранах. Дополнительное задание Сделайте одностраничный сайт с туром в вымышленную страну. Для пейзажей и лиц жителей или гидов используйте нейросетевую графику. Можно брать любые блоки Тильды. Общий объём текста на сайте — от 3000 символов. По желанию Покажите анимацию бургера в своей соцсети. В течение пяти дней делитесь процессом работы или вариантами нейросетевой графики. Запишите свои впечатления и реакцию людей.

Теория: Основы передачи цвета на дисплеях Базовые цвета в веб-дизайне В чем измеряется интенсивность цвета в RGB? Что такое пиксель и зачем нужно знать это при создании сайтов? Разрешение экранов дисплеев разных устройств Как узнать какого размера картинка в Windows и Mac? Типы файлов и их характеристики: jpg, png и gif Размеры файлов для создания сайтов Делаем вместе (по видео): Трюк с регистрацией новых аккаунтов в Тильде Как подключить стандартную шрифтовую пару на всем сайте? Как задать размер рабочего поля в Zero-блоке в пикселях? Что такое сетка и зачем она нужна? Как дублировать готовые текстовые блоки в Тильде? Что такое иерархия заголовков в сайтах? Как добавить пошаговую анимацию в Zero Block? События для запуска пошаговой анимации Условия срабатывания (Start trigger) для анимации Подробный разбор настроек пошаговой анимации Создание вертикального parallax-эффекта Правила работы со слоями в Zero Block Как сделать горизонтальную анимацию на сайте? Создание псевдо3D-эффекта на одностраничном сайте Как зациклить фоновую текстуру (бесшовная текстура)? Как уменьшить расстоянием между строками текста? Базовое, продвинутое и лидерское задание для самостоятельного выполнения

Базовое: собрать страницу с авто в Zero Block; показать её на экранах от 1200 px, а на меньших экранах — отдельный блок «Привет»; опубликовать учебную страницу. Продвинутое: добавить кнопку «На Марс!», создать вторую страницу про космос с текстом от 2000 символов и связать страницы. Дополнительное: сделать три первых экрана 1200×700 px для проката велосипедов, услуг садовника и турнира по шахматам. Фон JPEG, объект PNG с прозрачностью, заголовок, текст и кнопка. Разместить на одной странице. По желанию: записать короткую демонстрацию своих работ с объяснением решений. Это самостоятельная практика; проверка работ и сопровождение не обещаны.

Теория: Как компьютер «запоминает» цвета? Отличие растровой от векторной графики Преимущества и недостатки разных видов графики Примеры векторной и растровой графики Характеристики и типы файлов растровой и векторной графики Сравнение SVG и PNG в размере файла В чем измеряется «вес» файлов? RGB и шестнадцатеричное представление цвета Что такое капча в сайтах? Что такое домен? Делаем вместе (по видео): Как активировать пробный период на Тильде? Скачиваем SVG файлы для сайта Как задать шестнадцатеричный цвет в Zero Block? Как создать шэйп: квадрат, круг в Тильде? Создаем переход «Облака» между блоками сайта Как создать адаптивную версию шапки сайта? Используем «Просмотр» для настройки мобильной версии сайта Создаем блок «Фраза» и «Текст» для одностраничника Инструменты расстановки объектов в Zero Block Отзывчивый дизайн, настройки контейнера сетки и окна SVG файл «Волна» для перехода между блоками Используем размер в процентах для масштабирования картинок Настройка пошаговой анимации с помощью easing Создаем эффект «Печатной машинки» для текста Настройка формы обратной связи на лэндинге Как редактировать домен в Тильде? Как зарегистрировать домен? Настраиваем DNS зоны для домена на Тильде

1. Повторите сайт с монстрами, проверьте его на разных размерах экрана и опубликуйте учебную страницу. 2. Для дополнительной практики сделайте сайт взрослой стоматологии: используйте соответствующий текст и фотографии вместо детских иллюстраций. 3. По желанию подключите собственный домен к учебному сайту. Это отдельное задание; пошаговая регистрация домена вынесена в дополнительное видео исходного курса.

Теория: Кириллица и латиница в шрифтах С засечками, без засечек и дизайнерские шрифты Типы файлов шрифтов TTF, OTF и WOFF Что такое конвертация и конверторы? Меню работы со шрифтами в Zero Block: выравнивание, цвет, размер, отступы, межстрочное расстояние 9 видов начертаний шрифтов (жирность шрифтов) Какой размер заголовка использовать на сайтах? Рекомендованные размеры для абзаца с текстом Плохие примеры использования шрифтов и отступов Какой отступ должен быть между заголовком и текстом (простое правило)? Примеры ошибок с отступами между заголовком и текстом Как принять решение какой ширины должен быть текст? Примеры распространенных ошибок с шириной текста Какое количество строк читается хорошо, если текста много? Правило для расстояния между строк должно быть в заголовке Что такое характер шрифта? Делаем вместе (по видео): Настройки сайта: установка кастомных шрифтов из библиотеки Как конвертировать шрифт Otf в Woff Загрузка нестандартных шрифтов для сайта на Tilda Выбор начертания шрифта в Zero Block Использование инструментов выравнивания в Zero Block Как использовать теоретические правила про шрифты на практике? Задаем расстояние между заголовком и текстом Настраиваем цвет фона: Solid, Linear Что такое градиент и как его настроить? Какие заголовки ставить для H1 и H2 на лэндинге? Что такое типографика? 5 главных правил типографики в веб-дизайне

1. Соберите страницу «Еда Азии» с внешним шрифтом. Для базового задания используйте подготовленный файл WOFF, проверьте версии для компьютера, планшета и телефона. 2. Для дополнительной практики сделайте отдельный сайт с акварельными цветами и подходящим рукописным шрифтом. Самостоятельно конвертируйте файл и подключите его. 3. По желанию прочитайте «Живую типографику» Александры Корольковой и примените один из разобранных приёмов в своей странице.

Теория: На какие 2 крупных блока делятся все фотографии 6 сайтов с бесплатными фотографиями для веб-дизайна Как искать и пользоваться сайтами с бесплатными фото? Что такое фотостоки и 5 основных сайтов с платными фото? Как не нарушать авторские права при использовании фото? Способы поиска фотографий для сайта с помощью метафоры Объект или метафора для поиска фото? 3 простых правила для поиска изображений для сайта Размер в пикселях, ориентация, тип файла для фотографий Лицензия creative commons для фотографий в Google Как и зачем сжимать фотографии в jpg и png без потери качества? Многостраничные сайты: зачем и из каких типовых страниц состоит? Из чего состоит типовая веб-страница? Что такое шапка и что в ней должно быть? Что такое подвал и как его правильно оформить? Делаем вместе (по видео): Как создать главную страницу в Тильде Создаем страницу «О компании» Работа со страницей «Контактная информация» Настройка Блога в многостраничном сайте Создаем страницу «Услуги» Как добавить шапку с меню, чтобы она была на всех страницах сайта? Как сделать при нажатии на логотип главную страницу сайта? Создаем подвал с копирайтом и ссылками на страницы Как поставить фоновую картинку или видео в шапку сайта? Создаем блок с тремя колонками текста в Тильде Что такое иконки на сайте? Как использовать Linea io и Tilda Icons? Добавляем блок с командой на сайт Как редактировать расстояние между заголовком и текстом в стандартном блоке Tilda Добавляем видео в сайт Создание нового потока в сайте Tilda (блог) Как редактировать посты в потоках и выводить их в сайт? Публикуем многостраничный сайт в интернет

1. Сделайте сайт из пяти страниц: главная, о компании, услуги, блог и контакты. Настройте общее меню, шапку и подвал, проверьте ссылки. 2. На отдельной странице проиллюстрируйте десять слов из задания с помощью фотографий и визуальных метафор. 3. Для тренировки наблюдательности найдите вне дома пять предметов или форм, напоминающих первую букву вашего имени, и сфотографируйте их.

Теория: Что такое домен и кириллический домен? В чем разница адресов главной и вложеной страниц? Всплывающее окно: Pop-up и его преимущества в загрузке Что такое якорь в адресной строке и зачем он? Разница между радиокнопками и чекбоксами Карточка товара, ее вид и состав Фильтры выбора в интернет-магазинах Путь от выбора до покупки Возможная ситуация с потерей заказа (как избежать) Что такое CRM-система и чем она помогает в работе с заказами? Виды CRM-систем: подручные и автоматические 4 примера топовых CRM-систем Какие настройки доступны для карточки товаров? "Невидимый блок" корзина и его важность Как быстро найти блок на странице? Создание якорных ссылок на разных частях сайта Что такое цифровое название блоков Куда поступают заявки с лендинга? Разбираем части заявки: статус, данные, комментарии 5 основых этапов в продажах Что такое воронка продаж? Сервисы приёма данных можно подключить? Как подключить другую CRM-систему? Делаем вместе (по видео): Как создать главную страницу в Тильде? Создаем страницу «Интернет-магазин» Добавляем обложку и редактируем текст Активация пробного периода Добавляем подходящую картинку из библеотеки Tilda Images Раздел настройки: учимся работать с фильтром Типографика и работа с настройками шрифта Создаем блок меню с логотипом над пунктами и переносим его Добавление заголовка и его редактирование Создаем 6 карточек товаров с pop-up окнами и настриваем их Редактируем карточки: добавляем картинки и информацию Добавляем заголок "Аксессуары" и создаем к ним 3 карточки товаров Редактируем отступы между блоками Добавляем и настраиваем блок "Доставка" Добавления якорной ссылки и редактирование ее имени Пробуем 2 способа активация якорной ссылки Контрольная проверка всех частей сайта: якорные ссылки, отступы Публикуем многостраничный сайт в интернет Создание тестового заказа Исправление ошибок: Редакция текста на кнопках Настройка CRM-системы Тильды Создание листа заявок в CRM и подключение к сайту Как добавить заявку в TildaCrm вручную? Настройки листа: добавление этапов продаж

1. Соберите учебный магазин с девятью товарами: фото, описание, цена, корзина и меню с якорями. Подключите CRM и проверьте прохождение тестовой заявки. 2. Для дополнительной практики сделайте магазин минимум с тридцатью товарами и страницами «Главная», «Каталог», «Оплата и доставка», «О нас», «Контакты». 3. Соберите десять обложек музыкальных альбомов, которые вам нравятся, и разберите их цвет, композицию и настроение.

Теория: рия:Что такое поисковый запрос, поисковая выдача и сниппет? Определения индексация и SEO-оптимизация 3 составлящих SEO-оптимизации Изометрия и её примеры Какой угол обычно используется в изометрии? Что такое H1 и как он работает? Свод правил для самого важного заголовка Как задать H1 в разных блоках? Какие еще бывают типы заголовков? Alt: Альтернативные текст для изображений В каких случаях используется тег alt? Основные критерии атрибута alt Как определить название alt тега? Настройка alt тега в разных блоках Что такое title и description? Как отличить title от H1? Взаимосвязь title и description со сниппетом Как сделать адрес красивым и понятным: ЧПУ Что такое бейджик? Как сделать SEO в настройках сайта? Что такое страница 404? Фавикон: Маленькая иконка с большой значимостью Простой и удобный сервис для создания фавикона Что означает https в адресной строке? Делаем вместе (по видео): Создаем новую страницу «SEO» Добавление Zero блока Заполняем страницу основными элементами: текстовые блоки, кнопка Как подключить шрифты? Работа с текстовыми блоками Наполнение страницы графическими элементами и работа со слоями Создание основного меню Добавление анимации на графические элементы Настраиваем SEO-тег H1 на странице сайта Как добавить alt тег к изображению в Tilda? Пробуем настроить alt тег в галерее Настраиваем гл. страницу: title, description, адрес и описание для соц. сетей Создание страницы 404 и её настройка Экспериментируем над созданием фавикона и загружаем на сайт Учимся на примере настраивать редирект Добавляем блоки с информацией, адаптируем их под сайт и настраиваем теги для заголовков Закрепляем информацию: работаем с типографикой, анимацией и тегами

1. Соберите страницу доставки с изометрическими иллюстрациями. Проверьте H1 и H2, alt-тексты, Title и Description, удобство на разных экранах. 2. Создайте и назначьте страницу 404, установите favicon. Проверьте результат на опубликованной учебной странице. 3. Нарисуйте пять вариантов favicon 16 × 16 пикселей и соберите их на одном изображении. 4. По желанию запланируйте день отдыха без экранов в непривычном месте.

Теория: Что такое дизайн-концепция? 4 примера сайта с разными стилями Что отражает дизайн-концепцию на первом экрана сайта? Как дизайн-концепция помогает при общении с заказчиками? Что такое Shape в Тильде? Правила создания композиции на примерах Композиционные ошибки при работе с графическими элементами Способы работы с обрезанными изображениями Как красиво размыть фигуру? Что такое «грязная тень»? Сетка: важный инструмент для работы с композицией Как быстро найти нужный блок в Тильде? Типичная ошибка в работе с фотографиями: пропорции людей и объектов Делаем вместе (по видео): Как создать главную страницу в Тильде? Создаем страницу «Клякса» Работа с графическими изображениями и текстом Как создать графические фигуры в Тильде? Как удобно перемещать маленькие объекты? Тестируем создание мягкой тени Как включить/выключить сетку в любом блоке? Создаем кляксу с помощью специального сервиса Как переместить элемент на задний план? Добавляем информационные блоки и корректируем отступы Настройка пошаговой анимации для фигур Редактируем контент блока с переключателем: задаем ID Наглядный пример, как правильно выравнивать элементы по сетке Как с помощью нейросети быстро удалить фон с фото? Возможности сервиса для вырезания фото Инструмент для быстрого кадрирования изображений в Тильде

1. Повторите учебный лендинг в стиле «Клякса»: первый экран, анимация форм, программа с переключателями и блок ведущих. 2. Адаптируйте страницу под разные экраны и проверьте опубликованный результат. 3. Для дополнительной практики создайте ещё одну страницу в этом стиле по тексту из материалов.

Теория: Как задавать вопросы на программе и в жизни? Как искать информацию по созданию сайтов в интернете? Правила для корректной формулировки вопросов Удобный сервис для создания снимков экрана с анимацией и без Основные ошибки в создании дизайн-концепций? Что такое композиция в веб-дизайне? Правила композиции на сайтах Равновесие в композиции одностраничных сайтов Ошибки в композициях шапок сайтов Вертикальное и горизонтальное равновесие в вебе 2 основных видов композиции Разбор шапки сайта с ошибками Еще несколько сайтов с классными фотографиями и иллюстрациями в одном стиле для использования в сайтах бесплатно Делаем вместе (по видео): Создание композиции в Zero Block Работа с правилом равновесии в Zero Block Как выравнивать элементы по вертикали и горизонтали? Как использовать сетку для исполнения правил композиции? Выравнивание заголовка, текста, кнопки и картинки Правая и левая композиции зеро-блоков на Тильде Создание текстур для сайтов с помощью веб-сервиса Как применять текстуру к 3d объекту в онлайн-сервисе? Создание паттерна с помощью авторской фотографии Использование Яндекс Диска для загрузки и обмена файлами

1. Повторите страницу с готовыми иллюстрациями, настройте анимацию и адаптируйте композицию под разные экраны. 2. Создайте пять текстур, экспортируйте их и соберите в одну папку. 3. Подготовьте две другие дизайн-концепции с тем же текстом и шрифтом. Выберите одну и оформите всю страницу в этом стиле. 4. По желанию сфотографируйте интересный объект и сделайте текстуру из собственного снимка.

Теория: Постановка задачи для выполнения проверочного проекта Важное требование к электронной почте Критерии оценки проверочного проекта Что будет оцениваться в творческой составляющей и технической составляющей сайта? Делаем вместе (по видео): Создание сайта по готовому тексту Адаптация сайта под любое устройство Работа с равновесием в композиции Отработка навыков выравнивания текста, кнопки, картинок Настройка title, description, H1, Alt-тег, 404

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

Теория: Что такое CMS-система? Что важно для заказчика сайта с бюджетом до 100 т.р.? Какие преимущества у конструктора Tilda? Какие типы сайтов можно создавать на Tilda? Не каждый заказчик - твой клиент: научись отказывать первым Как передать сайт клиенту? Ошибка, которую нельзя совершать при работе с разными заказчиками Кого мы называем заказчиком? 2 вида поиска заказчиков Основные ошибки ведения соцсетей Какой оффер привлечет клиентов? Разбираем, как правильно вести социальные сети Правила общения с потенциальными заказчиками На каких сайтах стоит себя продвигать? Вредные советы от Данила Фимушкина, которые помогут тебе стать успешным веб-дизайнером Разбираем, как нужно взаимодействовать с клиентом Делаем вместе (по видео): Работа над ошибками в проверочном проекте Правильное заполнения профиля в социальной сети Активное ведения социальных сетей Работа с бесплатными сервисами, где вы размещаете информацию о ваших услугах Отработка навыков ведения диалога по предложению своих услуг

1. Проверьте и доработайте самостоятельный сайт из предыдущего урока по его чек-листу. 2. Подготовьте понятное описание своих услуг, фото и закреплённую запись с примерами работ. Проверьте, как потенциальный клиент сможет с вами связаться. 3. Составьте предложение с ясно обозначенным первым шагом, объёмом работы и условиями продолжения. Не включайте обещание сопровождения наставниками, если такого сопровождения нет. 4. Подготовьте десять публикаций о процессе, готовых проектах и своих интересах на ближайшие двадцать дней. 5. Отрепетируйте разговор о проекте: вопросы о задаче, материалах, принимающем решение человеке и сроках. Подготовьте презентацию двух концепций.

Теория: Как устроено взаимодействие с заказчиками на фрилансе и в студии? Плюсы и минусы работы на фрилансе и в студии и разница в стоимости проектов Введение понятий User и Interface с примерами Что такое UX и UI: понятное объяснение на примерах Кто такой UI/UX дизайнер и чем он занимается? В чем разница между веб-дизайнером и UI/UX дизайнером? Как себя позиционировать на фрилансе? Что такое графический интерфейс? Что такое кнопка в интерфейсе и основные правил ее использования Надпись на кнопке: правила формулировки и написания в интерфейсах Правила расстановки акцентов: первичная и вторичная кнопка Примеры кнопки со сплошной заливкой и контурной заливкой Примеры кнопок с надписью, с закругленными углами Как выбрать цвет на кнопке и цвета надписей Виды закруглений и правила использования теней Какие шрифты использовать на кнопках? Отступы по вертикали и горизонтали на кнопках Исследование про размер кнопок и вероятность точного нажатия на нее Свойства кнопок: состояния нажатия, наведения, нажатие и неактивная Демонстрация разных свойств кнопок на практике Делаем вместе (по видео): Что такое Figma и какие продукты можно в ней создавать? Как зарегистрироваться в Figma и создать первый проект? Инструмент Frame и создание рабочего пространства для iPhone Инструмент создания текста и способы создания текстового фрейма Установка шрифтов, размера шрифта и других свойств текста Создание кнопки в Figma: скругления углов, градиентная заливка Создание разных свойств кнопки: наведение, нажатия и т.д. с помощью группировки слоев Добавление картинок в файл Figma Создание модульной сетки стандартными средствами Настройка падающей тени к блокам в Figma Создание формы регистрации Как создать интерактивный прототип? 2 способа поделиться ссылкой на проект и на интерактивный прототип

Соберите первый экран регистрации с текстом и кнопкой. Затем добавьте ещё четыре экрана и свяжите их переходами. В режиме просмотра пройдите оба маршрута анкеты. Проверьте ссылки на макет и прототип с правом просмотра. Для дополнительной практики предложите свой вариант дизайна существующего лендинга.

Теория: Что такое Ui-kit и его составляющие Для чего нужна дизайн система? Что такое Гайды/Гайдлайны? Разбор основных элементов UI на примере Ключевые цвета, как часть бренда компании Что такое TAG и ACCORDION? Какие виды кнопок могут быть в Ui-kit? Преимущества объемных дизайн систем Чекбоксы и радиокнопки в дизайн системе Что такое модальное окно, notification и switch в Figma? Примеры использования переключателя Switch в повседневности Чем отличается текстовая форма от поля ввода? Выпадающие списки,элементы выбора и переключатель TAB в Ui-kit Поля ввода: виды и возможные состояния Почему важно использовать Label над каждым полем ввода? Какие еще виды дизайн систем бывают? Где брать UI-kit в Figma? Инструмент для совместной работы: Fig.Jam.file Что такое плагины и как они помогают в создании сайта? Раздел с полезными материалами explore community Из каких элементов состоит интернет-магазин? Любимая пиктограмма начинающих дизайнеров: Бургер Что такое выкладка товара? Популярные фильтры товаров в интернет-магазинах Подробный разбор составляющих карточки товара Что такое пагинация на сайте интернет-магазина Делаем вместе (по видео): Как переключать и создавать страницы в Figma? Пробуем инструменты для работы в Fig.Jam.file Как настроить доступ для других пользователей к Fig.Jam.file? Пошаговый процесс установки виджета в Figma Как скопировать файл к себе в аккаунт? Добавление иллюстраций в Figma при помощи плагина Как правильно выравнять элемент с помощью сетки? Работа с графическими элементами и слоями иллюстрации Создание текстового блока и выбор шрифта Адаптируем сайт: создание макетов для мобильной версии и планшета Как поделиться ссылкой на проект?

Соберите первый экран лендинга в трёх размерах. Возьмите готовый макет лендинга и подготовьте планшетную и мобильную версии. Для дополнительной практики нарисуйте каталог с фильтрами и страницу товара в трёх размерах, используя UI-кит.

Теория: Преимущества мобильного приложения в сравнении с сайтом Что такое нотификация? Почему мобильные приложения имеют высокую стоимость? Минусы создания мобильных приложений для дизайнера Гайдлайны от производителей при создании моб. приложений 2 вида гайдлайнов от производителей операционных систем Понятие Вайфрейм (Wireframes) на простом примере С чего начать работу над созданием моб. приложения? Что такое шаблоны восприятия и как они облегчают нам жизнь? Что такое контролы на Вайфрейме? Понятия «свайпуть» и «тапнуть» Логика сбора данных в приложении: окно авторизации Какие жесты мы можем использовать для программирования кнопок в Figma Что такое вилка на языке программистов? Делаем вместе (по видео): Создание фрейма под размер айфона в Figma Оформление Вайфрейма страницы прослушивания трека в моб. приложении Добавление простейших фигур в Figma Как сгруппировать фигуры? Добавление элементов интерфейса с помощью плагина Пошаговая инструкция установки плагина в Figma Создание фрейма поиска информации в моб. приложении Активируем кнопки и тестируем прототип Создание и наполнение экрана кнопки «Лайк» Как добавить Ui-kit к странице с прослушиванием трека? Базовое, продвинутое и лидерское задание

Нарисуйте вайрфреймы музыкального плеера и свяжите их в интерактивный прототип. Проверьте переходы из плеера в поиск и обратно. Затем продублируйте страницу и оформите интерфейс с помощью UI-кита. Для дополнительной практики спроектируйте и оформите сценарий бронирования авиабилетов.

Теория: Что такое портфолио? Из чего состоит портфолио у веб-дизайнера? Главные правила всех портфолио Что такое кейс в портфолио на простом примере Из чего состоит хороший кейс? Правила для создания эффектной шапки Как продемонстрировать дизайн сайта на носителе? Удобный сайт для упрощенной работы с мокапами Для чего используются файлы типа: psd? Что такое пагинация? Еще несколько примеров частей кейса Как правильно определись картинку для превью? Пример прототипа кейса сайта Картинки для вдохновения: референсы Делаем вместе (по видео): Как экспортировать файл Figma в формате png? Пробуем использовать мокап через сайт GetCover Как открыть файл в фотошопе онлайн? Процесс редактирования мокапа в фотошопе Как масштабировать картинку в фотошоп? Редактируем слой с текстом: наложение тени Работа с инструментом пипетка Как изменить шрифт в фотошопе? Экспортируем готовую работы из фотошопа Регистрация на сайте Behance и первичная настройка профиля Как поделиться проектом на Behance? Тестируем ссылку на проект в режиме инкогнито перед отправкой Как создать скриншот всего сайта?

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

Теория: Скевоморфизм - что характеризует этот стиль? Стиль Flat Material Design - язык, на котором говорит Google Минимализм - особенности этого стиля Неоморфизм - плоский или выпуклый? Разбираем локальные стили Делаем вместе (по видео): Сделать шапку сайта в ретро стиле Дополнительные темы исходной программы: E-mail-рассылки: Зачем нужны рассылки? В чем отличие от веба? Из чего состоит e-mail маркетинг? Как делать дизайн писем? Разбираем, какие существуют ограничения Структура письма Разбираем техники верстки Ответы на вопросы студентов

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

Теория: Брифинг с заказчиком Делаем вместе (по видео): Создать сайт, адаптированный под разные устройства

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

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

Выберите отдых или новое занятие, которое давно откладывали. Если хочется рабочей практики, возьмите учебный бриф, письменно сформулируйте объём проекта, перечислите отдельные расходы и отрепетируйте обсуждение новых задач с партнёром по практике.

Теория: Правильная расстановка акцентов Скорость загрузки сайта Какие цвета не следует использовать? Шаблоны взаимодействия: стоит ли придумывать новые? Шрифты, которыми лучше не пользоваться Орфография и пунктуация: нужно ли о них забывать? Надо ли проверять доступность сайта? Предоплата: что с ней делать? Когда нужно приступать к выполнению заказа? Делаем вместе (по видео): Находим в интернете плохие сайты Создаем свой ужасный сайт Переделываем хороший сайт, делаем его "страшным"

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

Теория: Что такое аппликация? Примеры хороших аппликаций Делаем вместе (по видео): Создаем новый файл в фотошопе Как в фотошопе пропорционально уменьшать картинку? Учимся вырезать объект Как редактировать имя слоя? Создаем тень от картинки в фотошопе Делаем фон, который выглядит, как аппликация Экспортируем файл в Тильду

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

Делаем вместе (по видео): Создаем фон: полосы, переходящие в фон. Рассматриваем различные варианты использования полос для фона В фотошоп делаем интересную маску с использованием звезды Переносим все в Тильду и создаем очень классный эффект

Повторите композицию с портретом, звездой и полосами. Сохраните скриншот макета, затем перенесите элементы в Zero Block и проверьте анимацию. Для дополнительной практики примените приём к редизайну первого экрана.

Теория: Определение понятия портфолио Что такое кейс? Из чего состоит портфолио? Как может быть оформлено ваше портфолио Главное правило веб-дизайнера Что должно быть на сайте с вашим портфолио? Если мало работ, что можно сделать? Рекомендации, которые вам помогут в создании портфолио Делаем вместе (по видео): Создаем портфолио

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

Теория: Ниша- разбираем понятие Что такое нишевание? Делаем вместе (по видео): Создание самого лучшего сайта за все время вашего обучения Финальный проект и оформление кейса.

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

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

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