Embracing the
ebb and flow
Simon Collison
Frontend, Oslo, October 2011
@colly colly.com
Slide 2
Slide 2 text
Inspiration
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Part one
The individual
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Strengths & values
Slide 7
Slide 7 text
To progress and to create work of
substance or even greatness, we
each must start by knowing our
values, our strengths, and the level
of expertise we seek
Strengths and values
Slide 8
Slide 8 text
Learning
Slide 9
Slide 9 text
The sad, beautiful fact that
we’re all going to miss almost
everything.
Linda Holmes
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Craftsmanship
Slide 13
Slide 13 text
Cra smanship is a basic human
impulse: the desire to do a job
well for its own sake.
Cra smanship
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Our tools
Slide 16
Slide 16 text
Tools are the scaffold for what we
produce, the enablers, they help us
bring our ideas to fruition.
Our tools
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Inquiry
Slide 20
Slide 20 text
Inquiring beyond the “necessary”
to explore other areas, look at
things differently, and bring these
findings back into our work.
Inquiry
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Think smarter
Slide 23
Slide 23 text
Individual lines of inquiry are what
will, more than anything else, drive
us to develop greater maturity of
the discipline of web design.
Think smarter
Slide 24
Slide 24 text
Part two
The wider web
Slide 25
Slide 25 text
Visual grammar
Slide 26
Slide 26 text
A rich alphabet of components such as
line and point, structure, color, shapes,
rhythm, and movement, which we use
to shape our messages
Visual grammar
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Mistakes
Slide 29
Slide 29 text
Those who never made mistakes
never made anything.
Proverb
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Patterns &
interactions
Slide 32
Slide 32 text
The screen brings with it different
kinds of challenges for visual design,
some of which occur exclusively in
interactive media.
Jason Santa Maria
Slide 33
Slide 33 text
The frame
Slide 34
Slide 34 text
The frame of reference marks the
outer limits of a design and defines
an area within which the created
elements and le -over blank space,
if any, all work together.
The frame
Our community has a shared
responsibility to expand this visual
language as it applies to the ebb and
flow of the web, and in turn evolve
our wri en and verbal vocabulary.
Vocabulary
Slide 48
Slide 48 text
Responsive
Web Design
Slide 49
Slide 49 text
The terms responsive and adaptive
are distinct yet related, and have
evolved naturally from outdated
web-based layout terminology
Responsive web design
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
What next?
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
We are the web. We are the makers,
the explorers, the end users.
What next?