Ура! Повара

Ура! Повара

UX/UI дизайн авторского кулинарного портала

200

часов работы

26

экранов дизайна

Дата публикации

20.11.2018

Адрес сайта

ura-povara.ru

О клиенте

Интернет-издательство «Вебополис Медиа», которое занимаемся созданием и развитием собственных интернет-медиа, нишевых информационных порталов.

Mobile first

Согласно данным Liveinternet.ru, в Рунете более 70% трафика приходится на мобильные операционные системы iOS и Android. Кроме того, Google и Яндекс официально заявили, что их поисковые роботы лучше индексируют сайты с мобильными версиями. Очевидно, что такое количество потенциальных посетителей нельзя игнорировать.

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

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

Общий вид сайта

За основу взяли простую и жизнерадостную красно-белую палитру фирменного стиля. Вместо традиционного слайдера вывели модульные мини-карточки на главном экране, которые кратко сообщают самое важное о рецептах. Для упрощения поиска они разделены на категории, каждая из которых сопровождается понятной пиктограммой. Умный поиск существенно упрощает навигацию, статьи индексируются полностью, а не только заголовки. Результаты поиска выводятся на весь экран и не ограничены короткой поисковой строкой. Интерфейс спроектирован таким образом, что открывать “гамбургер-меню” может совсем не придется, так как все на виду.

В заголовках H1 мы использовали “эмодзи” — это мощный графический инструмент выразительности и простоты считывания информации. С их помощью мы сделали акценты на ключевых моментах, которые есть на сайте. Для того, чтобы сконцентрировать внимание пользователя на ассоциациях к основной мысли или объекту проекта, а так же добавить нужную атмосферу мы использовали стоковые иллюстрации с хозяюшкой, немного кастомизировав их, добавив милого котика :)

Карточка рецепта

Здесь все нацелено исключительно на качественную и эффектную демонстрацию контента и удобный шеринг в соцсетях. На всех страницах сделали аккуратный прогресс-бар, благодаря которому пользователь наглядно видит сколько осталось до конца статьи. Смело назвать незаурядным можно крутое UX решение — возможность изменять единицу измерения ингредиентов “на лету”, что избавляет от необходимости взвешивать, к примеру, головку чеснока, чтобы понять сколько его потребуется.

Смотреть еще

Начало работы
Для более четкого определения целей, стоящих перед будущим проектом, необходимо заполнить анкету. Это поможет нам увидеть картину проекта, оперативно определить цены и сроки реализации.
Погнали!