Create a creative brief

Vocab You Need to Know

Write down everything you know about the company you chose
Write down everything you know about the company you chose
Plan for creative brief
Pick an exciting brand or creative one, this will be your 'client' and the base for your creative brief. ( We wouldn't be creating any designed deliverables, just getting an understanding on how to get there).

Quick History of Graphic Design

Create a document where you start listings:
- Create a document where you start listings:
1. What
2. Why
3. When
4. How much
- Is this a product or a service? Can you test out this product or service, gain more perspective and understanding.
4 W's
What are the Whats, whys, whens, and how much's of your 'client'?

El Dorado

Define the clients goals, the budget, the time line and the obstacles (example no website, need time
Define the clients goals, the budget, the time line and the obstacles (example no website, need time to set up the server, etc)
Goals
What are the goals of the client?

What goes into a layout, part 1

From what you gathered you should be able to answer this following points:
From what you gathered you should be able to answer this following points:
- Background
- Target Audience
- Objectives
- Tone of voice
- Single Minded Proposition (Also called USP, Key Message, Direction)
- Key benefits
- Reasons to believe
- Audience Takeaway
- Deliverables (Outdoor, Print, TV etc)
- Budget
- Schedule
Final Brief
Use your gathered information to create this final brief

What goes into a design, part 2

What's the best approach to reaching their goal? Ads, banners, website, logo etc
- What's the best approach to reaching their goal? Ads, banners, website, logo etc
Let's have some fun
Start thinking of deliverables that will be relevant to your client and their goals

What goes into a design, part 3

Sketch it
Show me what your words can no longer express! Sketch out some ideas. (Check out this link first http://alistapart.com/article/sketching-the-visual-thinking-power-tool )

Resources

*TRY*
If you can try to recreate your sketched drawings via a digital publishing tool such as photoshop, indesign etc.

Additional Resources

- Graphic design: a creative process involving a client and a designer. It's used to communicate a specific message to a target audience.
- Graphic designer: uses a combination of typography, visual arts and page layout techniques to produce a final product (ad, website, magazine layout etc)
- Visual art: photography, computer art, drawing; will later be an element used in the layout
- Typography: the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning)
- Page layout: the arrangement and style of elements such as text and images on a page
- interface design: design of the front of a website including: colors, fonts, images, layout, informational structure and organization, navigation, etc.
- User experience: is a broad term used to explain all aspects of a person’s experience with the system, including the interface, graphics, industrial design, physical interaction, and the manual (for a deeper explanation click here)
- RGB: red, green, blue: used on electronic display systems
- CMYK: cyan, magenta, yellow, black: used at print houses
- San serif: fonts without serifs (small lines tailing the edges of letters)
- Bauhaus: a design school started in 1919 Germany. It's impact on graphic design brought about more simple designs. Check out this video for more on this topic.
- Alignment: lining up the top, bottom, sides, or middle of text or graphic elements on a page
- Creative Brief: a document provided by your client explaining their objective, target, copy and other important information to help you begin the design project. Here's a link to information that should be provided in a brief
- White space: Portions of a page left unmarked ( often referred to as negative space) the balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition
- Copy: Content, words or text used for ads, magazines, web sites.
Before we called it graphic design humans were using visual communication in the form of hand drawings in caves to tell stories. Fast forward through history passing the early days of the creation of paper and the printing press we arrive at modern communication. Our starting point will be the 1950s when graphic design became a job specialty. As the 1960s rolled in, advertising became revolutionary, also known as the golden age of advertising or what you see on Mad Men. Mass consumerism began to shape America and graphic design was the tool being used to sell these products. Design trends such as the Swiss and Bauhaus style began to shape how page layouts looked and defined modern graphic design.

Read: Differences between print and web design
Everything is golden in the world of design. Here are a few concepts to take note of before, after and during the design process.

Golden ratio: a is larger than b, (a+b) divided by a is equal to a divided by b which is equal to 1.618033987 or “phi”

Rule of thirds. Divide any image into thirds horizontally and vertically, you’ll get 9 grids (your iPhone can do this in the camera setting) Looks like this

Golden spirals gets wider by a factor equal to the golden ratio for every quarter turn they make, and Fibonacci spirals are formed using Fibonacci tiling. Looks like this.

The theory is that areas of negative space and visual interesting things should fit within "the" spiral. Within this layout the eye is naturally drawn to the center of the spiral to look for details. Look familiar? How about this?

Golden spirals in web design: click here

Super duper article that explains all of this in MORE detail: here.

Resources

http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/

http://en.wikipedia.org/wiki/Golden_rectangle

http://www.goldennumber.net/human-hand-foot/
Creative Process
Before you begin designing on a computer grab a piece of paper and pen and start sketching your ideas, make sure to use the creative brief. Do as much research as you can, look at things that were done in the past, at what other's are doing. Create an inspiration board, visual or with words/ideas/goals.

--

Layout
- Print layout: Where to begin, where to begin. First thing is first, make sure you are using a proper page layout tool to set up your designs, Photoshop will only make things harder and longer. Ok let's say you have inDesign open, create a new page 8.x5 x11, include .5 bleed with in the page and .125 bleed on the outside. This will set you up for success when you are ready to print or send the final file. You want to keep content like logos and text (aka copy) within 1/2 inch of the edges.
- Web layout: You have two choices here a fixed width (look the same on every screen, irrespective of how wide it is) or a fluid layout (sites will expand to fill the screen). Great example here. Photoshop or Fireworks are great tools for creating your web layouts. With new technologies like Apple's retina screens industry standards like designing in 72 dpi is/will/has changed. Some designers are creating files with 96 dpi or higher.
--

Space, Balance, Scale

Space: creates emphasis, hierarchy and/or grouping of elements and improves legibility. Types of things that create space: whitespace, negative, and grids. Great article here that examples space in depth.

Balance: even distribution of elements on a page (text, images and white space) "The rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally and placing our most important elements within those thirds."

Scale: refers to the size and proportion (goes back to the golden rectangle and ratio; width is to length as length is to length plus width.. basically make it look like it relates to the other objects or it will look all crazy) refers to the relative size. Scale can be used to draw our attention somewhere, such as making an object larger or smaller to get attention.
- Great use of space click here
- Great use of scale click here
--

Color
RGB: red, green, and blue used to display images in electronic systems such as computers, used for web design and content. Using RGB images when printing will result in a muddy looking photo.

CMYK: cyan, magenta, yellow, and black used in color printing. (Tips for converting your RGB images into CMYK) Adjust your photos to keep costs down.

Pantone: proprietary color system used in a variety of industries such as printing and manufacturing. Allows designer to "color match" specific colors when a design enters production stage, regardless of the equipment used to produce the color. These colors can not be simulated with CMYK colors. (Tips for printing with Pantone colors) Pantones are used a lot in branding example

HEX: Colors used in HTML, CSS, SVG and other computing applications.

Online color generator

--

Typography
- Sans Script vs Script:
- Kerning: Process of adjusting the spacing between characters example , where to change it // Examples of bad kerning: click here .. and too much kerning
- Leading: Distance between the baseline of successive lines of type. Wha? Example here , where to change it
- Web Fonts: Open source fonts embeeded in a website via CSS. Example Google Web Fonts
File Extensions

Jpeg: lossy compression, loses info as you make it smaller. No transparency, no animation. Good for photos or images. Supports millions of colors.

PNG: was created to replace GIF, lossless compression. (PNG 8 and 32 only) supports transparency. Good for typography and art. (PNG 24 and 32 only) supports millions of colors. Used for web.

GIF: Lossless compression, 256 colors or less. Good for typography, art or animations. Supports transparency and animation. Used for web.

EPS: Illustrator file, can be opened in other platforms such as Photoshop

AI: Illustrator file, holds layers and vectors

TIFF: Photoshop file, high quality image, can hold transparency and layers, used for images that will be printed.

PSD: Photoshop extension holds layers and photos

Software

Photoshop: Image editor

InDesign: Print and digital layout application

QuarkXpress: Page layout application

Illustrator: Vector creating application

Fireworks: Bitmap and vector graphics layout application for web graphics.

Pages: Pre-made layout application

Talking printer Talk

Paper weight: 100 lb means very thick (like a magazine cover), 80 lb (inside magazine pages) means a little ligther than and anything less than that is very thin.

Sizes: 11x17 is equal to two sheets of paper, 8.5 x 11 is your standard and you can pull out a ruler from there. Pixels are used in designing for the web.

Color: 4/0 means four color process on the front and nothing on the back, 4/4 means four colors on the front and back.

Bleeds: When sending a document to the printer you must have bleeds. Bleeds are 0.125 on all edges.
Creative process idea

Icons created in Photoshop here

Great website background patterns here

Free UI kit here

Free and sexy icons

Thank you for taking my class, I hope you learned some key fundamental concepts of graphic design.

Kelly Pederson

--

10