A presentation by Freerange Future on Interactive UI design for 3rd year Visual Communication students at the University of South Australia. www.freerangefuture.com

2. Creative Director at Freerange Future
Over 20 years industry experience designing for boutique studios, ad agencies,
magazine publishing and online companies
She is not a digital native

4. Apps are amazing.
Gone are the days when we were passively fed content.
Now we participate.

6. ACCOMPANYING NOTES Technology
What can we achieve with Interactive UI?
• Taking photos
• Making video
• GEO location
• Social media; making richer friendships
• Push notifications
• Think about what can happen when you tap or swipe
• The power of an Easter Egg

7. What will we talk about today?

8. What will we talk about today?
• Case Studies: idea app vs brand extension
• PROCESS
• Defining the brief
• Site mapping
• Wireframing
• Style tile
• Design
• Traps for young players
ACCOMPANYING NOTES

9. Designing an app from scratch

10. Designing an app from scratch
In today’s world, often users will be introduced to a brand for
the very first time via the online mobile experience.
In these instances we are working from scratch.
Not only must we develop a strategically sound and logical
UI experience, but also an engaging visual identity that
effectively communicates the product’s goals and supports
the UI’s design functionality.
ACCOMPANYING NOTES

11. CASE STUDY 1: STEREOPUBLIC

12. CASE STUDY 1: STEREOPUBLIC

13. CASE STUDY 1: STEREOPUBLIC

14. CASE STUDY 1: STEREOPUBLIC

16. Designing for an
existing brand; product or service

17. Designing an existing brand;
product or service
On the other hand, often we will need to design a UI for a
brand or product that already has a visual identity.
Although in these cases we don’t need to produce a new
visual identity, it does raise it’s own challenges.
How do we produce a UI that not only honors the original
intent of the existing brand but actually improves the way
the end user engages with it? How can a User Interface
design add value to the brand experience?
Who is most likely going to be
ACCOMPANYING NOTES

18. CASE STUDY 2: THE WHEATSHEAF HOTEL

20. CASE STUDY 2: THE WHEATSHEAF HOTEL

22. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

23. What does it do?

24. What does it do?
• Does it make life easier? Is it purely for fun? Does it build
communities? Is it a learning aid? Does it get peeps
through the front doors of a business?
• What does the UI / Application set out to achieve for
it’s user?
•How do we ensure the user clearly understands what
the UI is designed to achieve?
• What is it’s end goal and what is the easiest way to
get there?
• In essence, we are designing a wayfinding system – similar
to one you might find in a large public building. How do
we get people to where they want to go as smoothly and
efficiently as possible?
ACCOMPANYING NOTES

25. Who is it for?

26. Who is it for?
• Who is most likely going to be using it? What is intended
audience?
• Does the intended audience really cover everybody that
will be using it?
• What allowances to we need to make for the end user?
• Your audience greatly affects how you approach your
design –
say, for example, you are designing a fitness app:
What kind of requirements can we assume there is for a
fitness app for people aged over 60 and for people aged
under 30?
What will each age group expect from the UI experience
and how dramatically do they differ?
ACCOMPANYING NOTES

27. What goes in it?

28. What goes in it?
We are talking about content and planning for it!
Words and pictures. What else? Video? Audio?
ACCOMPANYING NOTES

29. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

30. Site Map
• A site map is used to organise your content and as a way
of defining how the user will navigate their way throughout
the interface.
• The site map is your structural guidebook and will inform
what pages you will need design and how they will need to
function.
ACCOMPANYING NOTES

32. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

33. Wire Framing
Before we begin the design process we put together a series
of ‘wireframes’ that outline loosely what each page of the
interface will contain and it’s basic placement on the page.
This helps us understand how the basic visual hierarchy and
structure will need to work at each stage of the site without
getting too bogged down with the nitty gritty style details.
Additionally, it is a quick way of working out how the visual
structure might work across a variety of screen sizes.
It’s also a good way of ensuring
ACCOMPANYING NOTES

34. Nav 1
BRAND
Nav 2
Nav 3

36. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

37. Style Tile
Developing a palette from which your design can be
developed. Consider:
• Colours
• Fonts
• Typographic hierarchy styles
• Button Styles
• Icons
• Types of imagery – photos? Illustrations? other graphics?
ACCOMPANYING NOTES

38. FONTS
Top Navigation: Proxima Nova Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas
placerat arcu. Maecenas eget augue ut urna aliquam ultrices. Maecenas
vel ultricies orci, at molestie mauris. Sed vel elit imperdiet, tristique nisl vel,
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas egestas placerat
arcu. Maecenas eget augue
ut urna aliquam ultrices.
Headlines: Proxima Nova Extra Bold
Body copy, Proxima Nova Regular
Pull out quote: Proxima Nova Light
COLOURS
ICONS AND ILLUSTRATIVE STYLE
ABOUT | MISSION | HISTORY | STAFF
What is Place making?
Organisation
A network for
people in place
Membership
Be a place
leader
Placemaking
Space +
idea = Place
PLACE LEADERS ID
A network for People in Place
ENEWS SIGN UP
SOCIAL MEDIA

39. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

40. Wireframe + Style Tile = User Interface

41. Organisation
Membership
Placemaking

42. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

43. Handover
Talking to the tech team. A close intimate relationship
with your web developers is recommended from the start
throughout the course of the project. Handover is when we
pass over the files and the build can begin.
ACCOMPANYING NOTES

44. 1. Defining the brief
2. Site map
3. Wire framing
4. Style Tile
5. Design
6. Handover
7. Testing and Quality Assurance

45. Testing and Quality Assurance
Ironing out the creases. Often the first chance you will have
to see your app / UI in ‘real life’.
You will need to make adjustments 99.9% of the time!
ACCOMPANYING NOTES

46. ... and then, finally...

49. There are 2 main digital distributors the App Store (for the Apple iOS)
and Google Play (for Android). Both systems use different browser sizes
as well as a range of other differing parameters.
Both distributors supply best practice resources online.
It is worthwhile acquainting yourself with both.
Operating Systems and screen sizes
TRAPS FOR YOUNG PLAYERS

50. Just as all new public buildings are fitted with wheelchair ramps, it is also
becoming increasingly important to approach UI design with the visually
impaired in mind. Colour contrast for type, minimum font sizes and
standard button sizes are all mandatory considerations.
Royal Society for the Blind, Vision Australia and
W3C (World Wide Web Consortium)
all supply great and up to date resources on accessibility
Accessibility
TRAPS FOR YOUNG PLAYERS

51. When designing for online you must ensure the fonts you are using are
websafe, or come in a Web Font format.
With this in mind the licenses for many non-system fonts are very
expensive (often upwards of $10,000!)
When in doubt it is best practice to use system fonts.
A list of which can be found at www.iosfonts.com
Fonts
TRAPS FOR YOUNG PLAYERS

52. Operating Systems
www.developer.apple.com/library/ios/navigation/
Accessibility
www.w3.org/2014/04/mobile-web-app-state/
www.rsb.org.au/Accessibility/Accessible_Website_Design
Fonts
www.iosfonts.com
Resources