Two dashboards, three websites, five different directions
Published
Five new HTML, CSS and JavaScript demos: operations, scenario planning, courses, wellness memberships and studio bookings.
Interactive frontend demos
Two dashboards, a course website, a wellness membership and a studio website. Explore five distinct designs with working interactions, built with HTML, custom CSS and vanilla JavaScript.

Five different starting points for websites and web applications: an operations dashboard, a planning workspace, a course website, a wellness membership and a studio website.
I wanted each to have its own character. Vector is dark and compact. Prism gives the controls and comparisons more breathing room. Sidequest goes loud with blue and yellow. Kinetic pairs oversized type with purple, pink and lime. Forme takes a warmer direction with burgundy, peach and large serif headings.
All five are built with HTML, custom CSS and vanilla JavaScript, with responsive layouts and interactions you can try in the browser.
Vector — accounts, decisions and the next action
An operations dashboard for reviewing accounts and keeping track of work that needs attention. Search and filter the account list, change a status, or open a decision and approve or defer it. The account records and activity history update as you work.
Dark surfaces and lime accents give the interface a clear hierarchy, with separate views for accounts, scenarios, decisions, activity and settings.
Prism — compare the next move
A planning workspace that puts assumptions beside their results. Adjust participation, budget, timing and contingency, then compare how the sample projections change.
You can keep several scenarios, add a decision note and revisit a saved snapshot. The light palette and indigo controls keep a fairly detailed screen easy to scan.
Sidequest — make the first step approachable
A course and community website with bold blue type, yellow backgrounds and a playful collage layout. It gives visitors a clear introduction to the course, practical resources and a way to try a lesson.
Open the six written sample lessons, work through their checklists and mark them complete. Your progress appears in the sample member area.
Kinetic — a membership with some energy
A wellness membership website built around expressive photography, oversized headings and a purple, pink and lime palette.
Browse classes by category, read a sample session and save favourites. Switch between monthly and yearly pricing, choose a sample plan and revisit your selections in the member preview.
Forme — find a class that fits
A studio and coaching website with warm colours, generous photography and an editorial feel. The class finder sits close to the introduction, giving visitors a practical next step.
Filter by practice, level and week, switch between studio and online sessions, and try making or cancelling a sample reservation.
About the previews
These are interactive frontend demos using fictional brands, sample content and generated imagery. Saved demo progress and selections stay in your browser. Accounts, payments, email delivery and live booking services are not connected; dashboard projections use illustrative data.
If one of these feels close to something you need, get in touch about adapting the design and connecting it to your own content and services.
Published
Five new HTML, CSS and JavaScript demos: operations, scenario planning, courses, wellness memberships and studio bookings.