Liveblog: Think, Create and Critique Design

Sheeri

At Linux Conf AU, “Think, Create and Critique Design” by Andy Fitzsimon…

HTML slides
design checklist

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 they’re 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 you’re creating something, you look at the elements and see if they form principles. (e.g. cooking, ingredients)

    If you’re appraising, you start with the whole and try to figure out what the elements are. (e.g. “this is great curry, let’s see if I can taste what’s 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, “there’s plenty of places to hide” – you can mess up some details, people won’t necessarily notice. It’s a good aesthetic but hard to communicate well because it’s so busy.

    Style tiles and brand guides – if you have a set of rules, it’s 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 don’t dictate a complete success, they need to be interpreted in context.

    Wireframe – the problem with wireframes is that anyone can do one and if it’s not done well, when people execute it, they follow the wireframe. If you start with a bad template that doesn’t take things into consideration, you’ll end up with a bad implementation. Who makes the wireframe has to know what they’re 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. You’re creating your own enslavement rules.

    Surveys – “the bored, attention-starved periphery of your audience” – don’t forget that it’s 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 won’t they smile?”

    Hyper-realism looks like something real
    skeu reminds you of something real, doesn’t 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 Maslow’s heirarchy of needs – Then there’s 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 let’s 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.