Требования к макетам для правильной верстки страниц сайта

На сегодня почти каждый второй дизайнер, но профессионалов очень сложно найти. Из-за этого макеты чаще всего сдаются не надлежащим образом и все ошибки «всплывают» уже при верстке. Рассмотрим основные требования к макетам сайта.

Основные правила

1. Разработка дизайн макета для верстки подходит в двух форматах или PSD, или TIFF. Цвета должны быть сохранены вRGB.

2. Слои каждого элемента нужно объединять в одну папку, (например, элемент регистрационной формы).

3. Категорически нельзя склеивать слои, если это не касается дизайнерских фишек.

4. В макете все слои выравнивать по Guide.

5. Выравнивать Rulers нужно строго до целого значения пикселя.

6. Все элементы располагаются в отдельных слоях, которые понятно подписаны, а не слой 1, 2 и т. д.

7. Если шаблон фиксированной ширины, например, 800 пикселей, то и макет должен быть 800, а не 900, иначе сайт невозможно будет красиво сверстать.

8. Разрабатывая дизайн «под разрешение», нужно рисовать под ширину браузера, а не монитора, например, если монитор с шириной 1024 пикселя, то ширина браузера будет 986 пикселей.

Стоит учесть, что макет с шириной 999, 1981 пикселей и другие подобные размеры не подходят.

9. Если сайт тянется на 100% ширину в браузере, то нужно разработать дополнительный макет, к примеру, на 986 пикселей, чтобы посмотреть, как будут выглядеть элементы на небольшом разрешении экрана.

10. Сколько страниц сайта, столько и должно быть отдельных макетов PSD. Если сделать все страницы в одном файле, то будет задействован невероятный объем оперативной памяти.

11. Макет должен быть резиновый и адаптивный. Желательно отрисовать два варианта с разной шириной.

Цвета

Если вы слышали, что нельзя применять прозрачность для элементов, которые содержат текст, то это неправда. Можно, только нужно использовать RGBA.

Графика

1. Фон должен быть повторяющимся, с логикой повтора.
2. Подсвечивание недопустимо. Если при таком эффекте навести на ссылку, то ее фон полупрозрачный получится.
3.  Обязательная отрисовка фавикона (формат ico). Для продукции Apple нужно предусмотреть 5 дополнительных иконок в формате PNG.

Требования к тексту

1. Для каждого текстового элемента должен быть указан вид шрифта и кегль. Недопустимо, чтобы происходили трансформации с кеглем. Размер должен меняться исходя из заданного шрифта.
2. Если шрифты нестандартные, то приложить установку шрифта, но не факт, что они будут отображаться в старых версиях браузеров.
3. Никаких платных шрифтов.
4. Советуем выбирать гарнитуру на этом сайте google.com/fonts. Они точно будут отображаться у всех.
5. В стандартных формах нужно стараться делать изменения по минимуму.
6. В текстовых элементах должен использоваться стандартный шрифт.
7. Нужно описать в макете состояние ссылок, например, какого цвета они будут при наведении, активации, чем будут отличаться ссылки в меню.
8. Оформление текста нужно делать согласно разметке HTML  с применением специальных тегов: p, ul, h1.

Стандарт в макете - Ui Kit

Ui Kit - это стандарт расположения элементов на сайте. Макет разрабатывется с учетом данного требования. Есть список, который включает нужные элементы для отрисовки:

- все ссылки в разных состояниях;

- состояние текстовых блоков в фокусе и в обычном виде;

- состояние кнопок при наведении, клике.

- особенности каждого блока.

Процесс передачи материала

Что должен получить верстальщик:

- макет сайта в PSD или TIFF;

- установки шрифтов;

- фавиконы ico;

- иконки;

- если фон паттерн, то нужно приложить отдельный файл в векторе.

 

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