Показываем игрушки, которые появились во время работы над сайтом eduhund.ru.
Один из них — дизайн-система в Figma.
Мы создали ее как руководство для любого, кто — сейчас или в будущем — работает или будет работать над сайтом eduhund.ru. Для верстальщика, дизайнера, автора контента.
Обычно дизайнеры под дизакйн-системой имеют в виду UI-kit плюс гайд к нему. То есть набор элементов, которые можно взять (что делать?), и правила их использования (как делать?).
У нас фокус все-таки на правилах.
Потому что верстальщик и автор по большей части уже знают, что делать, не маленькие. Нужно только очень ясное "как". Не набор кубиков, а инструкция по сборке из них домика.
Кубики, конечно, тоже сделали: стили типографики, форматы сеток для разных устройств, размеры отступов и основные элементы интерфейса.
Типографикой и прочими отступами мы достигаем стилистического единства. Но это единство — не цель, и смысл с его помощью мы тоже не передаём.
Короче, content first, и если эстетика его убивает — тюним эстетику, а не глушим нюансы контента.
Собрали кубики, превратили их в стили верстки, и перешли к правилам составления страницы.
Описали принципы создания страниц, которые помогут писателю подготовить контент, а верстальщику — сверстать страницу:
К этому моменту основные страницы сайта уже были готовы, так что мы описывали закономерности, которые уже возникли, а не придумывали новые.
Да-да, лучше, конечно, все делать по плану и по порядку. Но у нас было так. И получилось неплохо.
Под конец описали разные типы блоков, из которых собраны страницы сайта eduhund.ru.
Перечислили для примера ситуации, в которых уместно использовать каждый блок, привели примеры с готовых уже страниц сайта.
Зачем это нужно? Затем, что набросок структуры страницы собирает автор контента. Верстальщик только доводит набросок до реализации (и, возможно, создаёт новые блоки).
И оба должны ориентироваться в палитре блоков: один, чтобы писать, а второй, чтобы верстать написанное.
И, наконец, собрали дизайн систему воедино.
Конечно, со всем не в том порядке, в котором писали.
Вначале — структура и правила сборки, потом большие кубики — блоки, и в конце — мелкие: типографика с версткой.
Получились правила, прописанные на трех уровнях: на уровне смысла, на уровне блоков, на уровне деталей интерфейса.
8
нормальное число, чего вы