Typography 2

December 16, 2009

Flow and contrast


Seven principles of typographic contrast

Typography 1

December 16, 2009

Note: This is in the process of being transferred from an earlier version in word and still needs a bit of work to finish



Typography is traditionally defined as the “Art of printing” or “Style or appearance of printed matter”.

However, as visual technologies have progressed, an increasing amount of material is being published electronically with the result that we tend to read more from electronic displays.

Good typographic design is just as important for a web page as it is for, say, a newspaper, or any other medium.  It should still be easy to read and pleasing to the eye regardless of whether it appears on a computer screen or piece of paper.

The designer has to adapt their design concepts to suit the medium being used.

Lets look at a simple example in terms of the different letter spacing needed for a headline in a poster and a magazine to be readable.

We tend to read magazines straight on and at arms length so the letter spacing can be fairly tight but still be readable.  Posters, on the other hand, may often be viewed at an angle, this can tend to distort our view of the text.  In this case a designer will need to ensure that the letter spacing is enough to be able to identify individual characters and hence the words.

Each medium presents its own set of issues and challenges to the designer, and the web, or computer screens in general, present their own set of problems to be solved.

One of the main challenges facing the web page designer is dealing with different computer platforms and screen sizes.

Whilst any browser will take a block of text and display it on a screen, the designer has no guarantee of how it will look on the end users machine as it’s configuration can affect how a page looks.

For example the designer may specify a particular font such as Verdana which may not be loaded on that machine and so the text for that page could be displayed using a default font such as Courier.

Again the page layout may be designed for an 800 by 600 pixel screen resolution and distortions may result when the page is viewed at 1024 by 768 pixels.

It is stated that the “twin tests” of type are legibility and attractiveness.

What does this mean?

Type is used to convey a message.  If that message is to be effective then it must be legible.

In order to deliver a message effectively to an audience they must be able to read it!

The typeface used should therefore encourage reading by being both attractive and appropriate.

How is this done?

There are a number of considerations when choosing what type to use for a project.

One of the most important decisions the designer has to make is what typeface to use.

What is a typeface?

A good description is ‘the clothes that letters wear’

There are two main families of type – serif and sans serif faces

The best known serif typeface is probably Times – serifs are the little twiddly bits at the ends of the letters (although each of these does have a proper name).  The serifs help the eye scan along a line and improve the readability of the type.

As you may know Times was invented for the Times news paper, which contains a lot of quite small type on each page.

One of the generally accepted rules of print is that serif typefaces are better for “body text” – that is the main bulk of text on a page, set at 12 points or less (don’t worry if you do not understand this we’ll look at point sizes later).

However, for text that is to be displayed on a screen, the resolution can distort the serifs, making the type harder to read at small sizes, so for SCREEN DISPLAY sans serifed type is normally a better choice for small point sizes.

Helvetica is an example of a sans serif face.

The letters are very plain (often nearly the same thickness throughout) with no extra embellishments.

This makes the text easy to resolve and read on screen.

The rules are therefore reversed when you are designing for a screen.

Hence sans serif type is recommended for body text on screen but for headings in hardcopy print.

Remember that like any other area of design, once you know the rules and how to apply them you are also able to break the rules to achieve a specific effect.


Look at the following typefaces (which are all 22 point) and decide whether they are serif or sans serif faces.









Serif and sans serif is the simplest division of typefaces

They can be broken down into a number of smaller categories a few of the more common are outlined below.


Sometimes easily legible fonts are known as book faces.  These are easy to read at small sizes, however, they do not enlarge as well as typefaces designed for large point sizes.  They appear thicker and clumsier.

Image – example of book face


More decorative or unusual faces used for titles are known as display fonts.  They are not easy to read at small sizes and should only be used sparingly for effect to set the mood and style of a design.  Note that most custom display fonts are provided at large sizes only, and do not scale down well.

Image – example of display face


Script fonts represent handwriting.  There are lots of these available.  Be careful when reversing them out of a darker background.  Like serifed typefaces the ‘tails’ may be lost as well as the delicate shapes.

