03 / UX/UI / Website / Branding
Brick Oven Pizza
Food-led hierarchy. A direct route to the menu.
Explore the website ↗
The task
For this self-initiated project, a restaurant visitor needs to find the food, compare menu categories and reach contact details without a complicated browsing journey.
My contribution
I designed the restaurant website’s visual direction, responsive layout and website implementation. Food imagery, a focused menu and small interaction details carry the experience.
The approach
A food-led one-page layout with anchored menu navigation, category tabs and consistent item treatments.
What I built
A responsive restaurant website with a direct menu journey and subtle interaction feedback.
Visual System
Color
Typeface
Roboto
AaBbCc Gg Qq 0123456789
Classic, trustworthy, highly legible
Actions & patterns
Rounded action with an offset shadow and 0.35-second color feedback.
Explore the actual work
Explore the website.
Move from the food-led introduction to the menu and contact sections. Subtle action feedback supports a direct, focused restaurant experience.
01
The task & my contribution
My contribution
I designed the restaurant website’s visual direction, responsive layout and website implementation. Food imagery, a focused menu and small interaction details carry the experience.
The task
Help a visitor move from an appetite-building introduction to pizza categories and contact details on one page.
02
Visual & interaction decisions
Food first, menu next
The introduction gives the food the lead. View Menu moves directly to the menu instead of asking visitors to navigate a separate page.
Categories that scan
Classic and premium pizza, pasta, wings and bread have distinct headings. Repeated item treatments make different categories easier to compare.
Small feedback, clear action
Navigation and menu-button color transitions use 0.35-second timing. The motion stays close to the action rather than competing with the food.
03
Functional & interaction QA
Journey review
The menu action leads directly to the food categories. Visitors can move between the introduction, menu, about and contact sections without leaving the page.
04
Reusable systems
Menu pattern
Category headings, item descriptions and action styles repeat across the menu. Shared type and spacing keep the catalog recognizable as content changes.
05
Design through implementation
One-page navigation
I connected the navigation to menu, about and contact sections so visitors can explore the restaurant without changing pages. Category tabs organize the menu within that flow.
Responsive food presentation
The shared layout keeps menu cards, food photography and action buttons readable as the page moves from desktop columns to a mobile stack. Hover details reinforce the restaurant’s visual identity.
06
Accessibility
Clear reading and interaction
Section headings, text-based menu items and descriptive navigation keep the core restaurant information available alongside the imagery.
07
The finished work
Built
A responsive restaurant website with a direct menu journey and subtle interaction feedback.
Delivered work
A direct introduction-to-menu journey
