Now we are six

We started with a crawl which quickly evolved into a stumble, then we were walking and now we're rushing about with no regard for our own safety. We are six years old!

At the end of September Electric Putty celebrated it's sixth birthday. 2004 seems a long time ago now; it was a world with no Facebook, no Flickr and Eternal Sunshine of the Spotless Mind was on at the pictures.

After a couple of marvellous years down under we moved to Brighton and started working out of a small back bedroom. We concentrated with the area we knew well and soon established our reputation as first class suppliers to the third sector. The work continued to flow and it wasn't long before we got some silverware under our belt, winning the 2006 Jodi award for Web Excellence on a Low Budget with Speaking Volumes and then we were double winners at the 2007 SCIP winning Best Charity Site and the Accessibility Award for Amaze.

The last 12 months have been our best and busiest yet; we've been working on some really exciting projects and growing from two to three full time staff with the arrival of Rob Hodges, our front-end ninja. We've also extended our trusted network of partners and have and the pleasure of working with some of the best designers and developers in Brighton.

It's an emotional moment (you know, it genuinely is) and we'd like to say a huge thank you to all the people we have had the pleasure of working with over the last six years. We've come a long way, we've learnt a lot and we're as passionate and excited about the web as ever.

Here's to the next six.

Categories: Electric Putty news | Information design | Strategy

Help - my web designers using wireframes

You've commissioned a web project and have started working with your web designer and now she's talking about something called wireframes. What are they? Do we really need to bother? I just want to see some visuals!

What are wireframes anyway?

A wireframe is a conceptual model or diagram of a web page which provides a framework for the development of the website. The purpose of the wireframe is to communicate what a web page should contain and how it should behave. Wireframes are usually developed as part of the information architecture phase of a website project.

Information Architecture or IA is 'the art and science of organizing and labelling websites, intranets, online communities and software to support usability' according to the IA Institute.

Why IA?

IA solves information problems - how can we make the information easy to use and easy to understand for the identified key audiences? Discovering and resolving these issues at the start of a web project creates a solid foundation for the visual concept and development phase.

We carry out an IA stage at the start of each project. This process involves working with you to agree the site hierarchical structure, the content elements, labels, categorisation, relationships and flows for any complex processes. We bring the results together into wireframes which are agreed and approved before we move forward.

Who is the wireframe for?

The wireframe often has two audiences:

1. (You) the client
2. The development team – e.g. graphic designers, programmers, project manager.

What does a wireframe look like?

Wireframes are drawn using simple lines (like wires, hence the name) and are usually in black and white.

What is in the wireframe?

Wireframes illustrate the elements that make up the page:

• The general structure of the page (e.g. navigation, search, logo etc.)
• The type of content and any specific formatting (e.g.headlines, dates, body copy, etc.)
• The prioritisation of the content through position, size and layout (e.g. news comes first, sign up comes first)
• Functions that visitors can interact with (e.g. data capture, forums, RSS feeds)
• Sometimes the wireframe contains the actual copy for the page. Where actual copy isn’t available you’ll see placeholder ‘lorum ipsum dipsum’ text.

What is not in the wireframe?

Wireframes don’t contain any colour, fonts, images, or branding. Wireframes do not represent the finished look and feel of the web page; this is dealt with during the visual design phase.

How many wireframes are there?

A wireframe is created for each template. For example;

• The home page
• Section hub page
• General editorial detail page
• Any page that requires specific explanation

How do I interpret the wireframe?

Key questions to ask yourself when reviewing wireframes

Categories: Electric Putty news | Information design | Strategy

Submit a comment