Свяжитесь с нами

Нужна информация?

Enter F.A.Q.

Нужна информация?

Enter F.A.Q.
>   Делимся опытом  >  Стандарт на разработку дизайн-макетов
Стандарт на разработку дизайн-макетов
В статье приводятся основные требования на разработку дизайн-макетов. Эта информация полезна веб-дизайнерам, чтобы их макеты были аккуратные, и при верстке претерпели минимум изменений
   Комментариев: "1"          5 мин.         Дизайнер   
     Апрель 26, 2018              Дизайн     

Требования к файлам дизайн-макетов

  • Формат файлов: Adobe Photoshop (.psd);
  • Отдельные страницы сайта создаются отдельными файлами. Если это интерфейс приложения, возможно использование монтажных областей;
  • Файлы должны иметь название формата проект_страница_ММГГ (project_main_0318);
  • Цветовая схема (Color mode): sRGB;
  • Разрешение (dpi): 72 pixel/inch.

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

  • Все неиспользуемые слои нужно удалить;
  • Слои нужно группировать по папкам с соответствующими названиями;
  • Активные элементы (кнопки, движущиеся блоки и т.д.) должны быть разнесены по слоям и группам. Названия слоев и групп должны быть осмысленно названы и отражать находящиеся в них объекты;
  • Если в макете встречается форма ввода данных, должны быть показаны все состояния, а также вывод сервисных сообщений.

К макету нужно приложить ТЗ, в котором содержится следующая информация

  • Поведение динамических элементов и элементов управления контентом, разбитые поблочно, в том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);
  • Любая другая информация не очевидная из самого psd-макета.

Требования к используемым шрифтам в дизайн-макете

  • Используемые шрифты, за исключением стандартных системных, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только в формате .woff;
  • Шрифт текстовых элементов сайта запрещается деформировать, преобразовывать в кривые, растрировать, использовать наложение слоёв и масок.

Требования к активным элементам (кнопки, изменяемые или реагирующие на поведение пользователя элементы) в дизайн-макете

  • Активные элементы должны быть точного размера в пикселях;
  • Все состояния активных элементов располагаются либо в скрытых слоях, либо отмечены в ТЗ, которое прилагается к макету.

Требования и рекомендации к размеру макетов

  • Рекомендуемая ширина макета в пикселях: 1224 рх, где 1024 - ширина контента, 100 рх и 100 рх - поля, указывающие, как выглядит контент при ширине макета свыше 1024 рх;
  • Первый, а также любой фиксированный скролл - 700 рх в высоту;
  • Все используемые фотографии должны быть приложены к макету в большом разрешении, с примененными эффектами.

Текстовые элементы (блоки) сайта, выравнивание

  • Для указания размера шрифта необходимо использовать целое четное число: 12 рх, 14 рх и т.д.;
  • Выставить режим сглаживания текста “Резкий” (Sharp), и не менять;
  • К текстовым элементам страницы не должно применяться масштабирование, искажение, деформация;
  • Не применять к тексту псевдо полужирное и псевдо курсивное начертания.

Ссылки на странице

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

Элементы форм

  • Для элементов формы, которые будут заполняться текстом, необходимо показывать, как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы);
  • Нужно отрисовывать сообщение об ошибке в заполнении формы, а также сообщение об успешном отправлении формы.

Меню

  • Для пунктов меню необходимо показать, как выглядит обычное содержание, при наведении и в активном разделе;
  • Если есть выпадающее или разворачивающее меню – следует нарисовать и выполнить требования предыдущего пункта.

Адаптивный дизайн

  • Макеты для desktop должны быть сделаны под ширину контента 1024 рх;
  • Макеты для mobile расчитываются под ширину экрана 320 рх;
  • Допускается дизайн по стандартной сетке Bootstrap.

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

Digital-дизайнер
Компании IT-Мастерская

Поделиться:

Комментариев: " 1 "

     через vk

29 Августа 2018
ITM, 2017