Курс Web-дизайн, полный цикл создания сайта от задумки до запуска в интернете в видеоформате

Блок 1. Основные понятия и принципы Web-дизайна. Современные подходы к созданию качественного дизайна

1. Основные понятия и методы создания сайтов.
   В данном видеоуроке рассматриваются основные принципы, понятия и этапы создания современных сайтов, механизмы и программы, позволяющие работать быстро и эффективно.
2. Рассмотрение проекта который будет создаваться в рамках курса - создание визуального образа сайта.
   В рамках курса создается реальный сайт, от задумки до реализации на реальном сервере. В данном уроке мы рассматриваем проект который будет создаваться.
3. Понятие адаптивности в веб-дизайне.
   Что такое адаптивный веб-дизайн? Это возможность для сайта корректно отображаться на различных устройствах, о чем мы и рассказываем в данном уроке.
4. Кто такой дизайнер, цели и мотивация, состояние как способ выразительности.
   В уроке объясняются основные принципы, по которым дизайнер выполняет свою творческую работу, основываясь на целях и мотивации.
5. Вопросы, на которые необходимо ответить при создании дизайна сайта.
   Урок посвящен тем вопросам, на которые необходимо дать или найти ответы перед тем как начинать создавать сайт.
6. Теория цвета в веб-дизайне.
   Урок посвящет теории цвета, как основной творческой и технологической составляющей при реализации любого дизайнерского проекта.
7. Как правильно подобрать правильное сочетание цветов для сайта.
   В уроке мы на практике реализуем наше умение работать с цветом. Мы попробуем правильно подобрать сочетание цветов для нашего проекта.
8. В чем отличия WEB-дизайна от UX/UI-дизайна.
   Многие спрашивают, в чем отличия WEB от UX/UI-дизайна. В данном уроке мы отвечаем на этот вопрос и даем свои рекомендации по этому поводу.
9. Выбор цветов и шрифта для нашего проекта сайта.
   Урок посвящен подбору цвета и шрифтов для на нашего проекта. От данного выбора зависит успех всего проекта в целом.

Блок 2. Figma - инструмент для создания дазайна сайта в графическом формате и в виде прототипа сайта. Скачивание, установка и основные приемы, применяемые в работе.

1. Скачивание и установка платформы Figma.
   Мы приступает к практическому воплощению проекта в жизнь. Программа Figma позволит нам создать графическое представление дизайна сайта. В уроке мы скачаем и установим Figma на наш компьютер.
2. Обзор программы Figma. Понятие модульной сетки.
   Урок посвящен общему обзору программы Figma, ее возможностям. Так же рассмотрим вопрос что такое модульная сетка и для чего она необходима при создании дизайна сайта.
3. Инструменты Move и Scale в Figma.
   Рассматриваем инструменты Move и Scale в Figma, их назначение и функциональные возможности.
4. Инструменты создания мини форматов для дизайна сайта в Figma.
   В Figma имеется масса инструментов для создания различного рода объектов при проектировании дизайна сайта. Данный урок посвящен изучению данных инструментов.
5. Инструменты Pen и Pencil в Figma для создания сложных объектов в дизайне сайта.
   В уроке рассматриваем инструменты Pen и Pencil при помощи которых можно создавать более свободные и сложные формы объектов.
6. Дополнительные инструменты редактирования объектов в Figma.
   Урок посвящен изучению дополнительных инструментов редактирования форм и объектов в программе Figma.
7. Инструмент Текст. Работа с текстом в программе Figma.
   Инструмент Текст говорит сам за себя - предназначен для создания и работы с текстом и шрифтами.
8. Комментарии в Figma.
   Возможность осталять и читать комментарии в Figma очень удобный функционал особенно для тех случаев, когда над проектом работает команда разработчиков в удаленном режиме.
9. Экспорт объектов и страниц в программе Figma в различных графических форматах.
   Возможность экспорта как отдельных элементов дизайна, так и страниц полностью позволяет представить проект заказчику в удобном для него формате.
10. Функции выравнивания и смарт-выравнивания в программе Figma. Урок посвящен выравниванию элементов дизайна по определенным принципам и с возможностью автоматизировать некоторые процессы при помощи смарт-выравнивания.
11. Понятие и использование маски в программе Figma.
    Маски в Figma используются для скрытия ненужных объектов или части объектов или форм, что делает их использование процессом очень удобным и ускоряющим ход общей работы.
