Designing for Interactive User Interfaces

download Designing for Interactive User Interfaces

of 53

  • date post

    11-Aug-2014
  • Category

    Design

  • view

    7.123
  • download

    3

Embed Size (px)

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

  • 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
  • Apps are amazing. Gone are the days when we were passively fed content. Now we participate.
  • 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
  • What will we talk about today?
  • 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
  • Designing an app from scratch
  • Designing an app from scratch In todays 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 products goals and supports the UIs design functionality. ACCOMPANYING NOTES
  • CASE STUDY 1: STEREOPUBLIC
  • CASE STUDY 1: STEREOPUBLIC
  • CASE STUDY 1: STEREOPUBLIC
  • CASE STUDY 1: STEREOPUBLIC
  • Designing for an existing brand; product or service
  • 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 dont need to produce a new visual identity, it does raise its 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
  • CASE STUDY 2: THE WHEATSHEAF HOTEL
  • CASE STUDY 2: THE WHEATSHEAF HOTEL
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • What does it do?
  • 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 its user? How do we ensure the user clearly understands what the UI is designed to achieve? What is its 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
  • Who is it for?
  • 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
  • What goes in it?
  • What goes in it? We are talking about content and planning for it! Words and pictures. What else? Video? Audio? ACCOMPANYING NOTES
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • 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
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • 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 its 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. Its also a good way of ensuring ACCOMPANYING NOTES
  • Nav 1 BRAND Nav 2 Nav 3
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • 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
  • 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
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • Wireframe + Style Tile = User Interface
  • Organisation Membership Placemaking
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • 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
  • 1. Defining the brief 2. Site map 3. Wire framing 4. Style Tile 5. Design 6. Handover 7. Testing and Quality Assurance
  • 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
  • ... and then, finally...
  • 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
  • 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 reso