- Code
- Design
- Figma
- Html
- CSS
- Git
- Vercel
Redesign - Poncle Games
- About
- Analysis
- Design
- Results
Introduction
This project is my personal spin on the designing of the website of Poncle games.
Built entirely in HTML and CSS to practice accessible coding. Accessible websites need both clear design and accessible code. Since screen readers don't process JavaScript, I focused on semantic HTML and CSS.
The deadline? 3 days to redesign all components from the original page, adding modern responsive layouts and dark/light mode.
- About
- Analysis
- Design
- Results
Analysis
First I mapped the existing homepage structure:
- Hero with 'About Us'
- News/Posts section
- Social links
- FAQ, Contact, Jobs sections
- A footer
Organisation
I kept core sections (about us, news) and added a spotlight on their main game and sole title which is likely to be the main interest of the visitor.
Social links stayed in the footer, while FAQ, Contact, and Jobs were moved to the navbar for better accessibility."
Design
I retained the brand's signature green but toned it down. Background colors shift as users scroll.
I kept the original UX copy and the side Gif on the side of the website, I made him scrollable though.
Given the bold green logo, I added light/dark mode to reduce eye strain and improve readability.
I played around with the "contact us" button on desktop, a nod to the studio's personality.
- About
- Analysis
- Design
- Results
Mobile
Click on the image to zoom
- About
- Analysis
- Design
- Results
Aftermaths
Key learnings include:
• Building modern responsive layouts for gaming industry websites.
• Writing semantic, accessible HTML/CSS following best practices .
• Understanding the strengths and limitations of vanilla code while practicing it.