A video tour of the MuPsych website and some of the code used
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
- Adobe Photoshop
- Coding (HTML/CSS)
Process
Step 1: Brainstorming and Ideation
The first step in the creation of this website was simply to decide what to focus on. The assignment brief I received asked me 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 And 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 needed to carry out research on the psychology of music. I gathered this from a number of sources including psychology websites such as PsychCentral and academic journals. Much of the website’s information was Found in Daniel Levetin’s book “This Is Your Brain on Music”.
Step 3: Sketching And 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.
Paper sketches alongside Photoshop mockup
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 using a simple text editor program. I also made use of the 960 grid system.