OUGD404 - Construction of Grids

Before you can apply a grid you must understand the requirement of the grid for the work to be produced. Typeface, text and illustrations, print method and paper quality must be confirmed beforehand (ideally).

Thumbnail sketches will make your job of final layouts easier and productive. Thumbnail sizes should be proportionate to the final format, this will make your job of final layouts easier.

Before drawing your sketches, consider the number of columns needed.
For example:

1 column only for text and illustrations give little freedom of layout.
Restriction of making illustrations small, medium and large.

2 columns, logically, gives you more scope:
1 column for text
1 column for illustration
they can be mixed together

2 column division can be subdivided to create a four column page.

For statistics, figures, graphs and trend line publications: use 4 column per page.

The narrower a column is, the smaller the typeface should be. 

Make a variety of thumbnails of layouts/designs.
Do not rely on just one set of thumbnails.
Enlarge a small selection of appropriate thumbnails by 1:1.
Compare them and select and repeat process until you are confident with the design.

Apply type to columns..

The first line must fit flush to the top limit of the column grid.
The last line must stand on the bottom limit.
Keep calm, it is difficult to find the final solution the first time around.
It could mean that your grid field is too high or too low.

Example

10 point type
15 point leading

Column length 15cm

loosely means use 15 point leading.

at this length there must be 10 lines per field.

meaning 30 lines per every 15cm.

the depth of my fields ascertains how many 10point type lines I have.

text should be on, or just above field lines.


Making the gutter the same size as a text line is a good way of sizing.

Font Heights

Caption text
4 point type
6 point leading

Header and footer text
7 point type
10 point leading

you would use the fibbonachi sequence to work out the proportions.

Type and Picture

a4+ format.
8 & 20 grid fields.
8 grid fields are used frequently for advertising material and brochures.
If using 8 grid fields you can subdivide into 16 grid fields.
8 and 16 grid fields give you a range of possibilities.

8 grid fields allow various sizes of illustrations to be portrayed.
You can use with or without text.
You need to have a good perception of composition.

20 field grid has quite a large scope for idea solutions.
There is around 42 possible layout options.


InDesignThen we went into InDesign and started learning different ways of making grids.

You can add columns and gutters on the Document Setup page before you open a new document.

Or you go on Layout, and add Margins and Columns and Ruler Guides.

You can also go on Window < Utilities < Script, and a window comes up. Then you can add guides to boxes that you have made by highlighting them. You can also choose Make Grid to these boxes, and it makes them into proportioned grids. 

You can also choose the Rectangle Frame tool, and making a box, use the up and across arrows, which will then divide them into more boxes which can be used as a grid.


How do you work out the correct proportions for heading/bodycopy/leading. 
for a subheading do you use the space of the gutter for the space between that and the bodycopy.
how do you work out the point size a caption under a photo/space under a photo should be

OUGD406 - Communication Is A Virus

Thursday 21st

After I had done research on packaging, I started of thinking of ways I could put what I had learnt into context. My main priority is sustainability, and creating a consistent look and feel what everyone was happy with.

I started drawing some of the ideas that I had.

I thought a tube would be a great way of packaging the loose tea, and in a hexagon shape so that they could be stacked on top of each other in the shop, at home, and during transportation. It has to be protected during transportation, because I wanted to use as less packaging as possible to make it sustainable, and I know that sometimes a different packaging is used during transportation than to when it is presented on the shelf, from my research. Being able to stack them would be a good idea of saving space.

I also thought this could be applied to the shape of a tea infuser; coasters; wall hangings with the symbols on; menus and the food packaging.

When I told the rest of the group my idea, they seemed to like it and thought of ideas which could build from this. James suggested that the packaging could be stacked on top of each other, which is a good idea. He was also looking at promotional videos where there were screens on the wall with live tweets being directed to them. We thought this would be a good idea to show tweets that the company was tagged in, and I thought it would work well with the wall idea. Jane also thought that the loyalty card could perhaps be in the shape of a hexagon. Priyesh said he would try and incorporate the shape into the logo as well, so it had positive feedback.

 Friday 22nd

