TYPOGRAPHY WORKSHOP//SESSION TWO//OUGD504

TYPOGRAPHY WORKSHOP//LOOKING AT TYPE:
We were asked to look at our typeface that we'd looked at and think of three words that come to mind when looking at them:

We started to look closely at what type can say without actually paying attention to the word written down.  My typeface was Cochin, I felt the three words, classical, formal and wise fit the style of the type face.  After this task we were asked to come up with a brand/company/business that the typeface would successfully reflect, with my words I chose Oxford Dictionary, which I think fits those three words well.

We were then asked to come up with another brand that was the complete opposite of your typeface, I chose to go with Adidas, I feel this is something thats not formal because its casual sportswear and its definitely not seen as particularly wise within society.  Looking at type closely shows how much a typeface can effect the design and how important it is to get it right.

KERNING:

The second task we had to do was kern our name, kerning means keeping the spacing between letters the same, in branding kerning is really important.  Vertical letters such as a capital N are a lot easier to kern then an A or a V because they go at a diagonal angle.  The simplicity of kerning in terms of branding and identity can make all the difference when looking at what the word represents.  We looked at the word RAILWAY, kerned and not and the one that wasn't kerned looked rushed, unreliable etc whereas the kerned railway sign showed that this station looked high quality, on time and professional.

TYPE HIERARCHY:

We then experimented with hierarchy within type and had to reposition type and and hierarchy but still communicate a certain message.  We were given the words 'one, two, three' and asked to arrange it so that the viewer still read in that order but three had to be at the top of the page:

We were then asked to do the same thing again but without changing anything about the letter forms, point size etc.  To do this correctly you must turn the word 'two' upside down so it is not seen or read like a word, that way the viewers eyes go straight to the word 'three' because it is natural for us to read from the top.  This order would be read as 'three, one, two'.

By changing the position of the three and rotating it 90 degrees we now read the one first because it is the easiest option: (right)

WHAT IS DESIGN FOR PRINT?//STOCK PRIMARY RESEARCH//OUGD504

STOCK RESEARCH:
These are some stock samples that I photographed in a session where we looked at stock and printing processes.

COLORLUX IMPERIAL BLUE GLOSS 306 GSM

 GMUND TREASURY COMPOSITION 110GSM

 GMUND TREASURY NATURE 310GSM

 MARLMARQUE AGEAN BLUE 90GSM

 PEREGRINA CLASSICS RUBY RED 336GSM

PEREGRINA MAJESTIC ANTHRACITE 120GSM 

 PEREGRINA MAJESTIC

 TRANSCLEAR NATURAL 180GSM

DESIGNING FOR WEB//WEB DESIGN WORKSHOP TASK//OUGD504

In the studio workshop we had to do a quick sketch of a basic idea of how we wanted our homepage of our website to look:

We then had a crit, this was my feedback:

• clean, simple design, will be easy to navigate 
• clear, bold header, instantly know whose the website is
• attention will be focused on image
• white background means role design isn't over complicated and busy, paired with black text gives it a minimalist feel
• good placement of logo
• really simple layout would work well aesthetically 
• navigation easy to find
• you have contact details at the bottom of the page do you need a separate page for contact details, do you need both?
• clear navigation = good
• clear navigation
• basic layout, straight to the point
• contact details work well in footer
• communicates well
• not very original 
• the simplicity works well to display the work and let that be the main focus
• perhaps the logo and the name could be swapped in position so that the logo is the first thing a client sees?
• like the footer contact details, as its neat and communicates well
• the idea of having the design studio as a homepage photo is good - think it shows where the work comes from
• legible and clear
• I think circular logos look really nice in top left hand corners
• the website might be too plain
• logo wouldn't really attract attention

WHAT IS DESIGN FOR PRINT?//PRIMARY RESEARCH: DESIGN COMPANY//OUGD504

This is a scan in of an essay featured in one of the books that I was sent by design company Team.  This is an essay by Caroline Roberts, 'Process is Form.'

DESIGNING FOR WEB//WEB DESIGN WORKSHOP//OUGD504

