Simple Key

Themeforest.net 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)
http://demo.themevan.com/simplekey/#top

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.’
http://badjohnny.me/

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

He also has a twitter so I could ask him a question.
untitled
https://twitter.com/BadJohnny_Woo

Conclusion
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 https://twitter.com/justinbieber

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:

Heartbreaker
all-bad-415 heart

All That Matters
all-bad-415 atm

Hold Tight
all-bad-415 atm tight

Recovery
all-bad-415 rec

Bad Day
all-bad-415 rain

All Bad
all-bad-415

PYD
pyd

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 whatfontis.com
jb

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 whatfontis.com 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 http://www.justinbiebermusic.com/

Here is the image I put into whatfontis.comjustin b http://www.justinbiebermusic.com/want-to-star-in-justins-next-music-video/

Found it! Its Open Sans. font jb red

It is available in different weights.
open sans http://www.1001fonts.com/open-sans-font.html

I also had a look at Justin’s Believe Movie site. It looks like this:
movie-site-grid-join-up-all-three-parts
http://www.justinbieberbelieve.com/

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:
Raleway
http://www.whatfontis.com/Raleway-Thin.font?text=Walmob

It comes in different weights:
rw
http://www.fontsquirrel.com/fonts/Raleway

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

Conclusion
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.
7075260791_4d67cc45c7_z
http://killingthecabinet.com/the-30-days-of-coachella/

Festival-Coachella-2011
http://www.soulculture.co.uk/wp-content/uploads/Festival-Coachella-2011.jpg

img_1253
http://jadorais.files.wordpress.com/2012/05/img_1253.jpg

img_1286
http://jadorais.files.wordpress.com/2012/05/img_1286.jpg

img_1133
http://jadorais.files.wordpress.com/2012/05/img_1133.jpg

Cullen+Omori+Coachella+Valley+Music+Arts+Festival+NgKL4uhNVLpl
http://www.zimbio.com/pictures/DXcOI0_Kf8a/Coachella+Valley+Music+Arts+Festival+Day+3/NgKL4uhNVLp/Cullen+Omori

Here are the pictures I did use. I used this picture because the Ferris wheel is quite a spectacle.
coachella-500-4074
http://imgix.8tracks.com/i/000/177/290/c/coachella-500-4074.jpg?fm=jpg&q=65&w=1024&h=1024&fit=max

This huge snail moves around the festival. I thought it was something different and eye-catching so I included it.
E99949548BE5D1D26BAD2E0838C46_h498_w598_m2
http://music.uk.msn.com/features/coachella-2013-the-best-pictures-from-this-years-festival?page=8

I thought this would be perfect because it has enough space for the title.
Jack Johnson Cherry Picker
http://www.wired.com/listening_post/2008/04/coachella-aphex/

For the right hand side column I used this image as it links back perfectly to the subject of the article.
made-in-aviary3
http://www.thisoutfit.com/?attachment_id=1417

Iggy Azalea is a popular singer so I thought I would include her. She looks beautiful and eye-catching in this picture.
1126
http://fefesiriano.com/2012/03/27/magazine-fab-iggy-azalea-dawn-richard-melanie-fiona-nicki-minaj/

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.
Music-w1600-h900

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.
untitled

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.
http://www.hollywoodreporter.com/news/coachella-2013-day-1-review-439069
http://entertainment.time.com/2013/04/23/coachella-2013-recapping-the-music-festival/
http://www.popsugar.com/Celebrities-Coachella-2013-29347207

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.
forbes
http://fashion.telegraph.co.uk/galleries/TMG9333597/3/Top-10-highest-paid-models-of-2012.html

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.
2_222850461
http://im01.galawallpapers.net/photo/81165/Gisele_Bundchen25.jpg

Harper's Bazaar Brazil November 2012 2
http://fashionopher.blogspot.co.uk/2012/10/gisele-bundchen-by-terry-richardson.html

Harper's Bazaar Brazil November 2012 1
http://fashionopher.blogspot.co.uk/2012/10/gisele-bundchen-by-terry-richardson.html

gisele-bundchen-harpers-102612-001
http://www.celebuzz.com/photos/gisele-bundchen-poses-for-harpers-bazaar-brazil/gisele-bundchen-harpers-102612-001/

tumblr_mkpgpoJPnd1qcy67io1_500
http://www.tumblr.com/tagged/gisele+

la-modella-mafia-Gisele-Bundchen-x-Vogue-Brazil-July-2012-photographed-by-Patrick-Demarchelier-5
http://lamodellamafia.com/tag/gisele-bundchen

Gisele_Bundchen_Blossom_Sandals_Collection_Campaign_02
http://tinyurl.com/qa6mjev

Here are the pictures I did use. I used this picture because she is smiling and she looks like she’s celebrating her success.
harpers-bazaar-novembro-2012-editorial-02
http://www.harpersbazaar.com.br/wp-content/uploads/2012/10/harpers-bazaar-novembro-2012-editorial-02.jpg

I used this one because I needed a smaller picture to fit in the grid and the colours are beautiful.
6894134315_c2435619da
http://tinyurl.com/qa6mjev

I used this one because it fits into the grid and it shows off her long model legs.
ipanema_gb_colorful_sea_1
http://www.emmagem.com/wp/wp-content/uploads/2010/03/ipanema_gb_colorful_sea_1.jpg

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.
B-ndchen-gisele-bundchen-27935253-1600-1200
http://www.twylah.com/ModernMom/tweets/299929766558068736

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.
untitled
http://dannyiswaymoreawesomethangodsweener.blogspot.co.uk/2010/11/popular-bands-in-my-genre.html

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.
bombay+bicycle+club
http://dannyiswaymoreawesomethangodsweener.blogspot.co.uk/2010/11/popular-bands-in-my-genre.html

I used this one because I saw that Cara Delevingne was in the press recently and her face is attractive and eye-catching.
cara_delevingne_Style_Magazine_03
http://ftape.com/media/?p=50083

I used this one because Kate Moss is a well-known model.
KMoss2_V_29jun11_MarioTestino_b_1
http://www.vogue.co.uk/news/2012/10/31/kate-moss-breakdown-and-johnny-depp-heartbreak—vanity-fair-interview

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:
http://www.forbes.com/sites/briansolomon/2012/06/14/the-worlds-highest-paid-models/
http://www.dailymail.co.uk/tvshowbiz/article-2244386/Gisele-Bundchen-baby-Supermodel-Tom-Brady-welcome-second-child-Vivian-Lake.html
http://www.telegraph.co.uk/news/worldnews/southamerica/brazil/8301860/Gisele-Bundchen-the-worlds-highest-paid-model.html
http://www.dailymail.co.uk/tvshowbiz/article-2089378/Tom-Brady-Gisele-Bundchens-20million-dream-home-finally-finished.html
http://www.dailymail.co.uk/tvshowbiz/article-2268464/Tom-Brady-Gisele-Bundchen-add-finishing-touches-20m-moated-fortress-outdoor-play-area-children.html