ART FACTOR
Мультимедийное издание о digital art
Основная идея проекта — показать, что digital art не ограничивается изображением на экране. Это может быть система, алгоритм, интерактивная среда, визуальный архив или опыт взаимодействия пользователя с технологией.
Сайт задуман как online gallery + editorial magazine: пользователь проходит через разделы как через экспозицию, где каждый блок раскрывает отдельный аспект цифрового искусства.
Создать сайт как цифровую галерею
Editorial identity
Создать визуальную систему для digital art издания: логотип, типографику, цвета, сетку, номера разделов, карточки и галерейные блоки.
Content structure
Собрать не просто красивый экран, а полноценную структуру издания: intro, factors, generative art, installation, archive, interview, glossary, subscribe.
Custom code
Подготовить проект к реализации через код: адаптив, кастомные блоки, анимации появления, интерактивные состояния и нестандартные композиции.
White Gallery / Contemporary Art
Вместо тёмной cyberpunk-эстетики выбран более зрелый визуальный язык — white gallery. Он делает проект спокойным, современным и премиальным, а акцентный оранжевый цвет работает как навигационный маркер и эмоциональная точка внимания.
Основная композиционная идея — соединить редакционную структуру журнала с ощущением выставочного пространства. Каждый раздел воспринимается как отдельная экспозиционная зона.
- крупные номера разделов;
- тонкие направляющие линии;
- модульные карточки;
- 3D-арт-объекты и мокапы;
- контраст между пустотой и визуальным акцентом.
От идеи до готового сайта за 10 дней
Concept & Art Direction
Определение темы проекта, названия ART | FACTOR, визуального направления White Gallery / Contemporary Art и ключевой идеи мультимедийного издания.
Content Architecture
Разработка структуры лонгрида: Hero, Intro, Factors, Generative Art, Media Installation, Visual Archive, Interview, Glossary, Subscribe и Footer.
Visual System
Подбор типографики, цветовой системы, сетки, визуальных объектов, мокапов и графических акцентов для единого стиля проекта.
Code Implementation
Реализация сайта через HTML, CSS и JavaScript: адаптивная структура, кастомные блоки, анимации появления, lightbox и навигация по странице.
Структура лонгрида
Wireframe помог зафиксировать информационную архитектуру до финальной визуальной стилизации. Главная задача — сделать страницу не набором красивых экранов, а последовательным редакционным маршрутом.
- Hero — обложка digital-журнала;
- Intro — объяснение темы;
- Factors — шесть ключевых факторов digital art;
- Generative Art — смысловой editorial-блок;
- Visual Archive — галерея визуальных материалов;
- Interview — медийный блок с человеком;
- Glossary — образовательный UX-модуль.
Editorial grid
12 columns
Основная десктопная сетка — 12 колонок с большим количеством воздуха. Она позволяет чередовать крупные визуальные блоки, текстовые области и карточки.
8 columns
На планшете композиции становятся более компактными, но сохраняют editorial-ритм и разделение на текстовые и визуальные зоны.
4 columns
На мобильной версии структура упрощается до вертикального лонгрида, где каждый раздел сохраняет номер, заголовок, визуал и короткий смысловой текст.
Цвета и типографика
Цветовая палитра поддерживает ощущение современной галереи. Основной фон остаётся спокойным, текст — контрастным, а оранжевый используется только для акцентов, CTA, маркеров и визуальных деталей.
Типографика сочетает экспериментальный digital-характер и хорошую читаемость. Заголовки работают как визуальные объекты, а основной текст остаётся спокойным и удобным для чтения.
3D-объекты, мокапы и арт-графика
Полностью написан через код
HTML / CSS / JS
Структура страницы, стили, адаптив, lightbox, навигация и анимации появления реализованы вручную через код.
Zero Block logic
Проект можно интегрировать в Tilda через T123/Zero Block, сохраняя визуальную свободу и нестандартное расположение элементов.
10 days
От начала дизайна до финальной реализации прошло 10 дней: концепция, визуальная система, адаптивы, мокапы и рабочий сайт.
Сильный portfolio-case о digital culture
Что показывает проект:
- умение создавать визуальную концепцию и арт-дирекшн;
- работу с editorial-сеткой и контентной структурой;
- подбор типографики, цветов и UI-системы;
- создание десктопной и мобильной версии;
- подготовку проекта к реализации через код;
- понимание портфолио-подачи и Behance-презентации.
