WebDesign Master
Курсы
Создание коммерческого сайта от А до Я. Урок 5: Создание дизайна сайта #2

Создание коммерческого сайта от А до Я. Урок 5: Создание дизайна сайта #2

Всем привет, дорогие друзья! Это пятый урок курса «Создание коммерческого сайта от А до Я». Сегодня мы продолжим создание дизайна сайта в Figma на примере реального сайта. В данном уроке мы создадим секцию «Нам доверяют», попутно научимся работать с цветовыми и текстовыми стилями документа, закрепим работу с Auto Layout на примере более сложной композиции и научимся создавать отзывчивые кнопки в дизайне.

Создание коммерческого сайта от А до Я. Урок 5: Создание дизайна сайта #2 - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Для прохождения необходимо скачать Материалы курса

Полезные материалы и ссылки:

  • Как стать крутым веб-дизайнером: Страница урока. Рекомендуемый таймкод - 18:33
Для создания дизайна в Figma необходимо установить в систему все шрифты из папки «design/fonts/_src/». Кроме того, в архиве курса можно найти готовый дизайн, который мы создаем в уроках «Design (Woodtech).fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно и перетащить в него данный файл. В списке проектов у вас появится новый проект.

Сегодня мы на реальном практическом примере рассмотрим работу с цветовыми и текстовыми стилями Figma.

Стили (Styles) - это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия и т.д.

Auto Layout в Figma - это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого. Простой пример, который мы рассмотрели сегодня в уроке - это создание кнопки, при изменении текста в которой, ее оформление и контейнер будут менять размер соответствующим образом.

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Веб-дизайн»

  • Создание дизайна сайта в Figma на реальном примере. Материалы курса
  • Создание коммерческого сайта от А до Я. Урок 15: Дизайн сайта #12. Финал дизайна
  • Создание коммерческого сайта от А до Я. Урок 14: Дизайн сайта #11. О компании #1
  • Создание коммерческого сайта от А до Я. Урок 13: Дизайн сайта #10. Дизайн «Блога» и универсальной страницы
  • Создание коммерческого сайта от А до Я. Урок 12: Дизайн сайта #9. Дизайн страницы услуг
  • Создание коммерческого сайта от А до Я. Урок 11: Дизайн сайта #8. Дизайн страницы проекта

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODX
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2022 © WebDesign Master