Image – example of script face

As mentioned previously, the choice of typeface has a significant influence on the overall impact of your design.  In the next activity you will discover how type sub-consciously affects you when you read it.


Lets go onto the internet now and have look at an interesting site devoted to all things to do with type

This first page covers general design principles


Next have a look at the psychological factors involved


Type family

A type family is all the different versions available of a typeface and the individual attributes of each is known as the type style.

Most typefaces have two postures – roman or italic.

Although a typical word processor will have an italic option in the format menu that lets you “italicise” the face this is NOT the same as actually having the proer italic version installed on your computer.

Look at the example below that uses two sans serif typefaces that have similar letter shapes.

The first example shows them in their normal ‘roman’ style

Example 1- normal roman type

Example 2 shows the change in the first face when the italic option is chosen from the word processor format menu.

computer italic or ‘oblique’

Example 2

This should be really known as slanted or oblique text as the letters are simply reproduced at an angle.

In example 3 the face is, in fact, a separate italic version of the typeface in which some of the letters are actually different.

Example 3 – proper italic

Note how the  ‘a’ has changed shape completely in the first example.

This is known as single storey whereas the ‘a’ shape is known as two storey.

Type also comes in different weights which include book, ultra, bold, black, condensed etc.

Again this is not the same as clicking the ‘bold’ command on the computer.

Arial – Arial Black – Arial Rounded MT Bold – Arial Narrow

Example 4

Type size

This is measured in points.

1 point = 1/72 inch, so 72 point text should be 1 inch high (see later for why this is’nt exactly true).

12 points = 1 pica which is a measure used for line lengths.

Therefore there are 6 picas in an inch.


In most sophisticated programs the ruler display can be set to not only cm or inches but also to points and picas allowing accurate measurement and layout of type.

The point measure is based on the top of an ‘ascender’ to bottom of a ‘descender’  i.e. from the top of an ’l’ to the bottom of a ‘p’.

This system of measurement means that different typefaces can look very different (in size) on the page despite actually being the same point size.  It is important to pick a point size for the specific typeface and not stick to the conventions i.e. 12 point type may not be appropriate for the body text (This will be explained further in the next section on anatomy of type)

Obviously the larger the point size the more emphasis is placed on that particular text.


Sometimes larger text can be more difficult to read and other factors must also be considered, such as leading (more on this later).


Although the word font is generally used interchangeably with typeface the two words actually have different meanings.

A typeface, as we have already seen, includes many point sizes and type styles in its family.

A font is a SINGLE point size and style of a typeface


Decide whether the descriptions below are typefaces or fonts

Times New Roman

Times italic 14pt

Helvetica Black 18pt

Helvetica Bold

Gill Sans

Type Case

Upper case letters are known more commonly as capitals, whilst ‘ordinary’ letters are known as lower case.

Research has shown that capitals are harder to read and should be restricted to headings or short lines of text only.

It is also considered rude to use capitals for electronic body text as this is considered to be ‘shouting’ at the recipient.


Now we are going to do a little library research.

Use one or more of the following references to help you answer the questions and complete the diagrams below.

Note that both the typefaces are reproduced at the same point size – 72pt.


Vaughan, T. (2001) Multimedia. Making it work. London: Osbourne. P152.

Dick, D. (2000). PC Multimedia Handbook. Technology and Techniques.  Glasgow: Drumbreck Publishing. P118.

If you cannot make it to a library you can try the about.com website.


Note that not all sources recognise a difference between a ‘bowl’ and a ‘counter’.

You can search the web until you find a reference that does.


Mark the baseline……………………………………………………………………………………………………….

Mark the point size of the type…………………………………………………………………………………..

Mark the x-height of the type and measure it…………………………………………………………..

Which letters have ascenders?  Mark them on the type……………………………………………

Which letters have descenders?  Mark them on the type…………………………………………

What are counters?  Mark one letter………………………………………………………………………….


What are bowls?  Mark them on two different letters………………………………………………



Mark the point size of the type…………………………………………………………………………………..

Mark the x-height of the type and measure it…………………………………………………………..

