Keywords Product Flow Information Architecture Wireframe Mood Board Visual Design
Challenge Overview This is a mock-up project to design a multi-functional website for a randomized concept.
Ideation
As this project revolved around developing a website about a topic on wikipedia, I chose to explore possible web-options for jazz legend Miles Davis.
I began by narrowing down possible website contents to 3 distinct topics, then brainstormed the information architecture for the topic I resonated with most- an Interactive Timeline.
With that, I created a ProductFlow Diagram.
Low-Fidelity Wireframes
A key component of my design direction is the embodiment of Jazz music. Popularized in the early 1900s, when most photographs were still black and white, I wanted to maintain the nostalgic, mysterious, and cool atmosphere created by Jazz, I also wanted to have those photographs add to the visual aesthetic of the website.
I initially started with bright greyscale Figma wireframes, but quickly shifted to a dark mode design as I felt that was the only way to convey the theme of the website, and supplement the other design decisions. All designs were built using a 3 column layout grid for the rule of thirds.
Chosen Wireframes
After coming up with a basic layout for the website, I had to answer the toughest question of all...
How do you capture a person's essence through visual design?
Moodboards
High-Fidelity Wireframes
Final Design Notes
I decided to pursue the mood encapsulated in mood board 1 - Sophisticated Noir. Due to the bulk of Miles Davis’ Jazz being the development of bebop Jazz in the 1950s, I decided to lean into the monochromatic, black and white photograph feel, I also felt like the mood board was the most coherent and easy to work with.
As the user continues to scroll, past the landing page, they will be brought instantly into the timeline. I chose the year 1955 first in this prototype as it contained more relevant information, but the timeline would normally start in 1926 at the birth of Miles Davis.
I made slight changes from my low-fidelity prototype to upkeep the sharper styles illustrated in my mood board. I experimented with different background colors and gradients but found them to be too systematic and inorganic, thus I chose to add photographs with heavy blur, which helps contrast with the sharp items at the top while adding a cinematic feel to the page.
My page originally was void of colors, but upon reviewing the design, I found that adding slight touches of color helps guide the users visually to the interactive elements. The orange color is selected from an orange frequently present in Miles Davis’ album cover arts.
.jpg)