Simple Key describes this piece as follows: ‘SimpleKey is a multi-purpose one page WordPress Theme. It will suit everyone who wants to show their portfolios or introduce their company services. If you are an iPhone or an Andriod APP developer, you can also use this theme for your APP products introduction, or you can simply use it for your daily blogging.’

The main reason I think this piece works so well is the combination of:

  • photography – the designer has used really great photography. Pictures of a city from very high up, a picture of a building with flags on a cobbled street, route 66 in America, a dock with cars going by captured using slow shutter and a few pictures of some continental buildings with shutters.
  • vector icons – some simple vector icons illustrate the different services available.
  • type – the typeface is clear, simple and modern.
  • infographic – there is an infographic to illustrate levels of skill.
  • textures – the textures have had a big influence on me. I think textures really bring something extra to the quality of the design.
  • menu – There are two menus. The menu at the top stays visible when you scroll down. This is really useful as you can jump to another place without scrolling. The portfolio section has its own menu which splits up the work into different types.
  • parallax scrolling – the way the site moves is really eye-catching. It makes it look really professional and 3D. It makes the page come alive a little bit because it moves in a way you might not expect.

sk-flat (3)

The disadvantages of the site is that it is a template so if you are looking for a unique design, this will not be it. Perhaps you can customise it though and change the photography and colour scheme so you can differentiate it from the crowd.

Since I like this design so much I researched into the designer and it turns out he lives in Xi’an city in China. His website tells me the following ‘I’m a freelance web designer that live in Xi’an city, and I like create unique WordPress Theme, now I’m working on ThemeForest full time. Visit my portfolios on ThemeForest.’

I looked up his city. Its marked in red on this map from Google:

He also has a twitter so I could ask him a question.

I will definitely be thinking about this design when I make my website. I will almost definitely be using textures. If I can work out how to create parallax scrolling I may use that too.

Concise Design – Justin Bieber’s Journals Artwork

After hearing the news that Katy Perry has overtaken Justin Bieber as the most followed person on Twitter, I decided to check out Justin’s twitter page to see how many followers he has. I saw the pink symbols on the left. I didn’t know what they meant. jb twit

