4 principles of graphic design Proximity Alignment Repetition Contrast.

Slides:

Advertisements

Similar presentations

Elements of Design: The 4 Basic Principles.

Advertisements

Session 2—Chapter 3 Visual Literacy Learn to See, See to Learn.

Lesson 1:.  This lesson will cover the four primary principles of design: ● Contrast ● Repetition ● Alignment ● Proximity.

Basic Design Techniques FCS 485. Why Design? People have the power to create More discriminating of other people’s work Customers are influenced by visual.

DESIGNING DOCUMENTS And page layout. What is document design?  Refers to page layout, that is, where the visuals and information are placed on a page.

 Layout – refers to the design and orderly formation of the various elements of an advertisement.  It is where & how you place the various elements.

Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.

Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.

WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!

OF THE TWO NEWSLETTERS BELOW WHICH WOULD YOU PICK UP FIRST? THEY ARE BOTH NICE AND NEAT. THE SOURCE OF CONTRAST IS OBVIOUS. A BOLDER TYPEFACE IN THE.

Design Principles for PowerPoint

Introduction to Principles of Design. Basic Design Principles Contrast Contrast Repetition Repetition Alignment Alignment Proximity Proximity.

Professionally Basic Elements of Design 4 Classifications of Type.

Designing with Type DIM. Design Relationships Concordant—occurs when you use only one type family, without much variety in style, size, weight, and so.

2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO GRAPHIC DESIGN MOVEMENT, BALANCE, UNITY, CONTRAST, EMPHASIS, LINE, AND COLOR.

This lesson has been adapted from “AIOT Graphic Design Lesson 7: Proximity, Alignment, Repetition, and Contrast” The original lesson and many other graphic.

the rhetorical situation  audience  purpose  context design principles  arrangement  emphasis  contrast  repetition  alignment  proximity (some)

Design Principles Web Design. Design Principles  Contrast  Repetition  Alignment  Proximity.

$1 Million $500,000 $250,000 $125,000 $64,000 $32,000 $16,000 $8,000 $4,000 $2,000 $1,000 $500 $300 $200 $100 Welcome.

Brochure Content and Design. Starting Out Generate thumbnails Consider formats Content should determine design: What is the main idea or focal point?

Basic Elements of Design

Basic Design SBM 338 Lanny Wilke. Four Basic Design Principles Proximity Alignment Balance Unity.

Contrast Repitition Alignment Proximity Fonts Quizzzzz DESIGN PRINCIPLES AND FONT RULES

Design Principles and Font Rules Contrast Repetition Alignment Proximity Font Rules Quiz.

Contrast If two things are not the same then you should make them different. Contrast Draws you eye to the page. Big Title Small aftermath Dark Background.

MARKETING 40S Four Basic Principles C.R.A.P. (Contrast, Repetition, Alignment, Proximity)

Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,

Four Principles of Design Dr. Allene Cooper. I gratefully acknowledge the ideas and words of Robin Williams which I’ve used liberally in this presentation.

The basic Principles of Design The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected.

0707 IAT 102 Graphic Design Design Basics Design Tools.

DTP Word 2002 Chapter 1 Understanding the Desktop Publishing Process.

Graphic Design. What is it? Process of combining text and graphics to communicate an effective message through the design of logos, graphics, brochures,

Text characteristics. Size Text size is measured in points Which text size would you choose?

Text Characteristics Adding “Impact”. Size Text size is measured in points Which text size would you choose?

VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.

Design and Typographic Principles. The Joshua Tree Principle Joshua Tree story example The four basic principles Contrast Repetition Alignment Proximity.

Headings and Text What makes headings stand out?.

Design Principles Contrast Repetition Alignment Proximity Font Rules &

Design Principles and Font Rules Katie Zilisch Contrast Repetition Alignment Proximity Font Quiz.

Design Principles Mrs. Levi. Think about it…… Who creates advertisements? Why do they look like that?

The Design Principles The overall flavour the ingredients create.

New Trends in Design Adding unity, balance, structure and dominance to your layouts.

Effective Poster Design: The Non-Designer’s Design Book by Robin Williams Dec 2010.

Principles of Design Lesson Khuzaima Jallad. Principles of Design Lesson Balance Proximity / Unity Alignment Repetition / Consistency Contrast White Space.

