0 / 61

Главная

Каталог

Интернет и Коммуникации

582 PDF

создать чек-лист

ссылка на этот чек-лист:

https://checklists.expert/checklist/99623-chek-list-kontrolya-dizaynerov

Понравилось?
Поделитесь

06 июля 2023 года

Чек-лист контроля дизайнеров

Подготовительная стадия - для того, чтобы убрать в конце разработки дизайна вопросы, которые требуют кординального пересмотра дизайна.

Рабочая стадия - отражает основные моменты, которые нужно не упустить, чтобы уменьшить процент "брака" на этапе верстки дизайна.

Приемочная стадия - мы точно ничего не забыли?

0 / 61

Очистить

1. Подготовительная стадия

1.1 Зафиксировано, что при отрисовке мобильных версий, следует делать страницу не компоновкой блоков заново, а изменением размера блоков десктоп-версии и их "перепрыгиванием" на новые строки (адаптивность с сохранением последовательности вывода блоков)

1.2 Если дизайнеры не делают отдельно мобильную версию - предложить не использовать на страницах дизайна сложных элементов, которые тяжело представить/адаптировать для мобильной версии.

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

1.3 В проекте разработки дизайна имеется канбан-доска или другое средство управления проектом

Чтобы все видели проект в целом и место каждой задачи в общем потоке. Такой проект легче контролируется.

1.4 Результат каждой планерки (спринта) с исполнителем фиксируется в протоколе или чек-листе, который к следующей планерке закрывается

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

1.6 Менеджер проекта имеет доступ к аналитике сайта (Яндекс Метрика/ Google Analytics)

Если уже есть сайт и к нему подключена аналитика Яндекса/Google

1.7 Построили карту "пути клиента" вашего ближайшего конкурента (если дизайн сайта делается с нуля)

Есть вероятность, что он проработал этот путь при подготовке своих макетов. Тем проще его повторить или модифицировать.

1.8 Построили текущую версию "пути" своего клиента

1.9 Построили новый оптимизированный "путь" клиента

Учли ошибки, барьеры и сложности, существующие в текущей версии этого пути на сайте.

1.10 Руководитель группы дизайнеров изложил рабочей группе все тезисы по собранной информации. Тезисы зафиксированы и доступны

1.11 Руководитель группы дизайнеров сделал выводы по собранной информации и обозначил план действий по разработке концепта дизайна

1.12 Разработчики (front/back) видели оптимизированный "маршрут клиента" и подтвердили, что его можно реализовать

1.13 Новый "маршрут клиента" не нарушает структуру сайта

2. Рабочая стадия Этап 1

2.1 Разработчики ознакомились с первыми 5-ю страницами нового дизайна и подтвердили, что отрисованные дизайнерами элементы получится реализовать на сайте

2.2 Разработчики взялись оценить 2 варианта верстки: perfect pixel и оптимизированный вариант

2.3 После первых 5и страниц появился макет UI-KIT

2.4 На UI-KIT есть варианты цветов и их код

2.5 На UI-KIT есть варианты шрифтов и примеры их использования

2.6 На UI-KIT есть примеры заголовков

2.7 Размеры заголовков прописаны в ui-kit от 1 до 6

В дизайне страниц должны быть использованы только показанные размеры заголовков из UI KIT

2.8 Разновидностей размеров текста (кегль) не больше 10

В дизайне страниц должны быть использованы только показанные размеры текста из UI KIT

2.9 На UI-KIT есть иконки и их состояния: наведение, действие

2.10 На UI-KIT есть варианты кнопок и их состояния: наведение, действие

2.11 На UI-KIT кнопки показаны и используются в 3 размерах (маленький, обычный и большой)

2.12 На UI-KIT есть варианты форм и их состояния: наведение, действие

2.13 На UI-KIT есть варианты табов и их состояния: наведение, действие

2.14 На UI-KIT есть варианты других виджетов (чек-боксы, радио-кнопки, скроллы, выпадающие списки и т.д.) в состояниях наведения и действия.

2.15 На UI-KIT есть примеры таблиц

2.16 На UI-KIT есть варианты сложных элементов из виджетов (пример, карточка товара) и их состояния: наведение, действие

2.17 На UI-KIT есть варианты подсказок и системных сообщений

2.18 На UI-KIT показаны различные виды теней

В дизайне страниц используются только показанные тени из UI KIT

2.19 На UI-KIT есть модельная сетка из 2, 3, 4, 6, 9, 12 (!), 16, 24 колонок

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

3. Рабочая стадия Этап 2

3.1 Дизайн текстовых страниц (статья, новость...) показан на реальном примере статьи: длинный заголовок, много текста, много изображений.

Желательно продумать все возможные элементы: вводный текст; цитата и длинная цитата с подписью и фото; видео (и подпись, если она нужна); картинка (и подпись, если она нужна); ссылки; слайдер; жирный текст; списки (нумерованный и маркированный), вложенные списки; блок «поделиться».

