Day 6 Layout. Objectives  Learn about some principles of perception  Learn how grids can help you organise a site’s content  Learn about the golden.

Slides:

Advertisements

Similar presentations

Design Principles By: Jonathan Gross. CONTRAST IT’S WHAT MAKES A READER LOOK AT THE PAGE IN THE FIRST PLACE BECAUSE IT GETS THE READERS ATTENTION. WHEN.

Advertisements

Business Card Design.

contrast, repetition, alignment, proximity

2011 AECT International Convention Tired of PowerPoint? Using research-based and theory-grounded guideline in selecting Web 2.0 tools for effective and.

Elements of Design: The 4 Basic Principles.

Good and Bad Design. Contrast Contrast with color Contrast with images Contrast with fonts Contrast with size Contrast is one of the best ways to add.

Basic Principles of Design How to make your websites and video graphics look more professional.

Gestalt Principles of Visual Perception

Gestalt Principles Gurpreet. What are the Gestalt Principles? Gestalt is a psychological term which means ‘unified whole’. It was discovered by the German.

Sensation and Perception. Sensation & Perception Not always veridical to the physical stimulus Illusions An illusion is a perception of a physical stimulus.

Four Basic Design Principles

14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.

GCSE Psychology Gestalt Laws.

The Principles of Design

4 design principles for web publishing (the non-designer’s web book, by robin williams) Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor,

Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.

Principles of Visual Design TECM 4250 Dr. Lam. Set 1.

Six Principles of Good Design

IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure

Many years ago, an American nightclub had a fire in which over 400 people died due to a simple design flaw. What was it and how were regulations changed.

Effective Graphic Design

General principles of publication design Magazine Design and Production COMM 3003.

Chapter 6 Repetition…. Objectives (1 of 2) Reinforce the importance of the principle of repetition. Understand the effect of repetition in a design. Appreciate.

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

0303 IAT 102 Graphic Design. Reminders: Draft 1 of project two – bring with you to Lab next week (see WebCT for requirements) If you do not have a team.

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,

Elements of Design Presentation designed by Dr. James Lenze Model: Williams R. (2004), The Non-Designer’s Design Book, Second Edition, Peachpit Press What.

Gestalt Principles of Design

0707 IAT 102 Graphic Design Design Basics Design Tools.

Building Your Web Page. Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22.

South Carolina EdTech 2011 Unplugged Unwired Enhancing Instructional Value with Graphics Applying Visual Learning Principles to Your Classroom Presentations.

Basic Design Principles Unlocking the Secrets to Creating Professional Documents.

Desktop Publishing CRAP.

The Principles Of Design P.A.R.C.. Why do we need the principles? They bring order and organization They make it attractive. They make it interesting.

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

With a focus on screen design and CRAP. The Joshua Tree Epiphany.

Editing for Visual Design TECM 4190 Dr. Lam. Why is design so important? Intimately tied with decision making Impacts perceptions well beyond “looking.

Design Principles Allowing you to create more professional web pages.

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

Visual Design Basics Visual design focuses on the aesthetics of a digital screen and its related materials by strategically implementing images, colors,

C.R.A.P. (OR C.A.R.P.) FORMULA The Non-Designer’s Design Book.

Principles of Visual Design

…so I typed in “bad design” in Pinterest …. The basic of all design: FORM FOLLOWS FUNCTION.

TECM 3200 Dr. Lam. Project 1: Designing/developing a professional website  Web design process  Content on the web  Laying out your website.

(Than your supervisor)

Graphic Design—The Law of C.R.A.P.

Human Computer Interaction

Design basics for web, print, powerpoint, doodling on napkins, and more by Lisa Blankenship, rev

CARP Four Principles of Design

Gestalt Principles of Visual Perception

GESTALT PRINCIPLES IN ART AND DESIGN

Film making is Storytelling

Principles of Graphic Design

Huxley’s Circle of Visual Perception

C.R.A.P. Design Principles

Design Principles and Why We Need Them…

Advanced Design PRINCIPLES 2.01 Investigate typefaces and fonts.

Design Principles 8-Dec-18.

To identify all 5 of Gestalts Laws.

C.R.A.P. Design Principles

Design Principles 5-Apr-19.

Interface Design Interface Design

Aim: What are other principles of perception?

Gestalt theory Theory in web design.

Design Principles.

Six Principles of Good Design

Adapted from The Non-Designers Design Book

Principles of Design Contrast Repetition Alignment Proximity

How to look good on paper in four easy steps

Gestalt principles – in the mind, not the eye

Presentation transcript:

Day 6 Layout

Objectives  Learn about some principles of perception  Learn how grids can help you organise a site’s content  Learn about the golden ratio

Perception  People unconsciously perceive according to certain principles  Some of these principles were studied in the 1930s and 1940s by German psychologists known as “gestalt” psychologists  “Gestalt” is a german word meaning figure or shape  In perception, objects are seen as structured wholes rather than the sum of their constituent parts

Figure Ground

The law of proximity objects that are close to each other tend to be seen as a group

The law of similarity objects of the same shape or colour are seen as belonging together

The law of closure missing parts of an object are filled in to complete it, so that it appears as a whole

The law of continuity lines tend to be seen as continuous, even if they are interrupted

The PARC principles (Williams)  Proximity related items should be grouped together items that are not related should not be close to each other  Alignment everything on a page should be visually connected to something else on the page nothing should be placed arbitrarily  Repetition repeat design elements throughout the entire piece (e.g. a font style, graphic, line, icons, colours)  Contrast if two items aren't the same, make them very different (e.g. size, colour, shape)

The PARC principles design/design-basics-alignment/

From this … to this

The PARC principles tml

From this … to this …

and … from this … to this

The user experience  A software’s visual organisation will influence the experience users are likely to have  Remember the PARC principles  Remember the Gestalt principles  These principles can help with layout and choice of images, font, and colour

The grid  Think of a software screen that you are about to design as a “grid” rather than as a blank piece of paper

A well structured grid

A messy grid  Think about what makes this grid messy  PARC principles  Gestalt principles

The golden ratio (phi)

Golden ratio software 

Today’s lab  redesigning a bad layout (2 marks available)  make sure to read the suggestions on the website regarding things you could do by tomorrow