HealthZone+
Mock Informational Website
HealthZone is a mock educational website created to explore structured content design within WordPress’s Gutenberg editor. Built with light custom CSS, it focuses on health, diet, and fitness topics—targeting users across age groups with accessible, organized resources and guides. The project demonstrates practical CMS usage, content planning, and responsive web layout development.
Duration
July 2024
Role
Web Designer and Developer
Tools
WordPress
Gutenberg
Figma
Design
Development
Student Work
Goal
The goal was to gain hands-on experience using WordPress and Gutenberg as a design and publishing tool. Unlike my more visual projects, HealthZone emphasized information hierarchy, usability, and building around a blog-style content structure.
Development
Built with WordPress and custom CSS, the project prioritized page structure and consistent styling. I designed templates for health, diet, and fitness sections—each featuring resources, embedded videos, and guides tailored to specific audiences.
01 Stylescape
I developed a stylescape to explore audience tone, color psychology, and readability. Cool blues, greens, and neutral tones helped establish trust and professionalism while maintaining an inviting, modern aesthetic.
02 Wireframe
Wireframing focused on content flow and navigation clarity, mapping how users would access guides, video libraries, and featured posts within each topic area.
03 Prototype
I tested layout spacing, image treatment, and typography for accessibility and readability before moving to WordPress implementation.
04 Deployment & Domain Management
The site was originally published as a subdomain on my previous personal domain. The current version exists as a .wpress archive, which I plan to restore to a new subdomain for continued functionality.
