DAVID BOWIE WEBSITE
UX/UI DESIGN
OVERVIEW
ABOUT
Site serves as a journey through the life and legacy of David Bowie – a cosmic voyage where music, art, and individuality collide. Whether you’re a lifelong fan or a newcomer to the Bowie universe, there’s always something new to discover in the ever-expanding galaxy of the Starman.
Font: Roboto is characterized by its clean and geometric design, making it highly legible across different screen sizes and resolutions.
PROCESS
SITE MAP
Creating a site map for a David Bowie website involves outlining the structure and hierarchy of the website’s pages: Home, Discography, Merchandise, Bio, and Legacy. Here is a version of one of my first site maps, designed with a color scheme that accurately depicts David Bowie as well as the colors used in the prototype.
FEATURES
HOME
Home page featuring an overview of the website, most popular records, links to music videos, a short bio, and merch link.
DISCOGRAPHY
Comprehensive list of albums with release information and era attribution. The tracklist and album description are available upon album selection.
BIO
Detailed timeline and narrative of David Bowie’s life. His life is mapped and told through pivotal dates and images spanning his whole career.
SHOP APPAREL
The apparel shop offers a variety of clothing items featuring iconic Bowie imagery. Product descriptions emphasize the quality of materials & sizes.
SHOP MUSIC
The music shop showcases Bowie’s studio and special edition albums, complete with high-quality album cover images, tracklists, and release dates.
LEGACY
The legacy section highlights Bowie’s innovative sound, genre-defying contributions, and the evolution of his musical style over different eras.
DETAILS
HOME
A dynamic hero section dominates the upper part of the page, showcasing a captivating image of David Bowie.
A multimedia section showcases featured music tracks and videos. Users can learn more about specific albums, as well as be linked to some of his most iconic music videos. This section serves as an immersive introduction to Bowie’s musical legacy.
A concise preview of David Bowie’s biography provides users with a glimpse into the artist’s life.
DISCOGRAPHY
Being a musician, Bowie’s discography is a huge component of the site. This meant showcasing his musical journey and contributions.
His album covers are provided from earliest to most recent on a timeline that follows his musical ‘eras.’ Upon selection of an album, a pop-up of the album’s description and tracklist appears. (See right.)
BIO
This page serves as a detailed timeline and narrative of David Bowie’s life, from birth to legacy shown in a collage format that allows users to learn more about David as they travel down the page.
LEGACY
This page serves to explore David Bowie’s impact on music, art, and culture, featuring articles, quotes, and testimonials from other artists. Pictures create a visual timeline, documenting his extraordinary career.
MUSIC & APPAREL SHOP
MUSIC
This section showcases Bowie’s studio albums, complete with high-quality album cover images, tracklists, and release dates. Descriptions highlight the evolution of Bowie’s sound and artistic expression across different eras. Special anniversary records are highlighted underneath the hero.
APPAREL
This section offers a variety of clothing items, including T-shirts, hoodies, and jackets featuring iconic Bowie imagery, album covers, or signature quotes. Product descriptions emphasize the quality of materials, unique designs, and the exclusive nature of the apparel. The user has the ability to select a particular product and see more information, as well as add said item to a virtual cart.
PRODUCT INFO
After a specific product is selected, a pop-up appears with sizing and product info. There is also the option to add the item to the user’s cart.
FINISHED PRODUCT
The design process focused on creating an immersive user experience, incorporating interactive features and multimedia elements that mirrored Bowie’s artistic flair. Figma’s prototyping capabilities were essential in visualizing user interactions and navigating through various sections of the website. Explore the website through this embedded figma prototype.
SADEY HAVEL
GRAPHIC DESIGNER
