OUGD504 - Design for Screen - Designing a user Experience

Have the idea, write it down, and then move on to the next one. Don’t judge, analyse or criticise them – that will come later. This frees you to be experimental, to step outside of ‘the box’, to be subjective, (or, at times, even more objective), inventive, original and fearless.

The ideas could be generated in the following ways:

- Mark–making and Sketchbooks

- Mood Boards

- Mind Maps

- Ideas Sessions

The results from the Ideas Phase, along with the brief and the research data, are compiled to create a clear design direction.

Lo Fi

This could be a sketch of the page–types, wireframes, or an HTML prototype. The point is to get something sketched out, in as complete a state as possible, and begin to solve those problems as they arise. The aim is to do it quickly, and cheaply.

Test and Iterate

Once you’ve got something that you’re happy with, the next stage is to test those results. Testing can be done formally at a usability lab, or in more guerilla fashion with colleagues, friends or family. The point is to get a real person using this lo fi product. That could validate any problem areas.

Design Comps

Design visuals of key pages are done in this phase. They can be produced in tandem with the lo fi work and should be as iterative. The difference is, the Design Comps focus on elements such as brand, colour & typography. They are not being done in isolation from any usability or interaction design though – in fact, the same designer can be working on both the lo fi and

Design Comps.

The Design Comps should be completed and signed off early in this stage. They should represent a cross–section of the site and form the basis of the unique templates that need to be produced.

The lo fi prototype now needs to be scaled up to a full production model. This is where it’s important that the iterative development of the prototype stays as close as possible to the Design Comp process. The last thing you need, so late in the day, is a huge gulf between the visuals the client has signed off and the prototype you’ve produced internally. That very problem – which happens a lot – is a symptom of there not being enough collaboration. Designers need to work alongside as many disciplines in the process as possible, particularly project managers, account executives, writers and – most importantly – developers. Design and development should happen at the same time following the Ideas Phase. All the pieces are in place for each discipline to pick up and run with.

Site Maps
Now you know what the content is, you can start to organise the information into sections and/or pages. The aim is to create a diagram of the pages that will be used to structure the interface. This is known as a site map and it will show how those pages are grouped together. 

Wire frames

A wireframe is a simple sketch of the key information that needs to go on each page of an
interface. It show the hierachy of information and how much space it will require. By creating a wirefame you can ensure that all of the information that needs to be on a page is included. It should focus on what information needs to be on each page and creates a visual hierachy to indicate order of importance.

Wireframes create the structure for the design phase, they inform what and where the information should be before designing how it looks. They ensure all the functions and information are included before the design phase begins.