Design Principles - Grids

I went to the library and chose some of the magazines that they have there which I thought had nice layouts. I then laid these magazines out and used tracing paper to try and establish what the grid system that had been used looked like.

Some of the pages were really easy to figure out and I had some which looked as if they used a huge amount of columns. I think these pages must have been designed using a modular grid because often components of the page sat on the same horizontal line also.

This exercise helped me to understand grid systems in more depth and has inspired me in ways that I can utilise the grid. 

OUGD406: Communication is a Virus (1/2)

We were given this brief and assigned our groups. Each group was given a starting point for the project. Our viral campaign would try and encourage people to read more. We spent time thinking about which area to look at and how to specify this brief. We thought about various different areas but the two we liked the most were encouraging people to read news and encouraging people to read novels. We decided that looking at current events had more scope as to what we could do for a viral campaign. As a group we had more ideas for this and stronger ideas. We went away and individually did some research that would inform the creation of this campaign.

Some of my initial research is shown here on my design context blog.

Shown above are the notes that I took when we all got together as a group after going away to do some research. We decided that our target audience was students in Leeds as this was accessible to us.

Josiah bought in a publication called the week which aims to provide unbiased coverage of the news from that week. This was something that really helped us to form our ideas.

We thought about what our outcomes could be and decided upon a zine, a video, a twitter account and possibly posters. We wanted the zine to include a summarised, unbiased report on some of the top stories from that week. The zine would include illustrations to accompany the reports and would encourage readers to get involved by giving their opinions via twitter. We felt that the combination of multiple platforms would appeal to the target audience of students and encourage people to respond to the publication, thus increasing our web presence. 

We spent time thinking of a name for the campaign and the publication. We decided we wanted to focus on the aspect of everything being on twitter within the name. 144 news was the one of the leading contenders for the name as we originally thought twitter allowed 144 characters. That night I spent time coming up with some logo ideas. Shown below is one of the ones that I liked best.

When we next met up we realised that twitter in fact allows 140 characters. I showed the logo anyway as it would be easy to change to 140 news. Although the group liked the logo they said that they felt it looked too much like an official news channel and we were going for a more friendly image.

We spent time as a group coming up with new ideas for the name of the zine and twitter page. We decided on 'One40' after experimenting with different ways to format this name. We felt it rolled off the tongue, was memorable, fitted with the idea of the twitter characters and the combination of letters and numbers made it more visually interesting.

We thought about the format of the actual publication and toyed with the idea of showing two contrasting sources and giving our own unbiased overview. We decided that finding two contrasting sources for each story might be too difficult. We decided instead to write our own short summaries that were under 140 words long. This fits with the name and although we realised it would be difficult to inform people of all the important details in this format we decided this wasn't that important. The aim of our zine was to get people interested in reading more and after seeing our zine they could go and research further if they chose to. 140 words isn't an intimidating body of text so more people would happily read it and this may spark some interest. 

Deciding on the name started some interesting discussion and we thought of some ideas which as a group we all liked. We decided that we would print 140 copies of the zine and also have it avaliable online. Each zine would be stamped with the logo which we decided would have a forward slash in front of. This was we could number each copy and people would know which issue number they picked up. This would provide an element of exclusivity which we thought might build hype. 

We decided to have the zine split into different sections in the same way that a newspaper would be. The sections we decided upon were; World, UK, Strange, Tech, Sport and Politics. 

We also came up with a mission statement which summed up the purpose of One40.

 "One40 is an Illustrated zine that aims to provides students in Leeds with an informative, balanced and concise overview of current affairs.'

After compiling and distributing the news stories that we decided to use as content we all went away and wrote tweets for the stories that we weren't going to feature. We also had to write two articles under 140 words on the featured stories as well as doing illustrations to accompany these. The featured stories I got were the Uganda Anti-Gay Bill and the Legal High; Doxylam. My illustrations for these stories are shown below.

My idea for this illustration came after seeing some of the posters that Ugandan citizens were using to protest for the Anti-Gay bill. I felt that some of them were so ignorant that compiled they would illustrate the ridiculousness of the situation. I drew the illustration by hand and then scanned it in and edited it in Photoshop

This is the Illustration that I did for the Doxylam story. I wanted to shock people by really pushing the fact that Doxylam is a legal high. I decided to do this by showing it being sold in a way that is an accepted part of our society.

We compiled all of the stories and illustrations into the zine. As a group we decided on a minimal layout and chose the typefaces Leberkass Grotesque and Apercu. We also decided on the final version of the logo. 

Josiah put all of the content into the framework and uploaded the PDF to issuu so people could access it online. 

Secret 7 Submission

OUGD406 - Secret 7 Development

After looking at work by Stanley Donwood, (shown on my design context blog here.) I was inspired to take forward one of the sketches that I had done but not bought to the crits. Working straight into Illustrator but from my sketch I produced this piece. I used shapes and strokes that I drew with the pen tool with varying stroke widths to achieve the line style and a clipping mask to get the effect I achieved with the sun.

I think the simplicity, high contrast and what it actually depicts makes this quite a striking design and I intend to develop it by experimenting with different printing methods. 

Secret 7 Design Process

After the session where we started producing thumbnail sketches I decided to do another mind map to get some more ideas for my sketches. As the song is called 'KarmaComa' and Karma is a belief started within buddhism, I thought it would be interesting to look at buddhist art and possibly try and incorporate this into my designs

I gathered a basic understanding of the belief of Karma and also read up on a belief called the 6 realms of rebirth which linked to Karma. It is the belief that when your soul is reincarnated there are six different realms that you can be born into.

As one of my interpretations of 'Karmacoma' was being oblivious to the bad that you are doing, I wanted to look at symbols for bad karma. Although I was unable to find a symbol for bad karma I did come across something called the three poisons. These are the harmful qualities of ignorance, anger and attachment. Buddhists believe that these things give bad karma. They are represented by a rooster a snake and a pig.

I did another 20 thumbnail sketches to add to the ones that I did in the session. This allowed me to get a large amount of ideas down onto paper and allowed me to visualise what I thought would look best. I was really happy with some of my ideas but whilst researching and sketching I came up with the idea shown below. It uses a combination of a few of the different sketches. 

I had 5 designs that I was happy to present but unfortunately I didn't have much time left to produce mock ups for the crit so they are not to the best quality. The 5 pieces I displayed in the crit are shown below.

I had lots of feedback, some positive and some negative. A lot of the feedback focused on the aesthetics and as they were done quickly I knew there was lots of work to be done on the aesthetics. The most helpful feedback was people telling me which concepts they liked the best. People liked the dominos design and the buddhist design best. The dominos design was probably my least favourite out of the 5 so i decided to pursue with the buddhist design.

OUGD404 - Research for Groups

We split the questions so each of us had a roughly equal amount of research to do. I looked online at web pages, articles and essays relating to my questions. I put all of my research into an inDesign document and then exported it as a PDF. The PDF can be viewed and downloaded here.

OUGD404 - Type Hierarchies task

Shortlist Magazine

This page from shortlist magazine has a variety of diferent size and weight fonts. I am not sure which typeface has been used for the headings and subheadings but i can see that 8 different fonts have been used. I have numbered the text in the order that I looked at it. Understandably the title set in 2 different fonts and colours was the first thing I read; it is significantly bigger than the type on the rest of the page.

I then read the caption at the top of the page, this is probably to do with the position, in the top left of the page and also because of the vibrant pink colour of the type. This then led me to read the other pink titles. I read these from the top to the bottom. 

I noticed the captions on the images next, I think this is because they are bolder than the body text and also all in capitals. I read the top one first and then the one on the bottom image. This then led my eye to the small section of bold text in the bottom right. Only the did I start to read the body text. I started in the top left hand corner as this is the most natural place to start reading a body of text from.

This image to text ratio on this page is roughly 1:1 which helps to divide the text and make the bodies of text look more appealing to read.

Stylist Magazine

I believe the type heirarchy on this page is very straightforward. There are no images featured on the page so the type is the first thing that we look at. I think that the typeface used for the subheadings and the copy is Gotham. 5 different fonts have been used on this page but the variation isnt that extreme.

Obviously the first thing we look at on this page is the hand drawn style lettering that fills a large percentage of the page. Not only is it much larger than the rest of the text but it is positioned in the tope left of the page. After this I read the body of text that the loveheart is overlapping. It is almost as if this line leads the eye to this type. The type is also bold and sits alone on the page. I then read the name of the journalist who wrote the article as this sits directly below that section of text. 

Next I read the quote in the centre of the body text. This is due to the bold vibrant colour it is set in, the fact that it is all capitals and also the size of the type. 

I was then led to the beginning of the article with the pink drop cap H.

Vogue Magazine

This page from vogue uses typography really effectively. The typefaces used are both custom fonts. The serif typeface looks similar to Bodoni and the sans serif looks like a mixture between Avante-Garde and Futura. I counted 11 different fonts used which is a large number in my opinion.

The first thing I read was 'VOGUEspy.' This sits across the top of the entire page. and is set in the largest font. I then read the heading that read 'Hit Refresh' as both the words are set in large point sizes and 'refresh' is in all capitals. This then leads the eye to the type labelled with the number 3. This is again set in a large point size and is bold but it also sits next to the 'Hut Refresh' heading. The word now in this heading is emphasised as it is set in a bold sans serif typeface whereas the rest is set in a light serif typeface. 

I then read the copy on the left of this subheading. The type is fairly large and the eye is lead to it after reading the two subheadings surrounding it. 

After reading this my eye was then led to the title in the bottom right. This is the next section of large text. This then lead me to read the body text that sat under this subheading. 

The caption at the side was the last thing that I looked at. The font size is very small and is tucked away at the side.

The City Talking Newspaper

This newspaper uses a very minimal design throughout. 2 different typefaces are used on this page and 5 different fonts. The first thing we read is the title as this is set in the centre of the page at the top. It is also the largest text on the page. I then read the bodies of text underneath the photograph, again this is in the centre and uses a larger font size than the main copy.

After this I read the other section of type that was in the serif typeface and also set in the centre of the page. I then read the columns of body text, from left to right. After this my eye was lead to the webpage at the bottom and finally to the top left corner where the writers name is. It is strange that something in the top left to be the last thing you look at. Maybe this is just me but I believe it was the case as it is separated from the rest of the text, except to the main heading which you are obviously going to read first due to the positioning and size.

The London Evening Standard

This newspaper also uses two typefaces, a serif and a sans serif. This is something that I have noticed many of the pages I have analysed use. I am unsure what the two typefaces actually are. I think that the sans serif is Frutiger but modified for the paper.

There are a few images on this page but the majority of space is taken up by type. 

The first thing I looked at was the title in the centre of the page. This is the largest type on the page and is set in a bold font. It catches the eye immediately. The eye is then lead to the heading to the right that uses a light version of this typeface. I then read the word exclusive. This stood out to me as it is in a different colour, in a bold font and also all in capitals. 

I read the other heading in the sans serif typeface next as it is larger than the rest of the text. My eye was then drawn to the quotes on the page. These use the serif typeface in a larger point size than the body text. After this I read the caption next to the photograph. This is a small section of text in a bolder font than the main copy so the eye is drawn to it before the body text. 

WHP Crack

The layout of this page, and the majority of other pages in this newspaper are very simple and minimal. We still see evidence of type hierarchy despite this. The title is split into 3 sections . I read the word 'director' first as this is in the centre of the red box, it is underlined, it is the biggest type on the page and it is all in capitals. I then read the name of the Director, this type is in italics and isn't underlined so doesn't stand out as much. This sits below and to the right of the word 'Director.'

I then read the first part of the title that I missed to start with. Although this should be read first this doesn't happen due to the position and the fact that it uses lower case characters whereas the res of the title is all uppercase. I would change this by moving it to the left and possibly setting it in a bolder font.

After reading this I read the name of the author and photographer. This text is separated from the body text and the title so stands out. I then read the two columns of body text from the left to the right. The questions and answers are set in different weights to differentiate between the two people talking. 

Highsnobiety Blog

The main typeface used on this blog is Helvetica Bold. It is used for headings, subheadings and body text. The logotype is a sans serif typeface but this is the only variation. The blog is filled mainly with image and there is only a small amount of type on the homepage.

The first thing we read is the logotype, I think this is because it is the only word written in this typeface so stands out. It isn't the largest type on the page, in fact it is a similar size to some of the subheadings. However it still stands out first due to the typeface and the position in the top left corner of the page.

The next thing we read is the heading in the bottom left corner of the main image. This sits directly below the logotype so our eye is lead to this heading. It is also a large font compared to the rest of the page. 

I then read the different categories as these are all singular words spaced out, written in all capitals. They stand out because of this. 

I then read all the subheadings at the bottom of the page, I read these from left to right as this is how we naturally read. I read these next as they are bold, still set in a fairly large font size and the black on white contrasts nicely. I am then lead to the type in the black bar at the top of the page. I think I disregarded this before due to the fact that it is darker than the rest of the webpage so stands out the least.

Behance

There is a very small amount of type on this webpage. It is dominated by images mainly. The webpage uses 3 different typefaces and 6 different fonts. I think Helvetica Bold, DIN and Georgia have been used but I can't say for sure.  I thought that the way that I interpreted the type heirarchy was interesting however. The first thing I read was the logotype as this is bold and in the very top left corner of the page. 

I then read the button saying 'Add Work' as this was set in white against a bold, bright green. The contrast made it stand out as this is the only place where this type is used. I then read the top bar which sits to the left of this button. This uses a different typeface to the rest of the type on the page so stands out from the rest of the text. It is also at the top of the page so makes sense to read it first. 

The eye is then lead to the blue text below. The colour is vibrant so it stands out and it is also the next largest text on the page. The eye then reads all of the blue text from the top to the bottom. This is because it looks as if it is linked.

My eye was then lead to the section of sans serif text that sits in the same column as all of the blue type. This again is the only place we see this particular typeface used so it makes it seem important.

My eye was then drawn to the Black text reading Duane Dalton and finally to the type in the top right hand corner. The positioning and relatively small font size used for these sections of type make them seem less important.

Zlog Blog

3 different typefaces and 10 fonts have been used on this blog. I think Gotham is used in the logotype and the advertisement to the right. The content and the headings use helvetica and #8 and #9 use a typeface similar to Futura Condensed Medium but i am unsure whether it is this or not. 

the logotype is the first thing the eye is draw to as it is large and again set in the top right of the page. My eye was then lead to the title at the bottom of the photograph. This is below the logotype and a large font size. It is also a different typeface to the majority of the type on the page so stands out. My eye was then lead to the type used in the 'Zlog Boutique' advert. This type is fairly large and is black on white so has good contrast. 

My eye was then drawn to the title for the top blog post. It is set in all capitals and is underlined. I then read the heading above this followed by the rest of the type that is pink. My eye was then lead along to the type in the search bar at the top right. This stands out because of the background colour used. My eye was then lead down the page, back to the 'Zlog Boutique' advert and then to the 'crew videos' and 'submit content' buttons below this. the last section of type I read was the blog post content.