iWonder – Brief 

iWonder is an exciting new product, created to revolutionise the way people interact with world-class BBC content.” We designed a future-facinidentity to work across the online product and extend into print and broadcast.”

This is the summation statement by the design company studio output

http://www.studio-output.com/case_study/bbc-iwonder/

…who produced and developed the iWonder visual identity.

iWonder, essentially presents on-line content on a wide and diverse range of topics from light-hearted and fun to sombre and challenging – and covers many different genres, from Science to Food.

The next phase of the development of iWonder is to extend the visual styling into print and broadcast. In practice this will result in a series of 1 hour documentaries to be shown weekly on Tuesday evenings at 8.00pm on BBC1 commencing in January 2015. These documentaries will be supported by a monthly BBC iWonder publication (magazine) featuring the content from the online site and the BBC broadcast.

You have been commission to present a pitch for this phase of the iWonder development.

Research – iWonder, Posters, Magazines

Screen Shot 2014-11-16 at 12.55.14

This is the website for BBC iwonder which shows all the up coming documentaries such as ww1 and the universe. On there website they have used both the BBC and the i wonder logo, so when designing my posters i shall make sure i use both logos on all of my designs to keep it constant with the website. also the colours used vary because they have used an image for each different subject and placed a shape over the image and dropped the opacity then placed the text over the top. As you can see they put there text white and it stands out from the image and shape and is the first thing that you can see.

Screen Shot 2014-11-16 at 12.57.54

these are some examples of the documentaries and how they have used shapes on top of the image to give them a good position for there text. Also this makes the text legible because it doesn’t get mixed in to the image. the colours used on this website is black and white text but they used a lot of green and blues for the shapes above the images. On some of these designs they also have a small circle in the corner with a picture of the main person in the program with there there name and there role such as presenter. I think they use the text as a question sometimes because it draws you in and makes you more interested because you want to find out the answer to the question.

Film poster

284105a

This is a film poster i found on the internet which shows text and imagery working together. The text is bold on the key words march and penguins for more effect, and the imagery of the penguins is perfectly inline with the title at the top this makes it look neat and professional. I think the right colour for text was used because there is a good amount of dark colours but not to much, also it is easy to read and doesn’t clash with anything around it. The text at the bottom is also placed well because it is slightly larger across the page than the title but the text is smaller so it looks in proportion.

Program Poster

image-millionaire

This is a documentary i found on how the ira robbed a bank this looks interesting because of the imagery that has been used with the guy holding a gun with a black mask around his face, this makes you want to know what happened and who these people were. Also the text works with this image well because they have used the word great when saying the great ira bank robbery, this makes us think it was something big and we wouldn’t want to miss something that was so great. on this design they have used square black boxes behind the type which makes the text legible but is really simple and not creative.

Film poster

The_Avengers_(film)_poster_011

I like this film poster a lot because the text and images are working really well together. The first thing i noticed is that the image uses a lot of dark colours which makes the parts which are not dark stand out for example the text and the spark on iron mans hand. This shows authority and power. The image works really well because they all have there own stance to show there personality and character then they have the names at the top which make me thing of plaques in a row which also shows power and makes you think of heroes all lined up.  The text for the title which has been used is in italic which make you think of movement or speed then they have created an a row in the A which also shows movement and also the circle shape on the A which makes me think of a team all together.

Film Poster

the-dark-knight-2008--12

I like this design because not only does the text and imagery work together it also links together to become a custom design. The text is written in blood which shows the personality and character of the joker, then they decided to use the quote that he famously used and drew a line of blood coming from the text to make his smile on his face which he also has in the film batman. I think this is a very effective poster because details are not missed like the city in the background and the clothes he wears and the look of his hair. Also they have managed to make the batman logo show up well on the frosty blurry background with out any legibility issues.

Different Types Of Magazine Spread Research

magazien spread1

I like this magazine spread because I like the way they have used six watches but placed them on the page in a way they over lap but don’t look like they are stuck over each other, because they have lowered the opacity to some of the images and made some bigger and some smaller. I also like that they have used a black background because it sets a theme which I think makes the watches look expensive, luxurious and for top end brands. The way they have placed there text could have been better because it seems to be chucked around the page and makes it hard to read, but I like the way they have made the title because its all in capital letters which makes it easier to stack on top of each other and they have also made the word Bold actually be bold then positioned the word and to make sure it lines up with the word beautiful underneath. One other thing about the text that I like is the subheadings because they have made them bold which sets them apart from the text and shows what they are so they don’t disappear in to the text. The photography to take these pictures is very good because they have made it shine on parts of the watches and shadow on other parts which really sells the product. They have used a sans serif font because it looks modern and goes well with the design.

