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:
- Paper Prototyping
- 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.
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.