how to become an exceptional web designer

71
Design Technology & August 8, 2013

Upload: dale-bentlage

Post on 14-Jul-2015

250 views

Category:

Design


3 download

TRANSCRIPT

Page 1: How to Become an Exceptional Web Designer

Design Technology&August 8, 2013

Page 2: How to Become an Exceptional Web Designer

We are a next generation agency

Who are we?

Page 3: How to Become an Exceptional Web Designer

We are a next generation agency

created to connect brands and people in an increasingly digital world.

................

Who are we?

Page 4: How to Become an Exceptional Web Designer

We are a next generation agency

We do this by orchestrating experiences that spark an emotional connection. We call this interaction design.

................

Who are we?

Page 5: How to Become an Exceptional Web Designer

Technology transferred control to consumer

Audience became harder to find

Every interaction now requires smart planning

trends

Page 6: How to Become an Exceptional Web Designer

interaction design

Design + Technology

=

Page 7: How to Become an Exceptional Web Designer

www.jeep.com Timeline

Page 8: How to Become an Exceptional Web Designer

1998

Page 9: How to Become an Exceptional Web Designer

2000

Page 10: How to Become an Exceptional Web Designer

2006

Page 11: How to Become an Exceptional Web Designer

2010

Page 12: How to Become an Exceptional Web Designer

2013

Page 13: How to Become an Exceptional Web Designer

Screen size comparisons

2000800x600px

CRT (4:3)

Page 14: How to Become an Exceptional Web Designer

Screen size comparisons

20021024x768px

CRT (4:3)

Page 15: How to Become an Exceptional Web Designer

Screen size comparisons

20071280x1024px

Flat Panel (4:3)

Page 16: How to Become an Exceptional Web Designer

Screen size comparisons

2007480x320px

iPhone/Mobile (2:1)

Page 17: How to Become an Exceptional Web Designer

Screen size comparisons

20101920x1080px

Widescreen1080P high definition(16:9)

Page 18: How to Become an Exceptional Web Designer

Screen size comparisons

2010768x1024px

iPad (4:3)

Page 19: How to Become an Exceptional Web Designer

Screen size comparisons

20111366x768px

Netbook (16:9)

Page 20: How to Become an Exceptional Web Designer

Screen size comparisons

2012720x1280px

Galaxy S3 (16:9)

Page 21: How to Become an Exceptional Web Designer

Screen size ranges today

Phone Tablet Laptop Monitor320x480px 768x1024px 1366x768px 1920x1080px

Page 22: How to Become an Exceptional Web Designer

or

Page 23: How to Become an Exceptional Web Designer

You can’t use any good typefaces on the web.

1. Fonts

Page 24: How to Become an Exceptional Web Designer

You can’t use any good typefaces on the web.

1. Fonts

Who said that?!

Page 25: How to Become an Exceptional Web Designer

Arial

Helvetica

Georgia

Times

Verdana

Open Sans

Lovelo

Foro

Bree Serif

Raleway

then Now

Page 26: How to Become an Exceptional Web Designer
Page 27: How to Become an Exceptional Web Designer
Page 28: How to Become an Exceptional Web Designer
Page 29: How to Become an Exceptional Web Designer
Page 30: How to Become an Exceptional Web Designer
Page 31: How to Become an Exceptional Web Designer
Page 32: How to Become an Exceptional Web Designer

You can’t use HTML5 yet because only the newest browsers support it.

2. HTML 5

Page 33: How to Become an Exceptional Web Designer

You can’t use HTML5 yet because only the newest browsers support it.

2. HTML 5

Can you? Yes.

Page 34: How to Become an Exceptional Web Designer

You can’t use HTML5 yet because only the newest browsers support it.

2. HTML 5

Can you? Yes. Should you? Maybe.

Page 35: How to Become an Exceptional Web Designer

IE Fire

fox

safa

ri

ch

rom

e

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

2008

Page 36: How to Become an Exceptional Web Designer

IE Fire

fox

safa

ri

ch

rom

e2009

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

Page 37: How to Become an Exceptional Web Designer

IE Fire

fox

safa

ri

ch

rom

e2010

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

Page 38: How to Become an Exceptional Web Designer

IE Fire

fox

safa

ri

ch

rom

e2011

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

Page 39: How to Become an Exceptional Web Designer

IE Fire

fox

safa

ri

ch

rom

e2012-13

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

Page 40: How to Become an Exceptional Web Designer

You shouldn’t use Flash on the web anymore.

3. Flash

Page 41: How to Become an Exceptional Web Designer

You shouldn’t use Flash on the web anymore.

3. Flash

This is true.

Page 42: How to Become an Exceptional Web Designer

Apple 50.5% Android 40.2%(Flash not supported)

Blackberry 2.57%Other 6.73%

Mobile Operating System Market Share

Page 43: How to Become an Exceptional Web Designer

Access 86%

33% Mobile Apps

37% Browsing the Internet

40% Social Networking

56% Texting with Friends & Family

No Access 14%

Mobile internet multi-tasking

Page 44: How to Become an Exceptional Web Designer

All new websites should be built responsive.

4. Responsive Design

Page 45: How to Become an Exceptional Web Designer

All new websites should be built responsive.

4. Responsive Design

This depends.

Page 46: How to Become an Exceptional Web Designer

Your audience

Amount of content

Your message

Keep in mind

Page 47: How to Become an Exceptional Web Designer

where would you order a pizza from?

or

Page 48: How to Become an Exceptional Web Designer

where would you book a hotel?

or

Page 49: How to Become an Exceptional Web Designer

where would you learn about AIGA?

or

Page 50: How to Become an Exceptional Web Designer

where would you learn about us?

or

Page 51: How to Become an Exceptional Web Designer

WordPress is great for blogs, but you can’t use it to build professional websites.

5. Wordpress

Page 52: How to Become an Exceptional Web Designer

WordPress is great for blogs, but you can’t use it to build professional websites.

5. Wordpress

We do.

Page 53: How to Become an Exceptional Web Designer

WordPress is great for blogs, but you can’t use it to build professional websites.

5. Wordpress

We do. We think we’re professional.

Page 54: How to Become an Exceptional Web Designer
Page 55: How to Become an Exceptional Web Designer
Page 56: How to Become an Exceptional Web Designer
Page 57: How to Become an Exceptional Web Designer

You can’t use images with large file sizes on the web.

6. File Size

Page 58: How to Become an Exceptional Web Designer

You can’t use images with large file sizes on the web.

6. File Size

You can.

Page 59: How to Become an Exceptional Web Designer

You can’t use images with large file sizes on the web.

6. File Size

You can. If you’re smart about it.

Page 60: How to Become an Exceptional Web Designer
Page 61: How to Become an Exceptional Web Designer

ORPNG JPG

Page 62: How to Become an Exceptional Web Designer
Page 63: How to Become an Exceptional Web Designer

ORPNG JPG

Page 64: How to Become an Exceptional Web Designer
Page 65: How to Become an Exceptional Web Designer

ORPNG JPG

Page 66: How to Become an Exceptional Web Designer
Page 67: How to Become an Exceptional Web Designer

ORPNG JPG

Page 68: How to Become an Exceptional Web Designer

Smart Good Dumb

THe ideal image size

1mb 2mb

Page 69: How to Become an Exceptional Web Designer
Page 70: How to Become an Exceptional Web Designer
Page 71: How to Become an Exceptional Web Designer

Attract new clients in target industries

Push the boundaries of new (& old) technology

Have something neat to show to AIGA

Goals