course notes 2019/20

interface design illustration

interface design

Feb 4th 2020

How do you design an interface which is not only easy to use, works well across all screens and is aesthetically appealing as well?

key unlocking lock
‘how keys work’ via tweet from @Cennydd

Like a key to open a lock, your UI needs to give access to the content without bothering the user with the complexities which might lie beneath :) The commonly uttered phrase “good design is invisible” applies perfectly to the design of interfaces. For example, if no one notices your site menu and happily browses the site, you have achieved your goal of a user-friendly and accessible navigation.

Before you fall into the usual pattern of doing what’s popular – it will serve you well to consider all aspects of the interface to be designed, for starters:

  • who will be using it? – your target group
  • what is their motivation and goal? – user journey
  • how will they be accessing it? – device / connection / app

form still follows function

case studies mentioned:

UI/UX expertise

Nielsen Norman Group

Practicing, researching, and teaching user experience for over 20 years – NN/g was founded by Don Norman and Jakob Nielsen. Highly respected in their fields, we can learn much by exploring their site, read articles and watch the videos.

related reading

interface inventory

Your work on interfaces will come in various shapes and sizes – you might start from scratch, work on a relatively small project – or be tasked with revising an existing system. Brad Frost’s article interface inventory highlights how vital consistency is for a successful UI design and how an inventory can help the process of a redesign.

Your task is to create an interface inventory of a site of your choosing. Capture the UI elements of the site via screenshots and collect them into categories. You can create your own document, or use Brad’s templates as starting point – up to you.

The goal is to study your selected site’s UI design and check on consistency of all aspects such as wording and phrasing for microcopy as much as spacing, typesetting and colour of interactive elements.

This exercise should be a useful trial of how you might approach the UI design on your final major project’s website :)

Train your eye for detail!


Comments are closed.