Intro to Web Design

and the

Creative Process

Web Design

Cassie McDaniel / @cassiemc

What is design?

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

• Solves a problem visually

What is design?

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

• Solves a problem visually

Eames Powers of 10

Establish clear, measurable goals.

Focus on the problem, not the solution.

Idea

Idea ➟ Narrative

Client buy-in

Tone

ImageryType

Content

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)

1. Hierarchy

2. Best practices

3. Context

TypographyResources

theleagueofmoveabletype.com

method.ac

type.method.ac

thenounproject.com

copypastecharacter.com

Standards:photoshopetiquette.com

Designing for an interfaceResponsive web design

alistapart.com/articles/responsive-web-design

designmadeingermany.com

Resources

www.teehanlax.com/downloads/

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

between layouts)

2. Has clear user path

3. Is highly usable

1. Grid system

960.gs

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

Google is your best friend.3. Usability

Design Criticism• Talking with a design vocabulary

(an exercise! hooray!)

• Giving and receiving criticism

Lack of clarity!

White space

Hierarchy

x-height

www.cassiemcdaniel.com

Thanks!@cassiemc