An Interface Developer's blog

A curious blog by a curious Interface Developer

DIBI 2011 notes (design track)

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.


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>