YENNI
Все проекты

04 / 05

KŌIKEI

Категория
Еда и гостеприимство · Интерактивное меню
Язык сайта
Английский
Статус
Независимый концептуальный проект

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

Открыть сайт вживую
Fig. 01Главный экран — «A little ocean. A lot of flavour.»

Вопрос

Что будет, если позволить еде выходить за сетку?

Идея

Вымышленный современный суши-бар. Название означает «рыбный пейзаж»: глянцевый лосось, тёмно-красный тунец, тёплый рис и хрустящий нори, сложенные как ландшафт.

Визуальный язык

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

01

Тарелка, собранная прокруткой

Семь кусочков собираются на одной доске, раскладываются в подписанный «актёрский состав» и наконец приближаются к одному кусочку — три состояния одной закреплённой сцены.

1 / 3

Fig. 03Композиция, состояние 1 — семь кусочков на одной доске

2 / 3

Fig. 04Композиция, состояние 2 — тарелка разложена и подписана

3 / 3

Fig. 05Композиция, состояние 3 — крупный план, «Made to disappear»

02

Меню, которым действительно пользуются

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

Fig. 06Меню — категории и первое блюдо
Fig. 07Меню — блюда с ценами и управлением количеством

03

Четыре фирменных блюда

Каждое фирменное блюдо получает собственное цветовое поле, сверхкрупный шрифт и пометки, указывающие на саму еду.

Fig. 08Фирменное 01 — Kōikei Salmon с пометками
Fig. 09Фирменное 02 — Pink Tide
Fig. 10Фирменное 03 — Midnight Tuna
Fig. 11Фирменное 04 — Kōikei Selection

04

Тот же аппетит на телефоне

На мобильном блюда так же выходят за рамку, а фильтры категорий становятся горизонтальной лентой, которую можно листать.

Fig. 12Мобильная версия — главный экран
Fig. 13Мобильная версия — меню
Fig. 14Мобильная версия — фирменное блюдо

05

Ремесло и бар

Раздел о ремесле проводит через семь движений в горизонтальной последовательности; бар описан через материалы — тёмное дерево, глазурованную керамику, холодное стекло.

Fig. 15Ремесло — скручивание и формовка, два из семи движений
Fig. 16Бар — материалы и атмосфера

06

Подпись

Логотип латиницей и по-японски, а полный список авторов фото — прямо в футере.

Fig. 17Футер — логотип и авторы фото

Детали дизайна

  1. 01Вырезанные блюда плывут между секциями и ломают сетку
  2. 02Японский и латинский акцидентные шрифты рядом
  3. 03Тёплая, аппетитная палитра с чернильно-тёмными контрастными блоками

Взаимодействие

  1. 01Фильтры категорий и управление количеством
  2. 02Панель выбора, которая не принимает заказов и платежей
  3. 03На сенсорных экранах закреплённые сцены переходят в обычную прокрутку

Технологии

  • React 19
  • TypeScript
  • Vite
  • CSS

Авторы изображений

Экраны KŌIKEI выше содержат фотографии блюд с Wikimedia Commons. Изображения уменьшены и обрезаны, у вырезанных блюд удалён фон. Изменённые версии сохраняют лицензию каждого оригинала.

Показать всех авторов (31)
  1. Nigiri Sushi (26478725732).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  2. Sushi mit Lachs (26545054116).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  3. Sushi vegetarisch (25966206524).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  4. Maki Sushi (26478758172).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  5. Sushi (14930650292).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  6. Nigiri Sushi (26478732232).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  7. Nigiri Sushi (26505096851).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  8. Sashimi of São Paulo.jpg — Wilfredor, CC BY-SA 4.0 (изменено: resized, cropped)
  9. Sushi platter.jpg — chidorian from Japan, CC BY-SA 2.0 (изменено: resized, cropped)
  10. Colorful sushi lunch.jpg — Robbie Vize, CC BY 3.0 (изменено: resized, cropped)
  11. Maguro Otoro (fatty tuna) Nigiri.jpg — Zheng Zhou, CC BY-SA 4.0 (изменено: resized, cropped)
  12. Two types of Tuna nigiri, hakami and chutoro, at Uchi Houston location in July 2026.jpg — Gatorfan252525, CC BY-SA 4.0 (изменено: background removed, cropped)
  13. Kasugodai (Baby red snapper) (16220715963).jpg — City Foodsters, CC BY 2.0 (изменено: resized, cropped)
  14. Sushi searing.jpg — Original uploader was Jason Ruck at en.wikipedia, CC BY-SA 3.0 (изменено: resized, cropped)
  15. Roll sushi making.jpg — bandita, CC BY-SA 2.0 (изменено: resized, cropped)
  16. SushiPreparation-10.jpg — Guy Kawasaki, CC BY-SA 4.0 (изменено: resized, cropped)
  17. P. binghamiae,Haba-nori,Katsuura-city,Japan.JPG — katorisi, CC BY-SA 3.0 (изменено: resized, cropped)
  18. Rice, Sushi Bar Montparnasse, Paris 001.jpg — Guilhem Vellut from Paris, France, CC BY 2.0 (изменено: resized, cropped)
  19. Maguro - Shira Nui AUD4.50 each - photo by David (4760493730).jpg — Alpha from Melbourne, Australia, CC BY-SA 2.0 (изменено: background removed, cropped)
  20. Panfried Salmon Nigiri - Shira Nui AUD4.50 each (4759206623).jpg — Alpha from Melbourne, Australia, CC BY-SA 2.0 (изменено: resized, cropped)
  21. Salmon fillet.JPG — BrokenSphere, CC BY-SA 3.0 (изменено: resized, cropped)
  22. Edamame (5700539494).jpg — cyclonebill from Copenhagen, Denmark, CC BY-SA 2.0 (изменено: resized, cropped)
  23. Miso Soup 001.jpg — Ocdp, CC0 (изменено: background removed, cropped)
  24. Matcha (6328677556).jpg — cyclonebill from Copenhagen, Denmark, CC BY-SA 2.0 (изменено: background removed, cropped)
  25. Unfiltered Sake at Gyu-Kaku.jpg — Marshall Astor from San Pedro, United States, CC BY-SA 2.0 (изменено: resized, cropped)
  26. Eingelegter Ingwer (25966203794).jpg — Tim Reckmann from Hamm, Deutschland, CC BY 2.0 (изменено: background removed, cropped)
  27. Wasabi 002.jpg — https://publicdomainq.net/wasabi-japanese-horseradish-0000353/, CC0 (изменено: background removed, cropped)
  28. Day 051 - Photo365 - Fresh (15973465233).jpg — UnknownNet Photography, CC BY-SA 2.0 (изменено: background removed, cropped)
  29. Avocado Hass - single and halved.jpg — Ivar Leidus, CC BY-SA 4.0 (изменено: background removed, cropped)
  30. Salmon caviar on a spoon.jpg — TypeZero, CC BY-SA 4.0 (изменено: resized, cropped)
  31. 氷見 2017 (36947113335).jpg — akiko yanagawa, CC BY-SA 2.0 (изменено: resized, cropped)
Открыть сайт вживую
Все проекты
Следующий проект — 05 / 05NŌCTILМузыка · Аудиовизуальный опыт← Предыдущий: MONOLITH

1 / 1