Как собирать многостраничные сайты в 2 раза быстрее. И тратить в 4 раза меньше времени на правки от клиента

Ищем бустер скорости создания многостраничных сайтов. Особенно не шаблонных, а с кастомным дизайном. Хотим сократить повторяющиеся шаги и не делать одни и те же настройки элементов на каждой странице. Особенно, если страниц больше 10. Мечтаем быстро вносить правки от клиента. Особенно глобальные. Вы с нами? Расскажем, как ускорить создание многостраничников в билдере сайтов Taptop. Посмотрим на примерах работу с компонентами и настройку собственной дизайн-системы.

Как собирать многостраничные сайты в 2 раза быстрее. И тратить в 4 раза меньше времени на правки от клиента

Много страниц на сайте — много рутинных действий

Собирая сайты на много страниц, мы часто встречаемся с большим количеством повторяющихся действий. Объем рутины нарастает пропорционально размеру проекта и сложности дизайна. Особенно это ощутимо при адаптации сайта для разных устройств. Приходится возиться с каждым элементом и перенастраивать размеры и расположение. Для многостраничника с кастомным дизайном — задача трудозатратная и не быстрая.

Отдельная боль — правки от клиентов. Когда уже собрал сайт — и внезапно оказалось, что нужно поменять размеры заголовков или цвет кнопок, перестроить меню или добавить картинки в блоки с отзывами. Для лендинга это еще можно пережить, но делать такие правки на сайте 10, 20 или 50 страниц — очень существенные вложения сил и времени.

Как собирать многостраничные сайты в 2 раза быстрее. И тратить в 4 раза меньше времени на правки от клиента

Как сделать себе лучше? Прямой путь к ускорению работы — автоматизировать повторяющиеся действия. В конструкторе сайтов Taptop для этого есть много полезных инструментов. Сегодня остановимся на двух из них:

  • пользовательских компонентах, которые помогут переиспользовать созданные элементы;
  • css-классах, позволяющих построить дизайн-систему проекта.

Сделал элемент 1 раз — использовал 10 раз

Это главный принцип компонентов. Конечно, «10 раз» — это просто пример, компоненты можно переиспользовать бесконечно. Они делают работу удобнее и быстрее — можно избавиться от рутины и не повторять несколько раз одни и те же действия при создании элемента.

Например, создаем меню, превращаем его в компонент и одним кликом добавляем его на каждую страницу сайта. Или делаем форму заказа и используем ее в нужных местах проекта.

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

Компонент шапка сайта
Компонент шапка сайта

В видео показываем, как добавлять компоненты на страницу:

Добавление на страницу компонентов — шапки, формы и подвала

Кажется, что при обычном копировании элемента мы получим такой же результат, как при использовании компонента. Ведь копий тоже можно сделать любое количество. Но есть отличие. Копия элемента никак не связана с оригиналом. Если мы изменим оригинал, то копия не поменяется. Так что любые правки придется делать отдельно для каждого скопированного элемента.

Преимущество компонента в том, что все его экземпляры связаны друг с другом. Поэтому изменения, сделанные в любом из экземпляров, автоматически применяются и ко всем остальным.

Посмотрим на видео пример добавления кнопки в компонент меню:

Добавляем кнопку в компонент меню на одной странице — она появляется на всех страницах

Упаковал компоненты в библиотеку — передал в другие проекты

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

Создание пользовательской библиотеки компонентов
Создание пользовательской библиотеки компонентов

Пользовательские библиотеки компонентов помогут быстрее создавать новые сайты, используя ваши дизайнерские наработки и кастомизируя их под новые задачи.

Создал дизайн-систему — быстро настроил дизайн сайта

Дизайн-система — удобный инструмент для поддержания единого стиля сайта и консистентности интерфейса. В Taptop можно разработать дизайн-систему любой степени сложности с помощью css-классов.

Css-класс — это понятие из профессиональной верстки, описывающее стили элемента. Но мы не будем писать код, а сделаем всю работу с помощью визуального интерфейса.

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

Коротко о том, как работать с классами:

  • один раз настраиваем дизайн элемента
  • сохраняем настройки в класс, придумав для него название
  • каждый раз, когда нужен новый элемент с подобным дизайном, добавляем ему этот класс
Настройка дизайна элемента с помощью классов
Настройка дизайна элемента с помощью классов

Посмотрим алгоритм создания дизайн-системы на практике:

1. Находим в макете повторяющиеся элементы стиля.

Пример: заголовки H1, H2 и других уровней, кнопки нескольких размеров, поля формы. Также выписываем основные цвета, используемые в дизайне. Возможно, у вас в дизайн-макете уже есть Style guide — тогда этот этап работы уже готов.

2. Создаем в проекте отдельную страницу для Style guide.

