Designing for Interactive User Interfaces
0 likes558 views
The document discusses the process of designing user interfaces (UI) for mobile applications, emphasizing the importance of creating both a functional and visually engaging experience. It covers various stages of the design process, including defining the brief, site mapping, wireframing, style tile creation, and testing, while also addressing challenges such as designing for existing brands and diverse audience needs. Additionally, it highlights the significance of accessibility in UI design and provides resources for best practices in the industry.
Designing for Interactive User Interfaces
- 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
- 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