iCapps workshop App Design - AFT Leuven
75
www.icapps.com
Transcript of iCapps workshop App Design - AFT Leuven
Our services
Define
App
Life
Cycle
Native Apps
Strategy, Concept & Design
BuildWeb Apps
API & Back-end
Infrastructure
Support Monitor Service
Run
Our services
References
KBC Securities (Bolero)
Isabel
KBC
Record Bank
Argenta
KBC Insurance
BNP Paribas Fortis
Belfius
Doccle
Finance & Insurance
Mobile Vikings
Telenet
Telecom
BARD
> 700 users worldwide.
Pharma
NMBS Logistics
Dispatch!
Eurosprinters
RailTime
Transport
Tomorrowland
Watchout!
1Limburg
Van In
Fleet Europe
Solo Open Kitchen
Entertainment
Featured
Passbook
Kinepolis
Over 40.000 tickets
per month.
Mobile ticketing service
A new class of low- powered,
low-cost bluetooth
transmitters.
Tokheim
iBeacon
The online trading platform
of KBC Securities, now also
on mobile.
Bolero
Investment platform
Isabel
Mobile banking
Multi banking done right.
Design?
Design
is a method of
problem solving
Dieter Rams’ Ten Principles of
“Good Design”
Concept & Design
Iterative workshops
Analyze Concept Design
Market Research
User Profiles
Value Propositions
Functionalities
Unique Concepts
Wireframes
Product Branding
Interactive User Design
User Experience Testing
Define
Iterative workshops
Analyze Concept
Understand your
business.
- Workshops with stakeholders
- Market research & metrics
- Analyze competitors
Customer
Product Owner
iCapps
Functional Analyst
Map your target
users.
Defining the different user profiles.
Define the right
value propositions.
Where business, strategy and users
meet.
Iterative workshops
Concept Design
Functionalities
Define the key features of your product.
Customer
Product Owner
iCapps
Functional Analyst
Creative battle
Translate the functionalities in unique
concepts.
Wireframes
A rough sketch of your product.
UX Expert
Analyze
Iterative workshops
Design Development
Product Branding
Shape the desired look & feel
summarized into the product style
guide.
Customer
Product Owner
iCapps
UX Expert
Interactive User
Interface
Design a pixel perfect UI including
interactions, animations, etc.
User Experience
Testing
End users using your product, giving
valuable feedback.
UI Designer
Concept
End User
Test user
IOS Human Interface
Guidelines
UI Design Basics
Designing for iOS
Thema’s iOS
1. Respecteren van inhoud
2. Duidelijkheid
3. Diepte
Designing for iOS
1. Respecteren van inhoud
Designing for iOS
2. Duidelijkheid
Designing for iOS
2. Duidelijkheid
Designing for iOS
3. Diepte
Designing for iOS
Manier van aanpak:
- Core functionaliteit primeert altijd
- Daarna iOS Thema’s
- Verschillende toestellen en schermen
iOS App Anatomy
Adaptivity & Layout
Autolayout
Adaptivity & Layout
Adaptivity & Layout
Adaptivity & Layout
Starting Stopping
Navigation
Modal Contexts
Interactivity & feedback
Interactivity & feedback
Animation
Animation
Animation
Branding
Color and Typography
Kleurbeheer
- Geheel
- Verschillende Contexts
- kleurblind
- interactivity and state
- Afleiding
Color and Typography
Handige links
www.fontsinuse.com
www.whatfontapp.com
Icons & Graphics
by Ramotion
Icons & Graphics
weatherornot.io
Integrate with iOS
standaardelementen juist gebruiken
Design for Large Screen Smartphones
Designing for Thumbs
Designing for Thumbs
Designing for Thumbs
Designing for Thumbs
Hamburger Menu
Material DesignGoogle
www.google.com/design/spec/material-design/
Material Design
1. Material is een metafoor
Material Design
2. Oppervlakten zijn natuurlijk en intuïtief
Material Design
3. Dimensies maken interactie mogelijk
Material Design
4. één aanpasbaar design
Material Design
5. Content is Bold (“Brutaal”) grafisch en voorbedacht
Material Design
6. kleur oppervlakte en iconografie benadrukken acties
Material Design
6. kleur oppervlakte en iconografie benadrukken acties
Material Design
6. kleur oppervlakte en iconografie benadrukken acties
Material Design
7. Verandering komt van gebruiker
Material Design
8. Animaties staan niet op zichzelf
Material Design
9. Beweging bied betekenis
App Design Workshop
http://goo.gl/Wp5yne
Photoshop
http://goo.gl/WPpgNC
Sketch
