PAMANA UI/UX Design
PAMANA.
[pa-ma-na] or /pa-ma-na/
translates to ‘inheritance’ in English. Here at Pamana restaurant, we aim to continue the legacy of Filipino cooking and bring authentic Filipino flavours from our tables to your palates.
We invite families and friends to come together and experience the taste of home and the hospitality that we Filipinos have to offer!
Tuloy po kayo! (Please come in!)
[pa-ma-na] or /pa-ma-na/
translates to ‘inheritance’ in English. Here at Pamana restaurant, we aim to continue the legacy of Filipino cooking and bring authentic Filipino flavours from our tables to your palates.
We invite families and friends to come together and experience the taste of home and the hospitality that we Filipinos have to offer!
Tuloy po kayo! (Please come in!)
Design Process
Sitemap of the simplistic website
Design inspirations
UI design library and design choices justification
Typefaces for website menu buttons (header) and body text respectively
Use of serif font for the logo to contrast with the sans serif fonts in the UI design
Low Fidelity Wireframes
Mid Fidelity Wireframes
_______________________________________________________________________
PAMANA Final Web Design
Home Page High Fidelity Wireframe
» Simple home page with slideshow as the focal point to promote visual hierarchy
» Tattoo strip design consistently displayed across all pages
» Tagline at the bottom to make use of the empty space
» Logo and social media icons displayed in footer across all pages
About Page High Fidelity Wireframe
» A nostalgic photo of old Manila (L) and information about Pamana (R)
» Contact form at the bottom with Submit button (L) and more information about the business (R)
Menu Page High Fidelity Wireframe
» Simplistic display of the menu with sample photos on the side as you scroll (visual cues)
» More in-depth menu (carousel) with more information about the menu items
» Order button at the bottom that leads to a separate cart page
Booking Page High Fidelity Wireframe
» Booking form with Submit button in one click (L)
» Information about opening hours and bookings are displayed (R) for ease of access
Blog Page High Fidelity Wireframe
» A consistent array of cards of blog posts that can be clicked through
» Linked article feeds from third party websites in different categories related to the Filipino culture to promote a sense of community
Pamana Website Prototype Video
Contextual Mockups
Figma Live Prototypes
_______________________________________________________________________
Conclusion
What comes next for this project?
» I definitely learned a lot in terms of software (first time using Figma)
» I was able to incorporate most of my vision into the actual product
» Further improvements will be made to perfect the imperfections of the website
» More features are to be added to make the website fully functional and usable
