Figma

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

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

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

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

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

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

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

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

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

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

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

Практика 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. Скинуть итог на почту

Практика 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 минут мы вам позвоним - Подзаголовок: И предоставим анкеты подходящих водителей - Кнопка: Готово