Simcoemedia Design Guide

UploadLog

Sat, 19 Apr 2008 15:49:12 GMT

date	user	location	storeUrl	uploadDir	toFilename	backupdir	origin
22/3/2008 22:16:5	YourName	/	store.cgi	.	index.html	.
22/3/2008 22:23:0	YourName	simcoemedia.html	store.cgi	.	index.html	.
22/3/2008 22:28:35	Simcoemedia	/	store.cgi	.	index.html	.
28/3/2008 17:24:28	Pete Simcoe	/	store.cgi	.	index.html	.
28/3/2008 17:30:35	Pete Simcoe	/	store.cgi	.	index.html	.	Ok
28/3/2008 17:34:16	Pete Simcoe	/	store.cgi	.	index.html	.
7/4/2008 23:32:53	Pete Simcoe	/	store.cgi	.	index.html	.
7/4/2008 23:34:13	Pete Simcoe	/	store.cgi	.	index.html	.
7/4/2008 23:41:8	Pete Simcoe	/	store.cgi	.	index.html	.
15/4/2008 12:25:47	Pete Simcoe	/	store.cgi	.	index.html	.
17/4/2008 8:10:5	Pete Simcoe	/	store.cgi	.	index.html	.
18/4/2008 23:48:23	Simcoemedia	/	store.cgi	.	index.html	.
19/4/2008 0:2:55	Simcoemedia	/	store.cgi	.	index.html	.	Ok
19/4/2008 0:11:41	Simcoemedia	/	store.cgi	.	index.html	.
19/4/2008 0:14:43	Simcoemedia	/	store.cgi	.	index.html	.
19/4/2008 9:7:54	Simcoemedia	/	store.cgi	.	index.html	.	Ok
19/4/2008 9:11:47	Simcoemedia	/	store.cgi	.	index.html	.	Ok
19/4/2008 9:21:26	Simcoemedia	/	store.cgi	.	index.html	.	Ok
19/4/2008 9:36:20	Simcoemedia	/	store.cgi	.	index.html	.	Ok
19/4/2008 9:43:21	Simcoemedia	/	store.cgi	.	index.html	.
19/4/2008 16:49:12	Simcoemedia	/	store.cgi	.	index.html	.

Best 'Free' Online Software

Sat, 19 Apr 2008 08:30:00 GMT

Read and write Microsoft Office documents as well as OpenOffice format.
http://www.openoffice.org

Edit photographs and illustrations with GIMP
http://www.gimp.org

Record your audio material with Audacity
http://audacity.sourceforge.net/

Install multiple versions of Internet Explorer on your PC
http://tredosoft.com/Multiple_IE

View WMV files on your Apple Mac by downloading Flip4Mac
http://www.microsoft.com/mac/products/flip4mac.mspx

Create a blog or news page using Wordpress
http://www.wordpress.com

Send large files over the internet using YouSentIt.com
http://www.yousendit.com/

View your images in an interactive 3D environment with PicLens
http://www.piclens.com

Place pins on a map to show your location and your clients with Zeemaps
http://www.zeemaps.com

Useful Web

Sat, 19 Apr 2008 08:26:00 GMT

See the following links for useful websites:

Best 'Free' Online Software
Websites for Designers
Websites for Musicians
Websites for Video Production
Experimental and Miscellaneous

Golden Section

Sat, 19 Apr 2008 08:10:00 GMT

PHI or THE GOLDEN SECTION is derived from the fibonacci series. PHI is essentially 1.618 or by dividing a measurement by 1.618 you will get the larger measurement. The golden section can be seen in nature, architecture and other design works. There is a natural comfort in dividing elements of a design into thirds then using 1:2 ratio.

The fibonacci series is created by adding the last two digits of a sum. See example:

0+1 = 1
1+1 = 2
1+2 = 3
2+3 = 5
3+5 = 8
5+8 = 13

groupings

Sat, 19 Apr 2008 08:07:00 GMT

People like information to contain structure so attention can be given to the most important elements and energy dispersion highest where most needed. View this as a matter of time / energy. Information can be divided, resized, isolated.

Emphasis is the process of generating elements that stand out from the rest. Priority of information, priority of messages understood by the viewer. Boldness, colour and constrast are some of the methods typically used.

An element of decisiveness is required on the designers part. If all elements are 'shouting' then how can a message get across.

Colour

Sat, 19 Apr 2008 08:05:00 GMT

- HUE - another name for colour
- SATURATION - the purity of a hue. Less saturated colours are mixed with a neutral / grey / black tone.
- VALUE - how dark or light a hue appears to be relative to black or white. By squinting eyes a judgement of relative hue can be established.
- TINT - the level of solidity of a colour usually seen as a % white
- Use colour wheels and colour theory to generate attractive colour schemes.

