Ссылка на сайт

Контекст

Ко мне обратились за созданием многостраничного сайта для нового бистро Almi в Берлине.

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

UX

После детального брифинга заказчиков, я провела анализ конкурентов и ниши в целом. Особое внимание уделила сайтам ресторанов с диджитал меню. Некоторые инсайты, которые я получила в результате исследования:

1. На сайтах заведений, в которых достаточно большой ассортимент, в меню было очень много позиций, но навигация внутри либо была непонятной, либо отсутствовала вовсе. В результате, пользователю сложно ориентироваться в таком количестве информации и найти подходящую для себя позицию.
2. На большинстве сайтов меню представлено в формате A4 PDF, что не всегда удобно. Чтобы текст в файле стал читабельным, пользователю необходимо увеличивать изображение и скроллить внутри него, что делает поиск нужной позиции сложным.

Затем, мы приступили к проработке детального прототипа.

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

UI

Следующим и завершающим этапом стало создание макетов десктопной и мобильной версии. Всего получилось 5 страниц: главная, меню с разделами, о нас, контакты и страница 404. Также, до перехода к веб-разработке, я проработала легкую анимацию элементов.

Главная страница

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

Меню

В ходе работы над макетами, мы пришли к новой форме верхнеуровневой навигации — две основные вкладки:

1. Бистро
2. Дропдаун бар с подразделами

Тем самым, мы облегчили интерфейс и сделали навигацию более компактной и понятной. Навигация нижнего уровня с подразделами (видами напитков и блюд) мы сделали с применением горизонтального скролла. Важная деталь: нижняя навигация скроллится синхронно с классическим скроллом страницы вниз. Так же работает и в обратную сторону. Это сделано для упрощения понимания пользователя о том, в каком разделе он находится. Пункты нижнего раздела кликабельны, так что пользователь может перемещаться внутри страницы альтеранативными путями.