Design Process – Muse

In this blog post I want to demonstrate my design process. After conducting my initial research, I wanted to implement what I had learnt.


I chose simple shapes, however tried to apply “CRAP”, (Contrast, Repetition, Alignment, Proximity) to give the design balance and generate interest. I chose a colour scheme of red, black and white to generate contrast, but there is deeper meaning to my design choices. Following my research, I really liked the pentagram design. The colour red gave the feeling of passion, excitement, and also has more sinister connotations. Since a lot of my work for the camden quarter is quite dark with vibrant colours placed on top in the form of text and illustration, I think this is linked with the colour choices.


I tried a variation of different of different typefaces, whilst thinking about the aesthetic features of the design and also the messages the typeface might speak to my audience. Initially I tried a quirky, retro style serif typeface, which I thought might mix well with my design work for the Camden Quarter. However after thinking about my audience, I think the message of the typeface doesn’t give the professional feel that i’m trying to get across to potential clients.

I looked back at my research and found that actually a more modern typeface might be more appropriate to the design. I used typeface for my name, so the audience links my name to the connotations of modern, and professional. The typeface I chose was called “Abril FatFace Regular”. It has strong contrast between thick and thin strokes. Another example of this typeface being used to convey a similar message is the TV Show Modern Family. As you can see below, the modern typeface can be seen in the word “family” which links to a more modern, “untraditional” family. The typeface its combined with is also interesting, a geometric sans serif. This has a modern tone to it to, which is pleasing to the eye especially on backlit displays such as computers, mobile devices, and TVs.


Screen Shot 2016-03-14 at 10.49.50.png

For the body text I chose helvetica, which is a sans serif Grotesque typeface. Helvetica was designed after the war in Europe, and many companies were looking for a change from decorative, fancy typography. Instead, Helvetica boasts sleek lines and modern sensibilities, which is exactly what the big corporate companies were looking for. Helvetica is very similar to arial, however arial was designed later in 1982. I read a really interesting article that compares the subtle differences between arial and helvetica.

Arial versus Helvetica

Interactivity & Navigation

After looking at other sites, one key thing I noticed is how the website interacts with the audience to keep their interest. I chose to use slide shows on the portfolio page so the user can scroll through different pieces of work. I also added anchor points to the beggining of each piece of work, and then added a menu bar below the title “Portfolio”. This means the user of the site doesn’t have to scroll down through each piece or work. Instead they can choose a specific project from the menu bar and will automatically take them to that project.

Screen Shot 2016-03-14 at 10.58.33


On the master page, I added a menu bar for ease of navigation around my site. Each page is listed in the menu bar, and the user can simply click and the menu will drop down, and then they can choose which page they would like to visit. As my research states, its important that the user isn’t looking for the menu bar. With this in mind, I made sure that it appeared in the same place on every page by adding it to the A-Master page.

Along with the menu bar, the other important elements that should be shown on every page is the logo and name and the links to external sites. I chose to display the external links in a red bar pinned to the bottom of the browser so they are always visible on every page. This makes it easier for the user to get in contact, opposed to copying and pasting the text into a web browser or mail client.

Screen Shot 2016-03-14 at 11.13.00.png


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s