Статика.
Входящий материал - это PSD макет и шрифты.
Шрифты
Бесплатные шрифты – бесплатные, это не значит, что они скачены с непонятного сайта, бесплатные – это шрифты, которые стоят 0 руб., и находятся на этих сайтах:
https://www.google.com/fonts
https://www.fontsquirrel.com/fonts/list/find_fonts
Обязательно шрифт должен иметь кирилличные начертания.
PSD макет
1.1. Область контента - это область, в которую влазит все наполнение блока, нужно учитывать все кнопки и "заказать звонок" и футер и т.д.
1.1.1. Ограничение по высоте. ОК не должна превышать по высоте 600 рх, иначе мы не влезем в минимальные диагонали ноутбуков 1366 х 768
1.1.2. Ограничение по ширине. ОК не должна превышать по ширине 1200 рх, рекомендовано 980 рх, иначе мы не влезем по ширине в минимальные диагонали 1280 х 1024
1.2. Структура макета – системность и вложенность слоев в PSD
1.2.1. Правила распределения слоев по смысловым блокам:
В одной папке не должно находится более 6 элементов, за элемент мы принимаем любой слой либо вложенная папка.
1.2.2. Удаление лишних слоев
Обязательно создать папку «удаленные слои», и поместить туда весь, не вошедший в конечный макет шлак.
1.2.3. Названия слоев
Название каждого слоя должно соответствовать его наполнению
1.2.4. Активные состояния
В папках со слоями, отвечающими за активные элементы (кнопки, элементы слайдера, элементы изменяющие вид или цвет при наведении или клике) должны находиться внутренние папки с активными состояниями
1.3. Проверка на внимательность
1.3.1. Использование направляющих
При разметке каркаса использовать горизонтальные направляющие и следовать им, то есть одни и те же (по логике) повторяющиеся элементы должны по высоте и ширине быть одинаковыми.
1.3.2. Центрирование
Элементы, которые логически находятся по центру – должны находиться строго по центру.
1.4. Ничего не забыл? Проверка контента.
1.4.1. Проверь наличие логотипа
1.4.2. Проверь, людей, которых ты вырезал на сайт, совпадают ли они с реальными
1.4.3. Проверь, прорисовал ли ты все попапы там, где они нужны.
1.4.4. Проверь, прорисовал ли ты thx page
1.4.5. Проверь, не превышает ли вес твоего макета 105 мб., если макет больше 105 мб. – оптимизируй его либо порежь на куски по 80 мб.
1.4.6. Проверь, прорисовал ли ты активные элементы при незаполненной форме захвата
1.4.7. Не забыл ли ты про кнопку «политика конфидициальности»?
Динамика. Требования к ТЗ
Техническое задание должно в себя включать:
2.1. Описание действий всех активных элементов, как при наведении, так и при нажатии мыши
2.2. Подробное и понятное описание логики калькулятора
2.3. Описание анимации. Разбор примеров по сайту: https://nemiroff.vodka/ru, блок 4
Анимация – переход элемента с состояния А в Б, в описании анимации должно присутствовать описание поведения всех независимых элементов, которые принимают в ней участие.
2.3.1. Момент начала анимации.
Описать, когда начинается анимация.
Пример: Анимация начинается, когда видны более чем 350 рх блока
2.3.2. Задержка – это временной период от достижения момента «начала анимации» до фактического начала.
Пример: Задержка = 0 с.
2.3.3. Описание функционала анимации – включает в себя: расстояние, проходимое элементом, длительность этого перехода в сек. из состояния A в состояние B и функцию перехода.
Пример:
Элемент №1.
Длина линии увеличивается вниз от 0 до 390 рх., время задержки 0,2 сек., время анимации 1,2 сек., функция – easy in
Элемент №2.
Подъем на 120 рх, за 0,3 сек., функция - линейная
Элемент №3.
Подъем на 200 рх, за 1,2 сек., функция – easy out
Элемент №4.
Статически закреплен в Элементе №7
Элемент №5.
Подъем на 100 рх за 1,2 сек, функция easy out
Элемент №6.
Вправо на 50 рх за 1 сек, функция easy
Элемент №7.
Подъем на 300 рх за 1,2 сек, функция easy out
2.3.5
Дополнительные точки анимации.
Описание анимации элемента, если его изменение происходит не по схеме A – B, а по схеме A – B – C … и т.д.
2.4.
Описание действий и результата
Пример:
Нажатие на кнопку
Вылетают варианты цветовой гаммы
При наведении мыши на конкретный вариант, меняется фон
При нажатии на цвет, меняется кеда на соотв. цвет, выбор цветов исчезает
