how to become an exceptional web designer
TRANSCRIPT
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