FIELDNOTES
Редакционный сайт / журнал
Digital-журнал: газетная сетка, материалы разного размера, рубрики и бегущая строка.
Открыть демо
Concept Project. Журнал, авторы и материалы вымышлены. Контент находится в коде; CMS и сервер не подключены.
Задача
Собрать первый экран независимого журнала об архитектуре, дизайне и культуре.
Проблема
Статьям разной важности нужна выразительная иерархия без одинаковых декоративных карточек.
Решение
Большой газетный логотип, три неравные колонки, чёрно-белая фотография главного материала, Most Read и кислотная строка рубрик.
Функциональность
- Редакционная CSS Grid
- Фильтр по рубрикам
- Открытие демонстрационных статей
- Авторы, даты, выпуск и Most Read
- Бегущая строка с reduced-motion
Процесс разработки
- 01
Задана газетная типографическая иерархия.
- 02
Собраны главный материал и боковые колонки.
- 03
Добавлены фильтры и окно чтения.
Мобильная
версия.
На небольшом экране меняются сетка и навигация. Ниже - скриншот страницы на телефоне шириной 390 пикселей.
Попробовать интерфейс
Что получилось
Создана главная digital-журнала с контентной сеткой и локальным просмотром статей.
Обсудить похожий проект