Why is the x-height different between the two typefaces?………………………………………


How does this affect the appearance of the text set in the two typefaces?…………….


When choosing between similar typefaces the x-height is often the deciding factor.

In display type the x-height can be smaller giving the text a more elegant feel.

Type that has a large x-height is useful for the body text on a screen display as this can make type more legible without the need for increasing the point size (which would also increase the line length or number of lines required).


This is the vertical space between lines of text.

Typewriters and early printing presses were often restricted to single line spacing or sometimes 1 1/2 line spacing (equivalent to 100%, 200% and 150% leading respectively)

Nowadays computer software can specify leading in mm, points or as a percentage of the point size of the type used.

Too little leading makes the type look cramped.

Too much leading can be difficult to read as the eye does not link one end of one line with the beginning of the next.

The amount of leading required is governed by your choice of face, typesize and the effect you wish to achieve.

It is worth experiment to get the effect you want.

Note that smaller type with more leading can often be easier to read than larger type with smaller leading that is squashed into the same space, it can certainly make it look more elegant.

Remember to be consistent with spacing between paragraphs.  Erratic line spacing can disrupt the message.

A good rule of thumb is to decrease the line spacing to connect lines and expand it to separate units of information.

Also note that white space is used to draw attention and also to separate  and link objects.

If a heading or sub-heading has too much leading below it, it will appear separated from the text it relates to.


Another division of typefaces can be between those that are proportionally spaced and those that are non-proportionally spaced – sometimes refered to as evenly or monospaced.

An example of a non-proportionally spaced typeface is courier.

Note how each of the letters takes up the same amount of space, even the ‘i’

Now take a look at the word courier written in the Arial typeface.  This is a non-proportional typeface.  Note how much shorter the word is as letters like ‘i’ take up less space.

Although proprtionally spaced typefaces used to be the norm (many people still associate courier with typewriter text) they are now mostly used for effect, where the letter spacing contributes to that effect and is usually left unaltered.

Usaully, though, it isimportant to consider the letter and word spacing in a design and alter it where necessary.

Manual letter and word spacing can become quite complex and is generally reserved for ‘headings’ and ‘titles’, leaving the computer software package to deal with spacing the body text which can be a lot of work.

To make a word appear as a complete unit in a design, it is essential that the areas of space between the letters is balanced.

Letter and word spacing can be regarded as an exercise in optical illusion.

Putting a single space after a full stop can help the readers eye flow better over the text.

Some pairs of letters are known to appear to have too much space between them and appear unbalanced when printed at either very large or very small point sizes. This space can be manually decreased or tightened in sophisticated packages by adjusting the ‘kerning‘ between the letters.  Very common letter pairs that have this problem are Ta, Wa, Vi, AW and so on.

Note that evenly adjusting the space between multiple charaters is known as tracking.

To better understand the difference between traking and kerning try the next activity.


Now go back onto the internet and have a look at the following website for more information on character spacing.


Note in particular the examples they give on the difference between tracking and kerning.

Now that you have a had a closer look at the theory its time to try a practical exercise.  For this you will need access to either the Photoshop or Freehand software packages.


Open up Photoshop and use the program help menu to learn how to kern the letter pairs given in the previous section.

Use two different fonts each at 36, 72 and 144 point sizes.

If you are lucky enough to also have Freehand (or any other similar software package) try the same exercise.

Platform differences

It is important to note that type on Macintosh and PC platforms does not always display as expected.

In fact if the other person may not have the same font installed on their computer (in this case a default font such as Times or Courier may be substituted).

When dealing with print it was standard practice to ensure that the typesetter either had the fonts that were required to output your job or you supplied them.

So beware if you intend to use some exotic font you have discovered on the internet…………not many other people may have it on their machines!

This can be a real problem with screen based layouts and can run into coyright considerations.

Most designers get around this problem either by using standard system fonts, or converting their pages to an image file.

Some programs like Adobe’s Acrobat give the option of embedding the font in the publication.  This ensures that the pages display exactly as the designer intended them to look.

