Archiuna UX UI
Проекты Галерея
lazareva liza 2023
Личный проект

Archi[ŭ]na

Прототипирование / Макет

Figma

scroll

Проектирование интерфейса сайта онлайн архива "Archi[ŭ]na".

Пайплайн работы:
  1. Разработка целей и задач сайта.
  2. Анализ целевой аудитории.
  3. Начальное проектирование.
  4. Юзабилити-тестирование.
  5. Разработка логотипа.
  6. Дизайн-макеты, подбор фирменных цветов и шрифтов.
  7. Создание адаптива.

Цель интернет-архива печатных изданий состоит в сохранении и предоставлении доступа к историческим и культурным материалам, которые были опубликованы в печатном виде. Это позволяет сохранить нашу культурную и научную наследство и обеспечить доступ к нему для будущих поколений. Сайт предоставляет возможность не только просматривать базу изданий, которой уже обладает сайт, но и может загружать свои документы.

Задачи интернет-архива печатных изданий могут включать:

  • Содержание базы данных документов, фотографий и других изданий;
  • Предоставление бесплатного доступа к материалам для всех пользователей;
  • Возможность скачивания и просмотра материалов;
  • Возможность публикации личных материалов;
  • Организация и каталогизация материалов для обеспечения легкого поиска и использования;
  • Использование новых технологий и методов для улучшения сохранения и доступа к материалам;
  • Удобный и современный интерфейс.
Макет страницы статьи

Целевая аудитория

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

Функционал

Исходя из целей и задач пользователей, сценариев их действий на сайте необходимо составить перечень функций, которые необходимо реализовать:
  1. просмотр списка всех публикаций;
  2. переход к статьям категории или коллекции
  3. поиск публикации по названию и другим параметрам;
  4. просмотр сведений об архиве;
  5. оформление подписки по электронной почте;
  6. возможность загружать свои публикации на сайт;
Макет страницы поиска

Создание прототипов

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

Юзабилити-тестирование

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

Pазработка логотипа

В ходе разработки логотипа для онлайн-архива печатных изданий были проанализированы логотипы сайтов-аналогов, после чего был создан комбинированный логотип текст + знак. Сам логотип и гайдлайн приведены на рисунке.
Гайдлайн логотипа

Дизайн-макеты, подбор фирменных цветов и шрифтов

При разработке прототипа сайта для удобства была создана 12-колоночная сетка. Такая сетка обеспечит удобство разработки дизайна макетов для мобильной версии. Для десктопа сетка состоит из 12 колонок. Для мобильного устройства 4. Ширина колонки составляет 100 пикселей. Расстояние между колонками – 50 пикселей. Сама сетка создаётся по центру фрейма.
Выбор цветовой палитры сайта обоснован хорошим сочетанием цветов между собой, высокой контрастностью составляющих, а так же ассоциацией с ретро-стилистикой, которая подходит сайту-архиву.
В качестве основных шрифтов были выбраны Object Sans – для основного текста и заголовков 2 уровня, Piazzolla – для заголовков первого уровня.
Дизайн-макеты сайта

Создание адаптива

Макеты мобильной версии сайта приведены на рисунке.
Таким образом, результатом работы является адаптивный сайт архива печатных изданий. В работу входила разработка прототипов, дизайна, создание мобильной версии сайта, а также проведение необходимых тестирований.
Макеты адаптивной версии
Смотреть также
Галерея →