Logical design for developers

983 views

Published on

Slides for Logical Design for Developers, Design isn't a 4 letter word. For 360|Flex conference in Denver of 2011

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
983
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
91
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Logical design for developers

    1. 1. LOGICAL DESIGN FOR DEVS Design isn’t a four letter word Denver 2011
    2. 2. Dee Sadler Adobe Community Professional Adobe UG Manager Adobe Certified Expert / Instructor Adobe Influencer Program and... am a UI strategist for SprintDreamweaver and Fireworks CS5 videos for Total Training presenter @DeeSadler
    3. 3. Don’t make design too hard It is important to understand the audience, who will consume the data. What do they expect?
    4. 4. Technical skill is mastery of complexity,while creativity is mastery of simplicity.— Christopher Zeeman
    5. 5. Design is justa processwith rules,patterns andconventions
    6. 6. Design can be logicalFibonacci Golden Ratio Spiral Golden Rectangle
    7. 7. In Fact, Design has Acronyms too UI / UXUI is what the user sees and controlsUX is what the user feels (wait times,steps in a process, shifts in attention)
    8. 8. 5 major areas of design1.Typography2.Color3.Whitespace4.Imagery5.Grids
    9. 9. Good design is partially creativity and innovation,but primarily knowledge and awareness.— Chuck Green
    10. 10. Typographyto Serif or Sans Serif
    11. 11. Typography isnt just about the font. It reflects the tone.
    12. 12. Type andWhitespace From alistapart.com
    13. 13. Know your audience
    14. 14. Color, contrast, spacing, line-height, weight
    15. 15. Having small touches of color makes it morecolorful than having the whole thing in color.— Dieter Rams
    16. 16. Color
    17. 17. Fireworks Photoshop Illustrator
    18. 18. Kuler.adobe.com
    19. 19. Kuler.adobe.com
    20. 20. Design is intelligence made visible.— Alina Wheeler
    21. 21. Whitespace
    22. 22. http://pttrns.com
    23. 23. Space draws the eye
    24. 24. How does you user use your site/application?
    25. 25. Imagery
    26. 26. Rule of 3rdsThe rule states that an image should be imagined asdivided into nine equal parts by two equally-spacedhorizontal lines and two equally-spaced vertical lines,and that important compositional elements shouldbe placed along these lines or their intersections
    27. 27. SuggestionsAvoid 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
    28. 28. Cropping images
    29. 29. I believe that a good user interface is carefully targetedtowards its audience, with the right mixture ofsimplicity, elegance and innovation.— Robert Peloschek
    30. 30. Grids/wireframing/ prototyping
    31. 31. Also a widget for OSXhttp://goldenratiocalculator.com/
    32. 32. For Images
    33. 33. Grids
    34. 34. 960.gs blueprint.comhttp://designbygrid.com/ Fireworks:New FromTemplate>Grids
    35. 35. Wireframes Balsamiq Axure Fireworks OmmnigraffleEightShapes for InDesign iMockups for iPad SketchyPad for iPadKeynottopia for Keynote many, many more
    36. 36. Controls V1.1Date July 2010 Option 1Sun Mon Tue Wed Thu Fri Sat Search 1 2 3 4 Option 1 5 6 7 8 9 10 11 Option 212 13 14 15 16 17 1819 20 21 22 23 24 25 ✓ Option 326 27 28 30 31 Option 4 Label Label Option 5✓ Label Label123 MenuLabelTextBox * Required List Option 1 Item 1Text Area Option 2 Item 2 ✓ Option 3 Item 3 Item 4 Option 4 Item 5 Option 5
    37. 37. Fireworks Android template
    38. 38. Working in Fireworks Auto Shape Auto Shape altered
    39. 39. Pages/Master Pages
    40. 40. Annotations Extensionhttp://www.3revolutions.com/public/portfolio/fireworks/index.php? dir=00.Annotation%20Command%20Panel
    41. 41. "Everything is design. Everything!"— Paul Rand
    42. 42. Rules are made to be broken
    43. 43. All links will be available if you email me.dee@aboxofpixels.com 360|Flex in title

    ×