PC Typefaces Macintosh equivalents
Arial Helvetica
Book Antiqua Palatino
Courier New Courier
MS Sans serif Geneva
Symbol Symbol
Times New Roman Times
WingDings Zapf Dingbats

The dramatic increase in screen based information  has led to fonts being designed specifically with the constraints of screen based display in mind.

Some of these are



Take a look at 5 of your favourite web sites (or pick 5 at random say using searches against different topics in a search engine).

Name of website 1:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 2:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 3:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 4:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 5:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.


User centered design and usability


For this topic we are going to look one of the most important factors that influence the success of any site – the way in which it is designed. The process that the web designer goes through can have a significant effect on the way in which users relate to a site. Research shows that users feel they are using the web as a whole rather than any particular site and they show increasing reluctance to learning new navigation tricks. They tend to expect to be able to use a site on the basis of web conventions they have picked up as a result of their experience of using the web as a whole, where each new site they visit is interpreted according to the rules they have learned. Interface design Over the last 50 years the media that provides us with information has changed dramatically. We have moved from books and newspapers to Television and the Internet. Information is being presented to us in quite radically different ways and the ability to generate visual attention is becoming increasingly important. Television viewing has had a significant effect on the way we get new information. Compared with reading a book watching television is a passive activity where all the information is converted into mostly images and sound that are “pushed” at us. More recent generations have learned to use digital interfaces through games and mobile phones. This ‘point and click generation’ is becoming more dependent on visual concepts rather than reading core information to acquire knowledge. Recent research indicates that there is 8 seconds (or less!) to gain the attention of the online web user. Information gathering on web sites is moving from a “read it all” activity to a “scan it all” activity. This implies there is a downward trend in reading all the information available on a site and an upward trend in the rapid perception of imagery. Whilst the users interaction with a web page may pose new challenges to the designer, the design of key visual elements can still follow well established guidelines that have been developed over the years for print media. Because of this graphic design and interface design are closely related. It is possible to draw upon current practice in print media to design, create assemble, edit and organise the multiple forms of media required in contemporary web pages. In fact, one of the best web design strategies is to consistently apply a few tried and tested printed document design principles to the web pages that you create. Activity Lets have a closer look at the way in which web page design and conventional document design can be linked. Go onto the Internet and read this section of the Web Style Guide site. http://www.webstyleguide.com/interface/freestanding.html It is also available as a book and its library reference is The Web Style Guide 2nd Edition Patrick J Lynch & Sarah Horton Yale University Press ISBN 0-300-08898-1 For the book read pages 1 to 3 of the Interface design chapter. Now try the following activity based on your reading in the previous activity Activity List, with a basic description for each item, the basic elements needed to make a web page free standing. Now that you created your list lets do something with it Activity Go back onto the Internet and go to the WEB 100 site where “user ratings and reviews of Web sites guide you to the best of the Web” http://www.web100.com/ Use your list as a checklist and look at how the top five sites comply with your freestanding guidelines How many (if any!) comply? User Centred Design User centred design can be defined as: – “the practice of designing products so that users can perform required use, operations, service, and supportive tasks with a minimum of stress and maximum efficiency” (cited in Rubin, 1994, p. 10). Probably the main difference between the traditional computer graphical user interface (GUI) and the web is that on the web the user has almost total control over where they are going. They can follow paths that the designer never thought of, for example jumping deep into the page structure of a site directly from a search engine, or book marking favourite pages on a site to create a customised menu. One of the main challenges for web designers is to accommodate and support user – controlled navigation, where freedom of movement is designed for rather than constrained. This represents a challenge for the interactive designer who will usually want make some form or unique expression – a balance needs to be struck between individuality of design and designing for the web as a whole. Whilst there are no formally established web design guidelines some conventions have emerged established mostly through practice rather than theory. A good designer will find it useful to look at the top sites (say, in terms of traffic or turnover of money) to see what they have in common, if most of them do something in a certain way then that suggests serious consideration of that feature. The opposite applies if there is no obvious convention, then it comes down to the designer’s alternative, however, usability testing is still strongly recommended. Activity Now lets go back to the web style guide and have a look at what they have to say about user centred design http://www.webstyleguide.com/interface/user-centered.html Work your way through the entire section and note the key features of user centred design. Your notes from your previous reading of user centred design should include:- Clear navigation Navigation needs to be consistent and users need to be able to easily find their way about your site and also have a good idea of where they are within your site. Dead end pages Do not lock your viewers out from the rest of your site if they jump directly into a page deep within it. Have at least a “home” link. Access Allow your users to find what they want in as few steps as possible. Bandwidth Remember you may only have 6 seconds to get heir attention! Pages that take a (relatively) long time to download are likely to cause frustration. Simplicity and consistency Keep it simple! Users do not want to have to learn a new interface every time they visit a site. Also be consistent in terms of navigation and visual imagery. Design Integrity and stability Instil confidence in the user through the quality of your design and editorial standards Feedback Confirm the users actions and listen to what they have to say. Now lets put some sites to the test in terms of how well they rate for user centred design Activity Go back to the web 100 site and assess the top five sites using the main points of user centred design from above. http://www.web100.com/ How would you rate the top 5 now? Usability A web site is really a form of interactive product and because of this it is important to study user interaction. Usability engineering methodologies are being increasingly used as effective tools for an accurate means of measuring user interaction. Whilst market research techniques such as focus groups are useful for getting information on customers needs and concerns they will rarely give insight into fundamental business processes. Users are not designers, they will not come up with a design for a navigation system, this still needs to be prototyped and tested. This is where usability studies come into play as a means to measure the quality of the user experience with a web site. But what exactly does the web designer have to take into account to ensure they produce a web site that is centred on the users needs? The following activity is based on the WorkingWeb enhancing website usability guidelines. The guidelines provide a useful approach web usability and links it to the wider area of user centred design covered in the previous section. Activity Let’s go onto the Internet and have a look at the WorkingWeb usability guidelines http://workingweb.com.au/training/intro_to_usability.php Work your way through the complete training menu. Now lets test your understanding of the previous activity by answering the following short questions. Activity 1. What should a designer do first on a new project, before even considering the website content? 2. Give your own definition of Information Architecture. 3. Broadly describe the main factors that a web designer has to take into account when designing a prototype web site. Note your answers should be between 100 to 200 words long end

Envisioning The Design

November 16, 2009

Envisioning is about:

  • Understanding : clients & users
  • Communicating
  • Evaluating and Selecting

Techniques for doing this

  • Restating client requirements
  • Scenarios of use
  • End user profiling
  • Mood boards
  • Storyboards
  • Navigation maps
  • Flow diagrams
  • Sketching
  • Design space analysis

Restating client requirements (brief)

  • Different words = different perspectives
  • Clients don’t always know what they want
  • Client’s don’t always know what is possible
  • Restating their requirements:
    • provides opportunity for discussion
    • clarifies misunderstandings
    • better basis for a  contractual agreement

End user profiling

  • Not enough to say ‘anyone’, or ‘children’,etc
be specific (anyone interested in buying a car and with the money to do it, children between 7-12 in the London area, etc)
address any issues users might have (kids – feel safe, feel cool, etc)
  • If your interface/website/object has multiple audiences:
profiling will reveal potential clashes of interest
you have a place from which to start making decisions/trade-offs
Alternative methods for gathering data about users and for presenting profiles
Observation: ethnographic approaches; ethical issues (discussed later in module)
Using cultural probe
Creating fictional ‘personas’ to use in scenarios

Mood/Style Boards

  • Widely used in interior design/advertising http://www.bbc.co.uk/homes/design/colour_moodboard.shtml
  • You can generate them, or you can get users/clients to generate them
  • Capture feelings of a place or of a design:
  • anything goes (images, text, colours, textures, website screen shots, etc)
  • use removable sticky stuff so you can alter board


Technique from film-making:
scenes/frames from the user experience point of view
communicate the feel of the ‘flow’ of the design
Can be used in prototypes/scenarios (see later weeks..)
storyboard normally contain a sketch of the visual elements + descriptions of animations, interactions (e.g. dialog boxes), sounds, and any other media.

Navigation Maps

Represent how the user navigates through the design:
not same thing as directory structure!
Box per page/key moment:
where can you go from here
include backwards as well as forwards flows
Frequently, drawing them helps spot:
orphan pages
dead ends
structure is getting too complex and users will get lost

The process in general terms

  • Understand problem and its context
    Generate possible solutions
    Concretise the possible solutions
    Evaluate them
    Selection of possible solutions until one emerges
    Realise that one
    Continue or start again!

Put the user at the center

Understanding the user: a recurring theme, there are different aspects to this
  • asking users
  • observing users
  • involving users
  • using theory (about users) to inform designs and design practice
  • asking users
  • observing users
  • involving users
  • using theory (about users) to inform designs and design practice

User-centric View of Design Problems: PACT Analysis

  • PACT makes a good ‘user-centric’ framework for thinking about a design problem/brief
  • Take each category and work through it
  • Use the analysis to help focus/orient early design thinking
  • Important: revisit the analysis:
  • As you get deeper into the problem the analysis should change and/or get richer


  • Consider range of characteristics of people
  • Physiologically
  • Age differences, physical abilities
  • Psychologically
  • Attention, perception, memory
  • Forming the right ‘mental model’
  • Socially and Culturally


in general think of..

  • Goals, tasks and actions
  • Regular or unusual, weekly? Yearly?
  • Individual or distributed, involving others
  • Well-defined or vague
  • Continuous or interrupted



  • Physical environments for the activities
  • Social environments
  • Circumstances under which activities happen (time, place, pressure of work/time)
  • Amount and type of support for activities


  • Input
  • Getting data in; getting commands; security
  • Output
  • Characteristics of different displays (e.g. video vs. photographs; speech vs. screen)
  • Communications
  • Between people, between devices, speed, etc.
  • Always keeping one eye on the future

Doing a PACT analysis

  • Brainstorm the variety of P, A, C and Ts that are possible
  • Explore design implications
  • Write as detailed concrete stories…
  • …then group together into general scenes
  • Look for trade-offs between combinations of PACT
  • Think about how these might effect design

Design Awareness Exercise

In groups identify:

of an in-flight entertainment system

What are the design implications?

Testing & Evaluation

March 18, 2009

Testing, Evaluation & Documentation

A checklist of checklistsLaunching a flawed application onto the market can be a very costly mistake.  Make sure you have got it right, your job and your reputation are at stake! Also, don’t do all this at the end of the project, anticipate problems at the early design stages, its a  lot cheaper and easier to fix them then than towards the end of a project when the design is relatively closed and expensive to change.

Usability testing

What is usability testing?

Usability testing generally involves measuring how well test subjects respond in four areas: time, accuracy, recall, and emotional response. The results of the first test are the baseline or control measurement; all subsequent tests are compared to the baseline.  A typical usability test would cover the following for around five to ten users

Time on Task — How long does it take people to complete basic tasks? (For example, find something to buy, create a new account, and order the item.)
Accuracy — How many mistakes did people make? (And were they fatal or recoverable with the right information?)
Recall — How much does the person remember afterwards?
Emotional Response — How does the person feel about the tasks completed? (Confident? Stressed? Would the user recommend this system to a friend?)
Short article on Practical usability testing
US Gov comprehensive usability resource
Series of tutorials from IBM on design for ease of use

Screen Testing

Each screen of an application should be tested to ensure that it complies with the design and works properly.  A checklist can be used to work through each item.  Below is a typical example which could be adapted to your project

Does the layout match the design?
Do all the buttons work?
Do all the texts, fonts colours and sizes match the original design spec?
Do  text scroll functions or animations work?
Do the non functioning controls grey out when not needed?
Is there a visible continuity between screens?
If there are any applets, SWF’s or other plugins and do they operate correctly?
Has the text been spell checked?
Do video and audio files load quickly enough and play smoothly?

Navigation testing

