Below are my notes taken at DIBI (Design It, Build It) Conference 2011.

Overall it was a great conference, excellent venue and a good variety of speakers. I’ll definitely be going again next year.

One of the highlights for me was the realigning of the Innocent smoothies website design by Mike Kus – the video on his blog is well worth a look (or two)!

** Disclaimer – these are in note form and may not make a great deal of sense, but I have tried, where possible to add links to relevant resources **

Inayali de Leon – The Mechanical Revolution

Taking shortcuts using libraries such as JQuery is acceptable for JavaScript developers. But doesn’t translate to the ethics of CSS.

Not acceptable to use CSS frameworks or pre-processors.

Maintenance of stylesheets becomes difficult when built manually. As with Industrial Revolution, there’ll be opposition to using machines/frameworks.

Object-orientated CSS provides modern layering and flexibility; smaller stylestyles.

Elements should behave predictably. Rules that control structure should be separate from rules to control their skin.

Save time and resources whilst achieving the same results.

Eric Meyer – we don’t recognise a coder by the framework he uses, but whether he decides to use one or not.

Pre-processors. Can utilise ‘if’ and ‘else’ statements.

Doesn’t eliminate the need for skilled designers.

Need to take control of it so we can shape the tools of the future and not be replaced by them.

Mike Kus – Designing for Humans

  1. Duplicated web; – restrictive designs
  2. 2. The web no longer has visual limits
  3. Creating meaningful design
    colour, imagery, typography – great imagery; – simple copy; – graphics/illustration not reflected in website;

innocent smoothies – personality not reflected in website

Typefaces – pub example – clientele can be guessed by signage

Style and Design – compromise is necessary.

Realigning Innocent Smoothies

(Click the images to see the full size versions on Mike Kus’ blog)

Current website:

Existing Innocent Smoothies Website

Realigned website:

Realigned Innocent Smoothies Website

Stuff to think about

  • Don’t sideline visual design
  • Create best possible user experience

Faruk Ates – Designing to where the web will be

(and developing to where the web will be)

3 principles

  1. Understand its history
    web designers were originally print designers, then came the Web Standards movement, web designers now fluent in HTML and CSS. 2015 – ours to define and ours to design
  2. Know today’s emerging technologies
    CSS animations; gradients; transforms; HTML5 API; SVG; Web GL; Geolocation; local and sessionStorage; Canvas; Web Fonts etc etc
    Use technology today that you want to use tomorrow
    “It has to work in IE7” is the new “Make the logo bigger!”
    Do we leave people behind by not supporting older browsers?
  3. Free your mind

Design is the application of deep thought, consideration, rationale and taste to a creation

You’re a designer if you crystallise an idea into a form

You’re a developer if you take a form and turn it into a product

Take a step back and reassess the direction it’s going in.

Designing for all mobile/device screen sizes/resolutions

(presentation done entirely in HTML5 and CSS3 in a browser!)

Brian Suda – Visualising Data

Author: ‘Designing with Data
Helvetica, Objectionised, Urbanised – films about design

Avoid 3D pie charts! 3D charts in general are difficult to read.

Data to Ink ratio = Data Ink / Total Ink

Reduce the range; scale down the gridlines

Edward Tufte vs Nigel Holmes – Simple vs Chart Junk

GetColor() – generates colour for any string that will always be the same

Colour vs black and white, colour blindness, colour oracle

Need to learn SVG code!

Typography, colour, simplicity – don’t go overboard

Steven Few – ‘Information Dashboard Design

Takeaway: “Tell one story and only one story”

Jeremy Keith – One Web

Print: Grid system (order) + The page (constraint) = Control

Web control:
table layout (order) + browser (constraint) = Control
[later] CSS (order) + browser (constraint) = Control

Unknown: speed; capability; size

size (800×600, 1024×768) => solution = fixed; percentages

Recommended readingA Dao of Web Design’ – John Allsopp

Dreamweaver/Frontpage etc = WYSIWTF

Start in the browser rather than a mock up in Photoshop to overcome the expectation that the design will look the same across browsers (Andy Clarke)

Desktop web, mobile web, etc, etc [should be] One web; flexible

Recommended readingResponsive Web Design’ – Ethan Marcotte

Mobile first – think about the small screen before scaling up to desktop to focus on the content.

Content; Presentation; Behaviour

Global stylesheet; then a layout stylesheet (using a media query or conditional comments for lt IE9 & !IEMobile) for sreen widths above a certain size. Can use javascript/Ajax function

Start with linearised content, no floats.
Breakpoints set by the content, 1 column, 2 column, 3 column layouts

Web Apps?

Design for the capabilities of different devices. Don’t make assumptions about what people want.

Think fluidly, relinquish control

Jared Spool – What makes a design seem intuitive?

Asterisk used for required fields – using it for an optional field is not intuitive

Redesigning scrollbars makes them unintuitive

Simplicity doesn’t always work. Need Hay, Have Hay example where people with spare hay thought they should click the ‘Need Hay’ link to find people that needed hay rather than the ‘Have Hay’ link to advertise that they had spare hay.

An intuitive design is invisible – you don’t notice it because it works.

An intuitive design is personal – different for different people

Current knowledge and target knowledge creates the knowledge gap where we do design.

An intuitive design is when current = target knowledge – through training or simplifying (bringing target knowledge down to the level of current knowledge

Technology => features => experience (over time; improving usability)

An intuitive design focuses on experience

What people get used to – familiarity – users hate change (eg FB interface).
Destroying the user’s current knowledge, increasing the knowledge gap.

An intuitive design is when users don’t attend to change

Don’t notice the changes because they’re small.

Field visits
Usability tests
Paper prototyping
Five-second tests

Recommended readingHandbook of Usability Testing’ – Jared Spool, Jeffrey Rubin and Dana Chisnell

Recommended readingPaper Prototyping’ – Carolyn Snyder

Watch users interact with your design – at least 2 hours every 6 weeks

Jeffery Zeldman – What every web designer should know – A better you at what you do

Designers today must let go of brand control

We are not necessarily in control of the visual experience (we never were)

We are redefining ourselves and our roles

From this ferment, certain truths emerge

Design that does not serve people does not serve business

Lorum ipsum considered harmful – 37signals article – need to know content before designing

We can’t solve the problem before we define it – we usually can’t solve it alone

Check out Silverback – user testing software

We must learn new skills or perish

Semantic markup is a fundamental job skill

A “mobile” vs. “small screen” strategy – mobile will make us focus on what the user wants to do

Progressive enhancement is a smart default

Pave the cowpaths – find out what people are doing and help them to do it

Fail predictably; think beyond the “document” model (HTML5) – think web apps; new CMS oriented programming; audio and video, canvas; html5 and css3 = vector art in code – great for mobile experience.

Recommended reading:
Jeremy Keith – HTML5 for Web Designers
Dan Cederholme – CSS3 for Web Designers
Erin Kissane – “The Elements of Content Strategy
Aaron Gustafson – “Adaptive Web Design – crafting rich experience with progressive enhancement

Tagged with:  
Share →

One Response to DIBI Conference 2011 – my scribblings

  1. [...] missed out on tickets in 2011. If I’m honest, I was expecting it to be a re-run of DIBI (that I attended last year in Gateshead), but in a different town. Of course, there were different speakers on the bill, but I [...]

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>