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.
** 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
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
- Duplicated web
http://www.vodafone.com/; http://www.coca-cola.com – restrictive designs
- 2. The web no longer has visual limits
- Creating meaningful design
colour, imagery, typography
apple.com – great imagery;
nikebetterworld.com – simple copy;
starbucks.com – 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)
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)
- 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
- 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?
- 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
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 reading ‘A 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 reading ‘Responsive Web Design’ – Ethan Marcotte
Mobile first – think about the small screen before scaling up to desktop to focus on the content.
Content; Presentation; Behaviour
Start with linearised content, no floats.
Breakpoints set by the content, 1 column, 2 column, 3 column layouts
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.
Recommended reading ‘Handbook of Usability Testing’ – Jared Spool, Jeffrey Rubin and Dana Chisnell
Recommended reading ‘Paper 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.
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”