Form Follows Function, But How Far Behind?

I go into this blog-post blind, but I am conscious of two things: firstly that I have a question, but no conclusion; secondly, I’m haunted by an image of neatly aligned post-it notes, stuck on a whiteboard.

The Question

Does the designer need to be involved in a development project from conception to sign off, or should they be roped in once all development work is done?

That Image

This picture is taken from the presentation How We Make Websites by Matthew Wood and Michael Smethurst of the BBC, given at the Institutional Web Management Workshop 2009. I remembered the image as a page layout, and I imagined the different coloured notes to be some kind of attention mapping.

OK, I got it wrong as it turns out, the image is from the “Design your URI schema” slide. In my head it is linked with Matthew saying, and this could possibly be a misquotation “We don’t do any mock-ups in Photoshop” which is more likely to have come during the “Apply decor CSS” section.

What am I on about?

The workflow outlined in the presentation is dealing with masses of data, so I can understand why the web designer is being brought in late in the process.

We do however seem to have two concepts of design, and two stages of design: firstly design as a process of organising and structuring information; secondly design as a process of decoration. In essence, one is functional, the other is frivolous.

I agree that form should follow function; the site needs to work, but I think some degree of designed visualisation throughout the process can improve the final outcome.

Grids, Wire-framing, and Attention Mapping

Loads has be written about these so I don’t think I should write an overview, but I think they really help set the agenda for what you want an application to do. I think they can help a designer communicate ideas with a developer, and the developer can feedback whether or not something is workable…

Some Examples

I designed a homepage for E42, Edge Hill’s magazine and mocked it up in HTML and CSS. I figured it was a simple job for the developer, so I gave to him and said “Make it work!”. Presenting the stories in two columns turned out to be a nightmare, something to do with odd and even numbers of stories, and closing div tags. Anyway a bit of communication and a simple wireframe mock-up could have saved an afternoons work.

Conversely our main events page was created by the development team: it functions perfectly, but has no visual punch. If a monotone wireframe had been used, the focus could have been drawn quicker to the latest event; and if some attention mapping was done, you wouldn’t have to scroll down to find the button to the Events Timeline!

One Thing about Wire-framing

Wire-framing is great in certain contexts, getting the balance and composition of a static page right, early in the workflow, increases consideration for the end user throughout the process.

With applications like GO, where the end user can add and remove their own content, they are also creating their own page composition: In this context it is worth concentrating on the individual components.

By using Photoshop layers you can compare how the components sit next to one another, and see if you are achieving harmony or just making noise.

The Accidental

Experience has taught me the importance of planning up front: however nothing is conceived and visible in an instant. Just about every project hits a lull, where things look OK, but there is a lack of balance, or something just isn’t standing out the way it should do.

This is where a happy accident often occurs, usually by hiding layers in Photoshop the right juxtaposition of text, imagery and colour can miraculously happen, and everything falls into place.

This can’t be built in as part of your core plan, but by involving a designer throughout, little twists to the plot can happen, and you could end up with a more effective website.

To Conclude

Well the answer to the original question is no: let’s face it if something works it works; but people are becoming more conscious of the visual appearance of applications and how the intuitiveness of a layout gives them confidence as a user; also there is a psychological element that if something looks good it probably works better too.

Obviously there are other aesthetic questions: why do so many interfaces resemble a Mac operating system, or the dashboard of an Audi; but this is beside the point.

@Media 2007: Jason Santa-Maria – Diabolical Design: The Devil is in the details

Jason is a well known and influential designer working for Happy Cog, the studio run by Jeffrey Zeldman.

Zeldman is the author of Designing with Web Standards, a book that has been pivotal in the conversion of many designers from structuring pages with tables, to using standards compliant CSS layouts.

Jason’s design has had a stylistic impact on the look and feel of Web 2.0 sites; his use of organic and illustrative background images, combined with uncluttered typography with characteristic Serif font headings is universally replicated.

In this presentation he began by covering a few basic pre-style workflow steps. I currently use wireframe layouts, Jason suggested using a 12 column grid system as a starting point. Important Text and images can span columns but always fit within the lines of the grid. This is something I find difficult, at Edge Hill we often use movable type and a fluid layout; therefore column widths are measured with percentages and expand according to the size of the users monitor.

Additionally he uses Monochrome Wireframes that grade important elements of the page with darker shades. Blocks of strong colour create a connection with the user and help communicate the page’s function.

I found his tips on colour theory interesting, especially creating a colour palette from photographs using the eye dropper in Photoshop. Also choosing an image with a dominant colour and working it into the rest of the design was interesting. I think it is important to have an idea of which colours you are going to use before you progress from a wireframe, however I also know from experience that a scientific approach doesn’t lead to a perfect design, often an element of chance can push the design in a better direction.

The next section of the presentation was concerned with white space, or negative space, that is so important in defining typography. Jason cited the influence of Saul Bass whose typography and collages are seen in the opening credits of Psycho, The Man with the Golden Arm and Walk on the Wild Side. I have been a fan of Saul Bass for a long time and was pleased to hear that he continues to influence people working in a modern medium.

He finished with tips on typography, and the use of appropriate and contextually meaningful fonts.

I took a lot of inspiration and reassurance from the presentation. I feel that many of the approaches and theories that I learnt at Art College are still important in web design, and Jason confirmed this.