18 правил идеального psd-макета — полезный чек-лист для дизайнеров

    Общий принцип — Не делай брак.
    Не бери брак. Не передавай брак.
    Тойота.


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

    «Почти» по сетке


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

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

    Когда элементы выбиваются из сетки, процесс вёрстки затягивается — тратится дополнительное время на выяснение положения блоков или на правки, если сверстанная страница не совпадает с макетом визуально. Также возникают проблемы с адаптивностью страниц, поскольку неясно, как вышедшие за рамки сетки объекты должны себя вести на устройствах меньшей диагонали.
    Сергей, разработчик в студии Сибирикс:
    «Наверное, самая главная проблема в том, что далеко не все дизайнеры знают хотя бы основы html и css, поэтому и макеты делаются без оглядки на вёрстку. Например, частенько встречается, когда на адаптиве блоки перекомпануются таким образом, что без дублирования контента для мобильной и десктопной версии не обойтись — это замедляет работу над вёрсткой».


    Владимир, руководитель студии:
    «Есть миллион случаев, когда программист говорит «это невозможно», а потом берет и делает, как нужно. Значит-таки возможно. И большинство ограничений, неудобных для программиста, но интересных с точки зрения дизайна — искусственные. Чёткую границу провести невозможно. Работает только итерационное обсуждение и попытки реализовать задуманное. Пробовать, смотреть, обсуждать, делать, экспериментировать. Иначе всё скатится к унылым шаблонам. Для части проектов это ОК. А для части — нет. Делаете ли вы в духе конвейера или делаете фестивальные работы? Мы писали про это подробнее в бегунке креативности».

    Копипаст слоёв


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

    image

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

    Непонятные отступы


    В идеальном макете все отступы и размеры у блоков должны быть унифицированы. Там на один пиксель больше, тут — на один меньше, а верстальщику потом сидеть и выбирать, как правильно. Возможно, это не слишком повлияет на внешний вид страницы, хотя клиенты бывают разные: кому-то каждый лишний пиксель бросается в глаза. А возможно, тестировщик наложит готовую верстку на макет-исходник через плагин Pixel Perfect и напишет список из миллиона багов, сочтя такие несоответствия ошибкой. Проследите, чтобы отступы контентной области от шапки и подвала были одинаковыми на всех ваших страницах.

    Объекты тоже таят скрытые опасности — иногда при создании форм в Фотошопе, даже если дизайнер использовал сетку, случаются вот такие погрешности:

    image

    Верстальщик вряд ли станет учитывать эти тонкости и, скорее всего, обрежет размеры объекта, чтобы тот точно вписался в сетку. Поэтому правило — ВСЕ объекты должны иметь целочисленные размеры, иначе результат может очень отличаться от первоначального макета.

    Цвета «на глаз»


    В фотошопе есть удобный инструмент — «пипетка», и дизайнеры любят им пользоваться — тыкнул, и не надо запоминать номер цвета. Но если тыкнуть в край элемента, цвет может исказиться оттенком фона. Другая опасность — если радиус пипетки более 1 пикселя, Фотошоп покажет среднее значение между соседними цветами.

    Андрей, разработчик
    «Особенно раздражает, когда цвета дизайнер определял “на глаз”, а потом ты сидишь с набором разнокалиберных серых и не знаешь, какой именно использовать. Это происходит из-за того, что нет банальной карты цветов проекта, на которую мог бы опираться и сам дизайнер при работе над внутренними страницами, и верстальщик».
    Негласное правило не рекомендует использовать чёрный под номером #000000 — он слишком контрастный на фоне белого. Глядите на разницу:

    image

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

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


    Текст


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

    Тени и градиенты


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

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

    Эффекты наложения


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

    image
    Эффекты наложения в разных браузерах

    Проблемы со шрифтом


    Дробные размеры


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

    Множество шрифтов


    На весь проект желательно использовать не более 3-х начертаний — это могут быть шрифты одной гарнитуры (Light, Regular и Bold) или разных. Это не жёсткое ограничение — всё зависит от задач проекта, но определённый смысл в нём есть: чем меньше вариаций шрифта, тем выше сосредоточенность на тексте у читателя. Считается правилом вместе с макетом передавать гарнитуры, которые там использовались, или хотя бы давать ссылки на Google Fonts.
    Андрей, разработчик:
    «Сейчас большинство браузеров отошли от шрифтов в форматах TTF, OTF — и если разработчик будет использовать их по-старинке, не везде они будут отображаться корректно. Мы в студии давно перешли на формат WOFF или WOFF2, чтобы не было проблем. Перевести шрифт в него можно здесь или здесь».

    Использование нестандартных шрифтов


    Нестандартные шрифты и их начертания должны быть проверены на наличие веб-версии. Дело в том, что такие шрифты влияют на скорость загрузки страницы — для их отображения браузеру нужно сначала их скачать, и на это уйдёт какое-то время. По-хорошему вес нестандартного шрифта не должен превышать 1 мегабайт. И лучше, чтобы такой шрифт на странице был только один. Ну и не забывайте, что шрифты стоят денег. Иногда — больших. У нас были случаи, где шрифт специально дорабатывался под конкретный проект — та ещё задачка.

    Корявая типографика


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

    Евгений, разработчик:
    «По возможности не стоит использовать сложные эффекты на типовых текстовых страницах, если предполагается, что заказчик сам сможет их менять из админ-панели. Скорее всего, у него получится «обернуть» такие элементы в div. Иногда это решается сниппетами или иными приемами, но всё равно вызывает сложность при наполнении контентом».
    Обязательно стоит показать на макете оформление параграфа, абзаца, заголовков 1-4 уровня (h1, h2, h3, h4), маркированных и нумерованных списков. А ещё лучше собрать всё это в отдельный документ — гайдлайн или UI-kit. Сюда же можно добавить поведение ссылок (активная, при наведении, посещенная).

    image
    UI-kit для проекта «Спасская башня»

    Непонятная анимация


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

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

    Желательно пометить слои с анимациями и интерактивами цветами и сопроводить их комментариями. Также очень желательно в комментариях прописать, как именно это должно работать и привести примеры.
    Евгений, арт-директор:
    «Фотошоп фотошопом, но сейчас появилось столько прогрессивных инструментов, внутри которых к каждому элементу сразу создаются нужные строчки кода — верстальщику не составляет большого труда превратить дизайн-макет в свёрстанную страницу. А вообще, конечно, всё зависит от самого верстальщика — если он норм, то и результат будет норм, в каком бы редакторе это ни было нарисовано:)»

    Иконки в PNG


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

    Но бывает, что дизайнеры используют иконки в формате PNG — в нём при масштабировании на экранах с большим разрешением (а сейчас даже на мобилках плотность пикселей бешеная) края изображения расплываются. Отсюда правило: все иконки должны быть в формате SVG — так они остаются чёткими, каким бы ни был их размер.

    Некоторые верстальщики предпочитают, чтобы иконки были собраны в одном месте — в отдельной папке — и чтобы их названия были идентичны слоям в макете. Другим удобнее, чтобы SVG-изображения были встроены в основной файл, поскольку так гораздо проще и быстрее вырезать svg из макета, чем искать нужную иконку в другой папке.

    Чек-лист


    В творческом порыве сложно уследить за тем, чтобы всё было сделано правильно. Там слой скопировался и остался без названия, там объект немножко вылез за край колонки, тут шрифт случайно «зажирнился» встроенными фотошопными настройками вместо выбора нужного начертания — с кем не бывает? А с тем, у кого есть наш чек-лист!

    Чек-лист для подготовки Photoshop-макета к передаче на вёрстку


    1. Если дизайнер использовал сетку, все блоки на макете расположены строго по ней.
    2. У всех объектов на макете целочисленные размеры.
    3. Повторяющиеся элементы на страницах всегда ОДИНАКОВЫЕ.
    4. Все слои сгруппированы по папкам и распределены по логике макета. Лишние удалены, похожие — объединены.
    5. Отступы от элементов унифицированы.
    6. Цвета на макете совпадают с основными цветами проекта.
    7. Текст как текст (не растрирован).
    8. Эффекты наложения, тени и градиенты не растрированы.
    9. Использование эффектов наложения целесообразно.
    10. У шрифтов недробные размеры.
    11. Шрифты, используемые в проекте, собраны в отдельной папке.
    12. Нестандартные шрифты и их начертания проверены на наличие веб-версии. Вес одного нестандартного шрифта не превышает 1 Мб.
    13. Межстрочные интервалы и отступы в тексте унифицированы.
    14. Все иконки в формате SVG и собраны в одном месте. Наименования иконок одинаковые и понятные, совпадают с наименованием идентичных слоёв на макете.
    15. Для всех активных элементов есть слои с ховерами.
    16. Объекты, участвующие в в анимациях/интерактивных взаимодействиях, разбиты послойно. Для баннеров — аналогично.
    17. К анимациям и интерактивным взаимодействиям прописаны комментарии и указаны примеры, как это должно выглядеть.
    18. Для макета создан гайдлайн с палитрой цветов проекта и стилями текста.
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 24
      0
      Ну да, многие верстальщики представления не имеют как извлечь SVG-иконки из PSD макета, для них лучше в отдельном фолдере сохранять исходники.
        0
        один раз покажи и все
          0
          Дистанционно?! Много букв. Лениво. Нескольким версталам? У меня не он-лайн школа )
            0
            Многие дизайнеры представления не имеют как правильно рисовать SVG-иконки и потом переделывают несколько раз)
        0
        На сайте Сибирикс и «Спасской башни» не отображаются состояния фокуса на ссылках (по нажатию TAB). Могли бы написать похожую статью про «грешки» верстальщиков? Было бы интересно почитать.
          +1
          Ждите в следующей серии:)
          +1
          2018 год, а ещё пишут статьи про макеты в Ps…
            +1
            Сами в шоке, что приходится:)
              +1
              Может уже пора пересадить дизайнеров в Sketch/Figma и использовать Avocode/Zeplin? (:
                0
                Avacode и Zeplin тоже работают с Фотошопом. А вот почему дизайнеры все еще тратят кучу времени на изучение, а потом на использование Фотошопа, если уже есть мощные инструменты — мне не понятно.
                  0
                  Думаете, прям тратят время на изучение Фотошопа? Да его просто давно все знают и по привычке используют, скорее. Вопрос в том, что у кого-то даже привычки-то работать в нём грамотно не сформировалось:)
                    0
                    До сих пор встречаю школы/курсы веб-дизайна, которые из года в год обучают своих студентов работе на фотошопе. К сожалению на русском рынке, очень редко слышу упоминание о Figma, только в больших и грамотных студиях.

                    Даже с высокими знаниями фотошопа, на нем делать макеты, очень затратно по времени.
                      0
                      Посмотрел обзор. Photoshop гораздо более универсальный. А это приложение хорошо подходит только для модного плоского дизайна. Что может эта Figma, если нужен интерфейс сайта игры про средневековье, например? Дубовую кнопку? Стили объектов где? Photoshop ещё хорош тем, что прямо на месте можно обработать картинку для фона или поправить фотографию. Но я совершенно согласен, что в Photoshop многое не продумано под быстрый дизайн UI.
                        0
                        Вы сейчас сравнивайте Figma с графическим редактором. Figma лишь инструмент для разработке удобных прототипов и сбора макетов, на нем удобно делать дизайны любой сложности, кроме того, Figma построена на векторных объектах. Вы так говорите, будто на HTML нельзя сверстать сайт с Дубовой кнопкой. Все дополнительные иллюстрации делаются в связке с фотошопом или иллюстратором, и переносятся непосредственно в Figma.

                        В этом случае, каждый инструмент выполняет свои прямые функции:

                        Figma — разработка макетов
                        Фотошоп — обработка фотографий, создания растровых иллюстраций.
                        Иллютратор — векторные картинки.
                          0
                          Я понимаю, что Figma заточена под другое. Но плюс Photoshop'а в том, что в одном приложении можно делать много чего, сразу видя цельный макет и не переключаясь туда-обратно.
                            +1
                            Это не экономит ваше время, даже наоборот, очень тормозит. В фотошопе есть почти все и для всех, но все же основная его деятельность — обработка фотографий. Он изначально не делался по веб-дизайнера, а лишь затачивался для этого в последствие. Figma специальна была сделана для дизайнеров, и в ней были учтены самые основные возможности:
                            1. Общие компоненты
                            2. Привязка элементов к стороне, для удобной адаптации.
                            3. Удобный инструмент для верстки макетов
                            4. Удобная работа с масштабом фотографий
                            5. Разработка живых прототипов.
                            6. Удобный редктор SVG, возможность экспорта и импорта без взаимодействие с иллюстратором (этого очень не хватает в фотошопе)

                            И это лишь самая малая часть того, что есть в Figma.

                            Я 4 года работал на фотошопе, на Figma лишь год, и очень жалею, что не перешел на нее раньше.
                              0
                              Ок. Надо попробовать…
              +1
              Вы прям опередили меня комментом. Ладно раньше была отмазка мол sketch только для mac, но при наличии figma и adobe xd юзать ps уже некрофилией попахивает
                0
                При всём при этом макеты в фотошопе пока окончательно не исчезли, а плохие макеты в фотошопе — тем более
                  +1

                  И не исчезнут в ближайшее несколько лет.

              0
              никто не сказал, что у Figma нет оффлайна клиента, нет интернета — сидишь отдыхаешь. Мне ближе XD — но и там, ребята что-то курят — за два года не могут сделать направляющие и др. полезный функционал, который все ждут.
                0
                юзал все. вернулся в фш. самый креативный и свободный инструмент. остальные — для потока. а такой дизайн нам не нужен… проще сразу на html накидывать
                  0
                  Я раньше был ярым поклонником Фотошопа, и сайты рисовал только в Фотошопе, и думать не мог о чем-то другом. Потом не по моему желанию пришлось научиться работать в Figma, ну и по немногу осваиваю Sketch на iMac 2017. Честно сказать Скетч постепенно становится тоже анахронизмом как и Фотошоп, потому что он обростает кучей функционала, тормозит часто, короче имеет свои минусы. Фигма мне нравится куда больше, она гораздо шустрее и не нужно постоянно сохраняться, проекты сохраняются в облаке, закрыл программу на одном ПК, приехал домой открыл на ноутбуке и продолжаю работать, очень комфортно. По сравнению с фотошопом, в таких программах как Фигма, Скетч и Адобе ХД, ну и недавно вышла бетка inVision Studio, так вот там можно делать кликабельные прототипы чтобы показать заказчику как будет работать проект и при клике на кнопки будут открываться нужные страницы. Кроме того они хорошо ориентированы на фронт-энд. Пробовал ещё Адобе ХД, но он как-то мне не зашел, сыровать ещё. Я и к Фигме не сразу привык после Фотошопа, но когда разобрался то понял что это небо и земля, дизайн строится гораздо быстрее, кроме того это векторная графика и при увеличении макета вы не видите бесящих пикселей как в Фотошопе.
                    0
                    и абсолютно всё вышеописанное сводится к одной простой но болезненной истине — дизайнеров совершенно не учат техничности, хуже того, когда верстальщики сетуют но проглатывают и сами все доделывают это расхолаживает креативных дебилов. Веб дизайн ничем не отличается от физического дизайна — типографии, промдиза, архитектуры и пр Дизайнер обязан относиться к своему чистовику в слоях так же строго как к инженерному чертежу, у него для этого есть все самые удобные инструменты, начиная с четких выравниваний и заканчивая техтребованиями, которые не должен доделывать субподряд — верстальщик не долджен бродить в слоях, печатник дорисовывать вылеты, принтисты-текстильщики вообще годами работают будучи не в курсе как принт-то наносится и что в макете под шелкуху не может быть градиента прозрачности и тп Этот бесконечный снежный ком в вашей работе не прекратится пока вы не начнете реально возвращать им макеты с требованием сначала привести эту мусорку в порядок, чтобы текущие «специалисты» учились подтирать за собой и пестовали следующее поколение

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое