web design principles

22
Design Overview Quick Review on the basics of Design Image courtesy of http://www.betterbydesign.org.nz

Upload: ataghaviburris

Post on 23-Jun-2015

294 views

Category:

Design


0 download

DESCRIPTION

Examples of websites using the design principles

TRANSCRIPT

Page 1: Web Design Principles

Design OverviewQuick Review on the basics of Design

Image courtesy of http://www.betterbydesign.org.nz

Page 2: Web Design Principles

Graphic CommunicationWhat is it?

Taghavi-Burris 2009

Page 3: Web Design Principles

Graphic Communication

Graphic Communication is communication through the use of multiple forms of graphic media; such as images, video, animation and typography; combining art and technology in order to communicate a meaningful message to the audience.

effective graphic communication projects have a clear message or call-to-action.

A call-to-action (CTA) is a prompt to the audience to do something

Taghavi-Burris 2009

Page 4: Web Design Principles

Graphic Design

The term graphic communication and graphic design are sometimes used synonymously.

However, graphic design is best defined as the number of artistic and professional disciplines, which focus on graphic communication.

Graphic design refers to both the process (designing) by which the communication is created and the products (designs) which are generated.

Taghavi-Burris 2009

Page 5: Web Design Principles

Design ProcessThe 6 D’s

Taghavi-Burris 2009

Page 6: Web Design Principles

Design Process

There are 6 stages known as the 6D’s: Definition, Discovery, Drafting, Design, Development, and Deployment

Each of stage of design process typically has it’s own set of deliverables.

Deliverables is a term used in project management to describe a product of a design process, to be delivered to the client.

Taghavi-Burris 2009

Page 7: Web Design Principles

Stage 1: Definition

During this phase designers will meet with the client or project manager to answer variety questions, such as:

What is the message or call to action?

Who is it for?

What are any constraints?

What is the best format/output for the project?

What is the creative direction of the project?

What is our timeline and budget?

What is the project goals or outcome?

Taghavi-Burris 2009

Page 8: Web Design Principles

The Creative Brief

During the Definition stage a document known as the creative brief is complied.

The creative brief is usually made up of the following information:

Taghavi-Burris 2009

Page 9: Web Design Principles

Stage 2: Discovery

The discovery stage has two parts research and conceptualizing

Research can can ensure a more effective design and provide justification for design choices.

Conceptualizing involves generating many ideas

Taghavi-Burris 2009

Page 10: Web Design Principles

Stage 3: Drafting

Drafting is the stage of the process in which designers translates their ideas into an understandable format.

These formats can include:

Thumbnails

Sketching

Storyboards

Flowcharts

Mockups and Comps

Taghavi-Burris 2009

Page 11: Web Design Principles

Stage 4: Design

The design stage takes the research, ideas and rough drafts from stage 2 and 3, and combines them into a meaningful product.

Assets are first collected/constructed to be used in the design.

Assets are all the elements that are apart of the completed design.

Taghavi-Burris 2009

Page 12: Web Design Principles

Stage 5: Development

Development is the stage after After all the assets and design changes have been once again been approved by the client, and actual production can begin.

Depending on the type of project different versions or prototypes of the product must be developed in order to ensure quality assurance.

Taghavi-Burris 2009

Page 13: Web Design Principles

Stage 6: Deployment

The deployment stage is the output of the project. Deployment can be anything from sending a project to the printers, to uploading a web site to a server.

Feedback is two-way communication between the client and the designer, and takes place throughout the design process.

Taghavi-Burris 2009

Page 14: Web Design Principles

Design BasicsElements, Principles and Grids

Taghavi-Burris 2009

Page 15: Web Design Principles

Design Basics

Design – to arrange design elements into an artistic whole.

Composition is the product or outcome of design.

Good composition is achieved when the elements of design are arranged in accordance to the principles of design

Taghavi-Burris 2009

Page 16: Web Design Principles

Design Elements

The Design Elements are the basic components used as part of any composition.

Taghavi-Burris 2009

Point Line Shape & Form

Page 17: Web Design Principles

Design Elements

Type is also considered an element when a composition requires text.

Taghavi-Burris 2009

ColorTexture Value

Page 18: Web Design Principles

Design Principles

The Design Principles define the structural formation of a design and determine how the various design elements are organized within the compositional space.

Taghavi-Burris 2009

Unity & Variety Balance Scale & Proportion

Page 19: Web Design Principles

Design Principles

Appling these principles ensure a pleasing composition.

Taghavi-Burris 2009

Rhythm Emphasis

Heading

Page 20: Web Design Principles

Good Composition

Tips for good composition include:

One focus point

Good flow (guide the viewer through the the composition)

Subject of the composition should NEVER face out of the image.

Moving subject should have space in front

The horizon line should not divide the composition in two equal parts.

Taghavi-Burris 2009

Page 21: Web Design Principles

Design Grids

Design Grids (Composition Grids) are patterns that which ensure good flow for a composition.

Taghavi-Burris 2009

Golden Ratio Rule of Thirds Rule of Odds

Page 22: Web Design Principles

Design Grids

A Grid is created through a series of intersecting lines.

Taghavi-Burris 2009

Rule of Space Typographic Grid