CRUST

FRONT END WEB DEVELOPMENT

project OVERVIEW

Crust is a branding and responsive website project created as part of my HND Web Development Graded Unit. The project involved developing a complete visual identity before designing and building a fully responsive website using Bootstrap, custom CSS, and Visual Studio Code.

The aim was to create a modern, welcoming online presence that reflected the brand while providing a clear and intuitive experience across desktop, tablet, and mobile devices.

tools

Visual Studio Code / Bootstrap / HTML5 / CSS / Adobe / GitHub / Trello

outcome

HND Web Development Final Graded Unit - Awarded Grade A

my role

Brand Identity / Logo Design / UI Design / Responsive Web Design / Front End Development

the design challenge

the problem

Women may experience outdoor spaces differently due to safety concerns, confidence barriers and the pressure of not knowing where to start.

the aim

The aim was to create a clean, welcoming website that communicated the brand's personality, showcased products effectively and remained fully responsive across different screen sizes.

the design question

How might we support women in discovering outdoor routes while reducing anxiety around safety and feeling more confident through UX Design.

core features

The review section was included to build trust and give the website a more personal feel. Customer feedback helped support the brand’s credibility and created a sense of warmth around the bakery experience.

customer reviews

The newsletter section encouraged users to stay connected with Crust through a simple email sign-up. This added a useful call to action while keeping the design clean and minimal.

EMAIL SUBSCRIPTION

The FAQ section helped answer common user questions in a clear and accessible way. This reduced the need for users to search for information and made the website feel more helpful and user-friendly.

faq section

This section showcased Crust’s baking courses and workshops using image-led cards. The aim was to make each course easy to scan while giving users enough information to understand what was available.

courses & workshops

Designed to highlight Crust’s bakery items using strong imagery, clear product names and descriptions. This helped make the page visually appealing while allowing users to quickly browse what the bakery offers.

product showcase

This section included an embedded map, address, and opening times so users could quickly find the bakery and plan their visit. It added practical value to the site while keeping important information easy to access.

LOCATION & OPENING HOURS

outcome & reflection

Crust was submitted as my final graded unit for my HND in Web Development and was awarded an A. The project gave me the opportunity to take a website from initial branding and visual direction through to a fully developed responsive site.

Creating the logo, colour palette, layout and final website helped me build confidence in both design and front-end development. It also strengthened my understanding of how branding, user experience, and responsive layouts work together to create a clear and professional digital presence.

This project was an important step in my development because it showed me how much I enjoy combining creative design with practical web skills. If I developed Crust further, I would refine the mobile experience, carry out user testing, and explore additional features such as online ordering or booking workshops directly through the website.

UI

✳︎

front end

✳︎

FIGMA

✳︎

ADOBE

✳︎

vscode

✳︎

branding

✳︎

UI ✳︎ front end ✳︎ FIGMA ✳︎ ADOBE ✳︎ vscode ✳︎ branding ✳︎