magazine spread 2

I have found this magazine spread that I like and I like it because of the colors the layout and the imagery used. Starting with the colors I like the way they have used black white and red because they all work well together and don’t clash at any point. Also the way he has laid his text out is really good because he has sectioned some parts of in red boxes and then some are sectioned of by lines which makes it more professional. The image he has used also works well because it doesn’t’t come all the way on to the page so it doesn’t’t take up to much space but it also looks good quality and neat. For his title he has put ted inside the P of the word Price which fits in well and is easy to read. He has also chosen a font for his title which is straight on the bottom and the top so that it runs parallel with the lines underneath and the top of the page. He has also used some of his own work which as red curved lines and it gives the background some design. On this particular design he has made headers and footers which shows a professional magazine which takes pride in design. They have used a good point size because it is small enough to look professional but still legible when printed out on a4 or a3 paper. He has used a sans serif font which is perfect for his design because it is more modern and looks corporate.

magazine spread 3

The images used on this magazine spread are effective because they have made the left and right edges are made to look white and it goes well with the text because they black out boxes behind the text. They also use two different color for the text which include white and gold they have done this because it makes it seem like an important subject because gold is thought to be luxurious and expensive. Also it is good to use different colors/ weights or textures to make certain words stand out which may be important. The font used is a sans serif font they have done this because they are writing about music so they want to be the newest and up to date magazine also the point size used on the information is good because it looks professional but is legible and the title and the large quote are the write size because they go up in importance. They have also used a header and a footer on each page to give it a better design and look professional. I also like the way the designer has put a large picture on the left with the title and then added all the information on the right so that if u want to read it you can read on.

magazine spread 4

One thing I like about this design is that it uses a lot of white space, they do this so that it draws attention to the images and the writing because they stand out more. Also I like how simple the design is because it’s a large image it takes up a lot of room so that the information can sit at the side of the image. The largest text on the spread is JAY – Z so that also stands out and they have made it mold and used a sans serif font which makes it look modern and they have exsteneded the asceder so that it runs all the way up the page from the J. The point size they have used for the small text is good because it looks neat and sits well with the image. The magazine also has a header which helps you get around the magazine when reading the page number. The white background is god because it looks clean, neat and professional. The type hierarchy for this design would be the title at the top because it is the biggest point sixe and it is the boldest, then it would be the writing in the black box and then the information below which comes last because its harder to read.

maga 5

This design is different to the ones I have been looking at because it has more of a background design unlike the rest. I have chosen this design because there is a lot of things I don’t like about it for example he uses a lot of different type faces and it all looks chucked on and to random. Also the images look chucked on because of the background been a detailed image. I also think the text is to big which makes it look tacky and not neat. The only thing I do think they have done well is made the text align with the images and they have used 3 columns on each page which makes it all tidy. The images they have used clash with the background because they look like they have just been placed on and not edited in any way to make them look apart of the magazine spread.

iWonder subjects

Screen Shot 2014-11-18 at 09.26.03 Screen Shot 2014-11-18 at 09.25.29 Screen Shot 2014-11-18 at 10.57.41Screen Shot 2014-11-18 at 09.24.25

I have chosen to use these different new series for my posters because they looked interesting and i can use some imagery to design these poster. I want to make sure all my four posters look consistant and all part of the same design campaign. For each poster i want to use one image and the text to be legible.

Development

Screen Shot 2014-11-18 at 11.24.47

This is my first poster design i have made, i used an image and turned it in to a silhouette then place an image behind it so this showed the design in two ways. I also did the title our world war in the same colour as the image which was a light grey. The grid system i used was having my image at the bottom with the title fully across the page and the subtitle with the information below. I need to improve this by adding more information like the times and possibly the presenter. I chopped the bottom of the words our world war of to see weather the writing underneath stacked better but i wasn’t sure weather this looked any better.

Screen Shot 2014-11-18 at 11.24.33

