With 120 attendees our workshop App Design, organized by AFT Leuven, was a big success. Dennis Covent & Frederic Berghmans talked about their daily job: designing mobile apps at iCapps. An inspiring journey.

1. www.icapps.com

2. About
@denniscovent @freberghmans
www.icapps.com

3. About
Since 2009
Over 30 consultants
Focus on mobile
www.icapps.com

4. Our services

5. Our services
Define
App
Life
Cycle
Strategy, Concept & Design
Native Apps
Build
Web Apps
API & Back-end
Infrastructure
Support Monitor Service
Run

6. References

7. Finance & Insurance
KBC Securities (Bolero)
Isabel
KBC
Record Bank
Argenta
KBC Insurance
BNP Paribas Fortis
Belfius
Doccle

8. Telecom
Mobile Vikings
Telenet

9. Pharma
BARD
> 700 users worldwide.

10. Transport
NMBS Logistics
Dispatch!
Eurosprinters
RailTime

11. Entertainment
Tomorrowland
Watchout!
1Limburg
Van In
Fleet Europe
Solo Open Kitchen

12. Featured

13. Mobile ticketing service
Kinepolis
Passbook
Over 40.000 tickets
per month.

14. iBeacon
Tokheim
A new class of low- powered,
low-cost bluetooth
transmitters.

15. Investment platform
Bolero
The online trading platform
of KBC Securities, now also
on mobile.

16. Mobile banking
Isabel
Multi banking done right.

17. Design?

23. Design
is a method of
problem solving

24. Dieter Rams’ Ten Principles of
“Good Design”

25. Concept & Design

26. Iterative workshops
Analyze Concept Design
Market Research
User Profiles
Value Propositions
Functionalities
Unique Concepts
Wireframes
Product Branding
Interactive User Design
User Experience Testing
Define

27. Customer
Product Owner
iCapps
Iterative workshops
Analyze Concept
Functional Analyst
Understand your
business.
- Workshops with stakeholders
- Market research & metrics
- Analyze competitors
Map your target
users.
Defining the different user profiles.
Define the right
value propositions.
Where business, strategy and users
meet.

28. Customer
Product Owner
iCapps
Iterative workshops
Concept Design
Functionalities
Functional Analyst
Define the key features of your product.
Creative battle
Translate the functionalities in unique
concepts.
Wireframes
A rough sketch of your product.
UX Expert
Analyze

29. Customer
Product Owner
iCapps
Iterative workshops
Design Development
UX Expert
Product Branding
Shape the desired look & feel
summarized into the product style
guide.
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

30. IOS Human Interface
Guidelines
UI Design Basics

31. Designing for iOS
Thema’s iOS
1. Respecteren van inhoud
2. Duidelijkheid
3. Diepte

32. Designing for iOS
1. Respecteren van inhoud

33. Designing for iOS
2. Duidelijkheid

34. Designing for iOS
2. Duidelijkheid

35. Designing for iOS
3. Diepte

36. Designing for iOS
Manier van aanpak:
- Core functionaliteit primeert altijd
- Daarna iOS Thema’s
- Verschillende toestellen en schermen

37. iOS App Anatomy

38. Adaptivity & Layout
Autolayout

39. Adaptivity & Layout

40. Adaptivity & Layout

41. Adaptivity & Layout

42. Starting Stopping

43. Navigation

44. Modal Contexts

45. Interactivity & feedback

46. Interactivity & feedback

47. Animation

48. Animation

49. Animation

50. Branding

51. Color and Typography
Kleurbeheer
- Geheel
- Verschillende Contexts
- kleurblind
- interactivity and state
- Afleiding

52. Color and Typography
Handige links
www.fontsinuse.com
www.whatfontapp.com

53. Icons & Graphics
by Ramotion

54. Icons & Graphics
weatherornot.io

55. Integrate with iOS
standaardelementen juist gebruiken

56. Design for Large Screen Smartphones
Designing for Thumbs

57. Designing for Thumbs

58. Designing for Thumbs

59. Designing for Thumbs

60. Hamburger Menu

61. Material Design
Google
www.google.com/design/spec/material-design/

62. Material Design
1. Material is een metafoor

63. Material Design
2. Oppervlakten zijn natuurlijk en intuïtief

64. Material Design
3. Dimensies maken interactie mogelijk

65. Material Design
4. één aanpasbaar design

66. Material Design
5. Content is Bold (“Brutaal”) grafisch en voorbedacht

67. Material Design
6. kleur oppervlakte en iconografie benadrukken acties

68. Material Design
6. kleur oppervlakte en iconografie benadrukken acties

69. Material Design
6. kleur oppervlakte en iconografie benadrukken acties

70. Material Design
7. Verandering komt van gebruiker

71. Material Design
8. Animaties staan niet op zichzelf

72. Material Design
9. Beweging bied betekenis

73. Design for other screens
smartwatches
by Jakub Antalík

74. App Design Workshop
Photoshop
http://goo.gl/Wp5yne
Sketch
http://goo.gl/WPpgNC

75. Thank you
@denniscovent @freberghmans
www.icapps.com