Design 4 Future Developers
-
Upload
jason-beaird -
Category
Business
-
view
113 -
download
1
description
Transcript of Design 4 Future Developers
![Page 1: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/1.jpg)
![Page 2: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/2.jpg)
Principles of Beautiful Web Design
![Page 3: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/3.jpg)
Photo Credit: Samhines(flickr)
Me? Design? But I’m not an artist…
![Page 4: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/4.jpg)
My personal site circa 1998…Jason meets Photoshop.
![Page 5: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/5.jpg)
A few years later in 2001…Hooray for art classes.
![Page 6: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/6.jpg)
Senior year at UCF in 2003…Experimenting with CSS
![Page 7: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/7.jpg)
The 2004 redesign that broke the mold.
![Page 8: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/8.jpg)
The 2005 redesign that lingered around too long…
![Page 9: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/9.jpg)
![Page 10: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/10.jpg)
Design can be learned. (srsly!) Good Design IS Problem Solving:
Designer mentality vs. coder methodology.
Visual
Emotional
Random Intuitive
Subjective
Verbal
Logical
Sequential Analytical
Objective
Nielson and Zeldman
http://www.happywebbies.com/
![Page 11: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/11.jpg)
“Design depends largely on constraints.”
- Charles Eames
![Page 12: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/12.jpg)
Pre-Lesson Case Studies
1. Tour Reservation System
![Page 13: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/13.jpg)
Pre-Lesson Case Studies
2. Book Promo Site
![Page 14: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/14.jpg)
Pre-Lesson Case Studies
3. Greenville Symphony
![Page 15: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/15.jpg)
Layout
Color
Texture
Type
Imagery
You gottalearn the rules befoyou try tobreak them
![Page 16: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/16.jpg)
Layout: Balance
Finding it and shifting it. Symmetrical & Asymmetrical
![Page 17: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/17.jpg)
Bad Balance
![Page 18: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/18.jpg)
Good Balance
![Page 19: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/19.jpg)
Layout: Unity Via Proximity and Repetition
![Page 20: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/20.jpg)
Bad Unity
![Page 21: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/21.jpg)
Good Unity
![Page 22: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/22.jpg)
Layout: Emphasis
Many ways to achieve it, whether you want to or not:
Placement
Continuance
Isolation
Contrast
Proportion
![Page 23: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/23.jpg)
Bad Emphasis
![Page 24: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/24.jpg)
Good Emphasis
![Page 25: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/25.jpg)
Layout: Grids (are good!)
http://designbygrid.com/
![Page 26: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/26.jpg)
![Page 27: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/27.jpg)
![Page 28: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/28.jpg)
Color: The Wheel
Orange, Green, Violet
Red-Orange, Yellow-Orange,
Yellow-Green, Blue-Green,
Blue-Violet, Red-Violet
![Page 29: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/29.jpg)
Color: Schemes
![Page 30: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/30.jpg)
![Page 31: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/31.jpg)
![Page 32: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/32.jpg)
![Page 33: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/33.jpg)
Color: Resources
1. http://www.colorzilla.com Firefox eyedropper plugin.
2. http://kuler.adobe.com Flash-based color scheme tool.
3. http://www.colourlovers.com Color scheme community site.
![Page 34: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/34.jpg)
Texture
The web shouldn’t always feel like the web.
![Page 35: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/35.jpg)
![Page 36: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/36.jpg)
![Page 37: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/37.jpg)
![Page 38: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/38.jpg)
Typography
As with design principles, there are a lot of vocabulary
terms to digest when first learning about the nuances of typography. Getting to know the 5 basic categories of
fonts is a good foundation.
1. Baseline
2. Cap height
3. Crossbar
4. Serif
5. Meanline
6. Bowl
7. Descended
8. Counter
9. Stem
10. Tittle
11. Terminal
12. Ascender
13. Leg
14. Ligature
15. X-height
![Page 39: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/39.jpg)
Typography: Serif Fonts
![Page 40: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/40.jpg)
Typography: Sans-Serif Fonts
![Page 41: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/41.jpg)
Typography: Fixed-Width Fonts
![Page 42: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/42.jpg)
Typography: Handwritten Fonts
![Page 43: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/43.jpg)
Typography: Novelty Fonts
![Page 44: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/44.jpg)
![Page 45: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/45.jpg)
4. Typography: The “OK, Fine” 9
These nine fonts are
installed by default on
most Mac and PC
computers.
Arial
Arial Black
Comic Sans MS
Courier New
Georgia Impact Times New Roman
Trebuchet MS
Verdana
![Page 46: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/46.jpg)
4. Typography: The “OK, Fine” 9
Specify preferred fonts first: font-family: Avenir, Helvetica, Arial, sans-serif;
font-family: Minion, "Times New Roman", times, serif;
Use Background Images Use sIFR (Scalable Inman Flash Replacement)
Use Cufón (JavaScript text replacement without Flash)
![Page 47: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/47.jpg)
5. Imagery
Images & illustrations can make or break a website.
![Page 48: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/48.jpg)
5. Imagery: Selection
1. What is the most relevant
image for the subject?
2. What is the most artistic and
interesting image I can use?
3. What would be the most appealing
image for the target audience?
Digital Web: Cooking with Stock
http://tinyurl.com/dw-stock
![Page 49: Design 4 Future Developers](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c7177f4a7959381b8b458a/html5/thumbnails/49.jpg)
When they're not working on their day jobs,
most top-notch web designers are pushing
the web design envelope after-hours or on
their own personal sites manipulating
current technologies and expanding the
medium's design vocabulary.”
- Curt Cloninger, "Fresh Styles for Web Designers”, 2001
Keep at it! “