COMPLIMENTARY - the exact opposite on the colour wheel
ANALOGOUS - any three adjacent hues are placed together can also be varied to be 'every other colour' around the palette
SPLIT COMPLIMENT - take a hue then choose colours either side of its compliment
TRIADS - any three hues equally spaced on the colour wheel
MONOCHROMATIC - a single hue that may be used as a selection of tints.

"A well chosen ink can be flooded over a surface, featured in any number of lighter tints or combined with one or two other inks for cost effective impact."

- Using white next to a hue can make the hue look cooler. Using black next to a hue can make the hue look warmer.
- Higher saturations of ink makes elements look closer to the viewer and lower saturation or % tints make the object / text look further away. Things further away are duller.
- Use higher contrast for smaller text.
- When creating body text it is always best not to use tints. At such small scale the effect will be that the printing methods may make the type look jagged due to the addition of white / background colour

- the K in CMYK is refering to KEY [or usually BLACK]. Essentially KEY is refering to the 'key plate' where the artwork is held together by black elements or outlines.

- MAGENTA - this is equal amounts of RED and BLUE LIGHT and is a direct compliment of GREEN [opposite on the colour wheel]. Widely used in fashionable times for decorative home items and clothing. One theory about magenta is that its proximity to red again stimulates, excites and creates activity ie not a calming colour like blue or green.

- CYAN - this is made up of green and blue LIGHT equally. It contains no RED. Designing with CYAN can include creating darker skin tones, enhancing flesh colours, brightening shadows or deepening darker colours. CYAN is not typically used on its own and designers often go for BLUE.

- YELLOW - the most visible yet most eye-fatiguing colour in the visible spectrum. Associated with the sun, happiness, positivity. Very few designers would typically pick this as their favourite and it is often associated with children eg through products.

- Combining pure cyan (C), magenta (M), and yellow (Y) pigments would result in black by absorbing, or subtracting, all colors. For this reason they are called subtractive colors. Black (K) ink is added for better shadow density. (The letter K came into use because black is the "key" color for registering other colors, and because the letter B also stands for blue.) Combining these inks to reproduce color is called four-color process printing.

FONT

Sat, 19 Apr 2008 08:01:00 GMT

There are several FONT TYPES:
SAN SERIF - without the serifs
SERIF - include serifs. These originate from days when a chisel was used.
SCRIPT - based upon handwriting.
NOVELTY - stylised.
DINGBAT - shapes, icons for use in text or other.

LEGIBILITY is the 'ease with which text can be read'. Are headlines large enough to attract attention in relation to the body of text? Can the body of text be easily read?

ITALIC - less readable in large blocks

SANS SERIF - less readable in large blocks

SCRIPT - may sacrifice legibility as eye trys to follow style of letter shapes. Some fonts can be deliberately difficult to read as a matter of attracting attention.

SERIF - the ideal font style for large blocks of text due to the serif providing a more comfortable line for the eye to pass over the lettering. The ideal is a San Serif font with upper / lower case letters in appropriate places.

LEADING - is the amount of space between lines of text. This is often set at 2 points above the point value of the main text. Eg 12 point helvetica with 14 point leading. This provides a more comfortable space between lines of text. Where negative leading is used, lines are packed closer together to save space and condense items.

LETTERSPACING - can be increased if a more 'open' feel will add to the theme or style or can be slightly reduced to fit the space the text can be placed within.

ITALICS - less readable in large blocks of text

grid

Fri, 18 Apr 2008 23:14:00 GMT

Grids assist in the placement of text and images on a page. There are a variety of grid patterns that can be employed to ensure that the text and images not only compliment one another but also are accessible and easy to follow. Newspapers, for example, can allow the use of 5 or 6 columns of text across the page through careful design of the grid to allow an editor to place images in a variety of sizes or formats such as portrait or landscape images.

It is advisable that a single column of text in a novel does not exceed 12 words per line and seven words for something like a magazine. If the text is too wide then this affects readability as the eye has difficulty finding its way back to the beginning of the next line. See Verdana as a classic example of text designed to be read at a variety of sizes.

Although some grids can look complex, the idea is that the user need not use all the grid elements on every page but can select the most suitable guides for producing a layout that looks coherant with the rest of the document. This may be in terms of title location, borders, header and footer locations.

page

Fri, 18 Apr 2008 23:04:00 GMT

A page can be described as the physical media that passes through the printer. The printable area is the part of the page that an offset lithography process print machine, an inkjet or laserjet printer can apply ink to. In industrial settings to make sure that the ink covers the whole of a standard European A4, a US letter or an A3 page, an oversize stock will be used.