12. Функция Share, возможность предоставления доступа к проектам в Figma другим пользователям.
    В Figma имеется возможность делиться доступом к проекту любому количеству пользователей или отправлять им ссылку на обозрение проекта.
13. Создание стилей для текста в Figma.
    В уроке рассматриваем возможность создания стилей для текста, это очень удобно, особенно когда необходимо быстро оформить большой объем текстовых элементов.
14. Создание стилей для цвета в Figma.
    Как и в предыдущем уроке, стили в Figma можно создавать и для цвета.
15. Понятие компонента в Figma. Создание, использование и редактирование компонентов.
    Компонент в Figma очень удобный и упрощающий работу дизайнера объект, при помощи которого можно создавать массу повторяющихся элементов схожих по стилю, но различных по содержанию.
16. Адаптивные элементы в программе Figma.
    В Figma реализованы инструменты, позволяющие создавать адаптивные элементы в дизане сайта.
17. Прототипирование в Figma или создание прототипа сайта.
    Создание прототипа сайта, это очень удобная возможность, чтобы еще на этапе проектирования увидеть как взаимодействуют элементы дизайна между собой.

Блок 3. Практическое использование Figma для создания дизайна и прототипа сайта.

1. Практика создания дизайна сайта в Figma. Создание верхнего блока с контактами и социальными сетями.
   В уроке мы начинаем практически реализовывать дизайн сайта в Figma.
2. Создание блока верхнего фиксированного меню в Figma.
   В уроке мы создадим верхний блок с контактами и социальными сетями и фиксированное верхнее меню.
3. Создание блока содержащего логотип в Figma.
   В уроке мы создадим блок с логотипом и научимся работать с цветом.
4. Создание блока слайдера в Figma.
5. Создание бокового выпадающего меню в Figma.
6. Создание выпадающего элемента пункта меню в Figma.
7. Создание стилизованных заголовков в Figma.
8. Создание контентной части дизайна сайта в Figma.
9. Продолжаем создавать контентную часть сайта с привязкой к модульной сетке.
10. Создание остальных элементов и микроформатов контентной части дизайна сайта в Figma.
11. Создание нестандартных элементов в Figma.
12. Создание блока фотогалереи в Figma.
13. Создание нижней части дизайна сайта и футера.

Блок 4. Перенос графического формата представления дизайна сайта в готовый проект на локальном сервере. Установка CMS Joomla и необходимых компонентов.

1. Определение этапов и задач при реализации сайта из графического формата в реальный.
   В данном уроке мы рассмотрим основные этапы как графический формат дизайна сайта можно перевести в реальный проект.
2. Скачивание и установка локального сервера Open Server.
   Для работы над реальным сайтом нам потребуется локальный сервер, для этого мы его скачаем и установим и научися работать с ним.
3. Скачивание необходимых компонентов для создания сайта с системой управления контентом.
   В данном уроке мы скачаем необходимые копоненты для создания сайта на нашем компьютере.
4. Установка CMS Joomla на локальный сервер.
5. Установка шаблона сайта Helix Ultimate на CMS Joomla.
6. Настройка шаблона сайта Helix Ultimate для реализации собственного проекта.
7. Установка и настройка конструктора страниц SP Page Builder.
8. Установка компонента резервного копирования и создания фотогалерей.

Блок 5. Реализация сайта из графического представления в реальный проект на сервере.

1. Добавление блока с логотипом на реальный сайт.
2. Создание слайдера в SP Pade Builder, различные виды слайдеров.
3. Создание шапки сайта и вертикального меню из компонентов SP Page Builder.
4. Создание стилизованных заголовков в SP Page Builder.
5. Создание микроформатов для контента и блоков особенностей.
6. Наполнение страницы с контентом используя микроформаты SP Page Builder.
7. Создание фотогалереи. Настройка, визуальное оформление и реализация на странице.
8. Создание нижней части сайта и футера. Реализация параллакс эффекта.

Блок 6. Перенос проекта сайта с локального сервера на реальный хостинг в интернете и запуск.

1. Подготовка проекта к импорту/экспорту с локального сервера на реальный.
2. Выбор и покупка хостинга и домена для нашего сайта.
3. Установка нашего проекта на реальный сервер.
4. Настройка сайта после установки.