Эта страница будет вспомогательной и не будет публиковаться для общего доступа. Последующие шаги делаем для каждого из повторяющихся элементов, размещая их на этой странице.

3. Создаем элемент и настраиваем параметры дизайна.

Примеры элементов и параметров:

  • заголовок H1 — размер шрифта и начертание
  • кнопка заказа — углы скругления, внутренние отступы, цвет фона и размер шрифта
  • контейнер для контекстных блоков — внутренние отступы, лейаут и выравнивание внутренних элементов.
Настройка параметров дизайна для заголовка H1 и кнопки
Настройка параметров дизайна для заголовка H1 и кнопки

4. Придумываем для элемента название класса, которое его описывает.

Примеры: text--h1, btn--large, container--content

Создание классов для заголовка H1 и кнопки
Создание классов для заголовка H1 и кнопки

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

Style guide для сайта
Style guide для сайта

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

Посмотрим на видео пример создания новых элементов по образцу из Style guide:

Добавляем созданные классы новым элементам — получаем нужный дизайн

Дизайн-система на основе css-классов даст возможность одним кликом настраивать дизайн добавляемых элементов и ускорит верстку страницы в несколько раз.

Внес правки в дизайн-систему — автоматически изменил дизайн всех страниц сайта

И наконец переходим к правкам. Например, мы решили подкорректировать дизайн в процессе работы над сайтом. Или прилетели правки от клиента. В любом случае нужно в той или иной степени менять уже созданное.

Дизайн-система поможет внести правки максимально быстро и просто. Нужно лишь один раз изменить параметры дизайна у соответствующего класса элемента — и все элементы с этим классом поменяют внешний вид.

Например, редактируем размер шрифта у одного из заголовков H2 (выбрав у него класс text--h2) — и шрифт изменится у всех заголовков H2 на всех страницах сайта.

Изменение дизайна всех элементов с одинаковым классом
Изменение дизайна всех элементов с одинаковым классом

Подобным образом мы можем поменять любые параметры дизайна — от цвета шрифта или фона до отступов или позиционирования элемента.

Например, можно одним действием модифицировать:

🟦 внешний вид всех кнопок — цвет фона, шрифт, радиус закругления,

🟨 основные цвета сайта — типографики, фона страницы или контентных блоков,

🟩 ширину контейнера на всех страницах.

Для редактирования мы можем выбрать любой элемент с нужным классом. Можно вносить правки в элементы на странице Style guide или на любой рабочей странице сайта. Результат будет один и тот же — поменяются все элементы с этим классом.

Посмотрим пример на видео. Здесь мы изменили цвет фона и акцентный цвет в соответствующих классах на одной из страниц сайта — и они автоматически поменялись на всех страницах, где используются эти классы.

Меняем цвета в классах root--background и color--accent — цвета меняются на всех страницах

Попробуем представить, какую экономию времени дает использование дизайн-системы при редактировании проекта. Например:

  • Дано: сайт из 10 страниц, на каждой 10 блоков.
  • Задача: Нужно поменять ширину контейнера во всех блоках с 960 до 1200 пикселей.
  • Вопрос со звездочкой: Сколько времени займет такая задача, если настраивать каждый блок по отдельности?

А теперь представьте, что эту задачу можно решить, всего лишь изменив ширину одного блока на одной странице — и все остальные подстроятся под него. Как думаете, сколько времени мы сэкономим? Делаем ставки)

Кстати, такая автоматизация повлияет не только на скорость работы, но и на драйв от процесса — ничто так не утомляет, как однообразные повторяющиеся действия.

Используя дизайн-систему, можно одним действием вносить правки на все страницы сайта. Это сделает процесс эффективнее и сэкономит часы рабочего времени.

Бустер скорости создания многостраничника

Чтобы наиболее эффективно автоматизировать повторяющиеся действия, рекомендуем сначала немного подготовиться. Для этого на начальном этапе разработки сайта желательно:

  1. Структурировать страницы сайта и составляющие их блоки.
  2. Выделить элементы, дизайн и контент которых будет одинаковым на всех страницах. Для них лучше использовать компоненты.
  3. Выделить элементы с похожим дизайном и продумать, какие классы будут использоваться для их настройки. Также сделать список общих параметров дизайна сайта (например, основные цвета). Это основа для дизайн-системы проекта.

Если грамотно проработать эти шаги и пользоваться компонентами и дизайн-системой, собирать сайт будет гораздо проще, интереснее и быстрее. К тому же, проект получится гибким к изменениям и легким в поддержке. Так что даже глобальные правки от клиентов будут не страшны.

Создавайте уникальные сайты на платформе Taptop.

Полезные материалы про дизайн и новости продукта:
Телеграм канал и группа ВКонтакте.

Наши проекты на Dprofile.

1919
Начать дискуссию