Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для pixel perfect, который «как задизайнили, так и сверстали» — пиксель в пиксель. Pixel perfect в десктопе — это чушь, потому что нельзя сверстать так, чтобы с разных браузеров (привет, Safari) и разрешений всё смотрелось идеально. Но ошибки, которые сразу бросаются в глаза, сразу подмечаю, структурирую и обсуждаю это с разработчиком, может, появились какие-либо ограничения и прочее. Поэтому никогда не жалею время на дизайн-ревью и через DevTools сам проверяю то, что сверстал разработчик.
Все инструменты и функциональность, о которых пойдёт речь в этой статье, можно найти в браузере в «Инструментах разработчика» (клавиша F12 / Ctrl + Shift + I (на Windows) или ⌘ + ⌥ + I (на Mac), или клик правой кнопкой мыши в любом месте страницы -> Выбор пункта меню — «Просмотр кода страницы» (или «Исходный код страницы») — это и есть DevTools).
Основной элемент для работы с девтулзами — «Инспектор» (Ctrl + Shift +C на Windows и ⌥+⌘+I на MacOS) — это инструмент поиска элементов на странице браузера.
Итак, погнали. 10 вариантов использования DevTools дизайнером.
Экспорт SVG
Как правило, используется для получения логотипов из хедеров с официальных сайтов компаний. Логотипы обновляются чаще, чем название компании, поэтому важно использовать самую последнюю и актуальную версию. Если у вас нет доступа к брендбуку компании, а Google не помог, то можно экспортировать логотип из шапки сайта.
Кликаем по логотипу Инспектором и в DevTools ищем тег <svg>. Важно выбрать именно тег <svg>, а не <path fill> или что-то похожее.
После кликаем правой кнопкой мыши (ПКМ) по тегу > Copy > Copy outerHTML > Вставляем в Figma через Ctrl + V
Важно: Если у логотипа png формат, а не svg, то есть другой способ поискать svg на сайте. В url с картинкой формата png или другого формата изображений дописываем «?svg». Так, мы спросим сайт, есть ли у него файл с таким же названием, но уже в формате svg.
Это редкий кейс, но иногда работает.
Стилизация отдельных элементов или группы
Использую, чтобы посмотреть, как будет выглядеть сайт на проде, если я поменяю что-либо из элементов дизайна: кнопки, формы, ссылки, цвета и т. д.
Для наглядности разберём на примере «Лучших блогов» на Хабре, а именно названий компаний, чьи блоги представлены в списке.
Инспектором выбираем название блога. Замечаем, что у каждого элемента (названия компании) внутри блока «Лучшие блоги» прописан свой класс.
То есть если я поменяю свойство color у класса, то все названия блогов станут красными.
Но если я хочу, например, чтобы только блог компании Selectel стал красным, то выделяю Инспектором только его и отдельно прописываю свойства у element.style.
Получаем быстрое и наглядное отображение любых изменений, которые хотим внести, не передвигая пиксели в Figma.
В целом стилизация с помощью CSS проста. Если знаешь HTML/CSS хотя бы на минимальном уровне, то сможешь изменять цвета, размер, отступы и пр. Особенно сейчас, когда в большинстве вакансий есть требование как раз про базовое понимание HTML/CSS.
color = цвет
font-size = размер шрифта
и т. д.Вкладки Styles и Computed
Панель Styles в DevTools — это инструмент для работы с CSS, который позволяет исправлять проблемы, связанные с внешним видом веб-страниц.
Styles позволяет:
редактировать стили в реальном времени для быстрых экспериментов и поиска оптимальных решений;
добавлять новые CSS-правила и свойства к выбранному элементу;
отключать и включать отдельные стили, чтобы увидеть, как они влияют на внешний вид элемента;
визуализировать модели блоков CSS, показывая размеры и отступы элементов;
включать и отключать псевдоклассы, такие как:
:hover, :active, :focus и :visited:
Панель Computed в DevTools также показывает значения CSS-свойств для выбранного элемента. Но в отличие от панели Styles показывает не все стили и применённые CSS-правила, а только окончательные значения свойств, которые применяются к элементу после разрешения всех конфликтов, наследования и каскадирования.
В этой вкладке смотрим инфографику с отступами, потому что именно Computed отображает фактические размеры и отступы элемента, включая значения, заданные в процентах, em или других относительных единицах.
То есть если у вас во вкладке Styles размер написан в непонятных единицах измерения, то во вкладке Computed всё будет красиво и понятно прописано в пикселях.
Computed помогает понять, как ведёт себя конкретный элемент, учитывая его размер, отступы и пр.
Дублирование элементов
Удобно использовать на проде для сравнения различных элементов.
ПКМ по нужному элементу > Duplicate element
Например, дублируем кнопку «Подписки», чтобы проверить сочетание акцентов и цветов. Это такое тестирование гипотез на проде.
Просмотр адаптивных версий
Рассмотрим верхнюю панель, с помощью которой можно смотреть адаптивы. На ней есть не только уже готовое переключение через брейкпоинты/ячейки, но и возможность самому выставлять нужную ширину экрана/вьюпорта.
Кроме того, мы можем выбрать пресеты — предустановленные размеры мобильных экранов, планшетов и т. д. Эта функция особенно помогает, чтобы проверить, как будут отображаться различные смысловые блоки на телефонах с разным разрешением.
Также можно самостоятельно настроить разрешения экранов под любые нужды, нажав кнопку Edit в конце списка пресетов.
Проверка корнер кейсов
В основном использую для текста, а именно обрезания текста с помощью «...», оно же
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Если разбирать на плохих и хороших примерах, то вернёмся к «Лучшим блогам» на Хабре. Здесь в стилях не прописали обрезание или какой-то перенос длинного текста, а, соответственно, если название больше заданного блоком, то в строку полностью оно не влезет, что будет не очень красиво. Так делать не нужно.
А вот как нужно — на Dribbble перенос текста прописан в свойствах CSS.
Shadow DOM
Недавно на дизайн-ревью впервые столкнулся с кейсом, когда, я не смог посмотреть размер текста и цвет у плейсхолдера, потому что он почему-то не выбирался Инспектором.
На инпуте с телефоном в форме с плейсхолдером был следующий код:
Я зашёл в настройки, чтобы посмотреть, и удивился — Инспектор не выделяет то, что я прошу.
Поэтому я в настройках во вкладке Preferences и блоке Elements выбрал пункт «Show user agent shadow DOM».
И после этого уже смог посмотреть плейсхолдер и его настройки.
Почему получилось только с включённым Shadow DOM? Потому что Shadow DOM — это способ создать «изолированные» элементы на веб-странице. Стили снаружи не влияют на внутреннюю структуру компонента, потому что Shadow DOM позволяет создавать многократно используемые и независимые элементы интерфейса.
Может это вам и не понадобится на проектах в моменте, но лучше включить отображение Shadow DOM и всегда видеть всё.
Просмотр состояний элементов
Использую для просмотра состояний у элементов — псевдоклассов, таких как hover, active (эти два чаще всего) и пр. Они находятся во вкладке Styles, с нажатым «:hov».
Важно: Выбрать элемент, например, кнопку или ссылку, заранее
При помощи этой опции можно смотреть, как у вас какой-либо элемент себя ведёт при наведении, нажатии и в обычном состоянии.
Эта же функция доступна через Инспектор. Для этого нужно: выбрать элемент → кликнуть ПКМ → выбирать Focus state.
Вкладка Sources для поиска картинок и прочего
Использую для поиска картинок, логотипов, шрифтов и пр. Всё это добро гораздо проще вытащить из вкладки Sources.
Дизайн-ревью при помощи DevTools
Что изменится, если делать дизайн-ревью при помощи DevTools
Ускорите поиск материалов (логотипы, скрины, картинки, шрифты) и его экспорт в свои проекты;
Улучшите дизайн-ревью;
Научитесь говорить в разработчиками на одном языке и сможете отправлять им все расхождения с макетом самостоятельно;
Улучшите качество продукта, который вы же и задизайнили, и прокачаете свои навыки дизайна.
Зачем делать дизайн-ревью именно через DevTools?
Чтобы сразу исправить очевидные косяки, которые видны тому, кто этот дизайн делал. QA эту часть работы не делегировать, потому что QA уделяют внимание технической стороне вопроса, а не визуальной. Поэтому с дизайн-стороны проверять будем по большей части именно вёрстку: отступы, шрифты, цвета, типы заголовков, кнопки и состояния.
