Think, Create & Critique Design

Red Hat

we are all designers

hey baby, I'm just at the pub...
  • fundamentals
  • practice
  • process

Elements & Principles of Design

It's kinda like cooking

Ingredients create flavours
influencing a
meal
elements create principles
influencing a
composition

Elements

Elements are the raw tools

Elements are terms for the obvious

line

a continuous path between two points

shape

when a line joins to cover an area — it evolves into a 'shape'

space

The area between and inside things. Distance, time or lack of continuity

size

The physical scale, bigness or smallness

colour

A percieved mixture often: visible light, sometimes emotive

value

Static measures lightness, darkness richness & volume

texture

the structure & feel. The roughness, smoothness, softness

So those were the elements of design

pretty hard to argue those...

Principles

… are a little tricker

principles are the methods applied

they influence a composition

made with elements & other principles

proportion

a divided measure of a realtive whole

pattern

using the same element(s) multiple times

graduation

incremental changes to one element over another

balance / harmony / unity

one or more elements creating a cohesion

contrast

abrupt differences on any element in a composition

emphasis

a significant use of one or more elements in a single place to distinguishes

form

the ‘whole’ that a sum of parts become

gestalt

deutsche for ‘form’ but in a mind blowing way

So those were the principles of design

measurable but subjective...

creating
  • line
  • shape
  • size
  • space
  • color
  • value
  • texture
  • proportion
  • graduation
  • pattern
  • balance
  • contrast
  • emphasis
  • form
appraising
  • proportion
  • graduation
  • pattern
  • balance
  • contrast
  • emphasis
  • form
  • line
  • shape
  • size
  • space
  • color
  • value
  • texture

Observe and learn:

  1. what exists to alter
  2. what impact that will have
  3. what result to expect …

critique any design, image, video, song, poem, story, meal, beer, sunset, furniture, quilt, building, video game & more!

Be deliberate

know what matters

limit the rest

  • fundamentals
  • practice
  • process

Visual Design

something you must know about digital visual design as a medium in 2013…

The Swiss won.

(CC:BY) flickr.com/photos/strupler/3163605492/

Swiss Design

aka International Typographic Style

‘typographic’

because text rules supreme

all elements and principles — influenced by text

Swiss design is famously minimalistic

and homogenous

swissted.com

the international typographic style is all about geometry, grids, ratios, proportions, a refined palette, perceived simplicity & structure

all very measurable things

easy to critique
easier to implement

baseline grid

so easy, you can check with a ruler

A varied scale

— Robert Bringhurst

symbolics

graphical glyphs treated as type

art nouveau

style tiles & brand guides

Interactive Design

Be wary of abstracted tools

pattern

intuitive, isolated & repeatable. Unicorns are real

wireframe

rapid prototypes unencumbered by reality.

welcome to the land of broken promises and snakeoil

workflow

a procedure so hard to remember, you write it down

persona

a compromise for never meeting real stakeholders
— written by gamblers and liars

Be wary of abstracted results

analytics

metrics that justify slavery

instrumentation

you did it to yourself

surveys

the bored, attention-starved periphery of your audience

reviews

xkcd comic 937

tornado warning app

user-testing

more like zombie testing

have some f**king common sense
progressive disclosure
form follows function

affordance

the difference between

hyper-realism & skeumorphism

hyper-realism looks real

skeu reminds you of something real





interactive design … easy as

Experience Design

dweebist.com/2010/06/tiger-dog

deliberate differences

think, make, become

take ownership — win empathy, forgiveness and support

nail the heirachy of needs

  • actualization
  • esteem
  • belonging
  • safety
  • physiological
  • maslow
  • pleasure
  • usability
  • reliability
  • function
  • aaron walter
  • love
  • meaning
  • pleasure
  • convenience
  • predictability
  • purpose
  • UX?
  • lovable , loyal , trusted
  • meaningful , personal , touching
  • pleasurable , enjoyable , delightful
  • convenient , easy , logical
  • predictable , reliable , accesible
  • purposeful , functional

  • easy to observe
  • convenient, easy, logical
  • predictable, reliable, accesible
  • purposeful, functional

  • hard to tell
  • lovable, loyal, trusted
  • meaningful, personal, touching
  • pleasurable, enjoyable, delightful

damned hard

  • lovable , loyal , trusted
  • meaningful , personal , touching
  • pleasurable , enjoyable , delightful
  • convenient , easy , logical
  • predictable , reliable , accesible
  • purposeful , functional
  • fundamentals
  • practice
  • process
process
product

Design Thinking

it's a quick workflow

  • define
  • find research
  • guess ideation
  • try prototype
  • check objectives
  • do implement
  • learn
  • define
    see, name, know & articulate your problem
  • find
  • guess
  • try
  • check
  • do
  • learn
  • define
  • find
    research & know your problem.
    who tried what when
  • guess
  • try
  • check
  • do
  • learn
  • define
  • find
  • guess
    Brainstorm like crazy. dismiss no ideas
  • try
  • check
  • do
  • learn
  • define
  • find
  • guess
  • try
    prototype! draft ideas, test ideas
  • check
  • do
  • learn
  • define
  • find
  • guess
  • try
  • check
    review & combine the good ideas that worked
  • do
  • learn
  • define
  • find
  • guess
  • try
  • check
  • do
    implement make it real. finish release
  • learn
  • define
  • find
  • guess
  • try
  • check
  • do
  • learn
    get feedback, document & track
    drink beer, fist-pump, dont be a smug douche
know it, find it, guess it, try it, check it, finish it, learn lots from it

Failing at life is helps you design

I made you a poster

books to buy
Design for Hackers: Reverse Engineering Beauty if you can handle the irritating apple-worship and the chapter on web2.0
Pragmatic Thinking and Learning: Refactor Your Wetware

all of a book apart's — rainbow of knowledge

all major smashing books not those shitty little ones

John Hicks — icon handbook

Steven heller — 100 ideas that changed graphic design

Donald Norman — emotional design

we're done

ndftz.com/poster.pdf

ndftz.com/design.zip