This is the next poster i made using an image of space and blacking the bottom out gradually using the gradient tool. I then used the iWonder logo i created to go on top of the image and pick out colours from the image. I then put the title human universe underneath towards the bottom with the information also underneath. The grid system for this poster was the image at the top with the title in line with the R of the iWonder. I think i need to change the positioning of the iWonder possibly to the bottom of the page because there is a lot of space at the bottom, although i do like where the iWonder is at the moment because the opacity is dropped it looks real effective but the human universe looks lost in the bottom of the page.

.Screen Shot 2014-11-18 at 11.24.40

This is another poster i designed which is the human universe again, I did this one with out using the big iWonder logo and instead used the logo at the bottom underneath the title and subtitles. This poster shows more imagery and focuses on both the image and the text but i think it is to dull and need to be brighter. I think it would be better if i included the i wonder logo bigger because from far back there is no indication on what this poster is. I think the text went to far across the page because there wasn’t much of a gap left at the edge of the page.

Screen Shot 2014-11-18 at 10.57.20 Screen Shot 2014-11-18 at 09.20.02 Screen Shot 2014-11-18 at 09.19.53 Screen Shot 2014-11-18 at 09.19.43

These are my four final designs i decided to use the iWonder design i created at the bottom of the page because this grid system worked out better leaving room to see the images and room underneath to place my titles and subtitles. The first one for climate change i chose the colours out of the ocean because it keeps my colours consistent and i also kept the text the same size through out my posters. The second poster i used a black and white photo because this was about our world war which was before we had coloured photos this is why i used light and darker shades of grey for my text, for all of my posters I lined my title up with the D on the word iWonder then i lined up the subtitles across with the title to make it look neat and it also is easy to read because its all below each word stacked well. The third one i did was for the human universe i picked a bright image which had lots of colour so I could use these colours in my text which is what i did. I found out the way I laid out the text and images looked much better because it didn’t clash colours and left lots of space to see the image. For my fourth poster i chose black and white again because this was another old story from the past which i  also chose colours from the image to use in the text, I like how the posters all look part of the same campaign and also are legible and tell all the information necessary.

Magazine Covers

Screen Shot 2014-11-24 at 11.01.40Screen Shot 2014-11-24 at 11.18.09

This is the background i have started to make for my magazine front cover. I used a lot of images because iWonder covers a range of different things and if I am being specific on the inside pages I thought maybe i should show a range of different ones on the front. I am going to try putting the iWonder logo and title in the bottom right corner like i have with the posters to keep it consistent.

Screen Shot 2014-12-09 at 09.25.27Screen Shot 2014-12-09 at 09.24.52

 

This is my first iWonder magazine cover, i decided to go back and start by picking one image to use because there was to much to look at on the previous designs. The first thing i did was design the top of my magazine by placing my iWonder logo across three columns on my grid, I also moved my image around so that the text would sit around the polar bears head. I also choose to use the colours which are used in the background image to make my design consistent and made my iWonder text grey because it shows up well on the white and blue background. The text at the bottom i decided to stack on top of each other because i think it makes the cover look less boring and different from all the other normal style magazines. I made the text capitals because type can be stacked better because of its straight edge. I also changed the placement of the word magazine underneath the title because it looks neat and inline.

Screen Shot 2014-12-09 at 09.26.14

 

This is my magazine spread which i started by designing the background by lowering the opacity of an image and placing it over another which shows different types of things that could be seen in space. I also added the page number next to a thin line at the top and bottom of the page which brakes the design, pictures and text from the edge of the page. Then i started placing the title which i decided would go across three columns on my grid. I then started to find information and images to suit the theme and the question which is asked in the title. I decided that the right page had a nice background design so i only put a small sentence so that it doesn’t cover up or ruin the design.

Screen Shot 2014-12-09 at 09.25.42

 

 

I decided to lower the opacity on my images because they looked really bright and it was growing attention away from the background design which i think is the strongest part.

Screen Shot 2014-12-09 at 09.26.26

 

This is another alternative magazine cover which also uses just one way to show the iWonder series, I picked colours out of the background to use throughout my design because this is what i have done on all my designs so this keeps them all consistent and easier to see they are part of the same campaign.Screen Shot 2014-12-09 at 09.53.34

As you can see on the left page everything is lined up with the Three column grid system, I think this makes it easier to read and see, also easy to follow and shows you what to look at next. I didn’t stick to the grid on the right page because i think it looks better place in the middle.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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