MothJellyStudios.com
Studio website • Performance-first • Clear product presentation
The public website for Moth Jelly Studios. I designed and built it end-to-end to be fast, readable, and structured around what matters most: showcasing shipped work and making it easy to understand what the studio builds.
Design & Engineering Notes
What I optimized for and how it’s structured.
Information Architecture
- Designed the homepage as a central hub: “Our Games” on the left and “Latest Blogs” on the right, so visitors immediately see both outputs.
- Kept navigation shallow: one click to a game page, one click to a specific blog post, and one click to Team/About/Discord.
- Ordered content intentionally: games listed by release timeline (oldest → newest for now) and blogs sorted newest → oldest to surface updates.
- Avoided splash screens, autoplay, and heavy landing content so visitors reach what they want as quickly as possible.
Performance
- Built the site as a fully static application, serving pre-built HTML, CSS, and assets with no server-side rendering.
- Used Vite for fast development iteration and optimized production builds with minimal configuration.
- Loaded game and blog content from lightweight JSON files, keeping runtime logic simple and predictable.
- Kept JavaScript usage minimal (no framework runtime), avoiding unnecessary client-side work.
- Designed and tested the site mobile-first, manually verifying scrolling, layout, and readability across devices.
- Avoided heavy animations, third-party embeds, and analytics to keep load times fast and performance consistent.
Reusable Layout System
- Built a single shared JavaScript renderer responsible for generating all game and blog cards across the site.
- Structured cards to be data-driven: adding a new game or blog requires only a title, image path, date, and optional tags.
- Kept a consistent page skeleton (navigation → content → footer) so new pages inherit the same layout rules automatically.
- Enforced consistent spacing, typography, and card structure to keep the site visually coherent as content grows.
What I’d Improve Next
- Expand the site as the studio grows by adding more games and publishing more frequent blog updates.
- Add blog discovery features such as search and simple filters (by date or tag) to make older posts easier to find.
- Create press kit pages per project with screenshots, logos, trailers, and clear media contact information.
- Explore optional studio extensions over time (e.g., merch storefront), while keeping the core site lightweight.
More Projects
Want more projects?