Иногда возникают ситуации, когда нужно быстро изменить дизайн элементов на сайте, чтобы показать его менеджеру или клиенту, например, изменить фон страницы, размеры шрифта, цвета и отступы.
В этой статье я рассмотрю три основных способа, как можно это сделать.
Скриншот
Один из возможных вариантов - создать скриншот страницы (лично я использую расширение браузера FireShot, которое отлично справляется с этой задачей), а затем открыть его в программе Фотошоп и вручную добавлять, удалять или копировать элементы.
Однако это может быть неудобным и трудоемким процессом, так как приходится обращаться к коду страницы, чтобы увидеть стили текста и переносить их в Фотошоп.
Плагины Фигмы
Второй способ заключается в переносе страницы веб-сайта в Фигму.
При помощи нового плагина HTML to Figma можно легко превратить страницу в редактируемый проект Фигмы. Это можно сделать либо через сам плагин, либо через расширение для браузера.
Несмотря на несовершенство процесса конвертирования, он позволяет эффективно перенести макет, и затем работать с ним, исправляя ошибки и улучшая дизайн.
Дополнительно, можно воспользоваться инструментом Superposition, входящим в комплект одноименного сервиса. Он позволяет извлечь со страницы сайта все используемые цвета, типографику, эффекты, анимации и изображения.
Developer Tools
Однако, опытный веб-дизайнер вносит изменения "на лету" с помощью Developer Tools, также известного как DevTools или Inspector Tools.
Вопрос о том, нужно ли веб-дизайнеру знать HTML, CSS и JS, не вызывают у меня сомнений. Не стоит тратить время на обсуждение этого вопроса. Все профессиональные веб-дизайнеры должны знать эти языки и это является общепринятой практикой. Inspector Tool доступен в каждом браузере и с каждой новой версией становится все более удобным и функциональным. Открыть его можно, используя сочетание клавиш Ctrl-Shift-I или F12, в зависимости от браузера.
Какие преимущества в использовании этого метода?
Мы можем редактировать стили напрямую, изменяя их сразу на всей странице: меняем стиль текста - ВЕСЬ текст на странице мгновенно обновляется согласно новому стилю; изменяем цвет кнопок/ссылок - все кнопки и ссылки на странице автоматически изменятся на новый цвет. Этот метод экономит огромное количество времени. Когда находим идеальный дизайн, просто делаем скриншот и отправляем его клиенту.
Как сохранить изменения, сделанные в DevTools
Однако есть один нюанс. Стоит нам только обновить страницу или закрыть браузер, то все наши изменения исчезнут, так как браузер загрузит исходные стили. В большинстве случаев необходимо сохранить изменения, чтобы на следующий день продолжить работу, а затем передать разработчикам для внесения необходимых корректировок на основном сайте, который расположен на сервере.
Я перепробовал множество вариантов. Сохранение страницы не подходит, так как браузеры сохраняют ее с неизмененными стилями. Расширения для браузера, которые заменяют стили, не работают должным образом и требуют создания и редактирования новых стилей перед загрузкой. Я не смог получить удовлетворительный результат ни с одним из протестированных вариантов.
Решение оказалось очень простым. В настоящее время все браузеры, основанные на Chromium, имеют возможность создавать локальные копии стилей и загружать их при открытии сайта. Кроме того, вы можете работать уже с этими локальными файлами, которые автоматически заменят оригинальные файлы на вашем компьютере при обновлении страницы.
Для этого необходимо выполнить следующие действия:
- Нужно зайти в Developer Tools → Sources → Overrides (это пример, основанный на использовании Яндекс.Браузера, но алгоритм будет одинаковым для всех браузеров на базе Chromium).
- Создайте папку, в которой браузер будет хранить измененные файлы. Браузер запросит разрешение на редактирование папок, разрешите это.
- Отредактируйте страницу. Например, на приведенном ниже скриншоте я изменил стили на странице Википедии. Это было сделано непрофессионально, для наглядности, и не является дизайном.
Изменения будут автоматически сохранены браузером. В указанной папке появятся отредактированные файлы стилей. Теперь каждый раз, когда мы открываем сайт на данном компьютере, то мы видим измененный сайт. Иногда изменения не появляются сразу при загрузке страницы, тогда просто нужно открыть и закрыть инструменты разработчика
(Developer Tools), чтобы всё заработало. Вы можете включать и отключать использование стилей, а также передавать полученные файлы разработчикам. Этот метод работает как с CSS, так и с JavaScript файлами.