Overview
Ling Nan Restaurant is a lifestyle-focused web design project created as part of Brief 03: Creating Websites. The prototype was designed in Adobe XD and built as a four-page website Home, Menu, About, and Contact—centred on the theme of food, culture, and community.
The website was developed to capture the authentic, welcoming atmosphere of the restaurant while offering users practical access to key information such as menu offerings, opening hours, and contact details. The design integrates modern web practices including interactive elements, high-quality imagery, and responsive layouts to ensure a seamless experience across devices.
Project aim
The aim of this project was to design and prototype a high-fidelity, four-page website for Ling Nan Restaurant, focusing on an engaging and modern user experience. The website communicates Ling Nan’s brand identity, highlights its authentic cuisine, and provides visitors with key information such as the menu, story, and contact details.
Competitior Analysis
Chin Chin (Melbourne): Emphasises bold visuals and minimal text to highlight modern dining.
Flower Drum (Melbourne): Uses rich colour tones and elegant typography to express tradition and fine dining.
Mr. Wong (Sydney): Combines immersive photography with seamless scrolling to evoke atmosphere and style.
Research Goals
Identify best practices in layout, colour usage, and visual storytelling for restaurant websites.
Explore how competitors structure their navigation and prioritise information.
Analyse mobile responsiveness and accessibility features across different sites.
Understand how tone, imagery, and typography contribute to perceived brand quality.
Key Features
A visually cohesive four-page structure that aligns with Ling Nan’s brand tone and aesthetic.
Adaptive navigation menus optimised for both desktop and mobile devices.
Interactive components such as hover effects and a contact form.
High-quality licensed images and colour palette designed to evoke warmth, authenticity, and culture.
Consistent typography and hierarchy that enhance readability and user flow.
Reflection
Designing the Ling Nan Restaurant website strengthened my understanding of visual hierarchy, responsive layout design, and accessibility in digital interfaces. Developing both desktop and mobile versions challenged me to think critically about how users interact with content on different screen sizes and how design elements must adapt for usability without losing visual appeal.
The process also improved my technical confidence in Adobe XD, particularly in creating interactive prototypes that simulate real website functionality. Iterations on spacing, alignment, and colour balance helped refine the overall layout, resulting in a polished, professional design that effectively represents the restaurant’s identity.
Key Takeaways
Learned how to apply responsive design principles effectively across desktop and mobile views.
Strengthened skills in typography, colour theory, and accessibility for web environments.
Improved understanding of user experience design, particularly in creating intuitive navigation.
Enhanced proficiency in Adobe XD, using interactive elements like buttons, hover effects, and forms.
Recognised the importance of consistency and visual hierarchy in building professional, engaging web layouts.