Post on 21-Apr-2017
transcript
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
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 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
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 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
CASE STUDY 2: THE WHEATSHEAF HOTEL
CASE STUDY 2: THE WHEATSHEAF HOTEL
1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. 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 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
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 brief2. Site map3. Wire framing4. Style Tile5. Design6. 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 brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance
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
Nav 1
BRAND
Nav 2
Nav 3
1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance
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
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
1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance
Wireframe + Style Tile = User Interface
Organisation
Membership
Placemaking
1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance
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
1. Defining the brief2. Site map3. Wire framing4. Style Tile5. Design6. Handover 7. Testing and Quality Assurance
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
... 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 sizesTRAPS 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 resources on accessibility
AccessibilityTRAPS FOR YOUNG PLAYERS
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
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