DIBI 2011 notes (design track)

20 Jun 2011

I’ve finally had the chance to write up my notes from DIBI 2011: much later than I’d have liked, but then there’s always that handy phrase ‘better late than never’…

I’ve kept the bullet-point nature of my original notes, but have tried to expand upon the wording as I understood it. If I’ve missed anything, or you think that I’ve misinterpreted a concept, please let me know.

The Mechanical Revolution (Inayaili de León)

Abstraction and mechanisation are changing the way we build websites
Coding principles like ‘Don’t repeat yourself’ are not present in CSS
Changes we’re seeing are like the difference between mechanised and hand-made: similar battles were fought during the Industrial Revolution
We add artistry & passion to our CSS to fend off and combat the possibility of machines being better than us.
Tools to tackling the problem:
OOCSS: trying to remove complexity, and bring modularity to CSS
- Structural styles separate from appearance
- Perhaps less semantic, but more extensible and maintainable
Frameworks, libraries and tools can be incredibly useful — but context is key when selecting tools
Frameworks don’t have to be off the shelf: can be home-brew in nature, but should be appropriate & relevant to the project
SASS/LESS: CSS pre-processors. Delegation of code organisation and framing to machines
Steps we need to take:
Developers are better today at knowing when to use machines, and when not
Work smarter, not harder; combine design and mechanisation (i.e. don’t design every single step in the process)
Know when to step back and let machines take over — embrace this possibility
Use intelligence, and assess tools without prejudice, pride or emotion
Be in control of our future by embracing these tools
The Bauhaus did this: learn & understand the tools of mechanisation, and integrate them into the process of creation
Book: “Pro CSS for high-traffic websites” (Amazon)

Designing for humans (Mike Kus)

‘The duplicated web’: a lot of replication exists in web design
There’s no limit to what can be done – so why are so many sites so similar?
Aesthetics are not equivalent to decoration
Humans make emotional judgements based on visual experience
To best manage user expectation, and control user experience, design a complete, consistent experience. Consider each element of your design
- Use these elements appropriately, and justify your decisions
Leading by example:
Apple: they make computers beautiful and desirable.
- Bauhaus did the same: grasped tools, and used them to further their own goals
Starbucks also understand power of visual design in crafting and controlling experiences
A website is an extension of your brand; bring your offline attributes online, create familiarity, and strengthen bonds
Don’t confuse clarity of information with getting your message across.
People will make assumptions based on visuals: use this power, but be aware of it
Style vs. Design: no compromise necessary?
- Hard to combine function and style 100%: this represents one of the biggest challenges in web design
- Appropriate design is key
- Successful combination = successful site.
Things to think about:
Combine visual design and function design for great UX
Invest in creativity
Back up with logic
Ensure strong functionality at your product’s core

Designing to where the web will be (Faruk Ateş)

3 key principles to achieve this goal:
- History: learn how we got to where we are today
- Emerging technology: understand and use it today
- Free your mind
Design is the application of deep thought, consideration, rationale and taste to what you are creating
You’re a designer by definition if you crystallise an idea into a form;
Developers take form and turn it into a product.
History of web design:
- 1990: Print Designer -> Printer
- 1995: Web Designer -> Developer
- 2000: Web Standards: The web is unique!
- 2005: Standards are modern, design process is dated
- 2010: Great web designers are fluent in HTML & CSS
Lots of new technologies are now emerging; new powers and new tools
- Abstraction of complexity: know the capability of tools
- Design for these capabilities
Every web technology you want to build websites with tomorrow, you should be using today.
Platforms and user tools get more capable, not less:
- Use data to make rounded assessments, but remember that the market share for older and less capable browsers is permanently shrinking
- Look at capabilities – browsers as a concept are irrelevant
Perspective and objectivity is vital in successful development.
Focus your work on making content extensible, flexible and accessible
Tailor your work to your audience: consider a graded experience (the web has done this since the beginning.)
Concept of a ‘single vision’ on the web is ultimately limiting.

Visualising Data (Brian Suda)

