how to become an exceptional web designer
TRANSCRIPT
![Page 1: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/1.jpg)
Design Technology&August 8, 2013
![Page 2: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/2.jpg)
We are a next generation agency
Who are we?
![Page 3: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/6.jpg)
interaction design
Design + Technology
=
![Page 7: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/7.jpg)
www.jeep.com Timeline
![Page 8: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/8.jpg)
1998
![Page 9: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/9.jpg)
2000
![Page 10: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/10.jpg)
2006
![Page 11: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/11.jpg)
2010
![Page 12: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/12.jpg)
2013
![Page 13: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/13.jpg)
Screen size comparisons
2000800x600px
CRT (4:3)
![Page 14: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/14.jpg)
Screen size comparisons
20021024x768px
CRT (4:3)
![Page 15: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/15.jpg)
Screen size comparisons
20071280x1024px
Flat Panel (4:3)
![Page 16: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/16.jpg)
Screen size comparisons
2007480x320px
iPhone/Mobile (2:1)
![Page 17: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/17.jpg)
Screen size comparisons
20101920x1080px
Widescreen1080P high definition(16:9)
![Page 18: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/18.jpg)
Screen size comparisons
2010768x1024px
iPad (4:3)
![Page 19: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/19.jpg)
Screen size comparisons
20111366x768px
Netbook (16:9)
![Page 20: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/20.jpg)
Screen size comparisons
2012720x1280px
Galaxy S3 (16:9)
![Page 21: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/21.jpg)
Screen size ranges today
Phone Tablet Laptop Monitor320x480px 768x1024px 1366x768px 1920x1080px
![Page 22: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/22.jpg)
or
![Page 23: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/23.jpg)
You can’t use any good typefaces on the web.
1. Fonts
![Page 24: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/24.jpg)
You can’t use any good typefaces on the web.
1. Fonts
Who said that?!
![Page 25: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/25.jpg)
Arial
Helvetica
Georgia
Times
Verdana
Open Sans
Lovelo
Foro
Bree Serif
Raleway
then Now
![Page 26: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/26.jpg)
![Page 27: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/27.jpg)
![Page 28: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/28.jpg)
![Page 29: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/29.jpg)
![Page 30: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/30.jpg)
![Page 31: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/31.jpg)
![Page 32: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/32.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/33.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/34.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/35.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/36.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/37.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/38.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/39.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/40.jpg)
You shouldn’t use Flash on the web anymore.
3. Flash
![Page 41: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/41.jpg)
You shouldn’t use Flash on the web anymore.
3. Flash
This is true.
![Page 42: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/42.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/43.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/44.jpg)
All new websites should be built responsive.
4. Responsive Design
![Page 45: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/45.jpg)
All new websites should be built responsive.
4. Responsive Design
This depends.
![Page 46: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/46.jpg)
Your audience
Amount of content
Your message
Keep in mind
![Page 47: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/47.jpg)
where would you order a pizza from?
or
![Page 48: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/48.jpg)
where would you book a hotel?
or
![Page 49: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/49.jpg)
where would you learn about AIGA?
or
![Page 50: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/50.jpg)
where would you learn about us?
or
![Page 51: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/51.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/52.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/53.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/54.jpg)
![Page 55: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/55.jpg)
![Page 56: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/56.jpg)
![Page 57: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/57.jpg)
You can’t use images with large file sizes on the web.
6. File Size
![Page 58: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/58.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/59.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/60.jpg)
![Page 61: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/61.jpg)
ORPNG JPG
![Page 62: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/62.jpg)
![Page 63: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/63.jpg)
ORPNG JPG
![Page 64: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/64.jpg)
![Page 65: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/65.jpg)
ORPNG JPG
![Page 66: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/66.jpg)
![Page 67: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/67.jpg)
ORPNG JPG
![Page 68: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/68.jpg)
Smart Good Dumb
THe ideal image size
1mb 2mb
![Page 69: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/69.jpg)
![Page 70: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/70.jpg)
![Page 71: How to Become an Exceptional Web Designer](https://reader030.vdocuments.net/reader030/viewer/2022020208/55a4f40f1a28ab24188b46ba/html5/thumbnails/71.jpg)
Attract new clients in target industries
Push the boundaries of new (& old) technology
Have something neat to show to AIGA
Goals