Figma


Фотостоки:

— pixabay.com

— freepik.com

— unsplash.com

— pexels.com

Вайрфрейм (Wireframe) – это образ дизайна низкой точности. Он должен четко показывать:

  • Основою группу контента (Что?)
  • Структуру информации (Где?)
  • Описание и базовая визуализацию взаимодействия между интерфейсом и пользователем (Как?)

Вайрфрейм можно сравнить с планом здания — на него будут ориентироваться при постройке, но жить в нем невозможно. Никаких реальных функций сайта он не выполняет.

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

Практика 1: Начало

1. Установить клиент Фигмы.

2. Зарегистрировать бесплатный аккаунт.

3. Войти в Фигму в браузере.

4. Найти в настройках, как привязать номер телефона к аккаунту Фигмы, и включить двухфакторную авторизацию.

5. Разработать вайрфрейм по заданному ТЗ.

6. Скинуть работу на почту.


Лучшая работа - Федоров Никита 92гр

ТЗ№1.pdf

Практика 1: Продолжение

1. Собрать референсы для ТЗ #1

2. Референсов должно быть от 3 до 5

3. Создать moodboard

4. Скинуть работу на почту

Мудборд (англ. Mood board — дословно, «доска настроения») — условное полотно, на котором собраны вырезки из фотографий, примеры шрифтовых начертаний, иконки, кнопки, паттерны и другие графические элементы, которые в сумме образуют искомую карту настроения.

Референс – это изображения: рисунки, фотографии, видеоматериалы, которые дизайнер, художник, иллюстратор изучает, чтобы добиться более точного попадание в стиль, идею, образ. Конкретно в нашем случае в качестве референса может выступить ссылка на сайт или фотография с описанием того, что именно в ней нравится.

Важно: Референс это не тупое копирование чужих наработок, а компиляция и развитие удачных идей.


Виды референсев:

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

Пример: Проанализировав цветовые гаммы конкурентов, их стиль и шрифты, вы можете стать максимально не похожими на них.

Тематические

Это не что иное, как анализ конкурентов.

Задачи, которые решает данный вид референсов:

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

Пример: Мы делаем сайт для строительной компании. Первым делом мы анализируем, какие сайты есть у конкурентов, после чего делим их, вычленяя тех, на кого мы хотим равняться, и смотрим, какие идеи мы можем позаимствовать у них. После чего мы смотрим на тех, кто с нами на одном уровне, чтобы быть максимально непохожими на них.

Важно брать именно идеи, компилировать их и выдавать что-то оригинальное. Нельзя просто копировать то, что нам нравится.

Технологические

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

Практика 1: Окончание

1. На основе ТЗ#1, референцев, moodboard создать дизайн в Figma

2. Тех.требования к макету:

  • W - 1920, H - 1000 (блока)
  • 12 - колоночная сетка (margin 150, gutter 30)
  • Footer (логотип, дубликат навигации и соцсетей, Соглашение на обработку персональных данных), burger menu.

3. Скинуть итог на почту

Figma_Guide_v.1.2_beta.pdf

Практика 2:

  1. Создайте новый документ размером 154 на 124 мм.
  2. Используя инструмент Перо, постарайтесь нарисовать открытку максимально близко к оригиналу
  3. Скинуть итог на почту

Практика 3:

  1. Установить расширения:

Fonts Ninja - определение шрифтов на сайте

Site Palette - определение цветов на сайте

Visual Inspector - параметры всех элементов на сайте

2. Используя расширения скопировать дизайн сайта https://remont.votidom.pro/

3. Скинуть итог на почту

Практика 4:

  1. Создание одно-экранного landing page
  2. Ограничения: Фрейм: 1920 x 970 (110px — ушли на панель браузера). Фон — на всю ширину лендинга. Контент — по сетке на 1680 (margin=120)
  3. По вариантам ЗАДАНИЕ
  4. Скинуть итог на почту

Практика 5:

  1. Сделать макет много-экранного лендинга по 12-колоночной сетке
  2. Для экранов 1920 и 1366. Отступы по 150px (чтобы на 1366 не прижимался контент). 1920-1366=554\2=277+30=307
  3. Настройки Count 12. Margin 307. Gutter 20.
  4. Учитывайте, что контент первого экрана должен помещаться на экранах высотой 768. Поэтому с учетом панелей браузера, делайте высоту контента первого экрана около 650px. Остальных экранов это не касается. Фон — как обычно на всю ширину лендинга, содержимое — ограничено сеткой.
  5. Варфрейм
  6. Скинуть итог на почту
  • Arc - Написание текста по дуге / кругу
  • Avatars - Рандомные фотографии людей
  • Blobs - Абстрактные плавные фигуры
  • Brandfetch - Логотипы известных компаний
  • Brands Colors - Цветовые палитры известных брендов
  • Feather Icons и Iconify - Крутые плагины для иконок
  • Get Waves - Генератор волн
  • Image Palette - Цветовая палитра по вашей картинке
  • Image Tracer - Трассировка растра в вектор
  • Isometric - Создание изометрии (иконок, фото, фреймов)
  • Map Maker - Карты хорошего масштаба и разного стиля
  • Remove BG - Обтравка изображения нейросетью
  • Roto - 3D элемент из обычных фигур / текста
  • Split shape - Разделение фигуры на равные части
  • UI Gradient - Сервис с градиентами
  • Unsplash - Плагин одноименного сервиса бесплатных фото
  • Vectary 3D - Мокапы, которые можно крутить в перспективе

Практика 6:

Сделать макет QUIZ лендинга по параметрам:

  • 1920*960 - главный экран
  • 12 колонок / 120 / 20
  • остальные экраны 1396*650 (т.е. 10 колонок ширина)

Шапка: Логотип, Кнопка “Обратный звонок”, 8 800 080 19 19

Заголовок: Наймите личного водителя с опытом более 15 лет

Подзаголовок: Пройдите тест и получите анкеты подходящих лично для вас водителей

Триггеры: - 167 персональных водителей в штате - Собственный автопарк С-класса - Ненормированный график работы

Кнопка: Пройти тест Шаг 1 -

Вопросы:

  1. Сколько времени в день вы проводите в дороге? - Варианты ответа: До 1 часа / 1-2 часа / 2-4 часа / Более 4 часов - Тип выбора: Radio button
  2. Выберите предпочитаемые марки автомобилей? - Варианты ответа: Mercedes-Benz / BMW / Audi / Lexus / Volvo / Land Rover / Porsche / Infiniti - Тип выбора: Checkbox
  3. Что для вас самое главное в личном водителе? - Варианты ответа: Пунктуальность / Умение поддержать беседу / Образованность и такт / Отсутствие вредных привычек - Тип выбора: Radio button
  4. В какой сфере вы работаете? - Варианты ответа: Предприниматель / Финансы и банкинг / IT технологии / Другое - Тип выбора: Radio button
  5. Заголовок: Остался последний шаг. Как с вами связаться? - Подзаголовок: Менеджер Елена перезвонит вам через 3 минуты и предоставит анкеты подходящих водителей - Поля ввода: Имя, телефон - Кнопка: Отправить
  6. Фидбэк - Заголовок: Спасибо! В течение 5 минут мы вам позвоним - Подзаголовок: И предоставим анкеты подходящих водителей - Кнопка: Готово