Личный проект
Archi[ŭ]na
Прототипирование / Макет
Figma
scroll
Проектирование интерфейса сайта онлайн архива "Archi[ŭ]na".
Пайплайн работы:
- Разработка целей и задач сайта.
- Анализ целевой аудитории.
- Начальное проектирование.
- Юзабилити-тестирование.
- Разработка логотипа.
- Дизайн-макеты, подбор фирменных цветов и шрифтов.
- Создание адаптива.
Цель интернет-архива печатных изданий состоит в сохранении и
предоставлении доступа к историческим и культурным материалам, которые были опубликованы в
печатном виде. Это позволяет сохранить нашу культурную и научную наследство и обеспечить доступ
к нему для будущих поколений. Сайт предоставляет возможность не только просматривать базу
изданий, которой уже обладает сайт, но и может загружать свои документы.
Задачи интернет-архива печатных изданий могут включать:
- Содержание базы данных документов, фотографий и других изданий;
- Предоставление бесплатного доступа к материалам для всех пользователей;
- Возможность скачивания и просмотра материалов;
- Возможность публикации личных материалов;
- Организация и каталогизация материалов для обеспечения легкого поиска и использования;
- Использование новых технологий и методов для улучшения сохранения и доступа к
материалам;
- Удобный и современный интерфейс.
Целевая аудитория
Целевая аудитория сайта-архива печатных изданий может включать широкий
круг пользователей, начиная от школьников, заканчивая профессорами.
Функционал
Исходя из целей и задач пользователей, сценариев их действий на сайте
необходимо составить перечень функций, которые необходимо реализовать:
- просмотр списка всех публикаций;
- переход к статьям категории или коллекции
- поиск публикации по названию и другим параметрам;
- просмотр сведений об архиве;
- оформление подписки по электронной почте;
- возможность загружать свои публикации на сайт;
Создание прототипов
Создание прототипов позволяет протестировать пользовательский опыт,
сформировать наглядную и упрощённую схему новостного сайта, проработать дизайн, увлечь других
людей вашими идеями, проверить техническую реализуемость. Прототипы страниц представлены на
рисунке.
Юзабилити-тестирование
На данном этапе прототипы были протестированы прототипы, чтобы выявить
ошибки, путем создания пользовательских сценариев и тестированием респондентов.
Pазработка логотипа
В ходе разработки логотипа для онлайн-архива печатных изданий были
проанализированы логотипы сайтов-аналогов, после чего был создан комбинированный логотип текст +
знак. Сам логотип и гайдлайн приведены на рисунке.
Дизайн-макеты, подбор фирменных цветов и шрифтов
При разработке прототипа сайта для удобства была создана 12-колоночная
сетка. Такая сетка обеспечит удобство разработки дизайна макетов для мобильной версии. Для
десктопа сетка состоит из 12 колонок. Для мобильного устройства 4. Ширина колонки составляет
100 пикселей. Расстояние между колонками – 50 пикселей. Сама сетка создаётся по центру
фрейма.
Выбор цветовой палитры сайта обоснован хорошим сочетанием цветов между собой, высокой
контрастностью составляющих, а так же ассоциацией с ретро-стилистикой, которая подходит
сайту-архиву.
В качестве основных шрифтов были выбраны Object Sans – для основного текста и заголовков 2
уровня, Piazzolla – для заголовков первого уровня.
Создание адаптива
Макеты мобильной версии сайта приведены на рисунке.
Таким образом, результатом работы является адаптивный сайт архива печатных изданий. В работу
входила разработка прототипов, дизайна, создание мобильной версии сайта, а также проведение
необходимых тестирований.