Проекты
Переход в проекты осуществляется по двум сценариям. Первый, через меню. Пользователь кликает на иконку меню и попадает на страницу развернутого меню. Выбирает пункт "Projects".
Далее появляется страница с полным списком проектов. Я решила что такой вид представления списком наиболее оптимален так как проекты будут пополняться. При наведении на проект будет появляться картинка-превью (показано в анимационном видео). Также в нижнем левом углу композиционно добавила элемент с обозначением в каком разделе мы находимся и количественное обозначение (которое также будет на страницах награды, публикации, новости), то есть это цифра. Данный элемент поддерживает сетку и сбалансирует пространство экрана.
Далее после клика, пользователь переходит на выбранный проект. Страница проекта строится следующим образом: это часть с названием проекта, краткими обозначениями год и локация, кнопка Инфо (она раскрывает текстовую информацию о проекте), если пользователь захочет ознакомится не только с фотографиями, но и с описанием. И номер проекта в списке, опять же цифра будет поддерживать визуальное решение на предыдущей странице проекты. Вторая часть зона фото, пользователь может как скролить (горизонтально) так и переключать при помощи кнопки Next/Prev и фото будут прокручиваться.
И также остается кастомизированный курсор и применяются зоны где курсор меняется в зависимости от зоны предыдущий/следующий и зона фото (курсор меняется на плюс, потому что есть возможность развернуть фото и перейти в галерею). Прогресс бар внизу (черная полоса загрузки) рассчитывается на весь проект показывает прогресс просмотра проекта, когда проект просмотрен, загружается следующий.
Когда курсор над фотографией (в зоне по середине), меняется на плюс, при клике осуществляется переход на полноэкранный просмотр фото. При этом на странице есть название проекта, цифры и кнопка закрыть.
Страница инфо (описание проекта), открывается поверх зоны фото.
Как только пользователь доходит до конца проекта, подгружается название следующего (таким образом можно плавно осуществлять навигацию по кейсам) не переходя к списку проектов. Технически можно перейти далее по скроллу или нажав на название следующего кейса.
Второй сценарий перехода, с главной страницы. Пользователь кликает при курсоре View project и попадает на страницу проекта. Далее взаимодействие то же.
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website