Streaming Showdown Web Design
A desktop design I made for the imaginary brand, “Streaming Showcase,” using Adobe XD to design and prototype.
Brief
The goal of this project was to design and prototype the desktop and mobile interfaces of a responsive website for an event. We were tasked with coming up with a new event; I chose to create a Streaming Showdown, where celebrities from various streaming services compete in challenges to determine the best service. Using Adobe XD I designed five web pages and added movement and transitions to create an operational prototype.
Information Architecture
To begin the process, we mind mapping the content that is needed on the site. Then we transformed that brainstorm into an information architecture. These are beneficial because it ensures that there is a strong cohesive flow to the site.
Wireframes
The next step was to create wireframes. Using a XD plugin, I create wireframes of both the desktop and mobile interfaces. This step helped to perfect the layout of each page.
Design Process
I started my design process by choosing my main branding for the site. I am a big fan of simple and modern design and chose to feature simple colors. The four main colors were chosen based on the streaming services participating in the event (Netflix, Disney, HBO, and Amazon Prime).
I wanted the photos to match the colors throughout the site. Therefore I spent a long time collecting images from Pexel and Unsplash to find high quality pictures.
Prototyping
The most intense stage of this project was the prototyping. Each page required different animation elements. The most time intensive was getting the teams page to animate with a carousel transition. This was a very enlightening step as I learned about components, hover vs click features, and the transitions that can be used throughout.