Сделал дизайн-концепт и продумал взаимодействия с содержанием.

Задача

Объединить выразительную верстку с читаемостью и продуманными взаимодействиями.

Посадочная каталога

Размер карточек меняется в зависимости от важности содержания: крупные — новости, средние — публикации, малые — товары.

Изменение размеров создаёт ощущение глубины, побуждая продолжать прокрутку.

Принцип работы горизонтальной прокрутки

Контейнер прокручивается в сторону движения курсора на пройденное мышкой расстояние.

Когда курсор попадает в область контейнера прокрутки, запускается отслеживание его координат. Точка входа по X фиксируется в переменную mouse_x_start и становится точкой отсчёта. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в mouse_x_present.

В ответ на изменение положения курсора `Content Container` прокручивается с помощью «scroll to» по формуле:

round(
max( /* Округляет число для плавной прокрутки */
0,
min( /* Задаёт границу прокрутки вправо равную максимально возможному значению прокрутки */
`Content`.width - `Content Container`.width,
scroll_offset_start
+ (
mouse_x_present
- mouse_x_start
)
* 2 /* Дистанция, пройденная курсором, с множителем для ускорения прокрутки */
)
)
)

Прокрутка за пределами экрана

Не смотря на то, что курсор упёрся в границу экрана, мышь продолжает движение, а следовательно продолжается и прокрутка контента.

После движения, например вправо, при возврате мыши с отрывом от стола на 1—2 мм сенсор перестаёт считывать её положение. Курсор остаётся зафиксированным у границы, а следующее движение в ту же сторону продолжает прокрутку без рывков.

Зафиксированный у края курсор легко повести в обратную сторону для изменения направления прокрутки.

Для прокрутки также можно использовать тачпад или мышку с боковым колесом.

Категория с группировкой по тегам

Огранчиение горизонтальной прокрутки при быстром вериткальном движении курсора

Пользователь может вести курсор до нужной секции по вертикали, а затем диагональным движением начать её прокрутку.

Если пересечь контейнер прокрутки быстрым вертикальным движением курсора, то он останется в состоянии покоя.

Точка входа по X и Y фиксируются в переменные mouse_x_start и mouse_y_start. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в переменные mouse_x_present и mouse_y_present.

Для включений горизонтальной прокрутки проверются условия:

№1

abs(
  mouse_x_present - mouse_x_start
)
> 16 px /* Смещение курсора по X в диапазоне 0–16 px считается случайным, чтобы избежать дёргания контейнера */

№2

abs(
  mouse_x_present - mouse_x_start
) /* Путь, пройденный курсором по горизонтали */
≥
abs(
  mouse_y_present - mouse_y_start
) /* Путь, пройденный курсором по вертикали */

Навигация между тегами

Поиск

Если результатов поиска > 10, они группируются по тегам, как на страницах News, Publisher и Shop:

Если результатов поиска ≤ 10, они отображаются в одной горизонтальной строке:

Детальная страница

Галерея с вертикальной прокруткой

Модуль просмотра подстраивается под соотношения 21:9, 2:1, 16:9, 4:3, 1:1, 3:4:

Экспрессивная вёрстка

Создал выразительную и структурированную вёрстку, продумал взаимодействия с ней. Пользователь вовлекается в содержание, а бизнес поддерживает сайт без привлечения дизайнера.

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

Макеты оживлял в ProtoPie. Зондируя идею, учёл краевые сценарии и отсеял плохие решения до разработки. И да, использовал ИИ — процесс похож на вайбкодинг, но код провалидировать я не могу, а вот логику внутри ProtoPie — могу.

© Изображения и текстовые материалы, использованные в концепте, принадлежат Slanted Publishers и взяты с https://www.slanted.de/.

© Семейство шрифтов: Pragmatica Next by Paratype https://www.paratype.ru/.

Электропочта • Телеграм