At Linux Conf AU, Think, Create and Critique Design by Andy Fitzsimon
Elements and principles of design.
Design is like cooking
Ingredients create flavors that influence a meal
in that way:
Elements create principles influencing a composition.
Some definitions.
Elements are:
-
- Line: A continuous path between 2 points. Can also be a process, or a story plot.
- Shape: When a line joins to cover an area, it evolves into a shape. Bottleneck and pyramid scheme are ways we use geometry as a metaphor.
- Space: area between and inside things. Positive space/negative space.
- Size: physical scale, bigness or smallness.
- Color: perceived mixture. Color can be additive/subtractive or a mood. Or a metaphor, colorful personality.
- Value: Static measure. lightness, darkness, volume.
- Texture: structure and feel, rough/smooth, soft, etc.
Principles are the methods applied. They influence composition, but theyre not composition. They can be made with elements and also other things.
- Proportion divided measure of a relative whole
- Pattern using the same element(s) multiple times. Can be a template.
- Graduation Incremental changes to one element over another
- Balance/Harmony/Unity one or more elements creating a cohesion.
- Contrast
- Emphasis a significant use of one or more elements in a single place to distinguish.
- Form the whole that a sum of parts becomes Gestalt German for form but in a mind-blowing way.If youre creating something, you look at the elements and see if they form principles. (e.g. cooking, ingredients)
If youre appraising, you start with the whole and try to figure out what the elements are. (e.g. this is great curry, lets see if I can taste whats in it).
Can apply these checklists (elements + principles defined above) to anything songs, poems, CSS, a movie, whatever.
Visual Design and Typography tools:
baseline grid so easy you can check it with a ruler. A baseline grid always follows a vertical rhythm.Varied scale Robert Bringhurst (god of typography) 1 unit, 1 metric, scale up by a proportion. How you can create and measure things too.
Symbolics are a great tool they follow typographic tools graphical glyphs treated as type.
Art nouveau is ornate, decorated, and hard to create. But if you try to create ornate styles, theres plenty of places to hide you can mess up some details, people wont necessarily notice. Its a good aesthetic but hard to communicate well because its so busy.
Style tiles and brand guides if you have a set of rules, its easier to follow. It also creates consistency, and it lends itself to a balanced piece of work.
Interactive Design tools:
Fantastic field, UI is hot right now. Be wary of abstracted tools.Patterns are intuitive, isolated and repeatable. Patterns dont dictate a complete success, they need to be interpreted in context.
Wireframe the problem with wireframes is that anyone can do one and if its not done well, when people execute it, they follow the wireframe. If you start with a bad template that doesnt take things into consideration, youll end up with a bad implementation. Who makes the wireframe has to know what theyre doing.
Workflow a procedure so hard to remember, you write it down. Really a series of steps in order to produce a result.
Persona a compromise for never meeting real stakeholders written by gamblers and liars So often a persona doc is just punting. Does the person comes from a set of data (the average person has one breast and one testicle) or are they a real person?
So be wary of abstracted tools but also be wary of abstracted results!
Analytics metrics that justify slavery you check what metrics you check, and those tell you what to do. Pick them carefully!
Instrumentation you do it to yourself You implement analytics yourself. Youre creating your own enslavement rules.
Surveys the bored, attention-starved periphery of your audience dont forget that its a self-selecting audience.
Reviews http://xkcd.com/937/ you have to read the text to figure out why the good is good and the bad is bad
User Testing more like zombie testing Why wont they smile?
Hyper-realism looks like something real
skeu reminds you of something real, doesnt have to be high fidelity (e.g. clock/watch to evoke time)
Experience design:
deliberate design a dog with tiger stripes bad tiger, cute dog. Have deliberate differences, be something different.
think, make, become. Empathy is a currency now. Take ownership win empathy, forgiveness and support.Now he puts up Maslows heirarchy of needs Then theres Aaron Walter, who has designing for emotion and design personas
love, meaning, pleasure, convenience, predictabiilty, purpose these are the goals in design. If you hit half of these this is great.
Easy to observe (easy/logical/predictable) vs. hard to tell (lovable/loyal/trusted)
Now lets talk about process the process creates a product, but the design itself is a process. Design thinking is huge.
Design for Hackers Andy says it is great if you can stomach the Apple stuff and the chapter on Web 2.0.
Pragmatic Thinking and Learning: Refactor your Wetware is also great.