UXPUB

UXPUB - спільнота з 4,056 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Проєктування веб-портфоліо. Каталог
Антон Солодовников
Антон Солодовников

Опубліковано • Оновлено

Проєктування веб-портфоліо. Каталог

В минулій статті розглядалась домашня сторінка, на цей раз мова буде йти про серце веб-портфоліо — каталог робіт.


План 📝

Як завжди починаю з плану, завдяки якому ми пройдемося по всьому життєвому циклу створення каталогу.

  1. Структура сторінки
  2. Вкладка з фільтрами та пошуком
  3. Блок карток
  4. Анатомія картки
  5. Скелетон лоадер

Вступ 📖

Каталог — це сторінка, на якій будуть відображатися товари (в моєму випадку, мої роботи). Головною метою є зменшення шляху знаходження цілі юзера (певного товару) та оптимізація роботи з великим списком інформації.


Структура 🏗️

Візуально каталог можна поділити на дві частини:

  • вкладка з фільтрами
  • список товарів

Structure


Вкладка навігації в каталозі 🧭

Для чого нам потрібна вкладка з фільтрами? Список товарів може бути надзвичайно великим (подивіться на інтернет-магазини). Щоб спростити сприйняття цього списку, ми використовуємо фільтри, пошук та пагінацію.

Грубо кажучи ця вкладка є панеллю керуванням списку.

Фільтр
Фільтри будуть виконані в формі dropdown списків. Детальніше про ці поля, ви можете прочитати в цій статті.

Пошук
Задля покращення взаємодії користувача з полем пошуку, гарною практикою буде зробити викидний список з варіантами автодоповнення. Пошук буде охоплювати як заголовки, так і теги. Рекомендую прочитати такі статті: автозаповнення, UX пошуку

Пагінація
Переді мною стояв вибір: пагінація чи "infinite scroll". Обдумавши плюси та мінуси, я зупинився на пагінації. З недоліків нескінченної прокрутки, можу виділити такі: нерелевантність скролл-бару, відсутність футеру. Читайте цю статтю та обирайте те, що вам підійде.

Filters tab


Список товарів 📄

Список товарів буде у вигляді карток, на одній сторінці будуть відображатися лише 6 карток. Для навігації між сторінками ми будемо використовувати пагінацію.

Card List


Анатомія картки 🧠

Картка — це візуалізація певного товару, в моєму випадку це роботи з дизайну та вебу (у вигляді статей). Мета картки - презентувати в стислому форматі роботу автора (статтю).

Картка містить:

  • прев'ю статті (картинка)
  • заголовок
  • теги
  • частину тексту
  • дату створення
  • кнопку для переходу на роботу

Card anatomy


Скелетон лоадер 💀

Деякі блоки інтерфейсу завантажуються, тільки тоді, коли з сервера приходить інформація. Іншими словами, вебсайт чекає деякий час, а потім вже відображає дані. В цей проміжок часу, юзер побачить пустий екран, замість очікуваного контенту. Нам треба згладити цей перехід, тому звертаємо увагу на "Skeleton loader" (більше про це).

Skeleton loader


Підсумок 🧮

Підсумовуючи, каталог — найважливіше місце у веб-портфоліо, сторінка повинна бути зручною для користування та легкою для сприйняття.

Catalog page

Бажаю вам гарного дня 👋

Обговорення (0)