DTP Elements & Principles Contrast: Contrast can be created by many different things within a document the most obvious are; colour, shape, font(size and.

Desktop Publishing Business Cards Your LogoYour own footer.

Four important design principles to improve your work

DTP Desktop Publishing.

A graphic design principle

The Four Basic Principles

(Than your supervisor)

Design Principles & Font Rules By: Megan Janke

The overall flavour the ingredients create.

Alternative Story Forms

Document Design is CRAP

Design Principles Proximity Font

Design Principles Applying principles to create attractive and professional printed and electronic publications Copyright © Texas Education Agency, 2013.

TITLE OF PRESENTATION GOES HERE 30PT HELVETICA /ARIAL TITLE

TITLE OF PRESENTATION GOES HERE 30PT HELVETICA /ARIAL TITLE

Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.

Advanced Design PRINCIPLES 2.01 Investigate typefaces and fonts.

DESIGN ONE Objective: The students will apply basic desktop publishing design principles to enhance their documents.

Desktop Publishing Terminology

Additional Information

DESIGN PRINCIPLES and arguing in virtual spaces

Introducing: CRAP TECH MENTORING

LOGO 100% OPEN PROGRAM FOR 2018 RESULT Open School Program 1

Design Principles.

Principles of Design Contrast Repetition Alignment Proximity

How to look good on paper in four easy steps

Presentation transcript:

4 principles of graphic design Proximity Alignment Repetition Contrast

Group related items together. Items not related should be visually separated. TCP Three Cross Management Pete JonesChief Engineer 3 Green Lane, Little Wood T F Experienced Marine Engineers TCP Three Cross Management Pete Jones Chief Engineer 3 Green Lane, Little Wood T F Experienced Marine Engineers Cluttered, disorderedOrganised, with spacing Proximity Grouping

Difficult to readEasier to read Proximity Grouping

As a guide, no more than 5 groupings Proximity Grouping

Which uses proximity? Proximity Grouping

White space “Empty” space on a page or poster not covered by print or graphic matter. White space is used deliberately, and serves a purpose, e.g. to draw attention to facts white space Proximity White space Proximity White space

Lorem ipsum   Dolor sit amet, comsectquis nostrud exercitation ullam corp consquet, vel illum dolore ey fuge t execeptur sisint. Occaecat cupiri tat non. Nam liber tempor cum soluta nobis. Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore. Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Identify where white space is used here Proximity White space Proximity White space

If you want a big effect, use a lot of space. The more isolated an object is, the more pull power it has on your eyes. Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore. Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore.  Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore. Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor sit amet, comsect quis The eye is drawn to isolated objects Proximity White space Proximity White space

Examples Proximity

Alignment LEFT, CENTRE, RIGHT & JUSTIFY Golden rule of alignment Use one alignment only and stick to it (using more than one alignment can look messy)

CHANGING CENTRE TO LEFT Centre alignedLeft aligned Alignment CENTRE, LEFT

USING TOO MANY ALIGNMENTS Too many alignments used (left, right and centred) Alignment LEFT, CENTRE, RIGHT & JUSTIFY

Alignment USING ONLY ONE (CENTRE) Now only centred (very formal alignment) Alignment CENTRE

Alignment USING ONLY ONE (RIGHT) Now right aligned (asymmetrical, modern feel) Alignment RIGHT

Alignment RIGHT WITH REVERSE TYPE Text reversed (light on dark) – more interest generated Alignment RIGHT with reverse text

Alignment LEFT Left aligned (one alignment only) Alignment LEFT

Alignment LEFT Left aligned (except for the logo) Alignment CENTRE

Alignment RIGHT Right aligned (one alignment only) Alignment RIGHT

Alignment CENTRE Centre aligned (very formal and traditional)

Contrast Our eyes/brain likes contrasts. Adding contrast within a page helps to create structure and makes it easier to find information

Contrast UPPER AND LOWER CASE TREBUCHET trebuchet

Contrast UPPER AND LOWER CASE Contrast UPPER AND LOWER CASE

Contrast UPPER AND LOWER CASE Contrast UPPER AND LOWER CASE

Contrast Serif font Garamond Sans serif font Tahoma SERIF AND SANS SERIF Contrast SERIF & SAN SERIF

Contrast SERIF AND SANS SERIF Contrast SANS SERIF & SERIF

Contrast Lorem ipsum Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore ey fuge t execeptur sisint occaecat cupiri tat non. Nam liber tempor cum soluta nobis. Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore ey fuget execeptur sisint occaecat cupiri tat non. Nam liber tempor cum soluta nobis. Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore ey fuget execeptur sisint occaecat cupiri tat non. Nam liber tempor cum soluta nobis SERIF AND SANS SERIF Contrast SANS SERIF & SERIF

Contrast Zurich Times New Roman SIZE DIFFERENCE Contrast TEXT SIZES

Contrast WEIGHT OF FONT Contrast TEXT SIZES

Contrast SIZE DIFFERENCE Contrast TEXT SIZES

Contrast Trebuchet REVERSING TYPE Contrast REVERSE TEXT

Contrast REVERSING TYPE Contrast REVERSE TEXT

Contrast KERNING Contrast KERNING OR TRACKING

Contrast KERNING Contrast KERNING OR TRACKING

Contrast WEIGHT OF FONT Contrast WEIGHT OF FONTS

Repetition ELEMENTS Repetition of page elements provides consistency

Repetition COLOUR. SHAPES, BULLETS Ey fuget execeptu r sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore. Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor sit Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor sit amet, comsect quis nostrud exercitation ullam corp consquet, vel illum dolore. Ey fuget execeptur sisint occaecat cupiri tat non exercitation ullam exercitation ullam Lorem ipsum dolor

Repetition Repetition SHAPES & COLOURS

Repetition Repetition COLOUR & FONT STYLES

WEIGHT OF FONT Repetition Repetition COLOUR & FONT STYLES