The structure of a page in a typical magazine, for example, usually contains a grid system to assist in positioning text, images and illustrations and margins - the head [top], foot [bottom], back edge [next to spine / fold] and the fore edge [opposite from the spine]. Two back edges combined together form the gutter of the page and also refers to the spacing between columns. The foot is normally greater in size than the head and the fore edge twice the width of the back edge in traditional printing. Jan Tschichold discovered that the margins of medieval manuscripts followed proportions:

Ratio of text area to page size was = 2:3
Depth of printed area to page width = 1:1
back edge [2], head [3], fore edge [4], foot [6] = 2:3:4:6

For a page to be printed correctly in an industrial context, there is usually the need for BLEED. This is the term used for the extra image information that is required for a printers cutting edge to cut through media with ink upon it rather than assuming that a print machine will be so accurate that the ink need only cover the exact size of the job. For example, a blue book cover should have an extra 3mm colour around the edge of the job so that the blade of the cutter trims through solid colour with a small tolerance to spare.

COLOUR MANAGEMENT

Fri, 18 Apr 2008 23:02:00 GMT

The problem with using different devices such as computers, digital cameras and scanners is that they all have different limitations on how they can translate colour reflected from every day objects such as grass, trees and other visual elements. To understand in which space the device is operating it must be calibrated to a standard space to see where colours are added or removed in relation to this.

When using a computer, use the ADOBE GAMMA SETTINGS under the CONTROL PANEL options to balance the screen to its correct calibration. Then select correct colour management scheme under the COLOUR SETTINGS in Photoshop and Illustrator - region based settings are often most accurate and using ADOBE RGB workspace with RELATIVE COLOURMETRIC is a good setting to use.

By switching on GAMUT WARNING you are able to get highlights on any colours outside the working space [eg CMYK, RGB]. You can then make alterations to the image where necessary by using options such as HUE / SATURATION levels to correct the image for output - as many colours as possible with then be viewed accurately prior to print. Alternatively, use the COLOUR RANGE tool for a more accurate or location specific

BLACK POINT COMPENSATION is the way a colour managed system will account for a black point on a different device's colour management system.

To select the closest CMYK equivalent for a nonprintable color: click the triangle in Illustrator and Photoshop to adjust to the CMYK value.

To select the closest Web-safe equivalent for a non-Web-safe color: click the cube to adjust to the correct colour.

Useful Books

Fri, 18 Apr 2008 22:48:00 GMT

Below are a list of useful books:

DESIGN BASICS INDEX, JIM KRAUSE
ISBN 0-7153-2053-X [£14.99]
http://www.amazon.com/gp/product/1581805012/103-1368802-4017408?v=glance&n=283155

GRAPHIC DESIGN, CHARLOTTE + PETER FIELL
ISBN 3-8228-3878-0 [£4.00]
http://www.taschen.com

GRAPHIC DESIGN THAT WORKS, CHERYL DANGEL CULLEN
ISBN 1-59253-279-7
http://www.rockpub.com

MAEDA AND MEDIA, JOHN MAEDA
ISBN 0-500-28235-8 [£19.95]
http://www.maedastudio.com

PRODUCTION FOR GRAPHIC DESIGNERS, ALAN PIPES
ISBN 1-85669-268-X [£19.95]
http://www.amazon.co.uk/exec/obidos/ASIN/185669268X

Design for Web

Thu, 17 Apr 2008 07:09:00 GMT

Design for Web is the process of creating design work in appropriate formatting to be written to the World Wide Web. The most common method for producing content for The Web is using HTML which can be read by common web browsers available on typical home and office based computer systems.

There are several methods for creating content for the web but typically if information is to be distributed on the web it will be written in HTML by hand-coding the necessary mark-up language or using a WYSIWYG editor such as Macromedia Dreamweaver that creates the necessary code for the editor therefore reducing the need for extensive coding knowledge.

Whilst there is no particular organisation that governs or dictates how the internet should function or operate, there are organisations pushing for the establishment of standards and ideals. One prominent group is the World Wide Web Consortium also known as the W3C. The W3C's mission is "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web."

Simcoemedia

Thu, 17 Apr 2008 07:08:00 GMT

Simcoemedia is the company set up by Pete Simcoe in June 2002. Simcoemedia produces design work for clients from a variety of industries across the UK in the areas of Design for Web, Design for Print, DVD with audio production as a developing strand.

Typography

Thu, 17 Apr 2008 07:04:00 GMT

Typography has been described as the process of making language visible or setting it in type using fonts, font size, line length, leading and letter spacing or kerning - it is on of the basic building blocks of design for print and theory states that good typography and text design should help communicate an idea with clarity.

The alphabet we use today was originally designed around 1100BC [although there are many letters originally used in mediaeval times no longer used today]. The way that lettering and words were constructed formed a very densely packed pattern on a sheet of paper in early traditional typesetting - this lead to the use of the words derived from textus [woven pattern]: textura, black letter, text. Often there were greater areas of black ink upon a page compared to the white space of unused paper.

