Как пользоваться каталогом

Теория
Q_Time

3 минуты чтения

hero image

Содержание

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

Фильтры

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

Фильтр по типу веб-плаката делит работы на статичные и динамические. Это удобно, если вы точно знаете, с каким модулем работаете. Например, если вам нужны референсы для статичного плаката на чистом CSS, вы убираете из выдачи все работы с JavaScript интерактивностью и смотрите только то, что реализуемо средствами HTML и CSS.

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

Фильтр по году создания помогает отслеживать эволюцию формата. Ранние работы 2019–2020 годов ближе к классическому плакатному подходу, а более поздние активнее используют интерактивность и нестандартные решения.

Фильтр по особенностям позволяет искать по конкретным техническим приёмам. Если вам интересны работы с 3D-моделями, блюром, вращением, коллажем или отслеживанием курсора, вы можете выбрать соответствующий тег и получить только релевантные примеры.

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

Каталог плакатов

Страница плаката

Каждый плакат в каталоге имеет свою страницу с подробной информацией. Здесь указаны автор, год создания, тип плаката, вид вёрстки и детали вроде используемых визуальных приёмов. Кнопка «Посмотреть веб-плакат» открывает саму работу в браузере, а ссылка на репозиторий позволяет заглянуть в исходный код.

Ниже на странице расположен блок «Используемые модули», который связывает плакат с соответствующими статьями справочника. Если вы видите в работе интересный приём и хотите разобраться, как он реализован, модули ведут вас напрямую к нужному материалу с объяснением и примерами кода.

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

Страница плаката

Как искать вдохновение

Каталог работает лучше всего, когда вы приходите в него с конкретным вопросом.

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

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

Если вам понравился конкретный приём в чужой работе, откройте страницу плаката, найдите блок модулей и перейдите к статье, которая объясняет этот приём. Затем загляните в «похожие плакаты» и посмотрите, как тот же приём использовали другие авторы

Понравилась статья?

Забыли главное или есть что предложить?
Напишите нам в телеграм

Читайте также