VIDEO 1: Upon launching the CDextra, an intro video plays as the artist's name slowly resolves in the center. I created this intro video from various music video footage.
IMG 1: Main navigation is via song titles in the center of the screen. Moving the cursor over the song titles causes the clickable text to scroll left and right. Clicking on a song name takes the user to that song's section (scroll effect created by a programming partner). The user can also go online to the artist's website (bottom left).
IMG 2: The main concept of this CDextra is to highlight the songwriting and lyrics of Pete Droge. Lyric-syncing, in which a line of lyrics highlights as the corresponding lyric plays from the song audio on the CD, is the main focus of the design. Clicking on a lyric jumps the CD audio to that lyric line of the song (syncing technology created by a programming partner).
IMG 3: In the song sections, the user can click on lyrics from various parts of the song to hear those parts or simply watch the lyrics highlight as each line is played from the CD.
IMG 4: Images used to design each section were pulled from album, promotional, and personal images provided by the artist. Backgrounds were tinted to give each section it's own color and feeling.
IMG 5: Navigation between songs is made visually intuitive by using the representative image for each song page as buttons at the bottom of the screen. The user can also return to the main screen to select a song by it's name.
IMG 6: In this CDextra, a section featuring video-syncing was also created. A line of lyrics highlights as the corresponding lyric is sung in the video, and clicking on a lyric jumps the video to that lyric line of the song. The "music video" is a montage I created of live studio footage of the artist singing and then synced up to the CD audio of the song.