Cyper
Sports
Cyper Sports is a modern sports news platform built for an engaging and clutter-free reading experience. Designed on WordPress, it prioritizes intuitive navigation, structured content, and mobile optimization. The goal was to create a seamless, ad-light platform where fans can quickly access breaking news, analysis, and trending stories without distractions.
Cyper Sports is a modern sports news platform built for an engaging and clutter-free reading experience. Designed on WordPress, it prioritizes intuitive navigation, structured content, and mobile optimization. The goal was to create a seamless, ad-light platform where fans can quickly access breaking news, analysis, and trending stories without distractions.
E-commerce
My Role
My Role
UX/UI Designer, Brand Strategist, Web Developer
UX/UI Designer, Brand Strategist, Web Developer
My Role
My Role
Date 2024 and ongoing
Date 2024 and ongoing
Cyper Sports (Sports News & Blog UX/UI Case Study)
Cyper Sports
(Sports News & Blog UX/UI Case Study)
🏈 A Fresh Take on Sports Blogging: A WordPress-Powered Fan Experience
🏈 A Fresh Take on Sports Blogging:
A WordPress-Powered Fan Experience
What I Did:
Designed & built a sports news website focused on engaging layouts & easy navigation.
Used WordPress to create a scalable & SEO-friendly blog platform.
Developed a custom sports brand identity with a modern, dynamic look.
Prioritized UX/UI for sports fans, ensuring content is easy to read & interact with.
What I Did:
Designed & built a sports news website focused on engaging layouts & easy navigation.
Used WordPress to create a scalable & SEO-friendly blog platform.
Developed a custom sports brand identity with a modern, dynamic look.
Prioritized UX/UI for sports fans, ensuring content is easy to read & interact with.
The Problem
Most sports news websites are cluttered, ad-heavy, and difficult to navigate, making it hard for fans to quickly find relevant content. Slow load times, excessive visuals, and buried articles reduce engagement. The challenge was to design a clean, structured, and user-friendly platform that delivers sports updates seamlessly.
Most sports news websites are cluttered, ad-heavy, and difficult to navigate, making it hard for fans to quickly find relevant content. Slow load times, excessive visuals, and buried articles reduce engagement. The challenge was to design a clean, structured, and user-friendly platform that delivers sports updates seamlessly.
Most sports news websites are cluttered, ad-heavy, and difficult to navigate, making it hard for fans to quickly find relevant content. Slow load times, excessive visuals, and buried articles reduce engagement. The challenge was to design a clean, structured, and user-friendly platform that delivers sports updates seamlessly.
The Solution
✔️ A structured, visually engaging UI with distinct content sections.
✔️ SEO-optimized article layouts for better discoverability.
✔️ A custom WordPress theme that allows for easy content updates.
✔️ User-centric design with clear navigation, high-quality imagery, and a strong
✔️ A structured, visually engaging UI with distinct content sections.
✔️ SEO-optimized article layouts for better discoverability.
✔️ A custom WordPress theme that allows for easy content updates.
✔️ User-centric design with clear navigation, high-quality imagery, and a strong
✔️ A structured, visually engaging UI with distinct content sections.
✔️ SEO-optimized article layouts for better discoverability.
✔️ A custom WordPress theme that allows for easy content updates.
✔️ User-centric design with clear navigation, high-quality imagery, and a strong
Skills Used:
🛠 WordPress | UX/UI Design | Photoshop | Branding | SEO Optimization
🔗 Live Project: Cyper Sports
🛠 WordPress | UX/UI Design | Photoshop | Branding | SEO Optimization
🔗 Live Project: Cyper Sports
Low-Fidelity / High Fidelity Mockups
Low-Fidelity / High Fidelity Mockups
After sketching out the overall structure of CyperSports, I jumped into Figma to start building out the low-fidelity mockups. My goal here wasn’t to focus on colors or imagery—it was more about mapping out the layout, structure, and how the content would guide users through the page. I kept things minimal, using greyscale boxes and placeholder text to visualize the flow.
After sketching out the overall structure of CyperSports, I jumped into Figma to start building out the low-fidelity mockups. My goal here wasn’t to focus on colors or imagery—it was more about mapping out the layout, structure, and how the content would guide users through the page. I kept things minimal, using greyscale boxes and placeholder text to visualize the flow.
After sketching out the overall structure of CyperSports, I jumped into Figma to start building out the low-fidelity mockups. My goal here wasn’t to focus on colors or imagery—it was more about mapping out the layout, structure, and how the content would guide users through the page. I kept things minimal, using greyscale boxes and placeholder text to visualize the flow.
Once I felt confident in the structure, I transitioned into high-fidelity mockups. That’s when I started layering in the visual identity—brand colors, fonts, actual images, and UI details that matched the tone of the site. The high-fidelity versions helped bring the concept to life and gave me a clear sense of how the final design would feel.
Once I felt confident in the structure, I transitioned into high-fidelity mockups. That’s when I started layering in the visual identity—brand colors, fonts, actual images, and UI details that matched the tone of the site. The high-fidelity versions helped bring the concept to life and gave me a clear sense of how the final design would feel.
Once I felt confident in the structure, I transitioned into high-fidelity mockups. That’s when I started layering in the visual identity—brand colors, fonts, actual images, and UI details that matched the tone of the site. The high-fidelity versions helped bring the concept to life and gave me a clear sense of how the final design would feel.
Low-Fidelity Mockup – Layout Planning
This version focused strictly on layout and spacing. It was helpful for testing structure and making quick changes before investing time into final design elements.
High-Fidelity Mockup – Final Visual Direction
This mockup incorporated color, real content, and branding elements. It reflects the look and feel of the final product and set the foundation for the development handoff.
Tools: Google Docs, Figma
Tools: Google Docs, Figma
All of the mockups were created in Figma. It’s my go-to tool for visual design and prototyping. I like how easy it is to experiment with layout ideas and quickly switch from low-fidelity to polished mockups. It made the whole process fast and fluid without ever feeling locked in. I used Figma’s auto layout and grid system to keep things consistent and aligned, which helped speed things up when refining the high-fidelity version.
All of the mockups were created in Figma. It’s my go-to tool for visual design and prototyping. I like how easy it is to experiment with layout ideas and quickly switch from low-fidelity to polished mockups. It made the whole process fast and fluid without ever feeling locked in. I used Figma’s auto layout and grid system to keep things consistent and aligned, which helped speed things up when refining the high-fidelity version.
All of the mockups were created in Figma. It’s my go-to tool for visual design and prototyping. I like how easy it is to experiment with layout ideas and quickly switch from low-fidelity to polished mockups. It made the whole process fast and fluid without ever feeling locked in. I used Figma’s auto layout and grid system to keep things consistent and aligned, which helped speed things up when refining the high-fidelity version.
Project Overview
Project Overview
CyperSports is a fictional sports blog I created to show how I’d design for a content-heavy platform. I wanted it to feel like a site you’d visit for sharp commentary, updates, and engaging articles across different sports. The tone is casual, but the layout is structured—balancing personality with clarity.
CyperSports is a fictional sports blog I created to show how I’d design for a content-heavy platform. I wanted it to feel like a site you’d visit for sharp commentary, updates, and engaging articles across different sports. The tone is casual, but the layout is structured—balancing personality with clarity.
CyperSports is a fictional sports blog I created to show how I’d design for a content-heavy platform. I wanted it to feel like a site you’d visit for sharp commentary, updates, and engaging articles across different sports. The tone is casual, but the layout is structured—balancing personality with clarity.
The project gave me a chance to explore how to build a strong homepage experience for a media-driven site. I thought about how users would scroll, what kind of content they’d expect to see first, and how to break things up visually to keep people engaged. From hero banners to article cards and CTAs, every section is built to create flow and keep readers exploring.
The project gave me a chance to explore how to build a strong homepage experience for a media-driven site. I thought about how users would scroll, what kind of content they’d expect to see first, and how to break things up visually to keep people engaged. From hero banners to article cards and CTAs, every section is built to create flow and keep readers exploring.
The project gave me a chance to explore how to build a strong homepage experience for a media-driven site. I thought about how users would scroll, what kind of content they’d expect to see first, and how to break things up visually to keep people engaged. From hero banners to article cards and CTAs, every section is built to create flow and keep readers exploring.
© 2025 Chris Puncekar, All Rights Reserved