Как собирать многостраничные сайты в 2 раза быстрее. И тратить в 4 раза меньше времени на правки от клиента
Ищем бустер скорости создания многостраничных сайтов. Особенно не шаблонных, а с кастомным дизайном. Хотим сократить повторяющиеся шаги и не делать одни и те же настройки элементов на каждой странице. Особенно, если страниц больше 10. Мечтаем быстро вносить правки от клиента. Особенно глобальные. Вы с нами? Расскажем, как ускорить создание многостраничников в билдере сайтов Taptop. Посмотрим на примерах работу с компонентами и настройку собственной дизайн-системы.
Много страниц на сайте — много рутинных действий
Собирая сайты на много страниц, мы часто встречаемся с большим количеством повторяющихся действий. Объем рутины нарастает пропорционально размеру проекта и сложности дизайна. Особенно это ощутимо при адаптации сайта для разных устройств. Приходится возиться с каждым элементом и перенастраивать размеры и расположение. Для многостраничника с кастомным дизайном — задача трудозатратная и не быстрая.
Отдельная боль — правки от клиентов. Когда уже собрал сайт — и внезапно оказалось, что нужно поменять размеры заголовков или цвет кнопок, перестроить меню или добавить картинки в блоки с отзывами. Для лендинга это еще можно пережить, но делать такие правки на сайте 10, 20 или 50 страниц — очень существенные вложения сил и времени.
Как сделать себе лучше? Прямой путь к ускорению работы — автоматизировать повторяющиеся действия. В конструкторе сайтов Taptop для этого есть много полезных инструментов. Сегодня остановимся на двух из них:
- пользовательских компонентах, которые помогут переиспользовать созданные элементы;
- css-классах, позволяющих построить дизайн-систему проекта.
Сделал элемент 1 раз — использовал 10 раз
Это главный принцип компонентов. Конечно, «10 раз» — это просто пример, компоненты можно переиспользовать бесконечно. Они делают работу удобнее и быстрее — можно избавиться от рутины и не повторять несколько раз одни и те же действия при создании элемента.
Например, создаем меню, превращаем его в компонент и одним кликом добавляем его на каждую страницу сайта. Или делаем форму заказа и используем ее в нужных местах проекта.
Компонент — готовый элемент или блок, который можно использовать на сайте многократно. Все компоненты, созданные в проекте, доступны в ресурсах — выбирайте и добавляйте в любое место любой страницы.
В видео показываем, как добавлять компоненты на страницу:
Кажется, что при обычном копировании элемента мы получим такой же результат, как при использовании компонента. Ведь копий тоже можно сделать любое количество. Но есть отличие. Копия элемента никак не связана с оригиналом. Если мы изменим оригинал, то копия не поменяется. Так что любые правки придется делать отдельно для каждого скопированного элемента.
Преимущество компонента в том, что все его экземпляры связаны друг с другом. Поэтому изменения, сделанные в любом из экземпляров, автоматически применяются и ко всем остальным.
Посмотрим на видео пример добавления кнопки в компонент меню:
Упаковал компоненты в библиотеку — передал в другие проекты
Еще одна суперполезная функция при работе с компонентами — создание собственных библиотек. Просто собираете разработанные компоненты в пользовательскую библиотеку и используете их на других сайтах. Это вдвойне удобно, т.к. компоненты будут доступны также для других участников вашей команды.
Пользовательские библиотеки компонентов помогут быстрее создавать новые сайты, используя ваши дизайнерские наработки и кастомизируя их под новые задачи.
Создал дизайн-систему — быстро настроил дизайн сайта
Дизайн-система — удобный инструмент для поддержания единого стиля сайта и консистентности интерфейса. В Taptop можно разработать дизайн-систему любой степени сложности с помощью css-классов.
Css-класс — это понятие из профессиональной верстки, описывающее стили элемента. Но мы не будем писать код, а сделаем всю работу с помощью визуального интерфейса.
Класс содержит набор параметров дизайна элемента. Это могут быть разные опции — от шрифта, начертания и цвета текста до размера, отступов и настроек лейаута. Мы сами выбираем, какие настройки дизайна элемента сохранять в класс.
Коротко о том, как работать с классами:
- один раз настраиваем дизайн элемента
- сохраняем настройки в класс, придумав для него название
- каждый раз, когда нужен новый элемент с подобным дизайном, добавляем ему этот класс
Посмотрим алгоритм создания дизайн-системы на практике:
1. Находим в макете повторяющиеся элементы стиля.
Пример: заголовки H1, H2 и других уровней, кнопки нескольких размеров, поля формы. Также выписываем основные цвета, используемые в дизайне. Возможно, у вас в дизайн-макете уже есть Style guide — тогда этот этап работы уже готов.
2. Создаем в проекте отдельную страницу для Style guide.
Эта страница будет вспомогательной и не будет публиковаться для общего доступа. Последующие шаги делаем для каждого из повторяющихся элементов, размещая их на этой странице.
3. Создаем элемент и настраиваем параметры дизайна.
Примеры элементов и параметров:
- заголовок H1 — размер шрифта и начертание
- кнопка заказа — углы скругления, внутренние отступы, цвет фона и размер шрифта
- контейнер для контекстных блоков — внутренние отступы, лейаут и выравнивание внутренних элементов.
4. Придумываем для элемента название класса, которое его описывает.
Примеры: text--h1, btn--large, container--content
В результате получается примерно вот такой набор элементов, где есть все варианты используемой на сайте типографики и других элементов дизайна.
Создание дизайн-системы требует времени. Но это будет гораздо быстрее, чем отдельно настраивать дизайн каждого элемента на нескольких страницах сайта.
Посмотрим на видео пример создания новых элементов по образцу из Style guide:
Дизайн-система на основе css-классов даст возможность одним кликом настраивать дизайн добавляемых элементов и ускорит верстку страницы в несколько раз.
Внес правки в дизайн-систему — автоматически изменил дизайн всех страниц сайта
И наконец переходим к правкам. Например, мы решили подкорректировать дизайн в процессе работы над сайтом. Или прилетели правки от клиента. В любом случае нужно в той или иной степени менять уже созданное.
Дизайн-система поможет внести правки максимально быстро и просто. Нужно лишь один раз изменить параметры дизайна у соответствующего класса элемента — и все элементы с этим классом поменяют внешний вид.
Например, редактируем размер шрифта у одного из заголовков H2 (выбрав у него класс text--h2) — и шрифт изменится у всех заголовков H2 на всех страницах сайта.
Подобным образом мы можем поменять любые параметры дизайна — от цвета шрифта или фона до отступов или позиционирования элемента.
Например, можно одним действием модифицировать:
🟦 внешний вид всех кнопок — цвет фона, шрифт, радиус закругления,
🟨 основные цвета сайта — типографики, фона страницы или контентных блоков,
🟩 ширину контейнера на всех страницах.
Для редактирования мы можем выбрать любой элемент с нужным классом. Можно вносить правки в элементы на странице Style guide или на любой рабочей странице сайта. Результат будет один и тот же — поменяются все элементы с этим классом.
Посмотрим пример на видео. Здесь мы изменили цвет фона и акцентный цвет в соответствующих классах на одной из страниц сайта — и они автоматически поменялись на всех страницах, где используются эти классы.
Попробуем представить, какую экономию времени дает использование дизайн-системы при редактировании проекта. Например:
- Дано: сайт из 10 страниц, на каждой 10 блоков.
- Задача: Нужно поменять ширину контейнера во всех блоках с 960 до 1200 пикселей.
- Вопрос со звездочкой: Сколько времени займет такая задача, если настраивать каждый блок по отдельности?
А теперь представьте, что эту задачу можно решить, всего лишь изменив ширину одного блока на одной странице — и все остальные подстроятся под него. Как думаете, сколько времени мы сэкономим? Делаем ставки)
Кстати, такая автоматизация повлияет не только на скорость работы, но и на драйв от процесса — ничто так не утомляет, как однообразные повторяющиеся действия.
Используя дизайн-систему, можно одним действием вносить правки на все страницы сайта. Это сделает процесс эффективнее и сэкономит часы рабочего времени.
Бустер скорости создания многостраничника
Чтобы наиболее эффективно автоматизировать повторяющиеся действия, рекомендуем сначала немного подготовиться. Для этого на начальном этапе разработки сайта желательно:
- Структурировать страницы сайта и составляющие их блоки.
- Выделить элементы, дизайн и контент которых будет одинаковым на всех страницах. Для них лучше использовать компоненты.
- Выделить элементы с похожим дизайном и продумать, какие классы будут использоваться для их настройки. Также сделать список общих параметров дизайна сайта (например, основные цвета). Это основа для дизайн-системы проекта.
Если грамотно проработать эти шаги и пользоваться компонентами и дизайн-системой, собирать сайт будет гораздо проще, интереснее и быстрее. К тому же, проект получится гибким к изменениям и легким в поддержке. Так что даже глобальные правки от клиентов будут не страшны.
Создавайте уникальные сайты на платформе Taptop.
Полезные материалы про дизайн и новости продукта:
Телеграм канал и группа ВКонтакте.Наши проекты на Dprofile.