"The best typography never gets noticed". [Herb Lubalin]

"Good typography is like a crystal wineglass, thin as a bubble and just as transparent. It's purpose is to reveal rather than hide the beautiful thing it is meant to contain." [Beatrice Warde]

FONT is a set of typographic characters. The group of shapes that represent letters. These are designed to work visually together. A font is also known as a TYPEFACE.

TYPE is measured in points. There are 72 points in 1 inch. You cannot rely on a 72 point font being 1 inch in height as there is variation in actual size across the board of 72 point type - this is due to the way metal blocks were originally measured in early printing methods.

Scanning Rule of Thumb

Tue, 15 Apr 2008 11:25:00 GMT

Use this rule to get the best results when scanning:

Scanning Resolution [dpi] = [(Target width [px,mm]) / (Original Width)[px,mm]] x Screen Ruling [lpi] x 2

LAYOUT

Tue, 15 Apr 2008 11:25:00 GMT

This is where the designer has the majority of control in any design task from designing a website home page to a page in a brochure. We will mainly focus on layout for PRINT here.

Before DTP became accessible as a mainstream method for producing design work, a designer would need to prepare a photocopy of an image or photograph to be put in place withing the layout by a Finishing Artist. Designers, along with a team of production staff, would also need to produce a Camera Ready Copy [CRC] (sometimes just refered to as Artwork [A/W]) of the text and images. This system of creating prepress documents is very rarely used now and would only be used as a matter of emergency!

The initial part of the layout process should 99% of the time start with a paper and pencil sketch of where text and images could be placed. This will give a clear idea of information flow before the job is started and can save considerable time in unproductive re-arranging. Do the rearranging swiftly by pencil in the early stages.

Once the designer feels that he or she has reached a suitable conclusion in their sketch and layout work, using simple boxes to represent images and text, then it is time to use a program like Adobe's InDesign to begin to create a layout suitable for sending directly to a print company for the ON PRESS part of the process.

InDesign uses a WYSIWYG interface for representing the layout of text and images on a predetermined page size. However, screen fonts are inferior in quality to printer fonts and therefore, strictly speaking, screen fonts are a lower quality representation of the final product. The WYSIWYG interface is able to generate guides, rulers, stylesheets and effects to assist in the production of a document.

InDesign can export direcly to a print ready PDF document [Portable Document File with a .pdf file extension].

Varying distances between components of a design creates interest and variances that appeal. Spacial relationships should be carefully planned and noted. They can be used to create groupings.

When using images symmetry or placing an object 'dead centre' can often draw attention to an element to gain maximum attention. Symmetry in a photography can sometimes be percieved as boring or unimaginative as this can lead to confusion as to which elements are important.

The Golden Section can be used to great effect in the layout of documents, web pages or other visual design work.

Prepress

Tue, 15 Apr 2008 11:22:00 GMT

Once the design brief is delivered and the illustrations, images and text are selected, the next part of the print process is PREPRESS. This is when all the elements required for a project are assembled.

PREPRESS, in modern terms, usually involves the use of popular Desktop Publishing software such as Adobe's Indesign or Quark Xpress to bring all the elements together on a digital space that represents a 'page' in the real world. However, before the 'page' reaches its final material such as A4 paper, a plastic carrier bag or a Compact Disc, it will be converted to the necessary format for the ink to be applied to the media. This may be a lithographic plate, a silkscreen or a gravure cylinder - these carry the ink from the ink source to the product itself. with the advent of the World Wide Web, File Transfer Protocol and email, it has never been easier for professional designers and amateur designers to send their prepress files in the form of InDesign [INDD], Quark [QXP], Illustrator [AI] and even Photoshop [PSD] to their printer for a swift turnaround.

Three important elements in PREPRESS are: LAYOUT, COLOUR MANAGEMENT and PREFLIGHT CHECK. These three elements form the majority of preparation of the document for the next steps.

Design for Print

Tue, 15 Apr 2008 11:21:00 GMT

The print process can be broken down into the following areas:

1. The design brief
2. Selection of material such as illustrations, images and text
3. Prepress
4. On press
5. Publication and distribution

Dreamweaver

Mon, 07 Apr 2008 22:40:00 GMT

See Macromedia Dreamweaver

Overview

Mon, 07 Apr 2008 22:40:00 GMT

The Simcoemedia Design Guide has been created with TiddlyWiki and represents the notes, ideas and findings of research into the design process. This is not a comprehensive guide, but a growing, developing document aimed at collecting descriptions of design theory and practice. This guide has been produced by Pete Simcoe, Simcoemedia: http://www.simcoe.co.uk