Как не заблудиться в лабиринте бесконечных правок: оптимизация работы с объемными проектами на Тильде

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

Организация коммуникации с клиентами — фундамент работы над проектами. Дизайн-процесс состоит из нескольких этапов согласования.

Как правило, клиент обращается к нам без знаний и насмотренности

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

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

Качественная работа с объемными проектами на Тильде предполагает умение работать с дизайн-системой и быстро масштабировать ее в рамках проекта. Auto Layout, стили и компоненты играют здесь ключевую роль.

Дизайн-система, в первую очередь, должна ускорять работу дизайнера, поэтому лучше подготовить ее таким образом, чтобы, например, можно было одним нажатием, поменять гарнитуру в проекте и при этом сохранить отступы на страницах. В этом нам помогают стили текста и Auto Layout. С помощью этих инструментов мы можем быстро менять, например, шрифт или цвет в Figma, если клиент передумал в последний момент, практически не жертвуя временем и нервными клетками :)

Организация фото, видео и других графических материалов

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

Уместное использование AL (Auto Layout)

В рамках концепции мы рисуем несколько вариантов экранов, чтобы продемонстрировать основные идеи. Обычно варианты концепций получаются сильно разные, так что на этом этапе мы используем AL только в основных UI-элементах: кнопках, формах, меню, чтобы не загонять себя в рамки шаблона, легко внося корректировки и дополнительный функционал в макет при необходимости.

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

Гайдлайн типографики, стили цвета и отступы

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

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

Для того, чтобы проверить и поправить при необходимости все стили в дизайн-системе, мы используем плагин:

Чтобы проверить отступы:

Чтобы ускорить работу с висячими предлогами:

Использование своих шаблонов, если позволяет тематика

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

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

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

Использование библиотек и сервисов

Упрощает работу и экономит время использование различных сервисов модификаций в проекте, а так же подборок кириллических шрифтов. Особенно часто используем:

А также сервис модификаций:

Мы создали сервис в котором делимся коллекцией модификаций, которые разрабатывали для проектов. Также есть возможность персональной разработки модификаций под ваш проект и задачи.

После того, как мы согласовали дизайн-проект в Figma, переходим к разработке. Для этого используем Тильду, как платформу с наиболее удобной для клиентов административной панелью.

Ниже делимся способами ускорения работы на Тильде:

Подключение общих header и footer

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

Настройка Alias-блоков

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

Использование классов для блоков

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

Добавление шаблонов и модификаций

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

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

Еще несколько простых, но возможно не самых очевидных, способов ускорить разработку: