Курс "Основы дизайна"

1. Как изучить детально Figma и Webflow

В уроке разберем ресурсы школы где можно максимально детально погрузиться в изучение каждого сервиса

‍

2. Регистрация в сервисе для дизайна — Figma

Создадим новый аккаунт в Figma, загрузим приложение на компьютер, разберем панель проектов и создадим первый проект

‍

3. Регистрация в сервисе верстки — Webflow

Пройдем регистрацию, создадим проект и опубликуем первый сайт

‍

4. Фреймы, инструменты и комьюнити

В уроке кратко пройдемся по основным инструментам и возможности в комьюнити

‍

5. Модульные сетки в сервисе Figma

В уроке подробно рассмотрим назначение модульных сеток на примерах реальных проектов

‍

6. Контейнеры в Webflow

Этот урок продолжение темы Модульных сеток в Figma. Только теперь рассмотрим как определить размер контейнера и сделать его в Webflow

‍

7. Секции в Figma и Webflow

В уроке рассмотрим разделение контента на секции с созданием секций в Figma и Webflow

‍

8. Добавление шрифта в Figma и Webflow

В уроке рассмотрим как добавлять шрифты из Google Fonts и файлом в сервисы Figma и Webflow

‍

9. Дизайн шрифта

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

‍

10. Дизайн текста

В этой лекции вы подробно разберетесь с иерархией текста, правилами внутреннего и внешнего, принципами контраста, межстрочный и межбуквенный интервалы и многое другое

‍

11. Практика работы с текстом в Figma

Повторим на практике основные правила дизайна текста и пройдемся по настройкам текста в Figma

‍

12. Практика работы с текстом в Webflow

На практике разберем как переносится текст с Figma, какие есть правила использования виджетом и немного приемов верстки

‍

13. Основы композиции

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

‍

Тест: Композиция, шрифт и дизайн текста

Проверочный тест по материалам пройденного материала

‍

14. Мастер-класс по сборке композиций

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

‍

15. Цвет и его влияние в вебе

В этой лекции разберем все что касается использование цвета на сайте

‍

16. UI элементы интерфейса

Все о правильном создании кнопок, иконок, форм, слайдеров, ссылок, а так же как создавать UI кит для верстки проекта

‍

17. Практика создания кнопки в Figma

В этом уроке вы попрактикуетесь быстрому созданию правильной кнопки в Figma

‍

18. Вёрстка кнопки в Webflow

В этом уроке мы продолжим работу с кнопкой и сверстаем из Figma

‍

19. Создание кнопки с иконкой (Figma, Webflow)

В этом уроке мы соберем кнопку с иконкой в Figma и сверстаем ее в Webflow

‍

20. Создаем правильную тень кнопки (Figma, Webflow)

В уроке разберем как делать не грязные тени у кнопок при дизайне в Figma и верстке в Webflow

‍

21. Анимация кнопок в Webflow

В этом уроке рассмотрим три типа анимации кнопок при верстке сайта в Webflow и далее вы сможете придумывать свои вариации

‍

22. Этапы разработки сайтов

В этом видео мы подробно рассмотрим на какие этапы делиться разработка сайта от встречи с заказчиком до сдачи проекта

‍

23. Первичные переговоры с заказчиком

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

‍

24. Исследование проекта

Исследование нужно проводить для любого типа сайта и как это делать в этом видео. В уроке даны рекомендации по самостоятельному выполнению исследования

‍

25. Исследование проекта через ChatGPT 
и Perplexity

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

‍

26. Как сохранить длинный референс и вставить в Figma без потери качества

Практический урок

‍

27. Сборка рефференсов

В видео посмотрите как выглядит процесс сборки референсов

‍

28. Ассоциации первого и второго порядка

Для сборки мудборда необходимо собрать ассоциации и в этом уроке покажу механизм

‍

29. Собираем ассоциации через ChatGPT

Облегчаем себе труд быстро собирая ассоциации первого и второго порядка через ChatGPT

‍

30. Принцип разработки прототипа будущего сайта

Практические примеры сборки прототипа для будущего сайта

‍

31. Система протопитирования

Бонусный пакет готовых блоков для быстрой сборки прототипов

‍

32. Прототипирование с каталогом готовых секций

Как использовать каталог готовых секций от нашего сервиса Web-Steps

‍

33. Создание мудбода

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

‍

34. Размеры и сетки для мобильной версии сайта

В уроке разберемся какие размеры сайта для планшета и мобильного телефона необходимо отрисовывать в Figma если верстаете в Webflow не сами, а другой исполнитель

‍

35. Адаптация дизайна под планшет

Мастер-класс по адаптации дизайна сайта в Figma под планшетную версию

‍

36. Адаптация дизайна под мобильный

Мастер-класс по адаптации дизайна сайта в Figma под мобильную версию

‍

37. Подготовка макета к верстке

Как правильно собрать и подготовить UI комплект

‍

38. Как исправить дробные значения в макете

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

‍