◈
Product slider
Six desserts rotate on the first screen with large split names; arrows, swipe or keyboard move between them.
Client
Sütlühanesutluhane.ednadynamics.com
01 - Live Mockup · Desktop
6 screens. One design language.
Pick a page from the list on the left, then scroll the design yourself on the MacBook screen on the right. You’re in full control.
Scroll to explore
02 - Live Mockup · Mobile
5 screens, in your pocket.
5 mobile screens, designed for 360-428 px viewports. You can scroll inside the centered phone yourself; click the side phones to bring them to the center.
01 · Brief
A shop window for a neighbourhood dessert maker.
Sütlühane, on Kurtuluş Avenue in Şişli, Istanbul, makes milk desserts such as sütlaç, kazandibi and keşkül, as well as trileçe, eclairs, profiteroles and cheesecake. Orders come in by phone; takeaway and delivery are available.
The need
Someone deciding on dessert first checks what there is, the price and where the shop is. The business had unbranded product photos that needed to come together in one shop-window style.
Goal
Show the menu with photos and prices on one page and connect orders to phone and WhatsApp by the shortest route.
Approach
We moved the product photos onto a white studio backdrop with AI and cut them out; the shop itself became a 3D miniature model in the brand purple.
Solution
A large slider rotating six desserts, a 19-item priced menu with a viewer that moves through the whole menu, a tap-to-call number, WhatsApp with a ready message, a map that loads on request and an Instagram strip.
Outcome
Ready at the preview address sutluhane.ednadynamics.com. The move to its own domain will follow once the business details for the legal pages are complete.
0
Menu items
In 3 categories, with prices
0
Photos
Menu, hero and Instagram
0
Studio images
Moved onto white with AI
0
Instagram posts
Picked from the account and linked
02 · What we built
6 building blocks, one site.
A single-page site for a milk dessert shop in Şişli Kurtuluş that shows the menu with prices and routes orders to the phone and WhatsApp.
03
03 · Method & stack
Which method, which tools?
Left: how we ran the project. Right: the technologies read from the project’s own dependency list.
- /01Discovery and menu structureStrategy
- /02Interface design on canvasUI
- /03AI imagery and 3D modelImagery
- /04Mobile-first developmentFrontend
- /05Preview launchLaunch
- /06Next.jsFramework
- /07ReactUI
- /08TypeScriptLanguage
- /09Tailwind CSSStyling
SÜTLÜHANE
The next project could be yours
Let’s build a site like this for your brand.
Your sector, catalog and customers are different; the method stays the same. Write to us and let’s talk about your project.