0,0
рейтинг
15 октября 2013 в 15:33

Разработка → Собранные требования к psd-макету веб-сайта из песочницы

Привет, фрондэнд разработчики!

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

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

Немного набрал в весе мозга и статуса в компании, в какой-то момент я понял, что так дальше продолжаться не может и начал собирать свои требования в psd макетам.

Через какое-то время я смог оценить весь profit от введения этих стандартов и требований:

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

— верстальщик получая «правильный» макет может более точно оценить срок выполнения, так как точно понимает, что ему не придется никуда больше ходить и просить что-то переделывать, также сюда можно добавить и сокращение сроков выполнения. Так как в случае соблюдения правил, становится возможно пользоваться штуками типа csshat.com + lesshat.com

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

Ниже привожу список требований:

1) Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
Зачем? о_О:
— чисто эстетические наслаждение
— возможность быстро собирать каркас страницы и позиционировать элементы на
странице в соответствии с представленном макетом, чтобы верстка получалась более честной по отношению к тому, что ты нарисовал(а).

2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа ''multiply, screen, overlay, и т.д.".
Плохо: joxi.ru/Md6l32D
Хорошо joxi.ru/M2w9Nwe и еще пример joxi.ru/11ndBHq

3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
Пример: joxi.ru/AGx4CQy

4) Никаких градиентных границ (бордеров, stroke).

5) Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).

6) ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF

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

8) Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты) joxi.ru/MKnCZQM

9) Если нарисовали типовую кнопку, ссылку, элемент, которые имеет состояние «наведения», нажатия — не заставляйте нас додумывать как это должно работать. Если есть ссылка, покажите ее цвет при наведении, если есть кнопка, покажите ее внешний вид при наведении или нажатии, а также при ее состоянии «неактивности». Это касается любых подобных элементов, стрелок в галереи и т.д. и т.п. joxi.ru/ZSmaLye

10) Каждый блок должен находится в своей папке и имеет правильное человеческое название, чтобы не собирать части блока по всему макету. joxi.ru/Agsfo3L

11) Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности. joxi.ru/G1h9LbN

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

