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

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

16. Know your audience

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

31. http://pttrns.com

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

57. Fireworks Android template

59. Working in Fireworks
Auto Shape
Auto Shape altered

62. Pages/Master Pages

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