Designing for Interactive User Interfaces

53

description

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

Transcript of Designing for Interactive User Interfaces

Page 1: Designing for Interactive User Interfaces
Page 2: Designing for Interactive User Interfaces

Creative Director at Freerange FutureOver 20 years industry experience designing for boutique studios, ad agencies,

magazine publishing and online companiesShe is not a digital native

Page 3: Designing for Interactive User Interfaces
Page 4: Designing for Interactive User Interfaces

Apps are amazing.

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

Page 5: Designing for Interactive User Interfaces
Page 6: Designing for Interactive User Interfaces

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

Page 7: Designing for Interactive User Interfaces

What will we talk about today?

Page 8: Designing for Interactive User Interfaces

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

Page 9: Designing for Interactive User Interfaces

Designing an app from scratch

Page 10: Designing for Interactive User Interfaces

Designing an app from scratchIn 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

Page 11: Designing for Interactive User Interfaces

CASE STUDY 1: STEREOPUBLIC

Page 12: Designing for Interactive User Interfaces

CASE STUDY 1: STEREOPUBLIC

Page 13: Designing for Interactive User Interfaces

CASE STUDY 1: STEREOPUBLIC

Page 14: Designing for Interactive User Interfaces

CASE STUDY 1: STEREOPUBLIC

Page 15: Designing for Interactive User Interfaces
Page 16: Designing for Interactive User Interfaces

Designing for an existing brand; product or service

Page 17: Designing for Interactive User Interfaces

Designing an existing brand; product or serviceOn 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

Page 18: Designing for Interactive User Interfaces

CASE STUDY 2: THE WHEATSHEAF HOTEL

Page 19: Designing for Interactive User Interfaces
Page 20: Designing for Interactive User Interfaces

CASE STUDY 2: THE WHEATSHEAF HOTEL

Page 21: Designing for Interactive User Interfaces
Page 22: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 23: Designing for Interactive User Interfaces

What does it do?

Page 24: Designing for Interactive User Interfaces

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

Page 25: Designing for Interactive User Interfaces

Who is it for?

Page 26: Designing for Interactive User Interfaces

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

Page 27: Designing for Interactive User Interfaces

What goes in it?

Page 28: Designing for Interactive User Interfaces

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

ACCOMPANYING NOTES

Page 29: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 30: Designing for Interactive User Interfaces

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

Page 31: Designing for Interactive User Interfaces
Page 32: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 33: Designing for Interactive User Interfaces

Wire FramingBefore 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

Page 34: Designing for Interactive User Interfaces

Nav 1

BRAND

Nav 2

Nav 3

Page 35: Designing for Interactive User Interfaces
Page 36: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 37: Designing for Interactive User Interfaces

Style TileDeveloping 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

Page 38: Designing for Interactive User Interfaces

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 IDA network for People in Place

ENEWS SIGN UP

SOCIAL MEDIA

Page 39: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 40: Designing for Interactive User Interfaces

Wireframe + Style Tile = User Interface

Page 41: Designing for Interactive User Interfaces

Organisation

Membership

Placemaking

Page 42: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 43: Designing for Interactive User Interfaces

HandoverTalking 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

Page 44: Designing for Interactive User Interfaces

1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance

Page 45: Designing for Interactive User Interfaces

Testing and Quality AssuranceIroning 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

Page 46: Designing for Interactive User Interfaces

... and then, finally...

Page 47: Designing for Interactive User Interfaces
Page 48: Designing for Interactive User Interfaces
Page 49: Designing for Interactive User Interfaces

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 sizesTRAPS FOR YOUNG PLAYERS

Page 50: Designing for Interactive User Interfaces

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

AccessibilityTRAPS FOR YOUNG PLAYERS

Page 51: Designing for Interactive User Interfaces

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

FontsTRAPS FOR YOUNG PLAYERS

Page 52: Designing for Interactive User Interfaces

Operating Systemswww.developer.apple.com/library/ios/navigation/

Accessibilitywww.w3.org/2014/04/mobile-web-app-state/

www.rsb.org.au/Accessibility/Accessible_Website_Design

Fontswww.iosfonts.com

Resources

Page 53: Designing for Interactive User Interfaces