Открыть главное меню

Технические требования к дизайн-макету: различия между версиями

 
(не показаны 2 промежуточные версии этого же участника)
Строка 7: Строка 7:
 
<td style="background: #f5f5f5;padding: 10px 15px;">
 
<td style="background: #f5f5f5;padding: 10px 15px;">
 
'''Требования к файлу дизайн-макета'''<br />
 
'''Требования к файлу дизайн-макета'''<br />
1. Формат файлов: Figma(.fig), Sketch(.sketch).<br />
+
1. Формат файлов: Figma(.fig-файл или ссылка на проект с figma.com), Sketch(.sketch).<br />
2. Цветовая схема – RGB.<br />
+
2. Ширина макета в пикселях: 1920 (HD-монитор). Минимальная ширина области с контентом 1004 пикселя для сайтов с горизонтальным меню в шапке и 1260 пикселей для сайтов с вертикальным меню слева. Рекомендуемая ширина области с контентом: 1200 пикселей и 1400 пикселей соответственно.
3. Рекомендуемая ширина макета в пикселях: 1920 (HD-монитор). Минимальная ширина области с контентом 1004 пикселя для сайтов с горизонтальным меню в шапке и 1260 пикселей для сайтов с вертикальным меню слева. Рекомендуемая ширина: 1200 пикселей и 1400 пикселей соответственно.
 
 
</td>
 
</td>
 
<tr>
 
<tr>
Строка 16: Строка 15:
 
1. Именование фреймов/групп/компонентов должно быть логичным и отражать суть содержимого. Все части одного логического элемента должны быть в одной группе/фрейме и не должны быть разбросаны по всему документу. <br />
 
1. Именование фреймов/групп/компонентов должно быть логичным и отражать суть содержимого. Все части одного логического элемента должны быть в одной группе/фрейме и не должны быть разбросаны по всему документу. <br />
 
2. Эффекты для слоёв не должны быть растрированы.<br />
 
2. Эффекты для слоёв не должны быть растрированы.<br />
3. В слоях и эффектах не использовать какой-либо режим наложения слоёв, кроме Normal. Исключением может быть только фрейм или группа, которые планируется экспортировать из макета как растровое изображение<br />
+
3. В слоях и эффектах не должен использоваться какой-либо режим наложения слоёв, кроме Normal. Исключением может быть только фрейм или группа, которые планируется экспортировать из макета как растровое изображение<br />
 
4. Не следует оставлять в макете невидимых слоёв, которые использовались в процессе разработки макета, но не были включены в его финальный вариант.<br />
 
4. Не следует оставлять в макете невидимых слоёв, которые использовались в процессе разработки макета, но не были включены в его финальный вариант.<br />
 
5. Каждая страница макета должна находиться в отдельном фрейме (или монтажной области), который не должен располагаться поверх предыдущего.<br />
 
5. Каждая страница макета должна находиться в отдельном фрейме (или монтажной области), который не должен располагаться поверх предыдущего.<br />
 
6. Состояния и дополнительные положения элементов (раскрытые меню и т.п.) не должны перекрывать друг друга. В случае перекрытия необходимо разнести их на несколько фреймов.
 
6. Состояния и дополнительные положения элементов (раскрытые меню и т.п.) не должны перекрывать друг друга. В случае перекрытия необходимо разнести их на несколько фреймов.
 +
7. Все состояния и варианты элементов должны выть видимы и явно указаны визуально или с помощью комментариев.
 
</td>
 
</td>
 
</tr>
 
</tr>
Строка 26: Строка 26:
 
'''Требования к текстовому содержимому'''<br />
 
'''Требования к текстовому содержимому'''<br />
 
1. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier и шрифты [https://fonts.google.com/ Google Fonts], необходимо прикладывать к передаваемым материалам. Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.<br />
 
1. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier и шрифты [https://fonts.google.com/ Google Fonts], необходимо прикладывать к передаваемым материалам. Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.<br />
2. Лучше всего шрифты выбирать на [http://www.google.com/webfonts сайте Google Fonts]. Выбрав тут шрифты, можно без проблем подключить и использовать их на своем сайте.<br />
+
2. Лучше всего шрифты выбирать на [http://www.google.com/webfonts сайте Google Fonts]. Выбрав тут шрифты, можно без проблем подключить и использовать их на своем сайте.<br />
 
3. Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.<br />
 
3. Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.<br />
 
4. Размер шрифта должен быть указан в пикселях. Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13.<br />
 
4. Размер шрифта должен быть указан в пикселях. Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13.<br />
Строка 38: Строка 38:
 
1. Все активные элементы (ссылки, кнопки, пункты меню и др.) должны быть предоставлены во всех возможных состояниях: нормальное, при наведении, при нажатии. <br />
 
1. Все активные элементы (ссылки, кнопки, пункты меню и др.) должны быть предоставлены во всех возможных состояниях: нормальное, при наведении, при нажатии. <br />
 
2. Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).<br />
 
2. Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).<br />
3. Фон сайта может быть одним из ниже перечисленных: однородный цветовой; линейный вертикальный или горизонтальный градиент; фоновое повторяющееся изображение; фоновое неповторяющееся изображение с переходом в однородный цвет, фоновая картинка, которая будет зафиксирована при прокрутке.
 
 
</td>
 
</td>
 
</tr>
 
</tr>
 
</table>
 
</table>
 
<br />
 
<br />

Текущая версия на 15:35, 8 апреля 2024

На главную о дизайне | Готовый дизайн | Логотип

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

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

Требования к файлу дизайн-макета
1. Формат файлов: Figma(.fig-файл или ссылка на проект с figma.com), Sketch(.sketch).
2. Ширина макета в пикселях: 1920 (HD-монитор). Минимальная ширина области с контентом 1004 пикселя для сайтов с горизонтальным меню в шапке и 1260 пикселей для сайтов с вертикальным меню слева. Рекомендуемая ширина области с контентом: 1200 пикселей и 1400 пикселей соответственно.

Требования к слоям и группам в дизайн-макете
1. Именование фреймов/групп/компонентов должно быть логичным и отражать суть содержимого. Все части одного логического элемента должны быть в одной группе/фрейме и не должны быть разбросаны по всему документу.
2. Эффекты для слоёв не должны быть растрированы.
3. В слоях и эффектах не должен использоваться какой-либо режим наложения слоёв, кроме Normal. Исключением может быть только фрейм или группа, которые планируется экспортировать из макета как растровое изображение
4. Не следует оставлять в макете невидимых слоёв, которые использовались в процессе разработки макета, но не были включены в его финальный вариант.
5. Каждая страница макета должна находиться в отдельном фрейме (или монтажной области), который не должен располагаться поверх предыдущего.
6. Состояния и дополнительные положения элементов (раскрытые меню и т.п.) не должны перекрывать друг друга. В случае перекрытия необходимо разнести их на несколько фреймов. 7. Все состояния и варианты элементов должны выть видимы и явно указаны визуально или с помощью комментариев.

Требования к текстовому содержимому
1. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier и шрифты Google Fonts, необходимо прикладывать к передаваемым материалам. Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
2. Лучше всего шрифты выбирать на сайте Google Fonts. Выбрав тут шрифты, можно без проблем подключить и использовать их на своем сайте.
3. Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
4. Размер шрифта должен быть указан в пикселях. Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13.
5. Обязательно должно быть указано оформление следующих HTML-тегов: параграф, абзац (p), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список, нумерованный список.
6. К текстовым элементам страницы не должно применяться масштабирование (вытягивание/сжатие), как по горизонтали, так и по вертикали.

Прочие требования
1. Все активные элементы (ссылки, кнопки, пункты меню и др.) должны быть предоставлены во всех возможных состояниях: нормальное, при наведении, при нажатии.
2. Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).