Дизайн коды для дизайнера

Это первая версия которая будет в дальнейшем расширяться. Смысл кодов, как у полицейских
в штатах: для раздробенности большого объема информации и скорейшего изучения. Указание
на пробему "у тебя код 460 не учтен", проще чем расписывать или словами все это объяснять. Имея такую методичку под боком, дизайнер всегда сможет глянуть и понять что
он пропустил. А со временем коды будут запоминаться.

Все это исключительно эксперимента ради. Взлетит – хорошо. Нет, не беда, останется просто
в виде списка обязательных условий, без кодов.
1. Требования к PSD файлам.
Слои, папки, цвета слоев, имена и их иерархия. Стили, эффекты наложения, шрифты и прочие фокусы. Сетки и их структура.
Технические требования к макету
#100
Все psd файлы должны быть в профиле sRGB IEC61966-2.1, Gray Gamma 2.2
#200
Разрешение (dpi): 72
Слои, папки, цвета слоев, имена и их иерархия
#120
Не забудь отрисовать favicon.ico
Использовать: http://www.favicon.cc
#130
Все сущности должны быть сгруппированы в папки. Напр.: папки «Хедер», «Футер», «Меню» и т.д.
#140
Если элемент содержит более 2-х родственных элементов, он должен быть сгруппирован в папку. Напр.: кнопка состоящая из формы и текста. Обязана быть сгруппирована в папку.
#150
Все слои и папки должны иметь правильные и понятные имена. Названия типа, «писькомеры», не пройдет.
#160
Имена векторных иконок должны быть в следующем формате: icon-name.svg
#170
Имена растровых картинок должны быть в следующем формате: icon-name.jpg
#180
Если используемые пиктограммы\иконки являются частью веб-шрифта – приложить к макету (как и с дополнительными шрифтами)
Использовать: https://guides.kontur.ru/resources/icons/
#200
Папка с многосоставной иллюстрацией для последующего вырезания в отдельный файл, должна называться в формате: name.png (с альфа каналом) name.jpg (без альфа канала). Напр.: есть красивая иллюстрация собранная из десятков слоев. Ее обязательно нужно поместить в папку и назвать папку beautiful-picture.png либо beautiful-picture.jpg
#210
Имена папок должны строится на основании сущности находящейся в ней. Напр.: если в папке элементы хедера, то папка должна иметь название «Хедер (Header)». Если в папке кнопка, папка должна называться действием этой кнопки, например «Сохранить».
#220
Все сущности страницы должны отличаться по цвету. Это помогает верстальщику ориентироваться в какой сущности он находится. Цвета сущностям стоит задавать последовательно: красный, оранжевый и т.д. Если сущностей больше чем цветов, повторяем цветовой стек по новой.
#230
Серый цвет папок в psd обозначает вызываемые сущности. Напр.: модальные окна, выпадающие меню и т.д. То есть те сущности, которые нужно включать чтобы увидеть. Если модальных окон очень много, лучше их делать в отдельном psd.
#240
Отключенные слои в psd игнорируются верстальщиком, только если они не окрашены в серый цвет.
#250
Строится все сущности в psd должны от головы к ногам. Так как хедер, это самая верхняя часть страницы, то и в psd он должен быть на самом верху. Напр.: «Хедер», «Меню», «Слайдер», «Новое на сайте», «О нас», «Футер».
#260
Все бэкграунды страницы должны лежать в самом низу слоев и папок psd. И называться папка должна «bg». Напр.: белый фон сайта как отдельный слой лежащий в папке «bg». Многосоставные фоны группируются по разным папкам и тоже лежат в общей папке «bg».
#270
Хедер и футер должны рисоваться в отдельных psd и потом привязываться ко всем страницам через функцию «поместить связанные». Это касается и некоторых однотипных элементов страницы, которые часто повторяются, например карточка товара в каталоге.
Использовать: https://helpx.adobe.com/ru/photoshop/using/create-smart-objects.html
#280
Если картинка уходит за края документа, она обязана быть в смарт-объектом.
Сетки и их структура
#290
Сетка десктоа строится из 12 колонок общей шириной 1200 пикселей. Область контента равна 1180 пикселей.
#300
Сетка планшета строится из 8 колонок общей шириной 780 пикселей. Область контента равна 760 пикселей.
#310
Сетка для мобильных устройств строится из 3 колонок общей шириной 320 пикселей. Область контента равна 300 пикселей. iOS, Android.
#320
Остальные сетки (от 12 до 24 колонок и более) индивидуально рассчитываем.
#330
Сетка должна быть сделана с помощью направляющих линий.
#340
Все единицы измерения psd должны быть в пикселях.
#350
Корректирующие направляющие использовать только горизонтальные. Потому что вертикальные – это сетка.
Стили, эффекты наложения и прочие фокусы
#360
Любые наложения на слои или папки запрещены! Это те, которые «затухание», «затемнение» и т.д. Это же касается и эффектов в стилях.
#370
Наложения можно применять только на слои в папках с иллюстрациями, которые в итоге будут одной картинкой png или jpg. Напр.: есть папка с красивой картинкой. Она состоит из множества слоев. Вот на эти слои можно применять эффекты наложения. После чего папку объединить в один слой либо обозвать beautiful-picture.png или beautiful-picture.jpg
#380
Стили (у слоев) для элементов интерфейса которые можно применять: обводка, внутренняя тень, наложение цвета, наложение градиента, наложение узора, тень. Остальные строго аккуратно и по необходимости.
#390
Запрещается накладывать одноцветное «наложение цвета» на векторный объект. Проще кликнуть 2 раза на него, и окрасить в нужный цвет из политры.
#400
Обводка. Разрешено использовать все параметры кроме: режимов наложения, тип обводки «узор».
#410
Внутренняя и внешняя тень. Разрешено использовать все параметры кроме: режимов наложения, стягивание, контур, шум.
#420
Наложение цвета. Разрешено все.
#430
Наложение градиента. Разрешено использовать все параметры кроме: режимов наложения, масштаб должен быть равен 100%.
#440
Наложение узора. Разрешено использовать все параметры кроме: режимов наложения. Если применяешь узор, обязательно подготовь его тайл отдельной графикой (png, jpg, svg).
#450
Не рекомендуется применять больше одного одинакового стиля на одном слое.
#460
Все смарт-объекты на которые применены фильтры (размытие, четкость и т.д.), либо фильтры коррекции (яркость, контрастность), должны быть единым слоем. Т.е. смарт-объект нужно объединять с фильтрами коррекции в один слой .
#470
Все фильтры коррекции применять только локально на слой (обтравочная маска). Нельзя делать «яркость» в самом верху слоев либо по середине, применяя тем самым ее параметры ко всей странице. Только обтравочная маска!
#480
Фильтры коррекции нельзя применять на элементы интерфейса, кнопки и т.д. Только для обработки графики.
Шрифты и работа с текстом
#490
Кегль шрифта задавать целым числом, то есть не 12.5, а 12.
#500
Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf.
#510
Не применять сглаживание шрифтов к текстовым элементам страницы для элементов, размер шрифта которых менее 18 пикселей.
#520
К текстовым элементам страницы не должно применяться масштабирование (вытягивание/сжатие), как по горизонтали, так и по вертикали.
#530
Не помещать в 1 текстовый блок 2 разных стиля, если это возможно. Напр.: если идет заголовок (красный, 60 px), а за ним текст (черный, 18 px) — это должны быть 2 разных блока, нажав на каждый из которых верстальщик сможет сразу увидеть используемый стиль.
1. Требования к UX/UI.
Сайт как целое, структура и навигация. UI KIT. Мобильные интерфейсы
#540
По главной странице сразу понятно, чему посвящен сайт.
#550
Удобство для новичков: простота, подсказки, помощь.
#560
Информация представлена в соответствующих региональных стандартах (метрическая система и пр.).
#570
В случае, если есть несколько этапов в процессе выполнения задачи, то показаны все шаги и текущее положение пользователя в этом процессе.
#580
Метафоры используются очень осторожно и интуитивно понятны типичному пользователю сайта. Напр.: иконка корзины должны быть корзиной а не сундуком.
#590
Пользователю не приходится вводить одну и ту же информацию дважды.
#600
Контент разделен на основной и дополнительный.
#610
Сложность структуры сайта соответствует контенту и задачам. Не нужно лендингу куча уровней меню и сложный личный кабинет.
#620
Пользователю всегда понятно, в каком разделе сайта он находится. Хлебный крошки обязательны!
#630
Критически важные пути (такие как покупка, подписка и пр. в зависимости от бизнес-целей сайта) предельно просты.
#640
Важная информация легко доступна со всех страниц сайта.
#650
По заголовку категории, страницы, блока можно понять их содержимое.
#660
Пользователь должен иметь возможность выйти из любого процесса на сайте без необходимости его заканчивать.
#670
Главное меню есть на всех страницах, в одном и том же месте (исключение может составлять процесс покупки).
#680
Пункты меню расположены в порядке убывания их значимости.
#690
Пункты, содержащие подменю, отличаются от остальных пунктов.
#700
Названия пунктов меню начинаются с заглавной буквы.
#710
Логотип расположен в одном и том же месте на всех страницах сайта.
#720
Слоган четко описывает цели сайта (он краткий и расположен рядом с логотипом).
#730
Соблюдается баланс между информационными блоками и пустым пространством, что способствует восприятию сайта пользователями.
#740
Понятные и заметные заголовки, правильное использование цветов фона, рамок и пустого пространства позволяет визуально разделять страницу на заметные и логичные информационные блоки.
#750
Все кликабельные элементы выглядят очевидно кликабельными.
#760
«Цена — рядом с товаром»: все связанные элементы находятся рядом друг с другом.
#770
Элементов, привлекающих внимание, должно быть в меру (анимация, крупные, цветные тексты и прочее).
#780
Поле поиска доступно на любой странице сайта.
#790
Поле поиска находится в ожидаемом месте. В хедере как пример.
#800
На странице одно поле поиска.
#810
В поле поиска должен быть плейсхолдер с подсказкой.
#820
Результаты поиска легко воспринимаются, отсортированы по релевантности.
#830
Если поиск дал нулевой результат, то пользователю подсказывают идеи о том, как можно отредактировать запрос.
#840
В результатах поиска выводится основная информация о найденных объектах.
#850
Изложение соответствует принципу перевернутой пирамиды: сначала важное, потом остальное.
#860
Заголовки — назывные («О чем дальше?»), а лучше — транзитивные («Что там сказано?»).
#870
Цвет ссылок никогда не используется для текста.
#880
Разнообразие цветов должно быть оправданным.
UI KIT
#890
Использовать на сайте не больше 2 цветов для текста, не больше 3 для интерфейса
#900
В заголовках, подписях снимков в галерее и других элементах показывать, как должен выглядеть текст, фон (если используется) при появлении второй, третьей и т.д. строк.
#910
Цвет основного и акцедентного текста должен быть #222222
#920
Показать размеры заголовков h1, h2, h3
#930
Верхний регистр используется по минимуму или не используется (он затрудняет чтение).
#940
Верхний регистр можно использовать в заголовках, но нужно увеличивать трекинг у символов.
#950
Текст структурирован: заголовки, подзаголовки, абзацы, цитаты, списки (тогда текст легко сканируется).
#960
Текстовый колодец должен быть длиной ~70-80 символов.
#970
Кегль основного текста для чтения должен быть размером минимум 16px, line-height 1.50. Либо 18px line-height 1.60
#980
Выравнивание крупного абзаца — только по левому краю (не по центру и не по ширине).
#990
Заголовок ближе к «своему» абзацу, чем к предыдущему.
#1000
Кегль подзаголовка больше кегля текста в ~1,5 раза.
#1010
Кегль заголовка тоже больше кегля подзаголовка в ~1,5 раза.
#1020
Показать подзаголовки в связке с заголовками и абзацами.
#1030
Для улучшения восприятия длинные числа разбиваются на разряды неразрывным пробелом (1 234 567).
#1040
Не рекомендуется использовать на сайте более 2 шрифтов и 3 начертаний (пример: regular, semibold, bold) в каждом. Каждое начертание каждого семейства увеличивает время загрузки страницы.
#1050
В вебе нет кроссбраузерных переносов. Лучше не использовать переносы слов вообще. Расстановка символов мягкого переноса в тексте возможна, но делать это вручную никто не будет.
#1060
Текст ссылки обозначает объект, к которому она ведёт (плохо: «нажми сюда», «перейдите по ссылке», «лежит тут» и пр.).
#1070
Все ссылки визуально отличаются от остального текста (цвет любой и подчеркнутые — стандарт), исключение – меню.
#1080
Скриптовые ссылки (которые не перезагружают страницу) подчеркнуты пунктиром.
#1090
Ссылки достаточно длинные, чтобы по ним было легко кликнуть.
#1100
Ссылки для скачивания файлов визуально отличаются от ссылок на другие страницы.
#1110
Нарисовать все состояния ссылок: по умолчанию, ховер, фокус, нажатие, посещенная, неактивная.
#1120
Кнопки похожи на кнопки: форма, цвет, текст, реакция на курсор.
#1130
Между кнопками, стоящими рядом, есть пустое пространство, щелчок по которому не вызывает действий.
#1140
Нарисовать все состояния кнопок: обычная, ховер, актив (фокус/нажатие), неактивная.
#1150
Не используйте кнопки для перехода на другую страницу.
#1160
Название кнопки пишется с заглавной буквы, можно использовать верхний регистр.
#1170
Название кнопки должно однозначно говорить о том, что произойдет если на нее нажать. Плохо, если нужно прочитать все содержимое лайтбокса, чтобы понять, что делает кнопка.
#1180
Называйте кнопку инфинитивом в совершенной форме — название должно отвечать на вопрос «Что сделать?». Пользователь дает команду компьютеру, ориентированную на результат, а не процесс. Существуют исключения, когда название кнопки формулируется от первого лица, напр.: «Принимаю условия».
#1190
Старайтесь не называть кнопку в две строки: делайте кнопку шире или меняйте название.
#1200
Нельзя сокращать название кнопки, если оно не входит.
#1210
Название кнопки можно дополнять иконкой. Она поможет быстрее найти нужную кнопку в ряду других и быстрее понять, что делает кнопка.
#1220
Не ставьте иконки в терминальных кнопках окна/лайтбокса «Сохранить», «Отменить» и т.д.
#1230
Необходимо показать валидацию всех видов инпутов и селектов: ошибка, удача.
#1240
Показать как инпут и селект выглядят в обычном виде, ховере, фокусе, не активном.
#1250
Показать виды плейсхолдеров и масок по мере необходимости в проекте: подсказка, почта, телефон, выбор города с поиском.
#1260
Ширина селекта должна быть такой, чтобы большая часть значений из списка помещалась полностью. Если выбранное значение не помещается, появляется многоточие.
#1270
Ширина списка должна быть не меньше ширины кнопки. Красиво, когда список шире кнопки на 30−40 px.
#1280
Необходимо показать валидацию всех видов чекбоксов: ошибка, предупреждение об ошибки, удача.
#1290
Показать как чекбокс выглядят в обычном виде, наведение курсора, фокус, в момент нажатия, выбранный, выбранный и неактивный, ошибка, предупреждение.
#1300
Показать как выглядит дополнительный текст/подсказка у чекбокса.
#1310
Необходимо показать валидацию всех видов радиокнопок: ошибка, предупреждение об ошибки, удача.
#1320
Показать как радиокнопка выглядят в обычном виде, наведение курсора, фокус, в момент нажатия, выбранный, выбранный и неактивный, ошибка, предупреждение.
#1330
Показать как выглядит дополнительный текст/подсказка у радиокнопки.
#1340
В тултипе обязателен крестик для закрытия. Также тултип закрывается любым кликом за его пределами.
#1350
Нос тултипа расположен напротив первого символа первой строки внутреннего текста. В результате текст на странице выровнен с текстом в тултипе.
#1360
Тултип должен быть компактным, не перекрывать большую часть экрана и не выходить за его границы. Рекомендуемая ширина прямоугольной области тултипа — 250 px, максимальная — 500 px.
#1370
Тултип появляется справа от вызвавшего его элемента. Если справа не хватает места — то с других сторон от элемента, в порядке убывания приоритета: справа, сверху, слева, снизу — против часовой стрелки.
#1380
Используйте табы для группировки или фильтрации контента.
#1390
Не используйте табы для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.
#1400
Не используйте табы для переключения состояний — для этого есть радиокнопка, тогл и переключатель.
#1410
Разделяйте табы и контент. Так интерфейс лучше читается.
#1420
Название таба должно однозначно говорить, что увидит пользователь после нажатия на таб.
#1430
Не называйте табы глаголами — в названии табов не должно быть действия.
#1440
Не красьте разные табы в разные цвета.
#1450
Не кодируйте цветом «хорошие» и «плохие» пункты.
#1460
Тост не может быть заменой валидации.
#1470
Текст в тосте должен быть максимально кратким, но самодостаточным. Из текста должно быть понятно, что произошло. В конце текста точка не ставится.
#1480
Текст в тосте не может быть набран в две строки.
#1490
Тост выравнивается по центру, с отступом 20 px от верхней границы окна браузера. Рекомендуемая ширина — от 20 до 40 % ширины контента.
#1500
Должны быть показаны все меню каталога разных уровней (2, 3 и т.д.).
#1510
Обязательно показать все выпадающие подменю основного меню.
#1520
Клик по ссылке «Еще» показывает новую порцию информации без перезагрузки страницы. Контент появляется плавно, страница не прокручивается. Если загрузка занимает больше 0,5 секунды, показываем лоадер минимум 1 секунду.
#1530
Если страниц 7 и меньше, то показываются в пагинации ссылки сразу на все 7 страниц.
#1540
Если в пагинации больше 7 страниц, показывается ссылка на последнюю страницу после многоточия.
#1550
Пагинация должна быть такой структуры: «В начало Предыдущая 1 2 3 4 5 … 8 Следующая Последняя».
Мобильные интерфейсы (320)
#1560
Логотип ставить либо по центру, либо с левой стороны.
#1570
Хедер не должен превышать 70px по высоте.
#1580
В хедере не должно быть много элементов. Допускается сендвич меню, логотип, иконка обратного звонка, корзина.
#1590
Все основное меню сайта нужно прятать в сендвич меню.
#1600
При клике на иконку обратного звонка, вызываем системное окно с предложением позвонить по номеру телефона.
#1610
Поиск должен быть в сендвич меню, сверху.
#1620
Часть основных пунктов меню сайта можно продублировать в футере на всех страницах.
#1630
Размер текста должен быть не меньше 17px.
#1640
Размер заголовков и подзаголовков от 22 до 36px.
#1650
Все кликабельные области (иконки) должны быть минимум 44х44px.
Есть что обсудить?
Made on
Tilda