Digital Portfolio Class · 3-Person Team
Eclipse
A marketing website for a fictional hybrid gaming device concept, combining product branding, responsive web design, and visual storytelling around a premium gaming identity.
Brand-Driven Web Design
Created the visual identity and marketing site around a bold product concept.
Cross-Discipline Collaboration
Designed the web experience to work alongside teammates’ 3D product renders.
Product Storytelling
Focused on how design, layout, and hierarchy could position a fictional device like a real product launch.
Overview
What the project does
Eclipse is a marketing website created for a fictional hybrid gaming device concept — imagined as a product that combines the portability of the Nintendo Switch with the performance focus of the Steam Deck. The project centered on how to present that concept as a believable, polished, and visually compelling digital product launch.
The site was designed to communicate product value through branding, product highlights, responsive layouts, and a stronger sense of identity. Rather than functioning as a utility tool, this project focused on product storytelling, visual hierarchy, and web design for a launch-style experience.
Challenge
Designing a believable product launch
The challenge was to create a cohesive marketing presence for a fictional device that did not yet exist, while still making the experience feel polished and realistic. That meant translating a product idea into a brand, a visual system, and a marketing site that could carry the concept convincingly.
- Create a strong visual identity for a fictional gaming product
- Balance bold aesthetics with readability and usability
- Build a responsive layout that worked across screen sizes
- Design around 3D-rendered product assets created by teammates
The challenge was not only designing a website — it was making a fictional hardware concept feel credible, desirable, and launch-ready.
Team Collaboration
How the project was split
This was a collaborative class project where teammates focused on the physical product visualization while I focused on the website and digital identity. That split made the project especially useful as a lesson in designing around assets produced by another discipline.
My Role
Designed the marketing site, visual language, product pages, and overall branded web experience.
Team Role
Created the 3D-rendered device model and supporting visual assets used in the site.
Shared Direction
Collaborated on the overall product concept and how the site should position Eclipse as a premium device.
Design Process
How the site was designed
My process focused on building a cohesive visual identity first, then extending that identity across the website. The goal was to make the site feel bold and high-energy without losing clarity or structure.
Product Research
Reviewed how products like the Nintendo Switch and Steam Deck are positioned visually and competitively.
Brand Identity
Developed a dark purple, orange, and black palette to create a premium, gaming-oriented aesthetic.
Information Architecture
Structured the site around a launch-style flow: hero, product highlights, specs, and calls to action.
Visual Design
Built layouts that emphasized product renders, bold contrast, and clear section hierarchy.
Responsive Thinking
Designed layouts intended to scale across desktop and mobile while maintaining product focus.
Prototype Flow
Created an interactive Figma prototype to show navigation, visual transitions, and overall site structure.
Site Features
What the website emphasized
The site was designed to mirror the patterns of a real product marketing page: strong hero messaging, modular feature sections, clear visual hierarchy, and a consistent system for presenting the device as both desirable and understandable.
- Hero section with 3D product imagery and primary call to action
- Feature sections highlighting portability, performance, and product value
- Product specification areas in a more scannable format
- Responsive layouts for different viewport sizes
- Consistent use of color, typography, and branded components
Outcome
What the project demonstrated
Eclipse gave me hands-on experience in designing a marketing-oriented product site rather than a utility or workflow tool. It pushed me to think about how brand, visual polish, and product presentation influence the way users perceive value.
Complete Brand System
Built a clear visual identity around the fictional product concept.
Responsive Web Design
Designed layouts intended to scale across screen sizes while preserving product emphasis.
Cross-Discipline Collaboration
Worked with teammates producing 3D assets and shaped the web experience around those deliverables.
Takeaways
What this project taught me
Eclipse strengthened my understanding of web design as product communication. It showed me how much good marketing design depends on hierarchy, asset presentation, and brand consistency — especially when the goal is to make a concept feel real.
- Building stronger visual identity systems for web experiences
- Designing around high-value visual assets like 3D product renders
- Balancing bold aesthetics with readability and usability
- Creating responsive layouts that still feel premium and product-focused