Всемирная история

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

Всемирная история

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

Задачи проекта

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

После этого перешел к следующим этапам проекта.

Этапы работы над проектом

Концепция и структура

Определил пять тематических разделов платформы: Historical Map, Humanity Map, Science & Technology, Culture Map, Space Map. Выстроил логику навигации и пользовательский путь от главного меню до детальной страницы события. Для каждого раздела прописал типы контента и сценарии взаимодействия.

Главная страница

Построена как горизонтальная карусель из полноэкранных слайдов — по одному на каждый тематический раздел. Каждый слайд имеет собственную атмосферу: историческая живопись для Historical Map, пейзаж для Humanity Map, цифровая абстракция с кодом и силуэтом фигуры для Science & Technology. Заголовок раздела и короткий тезис ("History likes to repeat itself. Study the past to see the future!") задают тон ещё до перехода внутрь. Активный слайд занимает центральную часть экрана, соседние разделы видны по краям и подсказывают, что можно скроллить дальше — это сразу объясняет логику навигации без необходимости в подсказках или онбординге.

Главное меню

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

Мозаичная сетка событий

Альтернативный вариант отображения таймлайна — плотная мозаичная сетка из карточек разного размера, где каждая ячейка соответствует историческому событию: от появления первых гоминидов до строительства пирамиды Хеопса. Каждая карточка содержит иллюстрацию, датировку в правом верхнем углу и заголовок события. Разноразмерные блоки создают визуальный ритм и позволяют выделить более значимые события увеличенным размером ячейки (например, "Первая династия правителей Древнего Египта" или "Пирамида Хеопса"). Такой формат работает как визуальная карта эпохи, по которой можно "бродить" взглядом, не привязываясь к строгой хронологической линии.

Таймлайн

Горизонтальная хронологическая шкала в нижней части экрана служит главным навигатором по эпохам. Карточки событий расположены в скроллируемой сетке: у каждой — историческая иллюстрация, датировка, географический регион и стрелка перехода. При наведении активная карточка поднимается и выделяется, остальные уходят на второй план. Разработано несколько вариантов таймлайна под разные разделы — History of Humanity и Culture.

Страница исторического события

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

Страница культурного события

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

Итоги проекта

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