Web design Stoke-on-Trent - Firecrest Computing Services Logo

Firecrest | Blog

Interface design and prototyping

One thing that we make a priority, on any web or software project on which we are working, is to prototype the website and interface. This ensures that the client is a part of the whole process and allows them to see, and use, a version of the site or software at a very early stage in the development process. It is easier, and better for everyone, if any errors or required changes are discovered early in the project. It is even better if the site is right as soon as the actual development starts, and prototyping helps this a great deal.

How we start the prototyping process obviously depends upon the project. The key thing is to allow the client to see something of the design as early as possible. However, we always start by discussing with the client about their business strategy, their aims for the site/software, the potential audience, an analysis of their competitors, the design and content requirements, and so on. Depending on the size of the project, we also develop and run through user scenarios with the client – ensuring that before anything starts, we all have an idea of how and when the users will use the site and what they will use it for. We will work with a client for as long as is required to ensure they, and us, have confidence that we understand the overall aims of the site/software.

Once we have this, we can actually start prototyping. We are not Luddites (well, not in terms of software development anyway!), but we usually start with good old pencil, paper, and post it notes. Sketching a rough design of the site is very, very useful and can even be discussed with the client. For the content of the site, particularly for larger sites, we use wireframes. Wireframe sketches are perfect for working out the information flow of the site, the navigation structure, and the functions. For each page, we also provide a short description including details such as where the navigation will point to, what a form will do, and how it will change if the site includes dynamic content. It is important though that the client knows that this is not what the site will actually look like! Wireframes are simply used to start the design process for us and the discussion process with the client. It helps everyone if something is down on paper, even if it is a long way from what the finished software will look like. One thing we are very careful to do is to avoid jargon in the words that are used on the prototypes and in discussions. This only ends up confusing the client or user before we have even started!

The next stage for us is to create an actual interactive prototype that the client can see and use on the computer. This allows the client to see and actually use and click links on the design. For this we have used all sorts of tools depending on the size of the project and the client’s needs, ranging from IPlotz (an online tool) to Microsoft Powerpoint or OpenOffice Impress (you may be surprised by how useful a Powerpoint presentation with click-able hyperlinks included is!). As well as the client we like, where possible, to actually test the prototype with actual users of the site. This allows us to test the behavioural aspects of the site and is particularly important for software application projects.

Overall, the whole process is about communication. Communication between myself as a developer and the designer(s), between us and the client(s), and between us and the potential users.

In a later post we’ll talk about the following stages that we go through in a website or software project. In the meantime, if you would like to discuss a project with us and experience it for yourself as a client, then do contact us.

Be Sociable, Share!
This entry was posted in software development, website design. Bookmark the permalink.

Comments are closed.

Web design Stoke-on-Trent - Firecrest Computing Services Logo