Стандарты на дизайн от студии Клондайк

1. Используйте правильные форматы файлов

Макет представляется только в одном из 2-х форматов — PSD (Photoshop Document) или TIFF (Tagged Image File Format). Форматы: PDF, AI, EPS, BMP, QXD, QXT и прочие, не говоря уже о расширениях файлов пакета программ Microsoft Office — не допускаются.

Обратите внимание — миниатюры и превью макетов могут предоставляться в файлах сжатого формата, например JPG. Но psd-макет все равно обязателен!

2. Новый элемент — новый слой

Все элементы дизайна сайта должны быть предоставлены в PSD-файле на отдельных, понятно названных по-русски слоях, логически объединённых в понятно названные по-русски группы. Например: слои «Форма поиска» и «Кнопка поиска» объединены в группу «Поиск», которая вместе со слоями «Логотип» и «Слоган» объединена в группу «Шапка».

Это означает, что любой элемент цельного изображения является автономным и может быть в любой момент включен,выключен,удален или изменен — не затрагивая другие элементы.

3. Размер макета для фиксированного по ширине шаблона

Если планируется фиксированный по ширине шаблон — ширина макета обязательно должна учитывать отступы справа-слева от края экрана. Кроме того, отдельно указывается цвет фона «подложки».

4. Размер макета для «резинового» шаблона

Если шаблон «резиновый» — в шапке и подвале страницы не менее 20-50 пикселей с правой стороны должны быть отрисованы так, чтобы их без проблем можно было дублировать.

5. Учитывайте рамки и отступы браузера

Если шаблон рисуется под определенное разрешение, необходимо учитывать, что размер макета создается в соответствии с разрешением окна браузера, а не монитора. Например, при разрешении монитора 1024, размер макета составляет 1002 пикселя.

6. Правильно рисуйте фон

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

7. Не используйте фоновые фотографии

Использование в качестве фона «тяжелых» изображений (например, полноразмерных фотографий) — не допускается.
Фон сайта может быть одним из ниже перечисленных: однородный цветовой; линейный вертикальный или горизонтальный градиент; фоновое повторяющееся изображение; фоновое неповторяющееся изображение с переходом в однородный цвет.

Для десктопных устройств: максимальный вес страницы насыщенной медиа-контентом - 3-5 mb (лендинги и презентационные страницы, каталоги товаров).

Важно! Количество посетителей с мониторами больше 1920px неуклонно растет, не забывайте о них!
Максимальный размер картинок: то 1920px до 2560px.
Разрешение – 72 dpi (нет смысла использовать большее разрешение, как при печати, так как это максимальное транслируемое разрешение, в противном случае увеличивается размер (вес) загружаемых элементов, что сказывается на трафике и времени ожидания полной загрузки страницы пользователе)

8. Используйте сетку на основе Bootstrap при рисовании макетов

Все выравнивания слоев должны делаться по направляющим (rulers), при отрисовке макета должна быть использована сетка Bootstrap. Сетку вы можете посмотреть здесь.

9. Используйте стандартные шрифты

Для текстового содержимого должны использоваться стандартные шрифты. В случае использования нестандартного шрифта, он должен прилагаться к макету (в форматах .tiff,.eot) и в обязательном порядке должен быть указан шрифт-заменитель из стандартного набора, разрешено использовать только целое число кегля. Также можно использовать онлайн-сервис Google.Fonts для подтягивания нестандартных шрифтов.

Еще одно не менее важное требование при выборе шрифта для проекта - чтобы шрифт был бесплатный.

10. Применяйте минимальное количество эффектов к тексту

Любые изменения текста должны проводиться в рамках стандартных действий — уменьшение-увеличение размера, междустрочные интервалы, кернинг и т.д.
Исключена любая деформация используемого шрифта, исключен автоматический перенос слов по слогам, форматирование текста должно осуществляться в виде параграфа с необходимым Вам выравниванием (левое, правое, по ширине), 100% непрозрачный, без применения эффектов (тень, рельеф, свечение, контур и так далее), межстрочный интервал должен быть кратным целому числу (рекомендуется автоматический).

При применении к тексту эффектов фотошопа, не поддерживаемых в css, стилизованный текст на сайте внедряется посредством картинки!

11. Осторожно обращайтесь с формами

Стандартные элементы форм должны подвергаться изменениям только в рамках здравого смысла. Для дизайнера, не знакомого с возможностями CSS в этой области, оптимальным будет использование стандартных элементов.

Форма на сайте должна быть максимально простой. Пользователи не любят большие и длинные формы, но более охотно заполнят простую и краткую. Сводите к минимуму количество шагов. Называйте кнопки правильно, чтобы пользователь понимал, что он делает, например "Зарегистрироваться" или "Подписаться", "Создать аккаунт".

12. Иконки

Старайтесь использовать икончатые шрифты. Fontawesome, Icomoon. Либо создавайте иконки в Adobe Illustrator и сохраняйте в .svg, в крайнем случае иконки могут быть спрайтами. Назначение пиктограмм («иконок») должно быть интуитивно понятно посетителю сайта.

13. Оформляйте внешний вид меню

Выпадающие-выезжающие-разворачивающиеся меню должны быть отображены в двух видах: активном и неактивном состоянии.

14. Оформляйте пункты меню

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

15. Оформляйте ссылки

Оформление ссылок должно быть указано в 3 статусах: обычная ссылка (link), ссылка при наведении курсора (hover link), посещенная ссылка (visited link). Внешний вид всех типов ссылок должен отличаться от внешнего вида всех других элементов сайта (заголовков, текста, выделенного полужирным, и пр.) цветом и (или) подчёркиванием.

16. Оформляйте навигационные цепочки

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

17. Записочки

Делайте нотсы (инструмент Notes, позволяет делать поясняющие к макету записки. его можно найти в группе инструментов измерения на панели инструментов вместе с линейкой и пипеткой)с комментарием, если элемент динамический, в этой сноске описывайте подробно как должен вести себя элемент и при каком событии.

18. Потрогай меня

К каждому элементу, по которому можно кликнуть сделать hover'ы в скрытых слоях или показать рядом с иконкой «руки».

19. Формат

Цветовая схема – RGB (цветовая схема, воспроизводимая подавляющим большинством мониторов пользователей)

20. Используйте только те эффекты фотошоп, которые можно реализовать посредством кода

При использовании эффектов помните что не все они поддерживаются браузерами, многие из свойств css находятся в разработке, а для некоторых из них (например текста с эффектом градиента) нет свойств позволяющих реализовать их посредством кода.

21. Взаимодействие посредством Touch

При создании дизайна для touch-устройств следует задумываться об удобстве работы пальцами. Минимальная тач-зона 7мм x 7мм, что примерно составляет площадь контакта экрана с пальцем. 25 мм-для большого пальца взрослого человека и 2мм примерно, между элементами-чтобы избежать случайных нажатий.

22. Другие языки и мультиязычный контент

Если продукт будет мультиязычным, то следует обращать внимание на длину контента в других языках. Из-за особенностей символов или различной длинны слов разница в размерах текста может достигать до 75%.

23. Скажем "НЕТ" полупикселям

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

24. Доступность

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

25. Постоянство в дизайне

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

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