On June 25th and 26th, dozens of designers, developers, accessibility specialists and other web-related professions joined in London in order to attend the @media conference. This year’s edition tackled various topics, from designing ‘systems’ to working in tough economic times, and as usual the quality of the conference showed through both its content and organization.

Here is a non-exhaustive list of some keynotes given during these wonderful two days.

Walls Come Tumbling Down, Andy Clarke

If you want to learn an innovative approach to web design, I recommend Andy Clarke’s. His designing process described in his seminal book ‘Transcending CSS’ is a fantastic journey through the steps of website creation, from looking around for inspiration to creating the best markup and styles. As a matter of fact, it has deeply inspired how we create semantic and accessible pages at Nvision.

In his keynote, Andy explains how the economic recession has led him to find new ways of working, faster and more appropriate to the medium. Instead of cutting costs on creativity—the element that sells—he literally redesigns the design process, applying critical thinking to every aspect of the workflow: tools, steps, deliverables and client communication. His work on the redesign of the New Internationalist and TweetCC serves as a basis to address the shortcomings of the traditional approach with new ways to get things done. In short:

1. Designing right inside the browser rather than on static comps in Photoshop works more effectively to communicate the interactive and flexible aspect of web pages;
2. Thinking about alternatives for less capable browsers, especially IE6—rather than striving for pixel perfection across browsers—, without compromising the overall experience, saves time and energy that can be allocated to more important business matters;
3. Iterating the design to gradually build the final solution helps for testing and adapting it more quickly, in contrast with the back and forth approach of static comps;
4. Creating a system of reusable content modules rather than a fixed number of page templates helps run large-scale projects with a tight schedule.

For all the juicy details, go on and read the whole transcript on Malarkey’s blog.

The Process Toolbox, Simon Collison

Managing web projects is an art in and of itself; being at the junction between so many disciplines and focused on a medium that is still largely misunderstood, some have a hard time figuring out how to remain in control and avoid scope creep. Simon Collison takes us through a set of methods he’s been using at his agency.

As Andy’s presentation focused on deliverables, this one’s covers the broad array of project management idiosyncrasies—from establishing a clear-cut collaboration with the clients and internal team; setting up projects goals; understanding target audiences and the realms of LogoVisual Thinking; defining the right project methodology; setting up a roadmap starting with a content audit and requested features; fuelling creativity with mood boards, scrapbooks and collaborative work; perusing project conventions such as QA procedures, coding styles, commenting styles, file organisation, etc.; to building iteratively working prototypes in the browser, with a feedback mechanism.

View the slides from the presentation

Icons for Interaction, Jon Hicks

Though lead designer at Opera Software, Jon Hicks is mostly known for his proven track record in icon design: Firefox, the Silverback app, MailChimp and more recently the FontExplorer app are all of his.

In his presentation, Jon walks through the different uses of icons on the Web and gives tips on the icon creation process. Favicons for the desktop (16×16) and the iPhone (57×57) are powerful identifiers of websites and webapps. But the most common icon use remains highlighting blocks of text such as feature lists, serving as guides for the eye. Other possible uses include: highlight the most important action, explain actions with symbols rather than words, draw attention to updated content, quick and easy comparisons, overcome culture/language barriers, aid navigation, etc.

Download the slides from the presentation

Designing Virtual Realism, Dan Rubin

Some have often argued that ‘design should be invisible’ (Jared Spool), ‘simplicity is the ultimate sophistication’ (Leonardo da Vinci), ‘perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away’ (Antoine de Saint-Exupéry), and so on.

Some take these advices literally and remove any element that is not strictly necessary. First in the process, shadows, gradients and textures are almost always left behind. Dan Rubin does not agree: invisible does not equate to inexistent. We see these elements all the time in the real world, why we don’t notice them (i.e. they’re invisible) is because they are natural and not overly designed. Our eyes are trained at seeing them in context, they help us recognize the nature of things and how we can interact with them—the two most important aspects of a user interface, so to speak.

Lesson learned from this presentation: use elements of the real world and mimic their use of light, shadows, gradients and noise.

View the slides from the presentation

Thinking Small, Jason Santa Maria

Jason takes us through his own design process—considering some achievements of his, that was really worth it—by sharing 7 things he does when designing websites:

1. Think before Photoshop Sketching plays a great part in understanding a subject and getting acquainted with the content;
2. Find the message Understanding the main subject you’re designing for is a prerequisite before going into Photoshop, find what’s important and you get what the design should communicate;
3. Reverse engineer Change perspectives, look at things from a different angle;
4. Plot it How you use design tools, such as grids, should be approached contextually; find how they can communicate the message and use them accordingly, not for their own sake;
5. Think horizontally then vertically Markup pages as stacks of horizontal layers, then layout things vertically inside;
6. Stop, modulate and listen Use class names to identify elements, their size and position, and combine them effectively;
7. Be a matchmaker Be careful when choosing typefaces, combine those with enough contrast, but which support the same structure.

Final words

Other topics were discussed these days: accessibility, user testing, HTML5, typography, etc. all very interesting and insightful, but if one subject should identify this year's conference, it's that of how web designers and developers should run their business and improve their project workflow.

By far, designing right in the browser has gained a lot of traction for the time it helps to save, from initial sketches to marked up page templates. A subject that was briefly discussed during our talk on web usability at FirstTuesday.