Bakery

JUST SCROLL DOWN ✦ SCROLL DOWN ✦

Overview

Overview

Overview

This is my first multi-page website that I coded entirely by myself in Visual Studio Code. I chose a clean and minimalist design, which gave me the opportunity to build my confidence in web development and develop a solid foundation in CSS. I hosted the website on a GitHub domain.

Design solutions

Color Palette Used

The palette is warm and calming, striking a balance between coziness and modernity — making it ideal for bakery branding by creating an atmosphere of quality, comfort, and trust.

#4b4b4b

#947150

#d3d0cf

#e8e6e6

#4b4b4b — a deep grey, almost graphite. It conveys seriousness and stability, and was used for text or accents, adding contrast and style.

#947150 — a warm brownish-golden shade, reminiscent of bread crust, pastries, or caramel. It creates a cozy feel and evokes associations with baked goods, natural ingredients, and warmth.

#d3d0cf — a soft light grey, neutral and modern. It pairs well with other colors and was used as a background, allowing the main content to stand out.

#e8e6e6 — an almost white tone with a subtle warm hue. It serves as an excellent background for creating a sense of lightness, cleanliness, and spaciousness, especially when combined with the palette’s richer, warmer colors.

Typoghraphy

Aa

Aa

Aa

Playfair Display – for Headings

Playfair Display – for Headings

Playfair Display – for Headings

A serif font, like the one shown in the image, was chosen for the bakery’s headings — it looks elegant, traditional, and evokes a sense of trust, which perfectly complements the atmosphere of artisan baking and high-quality ingredients.

Public Sans – for Paragraph Text

Public Sans – for Paragraph Text

Public Sans – for Paragraph Text

A clean and modern sans-serif font, like the one shown, was selected for body text — it ensures readability and complements the elegant serif headings, creating a balanced and approachable visual identity for the bakery.

Aa

Aa

Aa

Responsitivenes

The website is fully responsive and adapts smoothly to any device, providing a consistent and user-friendly experience. Its design and features are tailored for:

Desktop – A complete layout with rich visuals and easy-to-navigate structure.

Tablet – An optimized interface that ensures comfortable browsing and interaction on mid-sized screens.

Mobile – A streamlined, touch-friendly design that offers effortless navigation on smartphones.

Results

As a result of the work, a 3-page website was designed and developed from scratch using only HTML and CSS, without any libraries or frameworks. The website is responsive, adapting seamlessly to different devices and screen sizes.

The website is available at the following link:
https://vaku0004.github.io/mtm6201-midterm

Timeline: The design was completed in 2 days, and the development (coding) took one week.

The web design was created to provide a visually appealing and engaging experience that captures users' attention from the first glance. Thanks to its clean and elegant layout, the website aims to inspire trust in the content and services offered.


To enhance user interaction, subtle animation effects were added, making the experience more dynamic and interactive without overwhelming users with excessive or complex information.

The website is available at the following link: https://newhorizons.framer.website.


This is a homepage-only design developed to present the visual concept and receive client approval on the brief.
The design was completed in 1 day.

The web design was created to provide a visually appealing and engaging experience that captures users' attention from the first glance. Thanks to its clean and elegant layout, the website aims to inspire trust in the content and services offered.

To enhance user interaction, subtle animation effects were added, making the experience more dynamic and interactive without overwhelming users with excessive or complex information.

The website is available at the following link: https://newhorizons.framer.website .

This is a homepage-only design developed to present the visual concept and receive client approval on the brief.
The design was completed in 1 day.

See all works