← Back to home
Website Design & Development

Maplebrook Public Library Website

A fully designed and coded website created from wireframes to final development. The project focused on improving usability, accessibility, and visual clarity for a public library audience.

UX Design UI Design Frontend Development 2025

Design Process

The project began with low-fidelity wireframes created in Figma to structure content and user flow across desktop and mobile devices. These wireframes helped define navigation, layout hierarchy, and key interactions before moving into visual design and development.

All pages wireframes All Pages Wireframes (Desktop & Mobile)

Wireframes to Final Design

Each page evolved from structured wireframes into fully responsive, visually polished web pages. Below are examples comparing the wireframe concepts with the final coded website.

Homepage

Homepage wireframe Homepage final design

Events Page (Mobile)

Events mobile wireframe Events mobile final

Live Website

The final website was fully developed using HTML, CSS, and JavaScript and deployed on GitHub Pages. You can explore the live version below.

Open in New Tab ↗