Notes from the Design It. Build It. web conference

Last week I went up to Gateshead for Design It. Build It, a two-track web conference for designers and developers.

It was a great day, and I came a way with a lot to think about.  Here are my notes:

The Mechanical Revolution
Inayaili de Leon

• Designers can be resistant to letting technology do work for them - we often believe that hand-crafted CSS is superior to anything that can be automatically generated.
• There are parallels to the industrial revolution, when repetitive tasks were automated by machines. Some things then became so complex that they could no longer be made by hand. 
• This didn't eliminate the need for skilled craftspeople - they're still needed to design the products in the first place and innovate on them.
• Tools like CSS frameworks and preprocessors (eg LESS and Sass) can allow designers to become a lot more efficient. Instead of spending time on repetitive tasks, they can use this time to learn about user psychology, business skills, etc
• Using a framework doesn't have to mean using a generic one developed by someone else ( eg 960 or YUI). You can develop your own framework that matches your own needs.

Designing for Humans
Mike Kus

• The web is full of duplication - there are only a handful of different design styles, and everyone copies each other.
• Vodaphone and Coca Cola's corporate sites are interchangeable (and not just because they use the same colours), despite them being completely different brands.
• People form opinions based on a design, just like we form an opinion about someone based on their clothes or hairstyle.
• Randomly applying gradients and rounded corners ≠ design. Everything should be there for a reason.
• The online experience has to match the offline experience. 
• Apple understand this - they create beautiful products and their website reflects it. 
• On the other hand, Starbucks have a very strong and consistent brand in their stores, but their website looks like it could belong to anyone - if you removed their logo, you wouldn't know it was Starbucks.
• Mike took us through a "realignment" of the Innocent Smoothies homepage - another company with really strong and easily identifiable brand, but a very generic website:

Realigning Innocent from Mike Kus on Vimeo.


Designing to Where The Web Will Be
Faruk Ates

• If there's a web technology that you want to be using tomorrow, you need to start using it today.
• Browsers, platforms, smartphones, etc will only get more capable, not less.
• We shouldn't care what the latest browser is - we should be designing for browsers that don't even exist yet.
• Javascript libraries like Modernizr allow you to detect what features a browser supports (whether that's advanced CSS3 properties or HTML5 features) without designing for or detecting a particular browser.

Visualising Data

Brian Suda

• Every chart or graphic tells a story, and should only tell one story.
• The same data presented in a different way can tell a completely different story
• 3D doesn't add anything to our understanding of a graph - but making a pie chart 3D means that one edge of it will now be closer to you, and will look larger than an equally sized edge that is further away. 
• Everything in a chart that isn't conveying information is detracting from the parts that are. The ideal ratio of data to ink is 1:1. 
• Data is the main character, the grid lines etc are supporting actors.
• The absence of ink is just as telling as a strong line.
• "Chart junk" can sometimes help as a visual aid.
• Web designers [should] have always considered users with visual problems or old hardware. We've now got cutting edge technology that is black and white - the Kindle.
• Tools like SVG are great for quick data visualisation experiments - you can make it look nicer in Illustrator later.

DIBI Conference: Visualising Data

View more presentations from briansuda

One Web
Jeremy Keith

• We've never known how our sites would be experienced in real life. With the advent of mobile, tablets and every other internet-connected device, we REALLY don't know how it will be experienced.
• The same unknowns as ever - speed, capability, size - but we're paying attention to them now
• WYSIWTF
• There should be one web. Not a desktop web and a mobile web (and a tablet web, and an internet-enabled fridge web).
• Responsive design isn't just applying CSS media queries.
• Start with the content and work outwards, not from the layout inwards. 
• Context isn't the same as what device someone is using. Just because someone is using an iPhone to view your site it doesn't mean that they're rushing down the street at the same time - they could be sat at home. So don't force a cut-down version of your site on them.
• People use tools like Instapaper and Readability to get rid of the rubbish that fill the screen with. We shouldn't put it there in the first place.
• Native apps or web apps? Native apps are like CD-ROMS - they'll get neglected and eventually stop working. If content is on the web, it has a much longer shelf-life.

What Makes a Design Seem Intuitive
Jared Spool

The perfect antidote to the potential post-lunch tiredness, Jared Spool certainly knows how to liven things up. If you ever get a chance to see him speak, make sure you snap it up.

• A design is unintuitive when a user has to think about the mechanics of the design (where to click, how to scroll) rather than the task they're trying to accomplish.
• Intuitive design is invisible. We only notice it when it's not working properly. 
• Intuitive design is personal.We know who we are designing for, what their past knowledge is and what words they understand.
• In every system (website, software, etc) there's a gap between the user's current knowledge and the target knowledge they need to use the system. This gap is where design happens. Intuitive design brings the user's knowledge to the level they need.
• You can reduce the target knowledge by simplifying. If you don't simplify your own product, your competitors will.
• Things become intuitive over time - we know where everything is in our own kitchen cupboards.
• Regular users of a site can lose their current knowledge if we decide to redesign a site from scratch. Can alleviate this with labels to highlight new menu items, callouts that explain what a new piece of functionality is, explanatory text about why things have changed, etc.
• Five second tests can highlight whether people "get" your design. Show it to them for five seconds and see what they remember. 

What Every Web Designer Should Know

Jeffery Zeldman

• We're not in control of the visual experience. We never were.
• Tools like Instapaper and Readability liberate content.
• Design that doesn't serve people does not serve business.
• Design without knowing about content is just decoration. The first set of blogger templates were designed by talented designers, but they don't work because they were designed without regard for content, so they're used inappropriately. The only template that has stood the test of time is the most simple and neutral one - it can work with anything.
• You must test with users - but usability testing can be a crutch when what you want to do is change behaviours and patterns.
• Learn new skills - designers need to know about content strategy just as much as they need to know about the latest CSS tricks.
• Mobile means more than just "it works on a small screen".
• Pave the cowpaths. Find out what users are doing already and make it better.