The focus of Brian’s talk was on how data is represented today, in all its multifarious forms — and how less is often more. Decreasing the visual density of data representations (primarily, decreasing the amount of ‘ink’ used to decorate, de-mark and label the graph/chart) is an excellent exercise; it not only forces you to focus on the most important data, but also clarifies the overall message.

The optimum result of this would be a data-to-ink ratio of 1:1, but this is incredibly difficult (if not practically impossible), but should always remain the goal. He also addresses the related issue of the portability of data visualisations: first and foremost, issues relating to colour (Kindle/e-reader displays & colour blindness). He recommended looking at colour intensity (which does transfer to black & white displays), but also to be aware of different kinds and levels of colour blindness.

Brian then highlighted a topic he’s very passionate about: deterministic design. This is the practise of using data to generate imagery. An excellent example of this today is MIT Media Labs; their logo is generated algorithmically, within defined parameters. He explored a number of uses for this, from generating real-life objects based on digital-life parameters – to analysing and organising magazine covers by the colours used in their design. Finally, he made a small but significant point to remember when creating data visualisations: tell one story, and only one story.

The slides from Brian’s talk on Slideshare.

One Web (Jeremy Keith)

The browser is an ‘unknown constraint’
Read ‘A Dao Of Web Design’, by John Allsopp, if you haven’t already: seminal article that defines our medium
The name ‘mobile web’ is a misnomer, and it limits us
There is only one web; we never had controls over all the variables
Responsive Web Design (the movement pioneered by Ethan Marcotte)
Mentality of approach is key:
- ‘Responsible responsive web design’ – not just media queries
- Start small first: mobile?
- Or… is print more root-level than mobile? Fundamental point is this: content comes first.
Divorce layout from content: begin with components, not grid.
Proposal for a layout-agnostic approach:
- Modules & typography in their own stylesheet (global.css, for example)
- All layout styles in separate stylesheet, which is delivered via media queries.
- Set layout width in em’s, not pixels
- Media queries can do more: e.g. filter for IE Mobile
- Consider serving basic site to IE6, and use IE conditionals to help
- Alternatively, use Respond.js to help IE < 9 (which don’t support Media Queries)
‘Design from content out, not canvas in‘ (Mark Bolton)
Assuming user context by device is dangerous, and arrogant
The Mobile Context (Mark Kirby) – Don’t design by mind-reading
‘My website will meet you wherever you are’ (Trent Walton)
In Summary:
- Rethink your approach.
- Give up control.
- Think in proportions, not pixels.

The Unintuitive Nature of Creating Intuitive Designs (Jared Spool)

Intuitive design is when the user is focussed on their objectives
Intuitive design is invisible
An intuitive design is personal. Good design feels custom
Design for the ‘knowledge gap’: the gap between users current & target knowledge
An intuitive design is when current knowledge = target knowledge
We can bring users up to target knowledge (Training)
Or take interactions down to current knowledge (Simplifying)
Technology -> Features -> Experience
An intuitive design focusses of experience
Increase in features leads to re-factoring of features: experience is the root
Redesigning can push people back down ‘escalator of knowledge’
In summary:
- Identify knowledge
- Identify knowledge gap
- Assess impact of a redesign
Watch users interact with your design: 2 hours every 6 weeks to begin with.

What Every Web Designer Should Know (Jeffrey Zeldman)

Designers must let go of brand control
We’re not necessarily in control of the visual experience
- We never were!
You’re not a UX designer if… (Whitney Hess)
Design that doesn’t serve people doesn’t serve business
Content first: design in the absence of content is decoration
Content is king:Don’t use lorem ipsum.
- Real content is vital to realistic design
Don’t let use testing and evaluation hamstring creativity and innovation
Our community is seeing a maturation in knowledge and thinking: a convergence in approach (across all disciplines)
Semantic markup us a fundamental job skill
Mobile and Small screens: two different things.
Mobile:
- Uses features of device (e.g. location)
Small screen:
- Limited screen space
Adaptive Web Design (Aaron Gustafson)
Responsive design is progressive enhancement taken to the next level
You can learn about UX from the properties of HTML5
‘Pave the cowpaths’
Fail predictably
HTML5 is the first HTML designed for a world beyond documents.

Bookmark the permalink