Pasta Amore

Web Design Project

Design application: Visual Studio Code

Project Outline

Pasta Amore is a family-owned Italian restaurant whose mission is to provide a warm atmosphere for families where the restaurant can share the traditional cuisines of Italy that are always fun, fresh, and filled with love. The owner approached me to build a website for the restaurant that is functional, compliant, service-based, and responsive.

Webpage of Pasta Amore restaurant showcasing dishes, "Mission Statement" section, and footer with contact and social media.
Webpage of Pasta Amore restaurant showcasing dishes, "Mission Statement" section, and footer with contact and social media.
Menu webpage design showcasing menu items with images and descriptions of each item.
Menu webpage design showcasing menu items with images and descriptions of each item.
About Us webpage design featuring sections on heritage, vision, chef, and future, with various images and text.
About Us webpage design featuring sections on heritage, vision, chef, and future, with various images and text.

*(Click on image for full-screen preview)

Low-fidelity homepage wireframes:

Contact Us webpage design featuring a boy making pasta in the kitchen, a contact form, and a location map.
Contact Us webpage design featuring a boy making pasta in the kitchen, a contact form, and a location map.
Works Cited webpage design with a background photo of the Colosseum in Rome and references listed above it.
Works Cited webpage design with a background photo of the Colosseum in Rome and references listed above it.

*(Click on image for full-screen preview)

Sitemap:

A visual sitemap for the Pasta Amore website, including home page, main sections, and links to various subpages.
A visual sitemap for the Pasta Amore website, including home page, main sections, and links to various subpages.

*(Click on image for full-screen preview)

Coded with Visual Studio Code:

Color Palette

Brand color palette with their respective color codes.
Brand color palette with their respective color codes.

Typography

Klinic Slab font including letters, numbers, and special characters in uppercase and lowercase.
Klinic Slab font including letters, numbers, and special characters in uppercase and lowercase.
Goudy Old Style font including letters, numbers, and special characters in uppercase and lowercase.
Goudy Old Style font including letters, numbers, and special characters in uppercase and lowercase.

Using Visual Studio Code and with the web design standards and best practices as my guide, I planned, designed, and delivered an HTML- and CSS-compliant website to the client.

  • CSS media queries are employed to adapt the layout and content to various screen sizes.

  • A well-structured CSS approach ensured consistent styling across pages through color scheme, font usage, and button styles.

The website features simple and intuitive navigation with a user-friendly interface and prominent call-to-action buttons strategically placed to encourage users to make online orders.

  • Categorization of menu items creates a clear visual hierarchy, making it easy for users to scan and select options.