Как создать идеальный макет для верстки сайта

Время чтения:11 минут

Очень часто при создании сайта может произойти ситуация, когда макет создавался в одном месте, а разрабатывают его в другом. В таком случае невозможна коммуникация между разработчиками и дизайнерами и любая оплошность при создании макета потом выходит боком верстальщику. В этой статье мы расскажем где чаще всего всплывают подобные проблемы и что нужно дополнительно проверить перед тем, как отдавать его на верстку. Мы не будем рассказывать, как сделать макет сайта, а укажем на те ошибки, которые профессионалы делают по невнимательности или из-за его повышенной сложности.

Игнорирование сетки

12-колоночный грид призван упростить верстальщику жизнь, чтобы он точно знал как и где располагаются ключевые элементы. Но иногда дизайнеры намеренно отходят от него для создания необычного дизайна. Это нормально.

Ненормально – когда все же придерживаясь сетки постоянно необоснованно отходить от нее. На одной странице блоки располагаются в одном месте, а на следующей они же находятся чуть правее или левее; иконки меняют размер; кнопки меняют форму и т.д.

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

Неупорядоченность в слоях

Дизайнеры – творческие люди. И в процессе работы над макетом могут забывать давать слоям понятные и однозначные названия и упорядочивать их следуя логике макета. Из-за этого они сами часто не могут разобраться в своей работе и где что надо искать.

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

Отступы

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

отступы-в-макете.jpg

Разные цвета

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

палтира-фирменных-цветов.jpg

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

Растрированные элементы

Если бездумно растрировать разные элементы макета, то могут возникнуть ошибки и неточности. Например, растрированный текст невозможно скопировать, только заново набрать. А где в этом случае верстальщику брать начертание, оттенок, и размер? Если растрирован слой, то будет очень трудно точно узнать параметры тени или градиента.

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

поддержка-форматов.jpg
Эффекты наложения в разных браузерах

Шрифты

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

шрифты-для-сайта.jpg

При работе со шрифтами тоже нужно быть осторожным. Так, если ко всему блоку применили трансформирование, то шрифт в нем может увеличиться или уменьшиться до дробных значений. А браузер не будет это учитывать и округлит его, что не есть хорошо.

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

Типографика

Очень часто дизайнеры не заморачиваются над типографикой текста и не соблюдают одинаковые межстрочные интервалы в одинаковых блоках на страницах, отступы в абзацах везде разные, а иногда, чтобы изменить отступы между ними просто делают отдельные текстовые блоки. Так делать не стоит. Используйте настройки интерлиньяжа и абзаца, для приведения всей структуры к единому стандарту. Укажите где в макете заголовки h1, h2, h3, h4 и т.д., где маркированный список, где нумерованный. Соберите все это в единый документ после того, как создали макет сайта в редакторе и пришлите вместе с ним.

Анимации

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

PNG против SVG

Еще одно правило профессиональных дизайнеров – использовать иконки только в формате SVG. Неважно, нарисовал ли он их сам или скачал откуда-то, если иконка сохранена в формате PNG, то ее края при масштабировании могут расплываться. Поэтому никогда не используйте формат PNG для иконок в макете.

Резюме

Главное правило при работе над макетом – это внимание к деталям и стандартизированность. Не стоит делать что-то «на глаз» или вразнобой. Чтобы не забыть все нюансы, сохраните этот чек-лист:

  • Если используется сетка, то все должно строго следовать ей.
  • Целочисленные размеры на всех объектах.
  • Все элементы, которые повторяются должны быть одинаковыми.
  • Макет должен быть логически собранным, лишние слои удалены, а остальные сгруппированы следуя логике макета.
  • Отступы от шапки и футера одинаковы.
  • Использовать номера цветов, чтобы не перепутать их.
  • Не растрировать текст, тени, градиенты и эффекты наложения.
  • Не использовать эффект наложения без надобности.
  • Недробные размеры у шрифтов, все они собраны в одном месте и проверено их наличие в веб-версии. Размер не превышает 1 Мб.
  • Единая типографика.
  • Все иконки только в формате SVG. Они собраны логически правильно без непонятных названий.
  • Все активные элементы должны быть с ховерами.
  • Делать понятную для верстальщика анимацию.
  • Стили и цвета должны понятно описаны в едином документе.

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!