WEB DESIGN STUDIO SESSION:
In todays session we were asked to discuss the purpose of a website:
Whats the aim of the site?

• to inform
• to promote
• to persuade 
• entertain

The target audience is never going to be everybody.  There are three main factors when looking for a good website design and these are:

• FUNCTIONALITY - whether it works? does it work at all?
• USABILITY - does it work well?
• AESTHETICS - is it aesthetically pleasing?

All websites are content driven.

TASK ONE:

List the information/content you think that you should incorporate on your site as a graphic designer.  List pages, list content in those pages.

HOMEPAGE:Must have good first impression on Homepage.
Landing page: Ask yourself whats the purpose of it? redundancy is bad design - must have purpose.  Is there a good reason for a landing page?  Most of the time your just putting a barrier between the information and the user.

• ABOUT ME: Name, where I'm from, specialisms in design, BIO, age, where I have studied, what interests I have, also in terms of graphic design/inspirations etc, credentials - link to download CV?
• CONTACT: My contact details, email address, location etc.
• WORK/PORTFOLIO: A selection of previous work/ current projects I am working on etc.  Personal and professional work.

Would you categorise work?

Negative impact if you don't have a big body of work, could make it look like there isn't much to your portfolio if you spread it over categories, especially if work falls into more than one category.  In terms of contact information you could have email address, telephone number and location on the footer of every page on your website.  More contact details, more accessible, people like a location, a psychical place where you can be found.  Sometimes good to have a link to your blog to show current projects and professional development.  On home page a logo and a sample of work or a photograph of design studio/current location.  Or on your about page - about what your doing right now.

BE SELECTIVE WITH CONTENT!

Freelancer - a lot more freedom then someone trying to appeal to a company/small business, freelance, more personal, an individual.  When not a freelancer its more based on intents and what you want to do to appeal in a more of a professional manner.

A collective list of pages from the group:

• Homepage
• Contact 
• Blog
• Portfolio 
• About- CV
• FAQ
• Quotes
• Clients - testimonial 
• Shop

DESIGNING FOR WEB//WEB DESIGN WORKSHOP//OUGD504

DESIGNING FOR WEB

In todays session we were asked to look at a number of websites and note down our initial reaction within the first five seconds:

Web designers make the mistake of making the design of the website the most important thing, the content of the website is the most important thing, the design should be functional and the content should look visually appealing.

ollymoss.com - black, dull, empty, space, boring, simple

malikafavre.com - busy, playful, hectic, bright, movement, colourful

360langstrasse.sf.tv/page/ - google street map, scroll, photography, german, text

mercertavern.com - hipster, retro, smart,clean, black and white, boxes/lines

noble-design.co.uk - feminine, colourful, vector, smart

caavadesign.com - photoshop, c.d, waves, colourful, modern design, simple

sb-studio.co.uk - clean, Swedish, dull, clinical, photograph

equ.com.au - vector, slow, triangles, 'drive-in movie'

smart-heart.ru - interactive, split, horizontal, minimalist

formfiftyfive.com - dark, orange, type, blog, machine 

3 KEY QUESTIONS:

-What is the purpose of the website?

-Who is the target audience?

-What do the target audience need?

HOW TO GET THE ANSWERS?

-Create surveys for the target audience/research 

-Look at similar websites with the same target audience

-Ask studios what they want to see

-Research studios

-Email them, be creative, try and do something different

THREE MAIN THINGS TO CONSIDER WITHIN WEB DESIGN: 

-TEXT

-IMAGE

-NAVIGATION 

WEB LIMITATIONS:

TEXT - You can only use standard fonts, you must specify a font family, if you don't specify a font it will always come up as 'Times New Roman' Webkit allows you to download a font but you still have to pay a license fee as people can download this font.

COLOUR - RGB colour mode for screen based images, more restricted than RGB is working on the internet, websafe colours is an internet version of RGB, a hexadecimal code helps you to specify the colour.

SCREEN SIZE - width and height - standard sizes you have to go by, massive variety of computer screens, you have to decide what size your going to work with, has to be consistent on all screens.  Something to consider when designing. 