Спасибо.
Николай Ильченко @tavriaforever
карма
13,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (70)

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

    А в целом, нужно прежде всего заказчика убедить, что подход «сдвиньте мне этот блок на пол-пикселя» — неправильный и ведет только к ужасу и страданиям.
    • –1
      А как же самый главный недочет?
      Никогда! Слышишь? НИКОГДА НЕ ИСПОЛЬЗУЙ ПОДКЛЮЧАЕМЫЙ ШРИФТ НА ВСЮ СТРАНИЦУ!
      Заголовки? — Ок.
      Подписи? — Ок.
      Текст статьи? — Не-е-ет
      • +4
        Можете объяснить почему?
        При грамотном подборе fallback-шрифтов не вижу особых проблем с тем, чтобы основной текст страницы использовал нестандартный шрифт.
        • +2
          Вот почему: habrastorage.org/storage3/b2e/f82/af3/b2ef82af3049d617d3ae5af64c45f51e.jpg
          Когда я захожу на сайт, я хочу читать содержимое, а не ждать как сейчас, когда делал скриншот. Реально сайт так минуту грузился, потом просто надоело ждать.
          • +1
            Я сам не оч люблю когда для основного шрифта исплозуется нестандартный, но все же справедливости ради можно сказать что шрифт можно лениво загрузить поверх дефолтного например аяксом.
            • +1
              А еще можно было бы использовать data:uri.
          • +1
            Странно, что у вас так долго загружалось. У меня через 3G от Мегафона вся Лента загрузилась секунд за 10, надписи появились через 5 секунд.
            В общем и целом, у ребят там всё очень грамотно:
            @font-face {
                font-family: "PT Serif";
                src: url(http://icdn.lenta.ru/assets/pt_serif-regular-92b911b83da092e53f30f359082a6185.eot);
                src: url(http://icdn.lenta.ru/assets/pt_serif-regular.eot?#iefix) format('eot'), url(http://icdn.lenta.ru/assets/pt_serif-regular-0bf8da96cd518b3c11480cf8b370fc45.woff) format('woff'), url(http://icdn.lenta.ru/assets/pt_serif-regular-624ae74aa79350023f87568ade5fc5f4.svg) format('svg');
                font-weight: normal;
                font-style: normal
            }
            

            Шрифты подкючаются через CDN, жмутся автоматикой на сервере (об этом говорят имена файлов), сами наборы оптимизированы для интернета.
            Осмелюсь предположить, что скорость вашего интернета ниже 1 мегабита в секунду или около того, что составляет подавляющее меньшинство пользователей. В среднем по России 20 мегабит.
            • 0
              У меня 70 Мбит и так долго грузилось. Похоже, что тормозил какой-то скрипт, возможно рекламный, и до события onload текст не показывался.

              И да, шрифты подключаются неграмотно: нет определения local('PT Serif'). У меня шрифт есть на компьютере, а всё равно приходится ждать, пока он загрузится из интернета.
              • 0
                Какого такого определения? Я всегда думал, что браузер сам соображает этот момент – есть шрифт в системе или нет.
                • 0
                  А вот и нет, не сам. Как минимум ему надо знать имя, которое и указывается в local().
                  • 0
                    Это еще вопрос — не грамотно ли. Ведь ваш PT Serif может быть совсем иным, чем их PT Serif…
      • +3
        Open Sans, PT Sans, PT Serif, Roboto, Roboto Slab – очень даже спокойные, лёгкие и правильные шрифты, которые очень даже хорошо натягиваются на всю страницу. Не бойтесь.
        • 0
          У Roboto заметил проблему с буквами «ц», и «щ» в некоторых начертаниях.
          • 0
            Да, есть такое. Вообще, это больше выделяющий шрифт для малых объёмов текста. Но это всё же не мешает мне сделать макет сайта с параграфами, написанными Roboto.
  • 0
    • 0
      Там разницу между rulers и guides, layers и slices не понимают.
      И обоснуйте, пожалуйста, вот это:
      Важно: ширина макета – 1980 пикселей.

      Зачем?
  • +4
    Собрал в один документ на github
    Кому интересно — присоединяйтесь, дополняйте
    • 0
      Позвольте уточнить, а зачем TIFF?
      PS я про это screencast.com/t/pULjvu5SCgt
      • 0
        Это скорее всего унаследовано от полиграфии, где TIFF — обязательное условие, вместо JPG или PNG, ибо в отличии от первого не искажает (без потери качества), а от второго — может работать с CMYK палитрой. Как агроном агроному скажу, что PNG удовлетворяет потребности полностью.
        • 0
          Ну вот тоже 2 мысли были:
          1) Для превью (но тут png / jpg, на мой взгляд, вполне удовлетворяют)
          2) Для печати (но речь вроде бы как о верстке для веба)
          • +1
            Вдруг верстальщик печатает макет, а потом с распечатки верстает, прикладывает к монитору для Pixel Perfect )))
            (Вспомнился старый распространённый случай (баян из жизни) про DOC файлы и полиграфию)
          • 0
            TIFF умеет в слои, вот в чём соль.
            • 0
              Standard TIFF doesn't support layers. If a Photoshop document with layers is saved as TIFF Photoshop creates a flat TIFF image file (for compatibility) and the layer data in a separate TIFF tag. This separate TIFF tag can be compressed using RLE (run length encoding) or ZIP compression. ZIP usually results in smaller files, smaller even as if saved as PSD (where you can't choose the compression format).

              wiki.panotools.org/TIFF

              Только фотошоп поддерживает слои, другие программы эти слои не откроют.
              Так что — это вредный совет.

              ЗЫ Я не использую фотошоп из-за его томознутости и уже забыл, что он поддерживает слои, ибо другие программы не поддерживают.
              • 0
                Не только Photoshop поддерживает слои. Слои хранят PNG, сохранённые в Fireworks, документы Gimp, документы Pixelmator, документы Paint.NET и других растровых графических редакторов.
                Благодарю за справку.
  • 0
    Вот похожий топик, который в чем-то пересекается и в чем-то дополняет этот:
    habrahabr.ru/post/173271/
  • +1
    А есть еще и ilovepsd.ru/
    • 0
    • +1
      Полный бред:
      Называй файлы с учетом версии


      Файлы версий должны лежать по датам перезаписи в папке /archive/_дата, а в корне проекта — только актуальные версии
      • +1
        Да на здоровье — главное структурировано, а не "[name]_copy", "[name]_fix", ''[name]1111" и пр
        • 0
          мы об одном и том-же, а в статье прямо и советуют ''[name]1111", если уж на то пошло, то хотя-бы ''[name]01111" для нормальной сортировки
      • 0
        почему бы не использовать гит? :)
        • 0
          Для хранения версий макетов лучше использовать Pixelapse и ему подобные, так как графика бинарна и Git распухнет.
  • 0
    Зачем градиенты в свойстве слоя делать в нормале?
    Порой гораздо проще, разумнее и эффективнее кнопочку зафигачить пнг-шкой, а не css-ом долбить.
    • +2
      Порой гораздо проще, разумнее и эффективнее кнопочку зафигачить пнг-шкой, а не css-ом долбить.

      Ну наверное чтобы можно было масштабировать (подсказка: ретина, adaptive, responsive)
      • 0
        Видимо здесь ключевое слово «порой».
        Потому как не всегда делается ретина-реди.
        • –1
          Скорей «упоройтый». А еще px для шрифтов…
        • 0
          <irony>Да и вообще таблицами проще верстать, так в руководстве 2006 года написано.</irony>
  • 0
    Еще не надо забывать проверять поддерживает ли подключаемый шрифт кодировку UTF если сайт мультиязычный.
  • +3
    Не согласен вот с этим
    2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
    Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа ''multiply, screen, overlay, и т.д.".

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

    Вообще, тема не новая, и каждый раз одно и тоже — кто-то кому-то что-то должен :)
    • +3
      Я хоть и верстальщик, но поддерживаю предыдущего оратора. Нет ничего сложного в том, чтобы ткнуть пипеткой в граничные пиксели градиента. Зато потом очень просто самостоятельно получать кнопку любого цвета в любом состоянии, т.к. дизайнеры всё же порой забывают их отрисовывать.
  • 0
    Я как-то раз писал дизайнерам длинную телегу по этому поводу, копипаста письма по ссылке: http://atmo.in/AeFD4038
    К сожалению, ссылки на скриншоты в нем неактуальны.
    • 0
      Обманул, работают ссылки :)
    • 0
      Много спорных моментов, но в целом верно: сайт – чаще UI, чем Graphic Design, и поэтому чем технически подкованнее разработчик UI, тем лучше всем.
  • +1
    Не стоит забывать, что большинство кастомных шрифтов (даже честно купленных в OTF и TTF) не имеют правильной лицензии и не могут быть использованы в виде веб-шрифтов без специального на то разрешения. Поэтому я всегда советую дизайнеру искать веб-версию шрифта (и согласовывать его покупку) перед использованием в макете.
    Ну или использовать бесплатные Google Web Fonts.
    • 0
      Ещё очень важно сначала глянуть, как этот шрифт смотрится в браузерах в разных размерах. А то будет, как в новом Гугл Плее.
  • 0
    Градиентные границы для бордера реально грамотно сверстать, так что этот пункт можно смело убирать.
    • 0
      Поделитесь пожалуйста как сверстать градиентные границы у таблицы? Мне очень надо.
      • +1
        Достаточно знать, как работать с псевдоэлементами ::before/::after.
        • 0
          И? Внутри ячейки таблицы нельзя использовать position: absolute. Может я чего не понимаю? Живой пример в студию!
          • 0
            Я работал весь день, мне попросту лень писать тебе живой пример. Просто встрой в каждую ячейку блок и ему задавай псевдоэлементы.
            И, кстати, это только Firefox не желает позиционировать ячейки, в Webkit и даже Trident это работает. Задаёшь position: relative ячейке и относительно неё позиционируешь псевдоэлементы.
            И не говори, что хочешь без лишних элементов это сделать. Это CSS, в нём всегда нужно вот так вот изворачиваться.
            • 0
              Если засунуть в ячейку блок, то высоты этих блоков будут разные. Их нельзя растянуть на высоту ячейки, если она не задана. Так что пример с блоком внутри не будет работать.
          • 0
            Ну как как, вот так: habrahabr.ru/post/140760/
            • 0
              Спасибо!
  • –1
    У дизайнера в рабочем документе может быть любой бардак, как ему добнее, хоть колор бёрн на оверлее, лишь бы он понимал, что на вёрстку он не имеет права это отдавать, и обязан подготовить адекватный структурированный темплейт перед передачей верстальщику.
    • 0
      Тоже поддерживаю эту мысль. Каждый должен заниматься своим делом и тут дело не в лени.
      Просто элементарное уважение труда и времени других людей, участвующих в проектах.
  • 0
    3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.

    достаточно объединять эти слои в smart object.
    • 0
      и поставить экшн, который сам все это мерджит в отдельный файл
  • +2
    Ребята, перед тем как начать верстать, нужно погрузиться в контекст задачи. Это включает в себя ревью макета, по итогам которого формируется кабздец-набор. Например, при отсутствии сетки — никаких вам пиксельперфектов. При отсутствии шрифтов — довольствуйтесь ариалом. При хитрых градиентах и тенях — понимайте, что они не будут такими даже близко.

    Элементарное управление рисками.

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

    В любом случае, дизайнер, который не знаком с ограничениями CSS — плох.
    • 0
      Я думаю, благодаря таким дизайнерам иногда и происходят рывки в CSS.
  • 0
    Может быть некоторых я удивлю, но если в макете присутствует сетка это незначит что дизайнеры понимают для чего эта стетка нужна, они просто прочитали статью / требования и нарисовали такую сетку. Ну ключевую фразу сказал Corpsemeister «Полиграфисты»
    • 0
      Так, что за наезды на полиграфистов? Вы полагаете, что дизайнеры полиграфии, которые чаще всего и верстальщики полиграфии, в частности газет, журналов и книг, не знают что такое макетная сетка?
      • 0
        нет, я полагаю что часто заказчики заказывают дизайн сайтов у полиграфистов, которые полиграфию рисуют не всегда по стандартам, а стандарты/рекомендации создания PSD макетов сайтов, они вообше не читали, вот это я имею ввиду.
        • +1
          а стандарты/рекомендации создания PSD макетов сайтов, они вообше не читали

          И поэтому они не знают что такое макетная сетка? (про стандарты я промолчу)
          Железная логика! Поздравляю.

          Я может открою секрет, но полиграфия появилась задолго до веба и очень многое перекочевало в веб из полиграфии.

          … не хотел разводить холивар, но что же, так получается…

          Полиграфисты верстают в 99% случаев векторе (люстра, корел, индизайн)
          А вот в фотошопе занимаются только обработкой фотографий.
          Я, например, как полиграфист, сайты рисую в кореле, т.е. в векторе. И думаю те кто пришел из полиграфии также работают в векторе, ибо это удобнее и качественнее, но а в век адаптивного дизайна и ретина дисплеев ещё и качественнее. И я ни когда не сохраню для верстальщика макет в PSD, ибо это одно и тоже что из PSD сохранять в JPG (аналогия надеюсь понятна) (холиварить будем?)

          Теперь подумаем немного, кто же рисует макеты в фотошопе?
          — это те кто ни когда не работал в полиграфии
          — это фотографы/ретушировщики
          — ну и остальные начинающие

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

          А чаще всего те, кого вы имеете в виду — просто «школоло» в дизайне.
  • +1
    Это, конечно, прозвучит радикально. Но хороший дизайнер должен уходить от фотошопа, как инструмента для компоновки страницы. Он для этого не предназначен. Обработать фоточку, пожалуйста, нарисовать кнопку — без проблем (хотя лучше вектором). Но вот когда надо сверстать правильно блок текста или таблицу — тут уже начинаются анальные боли. Почему в полиграфии не используют фотошоп для макетов?
    А что есть по сути интерфейс сложного сайта? Тут даже векторного Indesign будет недостаточно, потому что нужен интерактив и адаптивность (в инде ее сделали, но кое как). Поэтому если вы знаете только фотошоп и предочитаете в нем делать сайты, то вы не совсем настоящий веб-дизайнер. Просто потому, что не полностью взаимодействуете с готовым результатом своей работы — за вас это делает верстальщик (front end).
    • 0
      В Photoshop есть достаточная для веба поддержка векторных инструментов (которыми рисуются кнопочки, иконки, линии, прочие контролы) и намного более удобная, по сравнению с векторными редакторами, поддержка растров. Объясните мне, в чём плюсы использования векторных редакторов? Мониторы у всех растровые.
      • +1
        Разница познаётся в сравнении. Спор на долгие часы.
        • 0
          Я ж не с целью спорить.
      • +1
        Это показывать надо. Если хотите, можем в скайпе похоливарить. Вкратце, пара основных кейсов:
        1. Вопроизведите вот эту страничку в фотошопе — wp-themes.com/?p=36 А теперь поменяйте шрифт на Comic Sans, междустрочный интервал сделайте тройным, а отступы от элементов форм кратными размеру шрифта с коэфициентом 2.345. Представляете сколько времени это займет в фотошопе. А в индюке пара кликов в настройках стилей.

        2. У вас есть галерея картинок в виде шахматной сетки, перестройте ее в виде ромба, с выравниванием по сетке. Вы еще любите концепцию слоев фотошопа? В индюке пара движений мышью. Потому что layout рулит.

        И такого миллиард. Я не спорю, что для растра фотошоп — прекрасный инструмент, но ведь веб страница — НЕ растровая картинка. Монитор не может быть растровым или векторным, это не про них свойство.

        Это только кусочек вершины айсберга. Мы еще не говорили про поведение кнопок при нажатии, настройку анимации интерактивных элементов и прочее.
        • 0
          ОК, благодарю.
  • 0
    Спасибо за joxi.ru )

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