The creation of the MuPsych website was perhaps the largest project I have undertaken to date.  This site was created for a 2nd Year College assignment and aims to educate it’s visitors about the psychology behind music.  I was required to draw upon a number of skills including:

  • Research
  • Paper Prototyping
  • Photoshop
  • Coding (HTML/CSS)


Step 1: Brainstorming and Ideation

The first step in the creation of this website was simply to decide what to actually focus on.  The assignment brief I received told me very broadly to create a website based around a topic in Psychology.  As a huge music fan and musician, the brainstorming process didn’t take too long.  I did however devote a considerable amount of time to choosing what areas of music psychology to focus on.  In the end I chose Personality, Neuropsychology and Cognitive Benefits.

Step 2: Persona Creation & Research

Having decided what topic my website would focus on, it was time I decided who it would be aimed at.  I was looking to create an accessible site that would engage both psychologists and anybody else who was curious about music and the brain.  As this is quite a wide demographic I created Assumption User Personas in order to narrow my audience and focus my design.

User Persona
Assumption Persona that I created

Aside from User Research, I had to carry out research on the psychology of music of course.  I gathered this from a number of sources including psychology websites such as PsychCentral and academic journals.  Much of the website’s information was taken from Daniel Levetin’s book “This Is Your Brain on Music”.

Step 3: Sketching & Wireframing

Before I began any Photoshop or Coding work, I created paper sketches in order to get a clear idea of how I wanted the website to be laid out.

Step 4: Photoshop Mockups

Using my paper sketches as guides, I began to create mockups (using Photoshop) of how I would ideally like the website to turn out.  Below you can view one of my paper wireframe and it’s equivalent Photoshop Mockup for the Personality and Music page.

Step 5: Coding

The final step in creating the MuPsych was to turn my Photoshop mockups into functional webpages using HTML and CSS. All coding was done in the Notepad ++ text editor program.  I also made use of the 960 grid system.

Software Used

Adobe Photoshop
Adobe Photoshop
Notepad ++
Notepad ++

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s