RESOLUTION (PPI) - the resolution for screen based image is 72 PPI (pixels per image)

WEB DESIGN TERMINOLOGY:

HTML - Hypertext markup language 

URL - Uniform resource locater 

CSS - Cascading style sheet

FTP - File transfer protocol 

CMS - Content management system/solution 

This is the basic outline for the website that we will make, this is a quick mock up of the specific details:

TYPOGRAPHY WORKSHOP//TYPEFACE TASK//OUGD504

TYPE FACE CHANGE: COCHIN
Category: serif
Classification: Transitional 
Designer(s): Georges Peignot, Matthew Carter
Foundry: Deberny & Peignot Linotype
Also known as: Sonderdruck 
Cochin is a transitional serif typeface. It was originally produced in 1912 by Georges Peignot for the Paris foundry Deberny & Peignot and was based on the copperplate engravings of French artist Nicolas Cochin, from which the typeface also takes its name. In 1977 Cochin was adapted and expanded by Matthew Carter for Linotype. The font has a small x-height with long ascenders.

The typeface is used in the Harry Potter covers produced by Bloomsbury Publishing.

Cochin was previously a font option in iBooks for the iPad but was replaced in version 1.5 when Athelas, ITC Charter, Iowan Old Style, and Seravek were added.

History:  Cochin was created in 1914 by a French designer named Georges Peignot. Peignot based his design on 18th century copper engravings. The typeface was cut in Peignot’s family’s foundry, Deberny & Peignot. Cochin is named after the French engraver Charles Nicolas Cochin, who was a copper artist. The font, however, has little relevance towards Cochin’s work and instead displays an interesting synthesis of style elements. Cochin coincides well with the typographical Neorenaissance movement and its popularity peaked at the beginning of the 20th century, although is is still widely used and well-known today.

In 1977, Matthew Carter expounded further upon the Cochin font and expanded it into three parts.

Cochin is classified as a serif linotype. The uppercase letters have a squarish quality while the lowercase has long ascenders and sharp serifs. This makes Cochin unique, elegant, and contemporary. One particularly unique letter is the italic lowercase d, due to its curved ascender.

Five descriptive words:

• Elegant
• Formal
• Sharp/precise
• Classical
• Majestic

COCHIN:

TIMES NEW ROMAN:

DIFFERENCES:

I started looking at specific letters within each alphabet and comparing them to see what key differences there were:

As you can see the capital Q's differ quite a lot, I have lowered the opacity on the Times New Roman Q and central aligned and overlaid the Cochin Q to see what is different.  The counter within each Q differs, Times New Romans area is smaller than Cochin's Q.  The tail of each Q has a different shape, Times New Romans Q is attached to the rest of the letter in a downward slanted motion, whereas Cochin's is not attached and curves inwards and then flicks outwards.

The descender on Times new Roman is more of a curved rounded more prominent finish whereas the Cochin J is a swift downward, slightly angled end. The serifs on Times is slanted whereas Cochin's remains straight.

Times New Romans terminal is a lot more rounded than Cochin's that curves at the top but straightens at the bottom.  The heights of the letters are different, with Time's being taller.  And in comparison with the lower case 'j' the serif of Times slants downwards in a more exaggerated way.

The terminal on Times has more of a curved circular shape that is taller than that of Cochin's that has a slightly square terminal.  The flick on the tail of Cochins is extended in comparison to Times.

For the task we had to create an A4 spread about our chosen type face in comparison to times new roman, including the typefaces alphabet, this is my development process and final outcome:

After looking at the letterforms individually I picked out four that I thought had the best contrasts and added the cap height, base line and x height

The name of the typeface 'Cochin' is clear at the top of the page with samples of regular, italic, bold and bold italic, with a small bit of information about its classification and designer etc.  In the top right hand corner I decided to put the alphabets of both type faces.

I then added small lines with information about each specific different in contrast to Times New Roman, and added information about the history of the typeface at the bottom of the page.

FINAL: