OUGD404 Design Principles Brief 02 Layout Specific Content Decisions

After looking back at the list I compiled of all the research myself and everyone else in our group did I have decided to choose the content for topics three, four, five, six, and eight. This is because one or two people have not put their research up on their blogs, or I was unable to find it, which has stopped me from accessing the information.




4. Colour Schemes.

 Quotes to space around the page:

- "use common sense as your base"
-' It's important to develop a palette of tried-and-tested colours that you feel comfortable with and you know will print superbly"


5.Colour applied to print.

CMYK is a scheme for combining primary pigments. The C stands for cyan (aqua), M stands for magenta (pink), Y for yellow, and K for Key. The key color in today's printing world is black but it has not always been. During the early days of printing, the colors used for Key have been brown, blue, or black -- whichever was the cheapest ink to acquire at any given time.The CMYK pigment model works like an "upside-down"version of the RGB (red, green, and blue) color model. Many paint and draw programs can make use of either the RGB or the CMYK model. The RGB scheme is used mainly for computer displays, while the CMYK model is used for printed color illustrations (hard copy).Pigments, as opposed to colors, represent energy that is not absorbed by a substance such as ink or paint. The primary pigments are cyan (C), magenta (M), and yellow (Y). Sometimes black (K) is also considered a primary pigment, although black can be obtained by combining pure cyan, magenta, and yellow in equal and large amounts.http://whatis.techtarget.com/definition/CMYK-cyan-magenta-yellow-key

When two RGB colours are mixed equally they produce the colors of the CMYK model, known as subtractive primaries. Green and blue creates cyan (C), red and blue creates magenta (M), and red and green creates yellow (Y). Black is added to the model because it cannot be created with the 3 subtractive primaries (when combined they create a dark brown). The K, or “key,” stands for black.

CMYK in the Printing Process: The four-colour printing process uses four printing plates; one for cyan, one for magenta, one for yellow and one for black. When the colours are combined on paper (they are actually printed as small dots), the human eye sees the final image.CMYK in Graphic Design: Graphic designers have to deal with the issue of seeing their work on screen in RGB, although their final printed piece will be in CMYK. Digital files should be converted to CMYK before sending to printers, unless otherwise specified. 

Because of this issue, it is important to use “swatches” when designing if exact colour matching is important. Swatches provide a designer and client with a printed example of what a colour will look like on paper. A selected swatch colour can then be chosen in Photoshop (or a similar program) to insure the desired results. Even though the on-screen colour won’t exactly match the swatch, you know what your final colour will look like. You can also get a “proof” from a printer, which is an example of your printed piece provided before the entire job is run.


6. Colour associations and psychology. 

'Colours can be loud, calm, fresh, neutral, dark, rich, stimulating or mysterious.'(GDHB)(page 14)

http://www.telegraph.co.uk/science/science-news/4980503/Roses-are-red-to-deter-not-to-attract.html

http://www.wpclipart.com/page_frames/full_page_signs/glossy_stop_sign_full_page.png.html

' To become a successful colour connoisseur, you need to understand the psychology and evolution of colour.'
(GDHB)

8. Web layout design.

01. Put your thoughts on paper first

Design is about solving problems and those problems can't be resolved through gradients or shadows but through a good layout and a clear hierarchy. Think about the content, the layout and the functionality before starting to drop shadows.

02. Start sketching a top level framework

When I'm asked to create a look and feel for a project, the first thing I do is come-up with a top level framework that solves all the design problems. The framework is the UI that surrounds the content and helps to perform actions and navigate through it. It includes the navigation and components like sidebars and bottom bars.

03. Add a grid to your PSD

It's as simple as it sounds. Before starting to design anything in Photoshop you need a proper grid to start with. There are no valid excuses for starting without a grid, and yes if you don't, I can assure in one way or another, the design won't look as good.

04. Choose your typography

Exploring different typefaces and colours is part of the discovery phase of a project. I would recommend not using more than two different typefaces in a website but it really depends on its nature you could use more or less. Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. Don't be afraid of using big fonts and overall be playful and consistent when using typography.

06. Divide the layout

Each section in your site needs to tell a story. It needs a reason and a final outcome for the user. The layout needs to help the content highlighting what are the most important pieces in that story. In reality there shouldn't be too many call outs on a page so everything should drive to that final "What can I do here".

'The simpler the structure of the site, the easier it is for users to navigate'

09. Pay attention to the details

This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that "love" could come in different ways.

It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential and also natural if you really enjoy what you do.

07. Rethink the established

As designers we shape the way users browse the internet, it's up to us to decide how many steps a simple action will take and how efficient our site will be. Design patterns and conventions are there because they work but sometimes they are there because no one spent enough time evaluating them or rethinking them. It's important to rethink the established interactive patterns on any component and to see how we can improve them.

9.Grids and how they work.

Single-Column Grid

Every time you open a new document in a page layout program, you are prompted to create a grid. The simplest grid consists of a single column of text surounded by margins. By asking for page dimensions and margin widths from the outset, layout programs encourage you to design your page from the outside in. (The text column is the space left over when the margins have been subtracted.) Alternatively, you can design your page from the inside out, by setting your margins to zero and then positioning guidelines and text boxes on a blank page. This allows you to experiment with the margins and columns rather than making a commitment as soon as you open a new document. You can add guidelines to a master page after they meet your satisfaction.

Multicolumn Grid

While single-column grids work well for simple documents, multicolumn grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for different kinds of content. A text or image can occupy a single column or it can span several. Not all the space has to be filled.

Modular Grid

A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. These modules govern the placement and cropping of pictures as well as text. In the 1950s and 1960s, Swiss graphic designers including Gerstner, Ruder, and Müller-Brockmann devised modular grid systems like the one shown here.

designing programs Grid diagram, 1963 (redrawn). Designer: Karl Gerstner. Publisher: Arthur Niggli, Zurich. This square grid consists of six vertical columns and six horizontal modules, overlayed by grids of one, two, three, and four units. Vertically, the grid is governed by a 10-pt measure, which would determine the spacing of type from baseline to baseline.

When creating my layouts I will use this as content, I may also extract a few more quotes from the body text but this is uncertain as of yet.