Is your navigation scheme logical and fully functioning?  A typical test checklist would include

Do all the links within the application work?
Do all the hyperlinks function correctly?
Are there any broken links?
Is there a smooth transition between screens?
Is there consistency between screens?


How many different types of people can use your application without modification?  Is your design inclusive?  Can it be used by as many people as possible regardless of their age, ability or situation?

W3C web accessibility guidelines
RNIB good design advice.  There are two million people with sight problems in the UK. Good design can make websites, information, products, services and buildings accessible to them.
About Inclusive Design at the Design Council


Are there any security issues that have to be covered?

Dancing pigs (warning this link could be insecure, your bank account could be cleared out and all your children be born with tails)


Any multimedia application should be evaluated especially in terms of its fitness for purpose.  Have you met all the requirements of the design brief?  Will you get paid?  Some contracts require the developer to produce an evaluative report prior to product launch.

Does the application do what it is intended to do?
Has the designer designed the best solution for the problem?
Does the application work in an efficient manner?
Is the application robust?
Is the application easily maintained?
Has a technical and user guide been provided?


People need to know how to use your application and that it will work on their machine.  Do not assume they will know what to do or have any technical knowledge.  If they can find a way to break it they will!

Instructions – “……….press any key”
User – ” Where’s the any key………?”

You will need to establish the platform and lowest specification that will play your application.  A typical specification would include

Operating system
Clock speed of CPU
Hard drive space
Optical drive type
Sound card  configuration
Video card configuration
Screen resolution
Internet access

Instructions for using the application and sources of support also need to be included.  For example

Insert into DVD drive
If auto run does not work navigate to “game” folder
Left double click on game icon
How to write instructions for busy, grouchy people.


Is it all your own work? Any multimedia application must take into account the Copyright, Designs and Patents Act. The creator of a multimedia application must ensure that all appropriate licences and permissions have been obtained for their particular purposes.

General copyright issues
ver 12/5/6 cb

Joint Evaluation process

March 18, 2009


Content & interface design

February 25, 2009


Initial Design Evaluation

December 9, 2008

