DESIGN.md

UX / UI 🎨

Navigate back to README Documentation

My design process for the Himawari Sushi app began with the use of Figma design tool. I created designs for multiple screen sizes, including mobile, iPad, and desktop, to ensure a seamless user experience across all devices.

To bring our design process to life, I conducted extensive research to choose the perfect colors and images for the app. Looking at other successful restaurant apps and analyzed their use of color and imagery, as well as researched the cultural significance of colors in Japanese cuisine.

To complement the imagery of the dishes available, I carefully selected a color palette that would harmonize with the visual elements and create a cohesive and inviting experience for the users. By taking the time to research and carefully choose our design elements, we were able to create an app that not only looks beautiful, but also enhances the overall user experience.

Colour Scheme

• hsl(33, 100%, 57%) used for headings, buttons, lists & hover underline effects.
• hsl(344, 11%, 19%) used for primary background & headings.
• hsl(0, 1%, 40%) used for paragraphs & secondary text.
• hsl(0deg, 0%, 0%) Tailwind predefined black throughout for backgrounds.

I used figma design tools to generate my colour palette.

I've used CSS :root variables to easily update the global colour scheme by changing only one value, instead of everywhere in the CSS file.

Note

Variables prefixed with --color- are used in tailwind config file to generate the tailwind colour palette & are not prefixed with hsl() values. See Tailwindcss Using CSS variables for more information.

:root {
    --color-orange-base: 33 100% 57%;
    --color-black-base: 344 11% 19%;
    --color-gray-base: 0 1% 40%;
    --color-gray-shadow-base: hsl(0deg, 0%, 38%);
    --color-gray-shadow-dark: hsl(0deg, 0%, 34%);
    --color-gray-shadow-light: hsl(0deg, 0%, 42%);
}

🔝 Back to Top

Typography

I refrained from using any custom fonts for this project, opting instead for the default fonts provided by the browser. I deemed these fonts to be the most suitable for the project.

🔝 Back to Top

Icons

I've used the icons.js library to find suitable icons for my project. I've used the following icons:

Note

The logo icon is no longer available, a suitable link is below and the original is available in the docs/design/logo.svg folder. The link below is a similar icon.

create a table like below: (use the table generator)

Name	Image	URI
Logo		https://api.iconify.design/ic:sharp-ramen-dining.svg
Explore more		https://api.iconify.design/mdi:arrow-right-bold-hexagon-outline.svg
Book now		https://api.iconify.design/material-symbols:arrow-right-alt-rounded.svg
Subscribe		https://api.iconify.design/ion:paper-plane.svg
Facebook		https://api.iconify.design/ri:facebook-fill.svg
Instagram		https://api.iconify.design/mdi:instagram.svg
Twitter		https://api.iconify.design/mdi:twitter.svg
Stripe		https://api.iconify.design/logos:stripe.svg
Visa		https://api.iconify.design/logos:visa.svg
Paypal		https://api.iconify.design/logos:paypal.svg
Profile		https://api.iconify.design/material-symbols:account-circle.svg
Arrow down		https://api.iconify.design/ic:baseline-keyboard-arrow-down.svg
Log out		https://api.iconify.design/ic:twotone-logout.svg
Home		https://api.iconify.design/clarity:house-solid.svg
Booking		https://api.iconify.design/material-symbols:collections-bookmark-outline.svg
Account information		https://api.iconify.design/material-symbols:settings.svg

🔝Back To Top

Images

I have sourced images from Unsplash and Yosushi for my project. I included the image source and link in the table below.

Creator	Image	link	Page used
Mahhmoud Fawzy		Navigate to source	Home page | Banner
Mahhmoud Fawzy		Navigate to source	Home page | About us
Yosuhi.com		Navigate to source	Home page | Popular dish 1
Yosuhi.com		Navigate to source	Home page | Popular dish 2
Yosuhi.com		Navigate to source	Home page | Popular dish 3
Food Photographer		Navigate to source	Home page | Newly added
Yosuhi.com		Navigate to source	Home page | Newsletter
Thomas Marban		Navigate to source	About us page | Banner image 1
The Free Birds		Navigate to source	About us page | Banner image 2
Niki Mitra		Navigate to source	About us page | Banner image 3
Thomas Marban		Navigate to source	About us page | Team member 1
ABDALLA M		Navigate to source	About us page | Team member 2
John Forander		Navigate to source	About us page | Team member 3
Dilara Yilmaz		Navigate to source	Menu page | banner
Wyron A		Navigate to source	Subscribe success page | banner

🔝 Back To Top

High fidelity design mockups

To follow best practice, high fidelity mockups were developed for mobile, tablet, and desktop sizes. I've used Figma to design my site mockups. Figma is a vector graphics editor and prototyping.The Figma design file is available in the docs/design/figma/django-sushi.fig folder.

Note

Some pages did not require a desktop mockup, as the design was the same as the tablet mockup.

Mockups by page:

• About page
• Contact page
• Create booking page | user logged in
• Create booking page | user logged out
• FAQ page
• Home page
• Login page
• Menu page
• Profile dashboard page
• Profile details page
• Profile edit booking page
• Register page
• Subscribe success page

About page

Mobile

Tablet

Desktop

Contact page

Mobile

Tablet

Create booking page logged in

Mobile

Tablet

Create booking page logged out

Mobile

Tablet

FAQ page

Mobile

Tablet

Home pages

Mobile

Mobile with menu open

Tablet

Desktop

Login page

Mobile

Tablet

Menu page

Mobile

Tablet

Profile dashboard page

Mobile

Tablet

Profile details page

Mobile

Tablet

Profile edit booking page

Mobile

Tablet

Register page

Mobile

Tablet

Subscribe success page

Mobile

Tablet

🔝 Back To Top