x
 
Алексей
11 октября 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Руст, как вы проверяете соответствие вёрстки макету? Какие инструменты используете?


Если в дизайне есть сетка, все отступы и раз­меры стан­дар­ти­зи­ро­ваны, то доста­точно пере­не­сти их в вёрстку и пик­сель‑пёр­фект будет полу­чаться автоматически.

Когда всё‑таки нужно све­риться с маке­том, сове­тую пла­гин PerfectPixel для Хрома. Он поз­во­ляет нало­жить кар­тинку‑эта­лон поверх стра­ницы и задать ему рас­по­ло­же­ние, про­зрач­ность и мас­штаб. Имея под рукой такой эта­лон, можно подо­гнать отступы и раз­меры с помо­щью веб‑инспектора:

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

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

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Роман Давыдко
11 октября 2018

В Zeplin есть замечательная функция Ghost Window — открывает отдельное окно, которое можно перетаскивать куда угодно, менять масштаб и прозрачность.

Никита Скоробулатов
11 октября 2018

На сайте разработчика есть ссылки на плагины и для других браузеров: Сафари, Оперы, Фокса, ИЕ и Эджа. http://www.welldonecode.com/perfectpixel/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как спрятать экранную клавиатуру в Айфоне? Расскажите об обязанностях технического директора в бюро Как попросить клиента помочь с дебагом? 1 Как бороться с багами? Часть восьмая: порефлексировать




Недавно всплыло

2 3 1 3