Tweet
Tweet

Slide 1

Slide 1 text

I’m Andi from Big Sea. @andigrahambsd @bigsea HI THERE.

Slide 2

Slide 2 text

What’s all this about design?

Slide 3

Slide 3 text

Good design is …

Slide 4

Slide 4 text

User Interface Design (UI) vs. User Experience Design (UX)

Slide 5

Slide 5 text

First things first: prototypes!

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Let’s get visual with typography.

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

IFontYou.com Font Pairs

Slide 11

Slide 11 text

• Chunk content with headers, small paragraphs, bulleted lists, sidebars, indenting an entire a paragraph of text, or pull quotes • Limit line length to 350–550 pixels by splitting wide pages into two or more columns • Increase leading (line-height) to improve readability on longer lines of text and to lighten the overall “color” of a page • Use a non-decorative, screen-optimized typeface at a legible size for body copy • Set body copy as justified left, ragged right

Slide 12

Slide 12 text

Web typography checklist: www.merttol.com/articles/web/checklist-for-better-web-typography.html

Slide 13

Slide 13 text

And then there’s color.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Let’s put it all together. visual hierarchy

Slide 18

Slide 18 text

Visual Weight

Slide 19

Slide 19 text

Designing for action.

Slide 20

Slide 20 text

The Usage Lifecycle

Slide 21

Slide 21 text

Design for the next step. • Clearly communicate the current step. • Clearly communicate the next step. • Clearly communicate how to get there.

Slide 22

Slide 22 text

Design with purpose.

Slide 23

Slide 23 text

Resources! Hack Design: hackdesign.org IxDA: ixda.org I Font You: ifontyou.com/ Colour Lovers: colourlovers.com Pictaculous: pictaculous.com/ Moqups: moqups.com Smashing Magazine: smashingmagazine.com 52 Weeks of UX: 52weeksofux.com/

Slide 24

Slide 24 text

Thanks!