Aspects of your design that you could discuss with others for evaluating your intial interface design

  • Visual Appeal – first impression?
  • Emotional response – how do they feel about it?
  • Cultural links – does it remind them of anything/association?
  • Accessibility – colour/legibility/functions
  • Imaging Basics

    November 11, 2008


    Digital Imaging Basics



    A digital image is made up from a grid of pixels also known as picture elements. Every pixel is square in shape and is the same size. To create the image they are positioned in rows and columns to form a grid.  Each pixel can be assigned a specific colour value, however, there is no variation in colour or brightness across a pixel.

    Image quality is directly related to aspects such as

    • Number of pixels used to create the image.
    • The size of the pixels.
    • The number of tones or colours available for a pixel to use.

    Images represented by a grid of pixels are also known as raster or bitmap graphics.


    3×3 grid



    Colour models

    Colour models are a formal means of describing colours using numerical values or colour components.

    There are different types of colour models for different types of applications.

    The RGB colour model is useful for computer graphics as it works in a similar manner to your eye.  It is based on the 3 primary colours.


    These are mixed together to produce the desired colour.  This is known as an additive colour model. All the colours of the spectrum can be created by mixing red green and blue light together in different proportions . 

    When red green and blue are mixed together in equal amounts they produce white light.

    The CMYK model is used in the print industry and uses the colours cyan, magenta, yellow and black. 

    It is known as a subtractive colour model where some wavelengths of light are absorbed whilst some are reflected.



    Cyan, magenta, yellow & Key (Black)




    RGB Channels & Bit Depth

    For computer display purposes a pixel can be regarded as having a red, green and blue channel.

    Each pixel is typically allocated 24 bits of memory split into 8 bits for each red, green and blue channel. This is known as the colour depth (or more commonly bit depth) of the image.  A 24 bit image (8 bits x 3 channels) will usually produce a good quality colour image.  This gives 256 possible values for each colour channel which, when mixed together, means that approximately 16.7 million possible colours variations could be displayed by a pixel.

    RGB channels R G B
    Red 255 0 0
    Green 0 255 0
    Blue 0 0 255
    Cyan 0 255 255
    Magenta 255 0 255
    Yellow 255 255 0
    Black 0 0 0
    White 255 255 255
    Mid grey 127 127 127

    Note that other bit depths are possible depending on the image quality and file sizes that you want to work with.  For example, images of 48 bit depth can be created for high end work where each channel is assigned 16 bits of memory. 

    200px-colourshadingColour wheel 

    Hue Saturation & Brightness

    The terms hue, saturation and brightness can be used to describe three basic characteristics of colour.

    Hue The name of the colour.  Can be precisely defined by its location as a angle on the standard colour wheel. 
    Saturation Refers to the intensity of a specific hue. It describes how pure the colour is.  For example if red is mixed with grey it is still red, but is less saturated.  Saturation increases moving from the centre of a standard colour wheel. 
    Brightness Is the relative perception of lightness or darkness of a colour.  In more technical terms it can be regarded as mean of the RGB colour coordinates in the RGB colour space.

    Also known as the HSV colour space it can be a useful alternative to the RGB and CMYK colour models as it describes colour using terms that are more familiar to humans.









    HSV colour model


    File formats

    The data for an image file can be stored in a large number of different formats. Compared with text digital images can create large files sizes and large amounts of computer memory can be needed to display, store or print an image. Many file formats a use different techniques to reduce the file size.  This is commonly known as compression. In addition to this each format has its own set of benefits and drawbacks which lend themselves to different applications.

    JPEG Pronounced Jay-Peg, it is an industry wide standard for compressing photographs. It is a “lossy compression” where different levels of compression can be applied with a trade off between size and image quality. Stands for Joint Photographic Experts Group 
    TIFF Tagged Image File Format. Commonly used in the print industry for raster graphics.  Is a lossless compression format.  Can handle multiple images and data within a file. 
    PNG Portable Network Graphics is a lossless format design to replace and improve upon the GIF format.  Becoming common on web pages. 
    PSD Adobe Photoshop file format.  Useful for keeping a master file, especially when using layers.


    Describes the level of detail within an image.  The higher the resolution the greater the image detail.  The greater the number of pixels that are used to create the image at the scanning or capture stage the better the quality, or resolution, of the image.  Note that file size also increases as resolution increases! Common ways to describe resolution include

    • Pixel rows times pixel columns i.e. 800 x 600
    • Pixel rows and columns multiplied together i.e. 1 Megapixel
    • Pixels per unit area i.e. pixels per inch or ppi


    Say a 1 inch square image is scanned at a resolution of 10 ppi.

    The image will be described using a 10 x 10 pixel grid giving 100 pixels in total.  When displayed at same size on screen each pixel will measure 1/10 of an inch.

    If the same image is scanned at 20 ppi we get a 20 x 20 grid of pixels where the image is made up of 400 pixels each measuring 1/20 of an inch.

    And so resolution (and image quality) can be increased by increasing the resolution. 

    Resolution at input is usually governed by the resolution of the output device such as a screen or printer.  Say, if the scan resolution exceeds the resolution required by the printer to produce its best quality output then the extra resolution is wasted.  

    A pixel has no fixed size, its size is dependent on the output size of the image.

    Once you have captured your image the number of pixels remains fixed.  For example, say you scan a 3X2 inch image at 100 ppi. This give you an image that measures 300 x 200 pixels.  If you were to increase the size of the image to 6 x 4 inches you will effectively reduce the resolution to 50 ppi This is because the same number of pixels are being used to display a larger version of the image, so they also have to get bigger. 

    As you increasingly reduce the resolution of an image (by increasing its size) the pixels will start to become visible and the image is said to be pixelated.

    For a hardcopy output printers transfer ink onto the paper as dots not squares like pixels.  This is defined as dots per inch dpi.  Many more dots are required to print an image than pixels to display it on a screen.  As a rough guide divide printer output resolution by 3 to get the optimum input resolution say for a scanner.



    cb ver 0206