how to become an exceptional web designer

Design Technology&August 8, 2013

We are a next generation agency

Who are we?

We are a next generation agency

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

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

Who are we?

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?

Technology transferred control to consumer

Audience became harder to find

Every interaction now requires smart planning

trends

interaction design

Design + Technology

=

www.jeep.com Timeline

1998

2000

2006

2010

2013

Screen size comparisons

2000800x600px

CRT (4:3)

Screen size comparisons

20021024x768px

CRT (4:3)

Screen size comparisons

20071280x1024px

Flat Panel (4:3)

Screen size comparisons

2007480x320px

iPhone/Mobile (2:1)

Screen size comparisons

20101920x1080px

Widescreen1080P high definition(16:9)

Screen size comparisons

2010768x1024px

iPad (4:3)

Screen size comparisons

20111366x768px

Netbook (16:9)

Screen size comparisons

2012720x1280px

Galaxy S3 (16:9)

Screen size ranges today

Phone Tablet Laptop Monitor320x480px 768x1024px 1366x768px 1920x1080px

or

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

1. Fonts

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

1. Fonts

Who said that?!

Arial

Helvetica

Georgia

Times

Verdana

Open Sans

Lovelo

Foro

Bree Serif

Raleway

then Now

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

2. HTML 5

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

2. HTML 5

Can you? Yes.

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

2. HTML 5

Can you? Yes. Should you? Maybe.

IE Fire

fox

safa

ri

ch

rom

e

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

2008

IE Fire

fox

safa

ri

ch

rom

e2009

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

IE Fire

fox

safa

ri

ch

rom

e2010

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

IE Fire

fox

safa

ri

ch

rom

e2011

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

IE Fire

fox

safa

ri

ch

rom

e2012-13

Border Radius

Animations

Transitions

@Font-face

Media Queries

Forms

Canvas

Video

RGBA

You shouldn’t use Flash on the web anymore.

3. Flash

You shouldn’t use Flash on the web anymore.

3. Flash

This is true.

Apple 50.5% Android 40.2%(Flash not supported)

Blackberry 2.57%Other 6.73%

Mobile Operating System Market Share

Access 86%

33% Mobile Apps

37% Browsing the Internet

40% Social Networking

56% Texting with Friends & Family

No Access 14%

Mobile internet multi-tasking

All new websites should be built responsive.

4. Responsive Design

All new websites should be built responsive.

4. Responsive Design

This depends.

Your audience

Amount of content

Your message

Keep in mind

where would you order a pizza from?

or

where would you book a hotel?

or

where would you learn about AIGA?

or

where would you learn about us?

or

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

5. Wordpress

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

5. Wordpress

We do.

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

5. Wordpress

We do. We think we’re professional.

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

6. File Size

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

6. File Size

You can.

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

6. File Size

You can. If you’re smart about it.

ORPNG JPG

ORPNG JPG

ORPNG JPG

ORPNG JPG

Smart Good Dumb

THe ideal image size

1mb 2mb

Attract new clients in target industries

Push the boundaries of new (& old) technology

Have something neat to show to AIGA

Goals