48
and the Creative Process Web Design Cassie McDaniel / @cassiemc

Intro to Web Design

Embed Size (px)

DESCRIPTION

An introduction to web design and basic design concepts. Day 3 of the Yorkville Media Sessions in Toronto.

Citation preview

Page 1: Intro to Web Design

and the

Creative Process

Web Design

Cassie McDaniel / @cassiemc

Page 2: Intro to Web Design
Page 3: Intro to Web Design
Page 4: Intro to Web Design
Page 5: Intro to Web Design
Page 6: Intro to Web Design
Page 7: Intro to Web Design
Page 8: Intro to Web Design
Page 9: Intro to Web Design
Page 10: Intro to Web Design
Page 11: Intro to Web Design
Page 12: Intro to Web Design
Page 13: Intro to Web Design

What is design?

• Information architecture, user experience design, illustration, art, editing, curation, science, black magic.

• Solves a problem visually

Page 14: Intro to Web Design

What is design?

• Information architecture, user experience design, illustration, art, editing, curation, science, black magic.

• Solves a problem visually

Page 15: Intro to Web Design
Page 16: Intro to Web Design

Eames Powers of 10

Page 17: Intro to Web Design

Establish clear, measurable goals.

Page 18: Intro to Web Design

Focus on the problem, not the solution.

Page 19: Intro to Web Design

Idea

Page 20: Intro to Web Design

Idea ➟ Narrative

Client buy-in

Tone

ImageryType

Content

Page 21: Intro to Web Design

Typography on the web1. Displays clear hierarchy (h1, p, ul, etc.)

2. Adheres to best practices in design and webdev

3. Has context (designers should read the content)

Page 22: Intro to Web Design

1. Hierarchy

Page 23: Intro to Web Design

2. Best practices

Page 24: Intro to Web Design

3. Context

Page 25: Intro to Web Design

TypographyResources

Page 31: Intro to Web Design

Standards:photoshopetiquette.com

Page 32: Intro to Web Design
Page 33: Intro to Web Design

Designing for an interfaceResponsive web design

Page 34: Intro to Web Design

alistapart.com/articles/responsive-web-design

Page 36: Intro to Web Design

Resources

Page 38: Intro to Web Design

A good layout:1. Uses a grid system (consistency

between layouts)

2. Has clear user path

3. Is highly usable

Page 39: Intro to Web Design

1. Grid system

Page 41: Intro to Web Design

2. Clear user pathKnow what you want from the user, but provide options

Page 42: Intro to Web Design

Google is your best friend.3. Usability

Page 43: Intro to Web Design
Page 44: Intro to Web Design
Page 45: Intro to Web Design

Design Criticism• Talking with a design vocabulary

(an exercise! hooray!)

• Giving and receiving criticism

Page 46: Intro to Web Design

Lack of clarity!

Page 47: Intro to Web Design

White space

Hierarchy

x-height

Page 48: Intro to Web Design

www.cassiemcdaniel.com

Thanks!@cassiemc