Logical design for developers
1 like667 views
This document discusses the principles of design for developers, emphasizing the importance of understanding the audience and simplifying complexity. Key topics include typography, color, whitespace, imagery, and grids, along with various design tools and best practices. The overall message is that good design combines creativity with knowledge, aimed at enhancing user experience.
Logical design for developers
- 1. LOGICAL DESIGN FOR DEVS Design isn’t a four letter word Denver 2011
- 2. Dee Sadler Adobe Community Professional Adobe UG Manager Adobe Certified Expert / Instructor Adobe Influencer Program and... am a UI strategist for Sprint Dreamweaver and Fireworks CS5 videos for Total Training presenter @DeeSadler
- 3. Don’t make design too hard It is important to understand the audience, who will consume the data. What do they expect?
- 4. Technical skill is mastery of complexity, while creativity is mastery of simplicity. — Christopher Zeeman
- 5. Design is just a process with rules, patterns and conventions
- 6. Design can be logical Fibonacci Golden Ratio Spiral Golden Rectangle
- 7. In Fact, Design has Acronyms too UI / UX UI is what the user sees and controls UX is what the user feels (wait times, steps in a process, shifts in attention)
- 10. 5 major areas of design 1.Typography 2.Color 3.Whitespace 4.Imagery 5.Grids
- 11. Good design is partially creativity and innovation, but primarily knowledge and awareness. — Chuck Green
- 12. Typography to Serif or Sans Serif
- 14. Typography isn't just about the font. It reflects the tone.
- 15. Type and Whitespace From alistapart.com
- 17. Color, contrast, spacing, line-height, weight
- 19. Having small touches of color makes it more colorful than having the whole thing in color. — Dieter Rams
- 20. Color
- 22. Fireworks Photoshop Illustrator
- 23. Kuler.adobe.com
- 24. Kuler.adobe.com
- 26. Design is intelligence made visible. — Alina Wheeler
- 27. Whitespace
- 32. Space draws the eye
- 33. How does you user use your site/application?
- 37. Imagery
- 39. Rule of 3rds The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections
- 40. Suggestions Avoid animation. Choose images with a strong foreground element. Compress your imagery but not too much! Use faces, people are naturally drawn to them. Avoid clipart illustrations
- 41. Cropping images
- 43. I believe that a good user interface is carefully targeted towards its audience, with the right mixture of simplicity, elegance and innovation. — Robert Peloschek
- 44. Grids/wireframing/ prototyping
- 46. Also a widget for OSX http://goldenratiocalculator.com/
- 47. For Images
- 50. Grids
- 53. 960.gs blueprint.com http://designbygrid.com/ Fireworks: New FromTemplate>Grids
- 54. Wireframes Balsamiq Axure Fireworks Ommnigraffle EightShapes for InDesign iMockups for iPad SketchyPad for iPad Keynottopia for Keynote many, many more
- 55. Controls V1.1 Date July 2010 Option 1 Sun Mon Tue Wed Thu Fri Sat Search 1 2 3 4 Option 1 5 6 7 8 9 10 11 Option 2 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ✓ Option 3 26 27 28 30 31 Option 4 Label Label Option 5 ✓ Label Label 123 MenuLabel TextBox * Required List Option 1 Item 1 Text Area Option 2 Item 2 ✓ Option 3 Item 3 Item 4 Option 4 Item 5 Option 5
- 59. Working in Fireworks Auto Shape Auto Shape altered
- 67. Annotations Extension http://www.3revolutions.com/public/portfolio/fireworks/index.php? dir=00.Annotation%20Command%20Panel
- 68. "Everything is design. Everything!" — Paul Rand
- 69. Rules are made to be broken
- 70. All links will be available if you email me. dee@aboxofpixels.com 360|Flex in title
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n