Today we presented our concept to Amber and Simon, and got told that we had to actually produce our ideas, not just create a proposal for it. So we decided to take the weekend to think about what we could do and come back with fresh ideas on Monday.

Monday 25th

Today we brainstormed some ideas, and decided that a blog would be a good idea to produce, so that we could have lots of information about drinking tea on it, and have a link a twitter page on it so people can respond to it. I also thought of an idea to make a viral video.
We had to make a brief outlining what we was going to do:

We had our second crit with Amber today, and she said the idea was more feasible now. 

Tuesday 26th

Today we assigned ourselves with a job each, and decided to research and make sketches of everything to show each other on Thursday.

I'm going to research different nets of tea bags, and make some sketches of nets and how the video will work. The idea for the video is to have a tutorial of how to make a diy teabag, and then for a link to the twitter and blog at the end of it. Me and Sophie booked out the photography studio for Monday so that we can make the video.

We also made a blog, email address and twitter name.

Blog: yourtea.wordpress.com

Email address: yourteablog@gmail.com

Twitter: @yourteablog

Wednesday 27th

Today I am going to start researching different nets, and ideas for the video, which can be found here.

OUGD404 - Canons and Grids

 Here are my notes from this weeks grid lesson with Phil.

Van De Graaf
A van de graaf canon is a historical reconstruction of a method that may have been used in book design to divide a page in pleasing proportions. Also known as the secret canon. It works for any page width:height ratio.

Using the custom paper size I made for this lesson I applied a van de graaf grid:



Leading
Printed collateral (text) is read by the eye of a distance of 30-35cm. Overlong and overshort lines tire the eye.

What works best
15 point sans serif
17 point leading

20 point sans serif
24 point leading

28 point sans serif
32 point leading

The key is ease of reading. Text must no impair rhythm of reading. This cannot be applied to titles or subtitles.

Advertising functions require headings to stand out and be absorbed by the eye.

Margin Proportions
Margins can have an influence on the overall feel of a page or print.

Too small - looks over full
Too big - exaggeration

Bad proportions have same width margins like 1,1,1,3 and well proportioned margins could have a larger left margins, which is applicable to literature.

I then made up lots of grids, which I am then going to digitise:

Here are the digitised versions:

I then had to look at magazines which were about nature. I went on Issu and looked at a couple.

The 2013 Star Roses and Plants Catalogue

9 Day Gorilla and Wildlife Itinerary

Screen Printing

We had a screenprinting session today, and we did CMYK colour seperation printing to make a hotdog booklet. We had to print the screen four times, in cyan, magenta, yellow and black separately  and by using registration marks to make sure that each time the paper was aligned.

To make it into a hot dog booklet, you have to cut with a scalpel across the two middle pages, fold it and then push it in a certain way.

OUGD406 - Communication Is A Virus

Today we told each other our ideas, and was really happy with what people had come up with. We clarified some things and decided on what to say in tomorrow's crit, which Jane wrote down:

Concept:
Create your own unique tea blend according to your mood. Tell other people about it, tweet it, drink it in or buy bulk to take home. 

We will create a tea room which has lots of different flavoured tea available.


There will be a strong message promoting the healthy benefits of drinking tea instead of coffee.


Unique selling point:
Create your own personalised flavoured tea.

What do you want to say?
A new contemporary take on tea that promotes the benefits of drinking tea and exploring new flavour combinations.

How do you intend to say it?
We intend to create a contemporary brand that will target professionals and encourage them to explore the flavours of the world or create their own tea blend.
We want to utilise Twitter in a creative way to distribute the message to the masses and engage potential customers.

What language would be appropriate?
We want to communicate a vibrant and welcoming atmosphere through the use of informal and friendly language.

Will the content communicated primarily through type or image?
We will use both type and image. Due to the limited colour palette the type will have to compliment the images to communicate our message.

What are you aiming to achieve?
To build a brand that will introduce customers to international tea, creating an appreciation for different flavours that are unique to our brand and not readily available elsewhere.

We want to develop  "the new place to be" and make customers feel part of our company.

We want people to talk about their unique tea and general experience whilst spreading the word.


We identified 6 key areas to start working on in order to cover the brief which were as follows:

Distribution channels (James): 
How will we get people to talk about us, spread the word 

Packaging (Danielle):
What kind of packaging will we provide for people to bring their loose tea home in
cups, mugs for drinking in?

Tea room layout (Sophie):
How will we display the "blend your own tea area" within the tea room and how do we communicate the message?

Products: Tea Flavours and health benefits from drinking the tea (Kirsty):
Research flavours that we should include and find out about the benefits from drinking it.
Think about how they could be illustrated.
Food that complements the different tea flavours.

Branding & Identity (Priyesh):
Name, Logo, colour schemes

Promotional (Jane):
Reward or loyalty scheme to keep customers coming back
Any other promotional activities to raise awareness. 

OUGD406 - InDesign Workshop

We have a brief to create a double page spread for an animal, mine is an elephant seal, on InDesign. My research which is to be featured on the spread can be found here.

Here are the settings I chose for the new document:

However, the pages don't sit next to each other as a spread, as they are facing pages and it creates a first page.

So to solve this problem, I have to add another page. I just clicked new page, and it creates an identical one.

We looked at how we would print it, and changed the settings.

In setup, I changed:

Orientation: landscape

Page Position: centered

Paper size: A3

In General, I changed:

Page: spread

Printer: 203 Colour

Made sure 'Print blank page' wasn't checked

Page: Range: 2-3

In Bleed, I changed:

Bleed and Slug: Tick 'Use Document Bleed Settings'

Marks: Tick 'Crop Marks'

Another way of opening the document is to repeat the steps beforehand, but unpress 'facing pages'. This creates two singular pages.

To make them a double page spread, I need to uncheck 'Allow Document Pages to Shuffle'. As this allows me to move the page next to each other by dragging it, rather than above/below each other.

This also allows me to add more than two pages to each other, to create a more complex layout with foldouts, for example:

To add a ruler guide which features across the spread, you have to add the guide while on the artboard. If you just add a ruler guide on the left page, it will only appear on the left page, and the same applies if you add one to the right.

A more precise way of adding guides is to highlight the pages, click on Layout then Create Guides.

We then started looking for pictures to put on our double page spread. I found a high res picture, and uploaded it onto Photoshop.

We then had to resize it ready to go into InDesign. I changed the resolution to 300ppi, as that means it is ready for print, and unchecked resample image. 

Then I placed it into InDesign. I resized it again to what I want and checked in the links palette what scale I had enlarged it to.

Then I opened it on Photoshop through InDesign, so that I could resize it to the same scale: 121.5%

I then changed the image size on Photoshop to match it in InDesign.

OUGD406 - Tips For Presenting Work

Peter Saville was an art director at Factory Records and designed the sleeve for New Order's True Faith. He did this the night before the pitch was due when he saw a leaf fall in front of his car.

Read the book, Whatever You Think, Think The Opposite

'Look out of the window and whatever catches your eye, a bird, a television aerial, an old man on crutches or whatever, make that the solution to your problem.' - Sometimes take a break from what you are working on and come back to it with a fresh mind or look at the window for inspiration.

'Do not seek praise.
Seek criticism.'

'Can you find fault with this?' Ask questions like these in critiques 

'Don't give a speech. Put on a show.' Don't just talk and drone on, present in an interactive way

'Astonish me!'

'If you can't solve a problem, it's because you're playing by the rules'. - Think outside the box

Go further with a brief, think of ways to go beyond answering it i.e. if the brief is to design for print, think of ways it would also work on screen.

When presenting a pitch, don't have your brand logo on it because they already know who you are.

Put into context - mock ups of emails, packaging, websites etc.

Show how ideas could work - what a  drop down menu would look like on a website

Present work in a pdf document, and try to produce mock ups to save money

OUGD406 - Communication Is A Virus

I am in a group of six with Sophie, Jane, James, Priyesh and Kirsty, and we have to 'produce a graphics response that engages with a specific audience' for a set task which is to 'drink tea'. 
Here are our initial ideas:

• We could brand a new tea shop, like there are coffee shops
• Could have a magazine promotion where there is a free sachet of tea attached to the page like perfume/make up ads
• Tea vs Coffee quiz
• App with checklist for different types of tea, where shops are
• Sell loose tea
• 3 in 1 tea - with milk, sugar etc like Nescafe sachets
• Could have option of buying branded reusable cup from shop, like Morrison's bag for life etc to bring and refill for cheaper tea
• Twitter account - people can tweet the blends of tea they drink from shop, get next tea half price if they tweet the company and take a picture of their tea - 'tweet your tea'
• Concept of having lots of flavours so people can mix and match their own flavours with pick and mix style boxes in shop
• Could sell cakes and snacks in shop to compliment tea
• Have information (app, menu) which says what food goes best with what tea
• Questionnaire for 'what kind of tea suits you' matching flavours with personality
• Tea of the week - highest voted combo/seasonal/etc
• Could have portable stalls or sections in supermarkets etc for on the go tea

We are going to brand a new tea shop, and have the option of buying loose tea to take home and brew yourself, or to buy it in the cafe and sit down. We want to make it a personal and social experience, with the option of tweeting your tea and getting feedback on different blends. I started doing some research which can be found here.

OUGD404 - Grids

These are my notes from this weeks first grid session.

Fibbonachi Sequence
A series of numbers in which each number is the sum of two preceding numbers, eg

0 + 1 = 1
1 + 1 = 2
1 + 2 = 3
2 + 3 = 5
3 + 5 = 8
5 + 8 = 13
8 + 13 = 21
13 + 21 = 34
21 + 34 = 55
34 + 55 = 89

55pt title should be accompanied by 34pt bodycopy by applying the fibbonachi sequence.

1.62 is the golden number
Golden section ratio 8:13
Golden rectangle is a rectangle in which the ration of the length to the width is the golden rule.

The rule of thirds governs the placement of points of interest in a scene. Divide any given image into thirds both horizontally and vertically and you will get  9 grids.


For a task we have to create our own paper size using the fibbonachi sequence, and here is mine.

OUGD406 - Design Is Doing

I started creating thumbnails and a spider diagram of ideas that I had for the song Better Off by Haim.

From these thumbnails I picked my favourite ideas, then went ahead doing further sketches, research and experimenting on Illustrator.

I decided to take the hot air balloon idea further. The hot air balloons represent the three sisters, and they are flying away because they're 'better off this time'. The baskets are decorated like drums because that is a prominent instrument in the song, and the balloons are in the shape of parts of the song that I think are relevant: the frequent references to 'time'; the 'beating of the heart'; and the eye for the mind 'flashing back' and 'seeing you, seeing me'. 

I drew a couple of anatomical hearts so that I could trace them on Illustrator and with the graphics tablet. 

I drew how I wanted the clock to look like as well as a hot air balloon.

I printed out these letters then redrew them by hand using the graphics tablet to create a hand produced look  on the clock.

When I started drawing the letters, I decided although I wanted a hand produced look, I preferred the more polished one on the left as it looks more professional. 

 I began by creating a basic shape of a hot air balloon on Illustrator.

 I began by creating the heart on Illustrator using what I had already drawn.

I used the Width Tool to make the veins on the heart look better.

 I removed the ones that were on the left, as I don't think they worked very well.

I tried to add a grain texture but it didn't work out very well, as it made the design look very faded.

Regular

Soft

 Speckle

 Sprinkles

 Stippled

 Vertical

I then tried out lots of different grain textures, and my favourites are Soft and Enlarged.

 I tried adding a gradient to see what it would look like with a sky background, but it just looked tacky.

After I had finished the illustrations, I altered the colours so that they worked better together, as I don't think the red looked very appealing.

I thought that it looked quite bare, so I decided to add some smaller balloons around the frame.

Final

Although this was my favourite idea, I'm not too keen on what I've produced so far.

I then started doing some more research and came across the illustrator Fernando Volken Togni, and I really like his style and how he uses shape and saw the piece 'Caapua'. I wanted to work in the style of this because it would allow me to incorporate lots of different parts of the song into one collage of ideas, and would also portray how she is 'going crazy', because it is an abstract style. 

The guitar and drums represent how these are prominent instruments in the song. The three hot air balloons represent the three sisters going away from the relationship. The door represents the door slam which is heard in the song, and how they are leaving the relationship. The sun and icecream represent how 'good we used to be', focusing on positive parts of the relationship. The clock symbolises 'better off this time', and the holding hands represent the couple. The heart shows the 'beating of the heart', the leaves falling of the trees show that the relationship is ending, and the eyes looking down on everything represent 'seeing you, seeing me'.

Here is the design before I added any colour.

I scanned in the drawing that I did, and started tracing over it using shapes in Illustrator. I then turned it into a live paint object, and started filling in the colours.

Before the crit I changed it slightly, by correcting the closeness of the squares in the top right corner, adding another triangle on the sun, and filling part of the sun in where it wasn't before, and editing the hands on the ice cream slightly. I'm not very happy with this one, but I like the concept behind it so I will edit it again after the crit.

I then had the crit, and here is the feedback that I received on it. I changed the design according to the feedback but I now think that it looks bare and boring.

Although, as this was everybody's favourite, I did try and edit it again...

Final

... and again, but I still don't like the design. I don't think the shapes or the colours represent the band very well, and although people chose this design as their favourite, I don't think they realise that it doesn't fit well with the song, as most the people I showed it too didn't know the song.

Now I'm going to do an idea which fits both the lyrics 'I'm better off this time' and 'how good we used to be', as it is a montage of different icons that represent the positive times at the beginning of a relationship, or after one. 

I started drawing some icons that I could use:

The icons represent the beginning of a relationship, and I got the idea from the lyrics 'how good we used to be' and 'I wanna get back to everything that I had'.

Then I went onto Illustrator.


I wanted to make a sun, and I've never understood how to get perfect rotating rays so I looked at a youtube video.

Here is the sun I made after the tutorial.

I tried different variations of these colours, and these are the nine icons that I created.

I then started working on how to lay them out. I got inspiration from a piece of illustration that I saw, which can be found on my design context blog. I made sure that the width between each illustration was exactly the same to keep it consistent.

Final

Here is the final design, and I changed the opacity down slightly to give it a washed out look, and I really like this design because it is quite simple and I think it reflects the band.

Four my fourth design idea I decided to create three birds to represent the three sisters, and how they are going away from the relationship.

I liked the colours that I used in the previous design, so I used them again here.

For my fifth design I decided to focus on the lyric 'I keep seeing you, seeing me, and how good we used to be'. This reminded me of nostalgia and wanting to back to the past, so I thought of ways I could incorporate that into an image. As 'waves of nostalgia' is commonly said when talking about nostalgia, I decided to go with this idea, and use an eye to portray the 'seeing' part of the lyric.

I then went onto Illustrator, and started creating a lot of different variations. These included changes to the eyebrow, adding/getting rid of a grain texture, trying different colours and shades, and different eye shape.

Final
Here is the final that I went with, I like the yellow and the blue together as it has a high contrast of hue, but it is quite subtle cause of the lowered down opacity. I used three colours to represent the three sisters, and moved the glint to the corner of the pupil so that it didn't look like a sun. Although I produced this after the crit, and people liked the second design, I have decided to go with my instinct and choose this one. Although it is simple, the illustration fits well with the lyric that I chose for it, and it is the design that I am most happy with.