Pop Music Resource

Kylie Nicholson IML 400 Final Project

Fall 2014

Intent• My intention is to create an attractive, interactive

online hub for the USC Popular Music Network.

• The USC Pop Network consists of USC Popular Music majors, their non-major band members, other musicians, supporters (professors, managers), collaborators (other artists, videographers/ photographers), and friends/ fans

Audience Definition• The USC Popular Music Network:

• USC Popular Music majors • non-major band members • other musicians • supporters (professors, managers) • collaborators (other artists, videographers/

photographers) • friends/ fans

Audience Definition• The USC Popular Music Network:

• USC Popular Music majors • non-major band members • other musicians • supporters (professors, managers) • collaborators (other artists, videographers/

photographers) • friends/ fans

Audience DefinitionUSC Popular Music majors friends/ fans

• Problem: lack of audience

• Seeking exposure and an audience for their music

• Want to be represented authentically

• Problem: slough of available music, hard to sift through

• Desire new, quality music

• Desire ease of use, connection with artists

Audience DefinitionUSC Popular Music majors friends/ fans

• Problem: lack of audience

• Seeking exposure and an audience for their music

• Want to be represented authentically

• Problem: slough of available music, hard to sift through

• Desire new, quality music

• Desire ease of use, connection with artists

intuitive interface, attractive/ eye-catching visuals

Musician Photos Artist Profiles

Theme + Subject• The USC Popular Music Program

• USC Popular Music In-House Photographer

Scope• HTML/ CSS

• Bootstrap framework with modifications

• Interactivity • jQuery algorithm for randomly shuffling photos on load of homepage and on music page

(shuffle.js) • Interactivity on rollover of main page

• Images • Artist-provided images (from facebook, soundcloud)

• Music • Artist-uploaded to soundcloud or band camp

• Text • Scraped from artist facebook page or other website • ‘5 words’ is my own hand in it (curation) to introduce outsiders to the Pop Network vibe

Shuffle Algorithm

http://james.padolsey.com/javascript/shuffling-the-dom/

Design• Modular (bootstrap grid) —>created image grid on homepage and

grid on music page

• Simple fonts (default bootstrap) and one hand-written (Waiting for the Sunrise)

• Neutral colors (w/b/grey) so focus would be on artist photos + media

• Content-first approach

• Extendible for database web development (user login and submission)

• Simplified from original proposal

Wireframes + Design Evolution

Pages + Features

Researchhttp://www.codaagency.com/

Reflection• Intention informs design throughout, not just for the

first conception.

• Design is an iterative process, always adapting. It’s a system of changing inputs and outputs.

• Different users have different goals, and good design addresses them each individually while providing a cohesive whole.

Thank you! !

!

!

Kylie Nicholson cargocollective.com/kylienicholson

kylienicphotography.com