Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На данной странице вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
Поделиться Отправить Класснуть Запинить
Материалы курса, готовый результат: Скачать
Полезные материалы и ссылки:
- Сайт Figma: Figma Home
- Программа «Pencil» для создания схем и прототипов: Скачать (Win)
- Создание слайдера и посадка на Winter CMS: Страница курса
- Как стать крутым веб-дизайнером: Страница урока
- Что такое диаграмма связей: Диаграмма связей (Wiki)
- Что такое прототипирование: Прототипирование (Wiki)
- Создание Bootstrap-сетки в Figma: Страница урока
- Иконки Font Awesome: Посмотреть и скачать
- SVG Viewer Extension for Windows Explorer: Скачать с GitHub
- Визуальная иерархия в интерфейсах: Изучить статью
- Векторный редактор Inkscape: Ознакомиться и скачать
- Работа с иконками для веб-дизайна: Изучить урок
- Программа пипетка «Instant Eyedropper»: Instant Eyedropper Home
- Стрелка «Назад»: ←
- Стрелка «Вперёд»: →
В архиве материалов курса можно найти прототипы всех страниц сайта, которые мы разработали в этом курсе. Экспорт прототипов лежит в папке «design/wireframes/». Пресет настроек для приложения Pencil, который вы можете импортировать в Pencil на вкладке «My Shapes», можно также найти в архиве курса — «other/WireFrame-Pencil-Collection.zip».
Что такое Figma и для чего она нужна?
В архиве материалов есть все используемые в дизайне шрифты. Для прохождения курса необходимо установить в систему все шрифты из папки «design/fonts/_src/».
Кроме того, в архиве курса можно найти готовый дизайн «Design (Woodtech) — Ready.fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно Figma и перетащить в него данный файл. В списке проектов у вас появится новый проект Figma.
Готовая карта сайта (Mind map):
Для закрепления информации:
Компоненты Figma (Components) — это объекты, которые используются в дизайне многократно. По-сути, компоненты Figma — это объекты для повторного использования, которые могут быть простыми (например, кнопка) или сложными (форма обратной связи, заголовок, footer и т.д.). Ключевой особенностью компонентов Figma является возможность повторного использования блоков, где при редактировании корневого (главного) компонента, меняется структура и наполнение во всех дочерних (копиях) компонентах во всех фреймах документа.
Auto Layout Figma — это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого.
Как искать примеры анимации или дизайн разных блоков?
Стили Figma (Styles) — это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Ключевой особенностью стилей Figma является возможность менять свойства стиля в одном месте для всех элементов дизайна, во всех фреймах документа. Данный функционал схож с использованием переменных в программировании.
Inkscape (Инкскейп) — свободно распространяемый векторный графический редактор (Open source), который мы используем в курсе для векторизации растровых иконок.
Настройки экспорта оптимизированного SVG (Inkscape)
Прототип и готовый дизайн главной страницы:
Прототип и готовый дизайн страницы «Наши проекты»:
Прототип и готовый дизайн страницы проекта:
Прототип и готовый дизайн страницы услуг:
Прототип и готовый дизайн страницы «Блог компании»:
Прототип и готовый дизайн универсальной страницы:
Прототип и готовый дизайн страницы «О компании»:
Прототип и готовый дизайн страницы «Наши преимущества»:
Прототип и готовый дизайн страницы «Обратная связь»:
Прототип и готовый дизайн страницы «Наши партнеры»:
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Веб-дизайн»
- Создание Bootstrap-сетки в Figma
- С чего начать работу над дизайном и где брать вдохновение
- Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
- Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
- Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение
Источник: webdesign-master.ru
42 бесплатные Figma-библиотеки с фотографиями, иллюстрациями, паттернами и фигурами
Библиотеки в Figma Community содержат множество изображений на любую тематику. В подборку мы включили коллекции фотографий, иллюстраций, паттернов, геометрических фигур, абстрактных шейпов, аватаров, стикеров, голографических изображений и даже картинок кубиков Lego
Дарья Райт
Ведущий редактор в «Оди»
Unsplash — самый известный сток бесплатных фотографий
Photos — ищет фотографии по крупнейшим стокам: Unsplash, Google, Flickr, Pixabay, Pexels, Giphy и Tenor
Fast Photo Paste — находит и вставляет в проект фотографии из бесплатных фотостоков
Freepik — позволяет искать фотографии и векторную графику на freepik.com
Iconstout — ищет и вставляет в макет иконки, иллюстрации и стоковые фотографии с iconscout.com
Icons8 — находит иконки, фотографии и иллюстрации из библиотеки Icons8 (бесплатно за ссылку)
Artvee — коллекция из 1000+ картин, плакатов, иллюстраций и рисунков, которые находятся в статусе общественного достояния
Blush — несколько наборов из сюжетных редактируемых иллюстрации
Humaaans — библиотека элементов для сборки иллюстраций людей в модной стилистике
Artify Illustrations — более 5000 векторных иллюстраций от Artify
Illustrations — библиотека иллюстраций от Hexorial Studio
Elements — коллекция из 100 000+ фотографий и картинок
Surface — 75+ иллюстраций на разные темы
Crafttor — пополняемая коллекция иллюстраций
Brutalist Mega Pack — набор из 256 векторных элементов в брутальном стиле
Bubble Gum — набор из 15 иллюстраций с дружелюбными персонажами от Icons8 в PNG-формате
Looney — набор из 15 псевдовинтажных персонажных иллюстраций от Icons8 в PNG-формате
Pew-Pew — набор из 20 бесплатных линейных иллюстраций от LS.graphics в формате PNG
Funky Scribbbles — коллекция забавных векторных элементов
Happy people — коллекция из 15 персонажных иллюстраций от Icons8 с яркой жизнерадостной стилистикой
Free vector avatars library — библиотека векторных настраиваемых иллюстраций с портретами пользователей
Avvvatars — react-библиотека для создания случайных аватарок пользователей. Можно делать аватарки с шейпами или текстом. Доступно 40 цветов и 60 шейпов
CryptoPunk Avatar Generator — библиотека аватарок в стиле криптопанков
Movie Posters — добавляет случайный популярный постер фильма или сериала
Brick constructor — 189 деталей-компонентов, которые легко стыкуются друг с другом. Каждый можно покрасить в один из 53 цветов
Frosted Glass — иллюстрации с эффектом глассморфизма
Isometric Card — изометрические карточки погоды с эффектом глассморфизма
Geometric Shapes — набор геометрических шейпов разных форм
Geometric Element — более 100 геометрических векторных фигур
Future Patterns — бесплатный набор абстрактных паттернов
Geo Sphere — бесплатные 3D-объекты геосферы в PNG-формате
Abstract shapes — большой набор из 100+ векторных шейпов
Figures — настраиваемый набор абстрактных фигур
3D Golds and Blacks — набор геометрических золотых и чёрных элементов
Hologram Wallpapers — набор из 30 голографических иллюстраций
Источник: awdee.ru
Шаблоны
Отличный шаблон иконки для Figma, с помощью которого вы без труда сможете создать свои собственные иконки. Он содержит пиксельную сетку, направляющие формы для иконок разных пропорций, направляющую для заполнения и предварительные отображение для иконок разного размера.
106 раз скачали
Отправлено 22 янв 2021, 12:53
Шаблон Social Media Kit для Figma
Отличный набор бесплатных шаблонов социальных сетей: Behance, Facebook, YouTube, Figma Community, Linkedin, Open Graph, Zoom и Twitter. В шаблонах указаны все размеры используемых изображений. Я думаю многим будет полезен этот файл. Забирайте
- шаблон
- социальные сети
- (и ещё 1 )
Отправлено 11 янв 2021, 20:20
Шаблон Brand Manual для Figma
Бесплатный шаблон Brand Manual для Figma, который вы можете использовать как рыбу для создание брендбука. Необходимо только изменить информацию, логотип и цветовое решение, которое применится ко всему документу автоматически.
- шаблон
- брендинг
- (и ещё 1 )
Отправлено 8 янв 2021, 19:21
Шаблон страницы оплаты iBANK для Figma
Бесплатный шаблон страницы оплаты заказа iBANK для Figma, который выполнен автором Caddiesoft очень качественно, в стиле минимализма и в нескольких цветовых решениях: тёмный и светлый шаблоны.
- template
- payment
- (и ещё 2 )
Отправлено 2 янв 2021, 18:14
Источник: figma.community