3.2 На всех страницах с текстом одинаковый letter-spacing

letter-spacing - это отступ между буквами в тексте

3.3 В тексте используется не больше трёх видов line-height (base, sm, lg)

line-height это размер отступа между строками в тексте, лучше использовать классические: стандартный, маленький, большой

3.4 Шапка на всех страницах одинаковая

Либо имеет несколько согласованных вариантов

3.5 Разделы в "header" на всех страницах одинаковые (соответствуют оговоренному списку вывода)

т.е. в "шапке" показаны ровно те разделы, которые планируются на реальной версии сайта.

3.6 Иконки в "header" на всех страницах одинаковые (соответствуют оговоренному плану вывода)

3.7 Все элементы в "header" выровнены и на всех страницах имеются одинаковые отступы

3.8 Все страницы выровнены по 2, 3, 4, 6, 9, 12 (!), 16, 24 колоночной сетке

Граница каждого элемента касается начала или конца столбца сетки

3.9 Карточки товара в каталоге выровнены (фотографии, текст, кнопки выровнены относительно друг друга)

Количество различных величин отступов между элементами и внутри них должно быть в пределах 10.

3.10 Баннеры на всех страницах имеют одинаковый размер

3.11 Сложные объекты (калькуляторы, карусели, опросники, блоки) имеют отрисованные состояния: наведение, действие

3.12 Отрисованы варианты модальных окон (pop-up)

3.13 Модальные окна показаны в 4 размерах (xl, large, middle и small)

3.14 При наличии сложной анимации, модальные окна должны быть показаны в виде анимации в figma, либо любым другим доступным способом

Могут быть ссылки на примеры, которые описаны в текстовом файле по страницам

3.15 Отрисованные фильтры каталога корректны (с точки зрения разработки)

Разработчики подтвердили, что не видят рисков и проблем в дизайне фильтров

3.16 Отрисованные фильтры каталога и их выдача соответствуют текущим реальным значениям свойств товаров

Бывает что в разделе действительно не много значений. А бывают разделы, где свойств и значений очень много. Лучше видеть реальную картину на дизайне, чтобы не разочаровываться когда из минимализма окунаешься в заспамленность. Ленивые дизайнеры покажут 3 свойства и 10 значений. В реальности же на сайте их может быть в 10 раз больше, и смотреться все будет совсем иначе.

3.17 В блоке фильтра есть кнопка сброса всех фильтров

3.18 На макетах присутствует отрисованный поиск и его механика работы

подсказки в поиске, выводы истории поиска, брендов и т.п.

3.19 На макетах присутствует отдельная страница результатов поиска

3.20 В дизайне показано, как форма должна отображать некорректно введённые данные

Нужно же как-то сообщить пользователю что он косячит :)

3.21 Сделана картинка для шаринга (опционально). Эта картинка появляется в соцсетях или мессенджерах вместо текстовой строки, когда пользователь отправляет кому-либо ссылку.

Разные соцсети отображают этот блок по-разному. Чтобы задать картинку и подпись к ней, нужна разметка Open Graph.

4. Приемочная стадия

4.1 Шрифты переданы отдельными файлами для веб-версий и для типографии

4.2 Дизайнеры подготовили презентацию или файл, который описывает идею работы дизайна на каждой странице

это желательно обсуждать на планерках, согласовывать и записывать финальный вариант, чтобы никто не забыл

4.3 Повторяющиеся элементы на нескольких страницах имеют одинаковый набор виджетов, иконок

4.4 Все иконки имеют одинаковый размер и начертание. Ко всем иконкам применён "outline-stoke"

"outline-stroke" - инструмент в Figma, позволяющий задавать контур объекту и изменять его толщину и цвет

4.5 Макеты страниц показаны как минимум в двух вариантах 1440px и 320px

если вы договаривались о макетах для ПК и мобильной (адаптивной) версии

4.6 Функционала на страницах (кнопки, pop-up, функции...) нового дизайна больше, либо равно количеству функционала на старом дизайне

если есть старый дизайн на боевом сайте

4.7 Вы, как заказчик, ознакомились с макетами, и по ним нет вопросов

4.8 Разработчики ознакомились с макетами, и у них нет вопросов

0 / 61

Очистить

Автор: скрыт

Распечатать чек-лист

Скачать чек-лист в PDF

* при скачивании в PDF - можно добавить комментарий, который отобразится внутри файла. Так же будет указана дата и время заполнения скачанного чек-листа

Смотрите другие чек-листы в категории "Интернет и Коммуникации"

Медиапрогнозы 2022, 2023 Медиапрогнозы 2022, 2023 Медиапрогнозы 2022, 2023

Чек-лист | ЭкспертЧек-лист | Эксперт - создайте чек-лист онлайн, бесплатно!

Создано с помощью сервиса "Чек-лист | Эксперт"