Для проекта флористики сначала были спроектированы главная страница, каталог и карточка товара. Эти три экрана стали основой дальнейшего дизайна и разработки интернет-магазина.
Каталог
Карточка товара
Проект начинался с брифа. В исходных данных были контактная информация, предполагаемые блоки сайта, конкуренты и преимущества компании.
После этого стало возможно не рисовать интерфейс вслепую, а сначала определить, какие ключевые страницы нужны магазину и как пользователь будет двигаться между ними.
Набор необходимых блоков
Основные конкуренты
Преимущества компании
Три страницы, которые задают основу интернет-магазина
Для согласования были разработаны три ключевых типа страниц. Остальные типовые страницы проекта предполагалось формировать уже на базе CMS и утверждённой структуры.
Главная
Первое знакомство с магазином и переход к ассортименту.
Каталог
Структура ассортимента и работа с группами товаров.
Карточка товара
Экран конкретного товара и ключевая информация для выбора.
Прототип главной страницы магазина цветов
На главной странице были собраны основные смысловые зоны будущего магазина. Это первый экран проекта, поэтому здесь формируется логика знакомства пользователя с ассортиментом и брендом.
Расположение блоков, структура страницы и базовые пользовательские переходы.
Главная страница – прототип
Прототип каталога товаров
Вторая разработанная страница – каталог. Здесь нужно было учесть специфику ассортимента и показать принцип, по которому посетитель будет переходить от общего списка товаров к конкретным позициям.
Прототип карточки товара
Третьей ключевой страницей стала карточка товара. Здесь структура уже работает не с ассортиментом в целом, а с конкретной позицией.
В прототипе были отражены основные функциональные элементы, необходимые для подачи информации о товаре и дальнейшей разработки интерфейса.
Прототип был только первым этапом
После проектирования этих страниц работа над флористическим интернет-магазином продолжилась: появился визуальный дизайн, каталог, карточка товара, адаптивная верстка и дальнейшая реализация сайта.
Что показывает этот кейс
Перед визуальным оформлением были определены ключевые страницы магазина.
Главная, каталог и карточка товара проектировались как разные сценарии.
Этот этап стал отправной точкой большого проекта флористического магазина.
Другие кейсы прототипирования
Посмотреть кейс →
Посмотреть кейс →
Планируете интернет-магазин или сайт с каталогом?
Можно начать с ключевых страниц и пользовательских сценариев, чтобы ещё до дизайна увидеть структуру будущего проекта.