In the end I found out that Justin is releasing one single (aka #journal) every Monday (#MusicMondays) and the symbols are the artwork. I added the grey border myself otherwise the edges can’t be seen. Here they are:

all-bad-415 heart

All That Matters
all-bad-415 atm

Hold Tight
all-bad-415 atm tight

all-bad-415 rec

Bad Day
all-bad-415 rain

All Bad


Roller Coaster
all-bad-415 atm roller
I think there are a few more yet to be released. I will probably add them to this post.

I want to find out what typeface is used on Justin’s Twitter on the top left. Here is the image I put into

Akzidenz Grotesk BQ is the closest match I could find. The S doesn’t look quite the same though.
found it main name font

Here are some of the other results from that were close matches:
BJ 1
BJ 2 found it main name font 2 found it main name font 3

While I’m at it I’d like to know what one of the typefaces on Justin’s website is.jb site

Here is the image I put into whatfontis.comjustin b

Found it! Its Open Sans. font jb red

It is available in different weights.
open sans

I also had a look at Justin’s Believe Movie site. It looks like this:

I’ve seen this type of grid before. It looks like it’s all mixed up but it isn’t. There are columns. It’s quite clever. If I make my browser bigger/smaller the grid re-adjusts to fit. I already recognise the typeface that is used. Its Raleway. See below:

It comes in different weights:

Justin’s Believe Movie site uses boxes with textured backgrounds to show the tweets received from fans. Here are the different textures:
paper material lines diamond cross

The artwork for the ‘journals’ are some of the most inspiring pieces of design I’ve seen since I discovered the Simple Key website template. It is very eye-catching and striking. You can’t help but look at it. These pieces illustrate the point about the best idea being the most simple one.

At the moment I am planning on using textured backgrounds for my website as they give a more professional look.

Making the Music page

I decided to do an article on Coachella as I kept seeing it being mentioned on the internet. I’d never heard of it before so I hope others would like to discover it too.

I looked at a number of different pictures to see which would be the most eye-catching to use. Here are some of the pictures I looked at but didn’t end up using.






Here are the pictures I did use. I used this picture because the Ferris wheel is quite a spectacle.

This huge snail moves around the festival. I thought it was something different and eye-catching so I included it.

I thought this would be perfect because it has enough space for the title.
Jack Johnson Cherry Picker

For the right hand side column I used this image as it links back perfectly to the subject of the article.

Iggy Azalea is a popular singer so I thought I would include her. She looks beautiful and eye-catching in this picture.

Here is how the layout looked when I started the design. I used the text from the previous article as a template to design around.

The typeface I decided to use was Pluto Bold in 48pt. I used this one because the C has an interesting shape. Since music festivals are interesting and different I thought the two would go well together.

Here (below) is how the design looked at the time of the crit on the 13th May. I wont talk about that here as I made a separate post about that.

Here you can see I have made some changesI brought the menu down a little bit on the left. I did this through my own reflection, not because of feedback. I just didn’t like the way it looked like it was glued to the black border. It looked squashed. So I brought it down a touch.
Music w1600 h900 07 05 13 time 11 08

Here is how the design looks now. As you can see I have made further changes. At the crit the tutor said its better to avoid large columns of text so I made the large columns at the bottom of the page into two smaller ones which will be easier for the audience to read.
Music-w1600-h900 20 05 13
I think this design has been successful and I’m happy with it.

Here is where I got the article from for the music page.

Making the Fashion page

For the fashion page I had the idea to do an article on the highest paid model in the world. I didn’t know who it was so I did a search to find out. I found this page.

So the answer is Gisele Bündchen. I looked at a number of different pictures to see which would be the most eye-catching to use. Here are some of the pictures I looked at but didn’t end up using.

Harper's Bazaar Brazil November 2012 2

Harper's Bazaar Brazil November 2012 1





Here are the pictures I did use. I used this picture because she is smiling and she looks like she’s celebrating her success.

I used this one because I needed a smaller picture to fit in the grid and the colours are beautiful.

I used this one because it fits into the grid and it shows off her long model legs.

I used this one because it fits in the grid and because I saw this image in an advert for The One fragrance from Dolce & Gabbana.

For the link on the right hand side column I wanted to do a link about music so I did a search to find a popular indie band. I do not personally listen to indie music but I know it is very popular. I did a search to find out which bands are relevant. I found this page.

On the page above I found a picture of the Bombay Bicycle Club. I have heard this band being discussed on Radio 1 so I decided to use this band.

I used this one because I saw that Cara Delevingne was in the press recently and her face is attractive and eye-catching.

I used this one because Kate Moss is a well-known model.

Here is how I placed the pictures on the page.
06 05 13 Fashion w1600 h900

The typeface I used is Proxima Nova Black in 61pt.
08 05 13

Here you can see I have made some changes. I decided to go with all caps for the title because the tutor and a class mate both gave me feedback on the fact that some of the titles were all caps and some were normal sentence case. I could see how this was confusing the tutor and making him think that some pages were articles and some weren’t  All the pages he was looking at were articles so I changed all the titles to all caps. My class mate also expressed a preference for all caps. So this convinced me to change all the titles to all caps.

You can also see I brought the menu down a little bit on the left. I did this through my own reflection, not because of feedback. I just didn’t like the way it looked like it was glued to the black border. It looked squashed. So I brought it down a touch.

I also added the Copyright type at the bottom of the page. The other change I made was to add the name of the journalist who wrote the article. Of course these journalists are fictional. The name and date give the site realism. I added this through looking at my research and realising it needed to be on the design.
20 05 13
I think this design has been successful and I’m happy with it.

I got the article from the following sites: