Two dashboards, three websites, five different directions
Five new HTML, CSS and JavaScript demos: operations, scenario planning, courses, wellness memberships and studio bookings.
The first template collection covered a publication, a studio portfolio and a furniture shop. This time I wanted to try some very different shapes: interfaces for managing work, comparing options, joining a course and finding a class.
I started with six visual concepts. Five made it into code.
Vector is the dark operations dashboard: accounts, review actions and a history of what changed.
Prism is the lighter planning workspace. Change an assumption and watch the sample comparison update.
Sidequest is the loud one. Blue, yellow, big type and short lessons you can work through.
Kinetic gives a wellness membership a more expressive look, with class browsing, favourites and a sample member area.
Forme takes a warmer approach to a studio website, with a class finder and a booking flow you can try.
I wanted each design to have something useful behind its first screen. You can approve a sample decision in Vector, save a scenario in Prism, complete a Sidequest lesson, keep a favourite class in Kinetic or make and cancel a sample reservation in Forme.
The implementation is HTML, custom CSS and vanilla JavaScript. Each has its own layout, typography and colours, with responsive behaviour for smaller screens.
The demos use fictional content and save their state in your browser. They don’t connect to real accounts, payments or booking systems.
