Balsamiq, Mockups, Mobile – Faire un mock-up ou une maquette rapide des écrans d’une application mobile avec Balsamiq
Réaliser de manière agile, intuitive et réactive les différentes interfaces d’une future application mobile ou une application web, voilà la promesse tenue par des logiciels de “mock-up” comme OmniGraffle, Balsamiq, Axure. Dans cet article, on a choisi pour designer rapidement les services d’une application mobile, le logiciel Balsamiq qui fournit une abondante iconographie pour réaliser les écrans de mobile.
On avait à peu de choses près tenté le même exercice avec Axure dans un article précèdent mais dans le cas présent, il s’agit de réaliser un plus grand nombre d’écrans en un minimum de temps afin donner à tous les parties prenantes du projet mobile, une vue synthétique rapide et aisément modifiable. Dans ce cas précis, Balsamiq se révèle éminemment efficace.
Pour voir le comparatif avec Axure, voici le lien vers l’article.
- Wireframes, prototypes interactifs, prototypage, UX – Introduction à Axure RP 6
http://social.hecube.net/2012/10/wireframes-prototypes-interactifs-prototypage-ux-introduction-a-axure-rp-6/
Trouver et charger les bons fichiers
Il est important de trouver les bonnes ressources .bmml pour maquetter rapidement et tirer profit au maximum des visuels et objets graphiques disponibles sous Balsamiq. Pour réaliser les écrans de notre application, nous avons utiliser 4 fichiers .bmml principaux.
- Android 4 Controls.bmml
- Android Controls.bmml
- HTC Desire, v.2.bmml
- HTC Desire.bmml
Source : https://mockupstogo.mybalsamiq.com/projects
Les écrans de notre application
Sur les écrans figurent des post-it qui permettent de donner des explications complémentaires aux écrans aux-mêmes, ce qui compense avantageusement la nécessité de faire parfois tous les ecrans avec des variations infimes pour bien détailler l’expérience utilisateur.
En savoir plus
Ressources mockup et wireframes pour Android, iOS
- iPad GUI PSD (Retina Display)
http://www.teehanlax.com/downloads/ipad-gui-psd-retina-display/ - Inspirational and Useful Resources for App Designers
http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html - iPad Axure Widget Library
http://www.kreativr.de/ipad-axure-widget-library/ - Creating Great iPhone and iPad Mockups
http://www.iosdevnotes.com/2011/03/creating-great-iphone-ipad-mockups/ - OmniGraffle UX Template
http://konigi.com/tools/omnigraffle-ux-template - iOS Design Stencils for OmniGraffle
http://www.morford.org/iphoneosdesignstencil/ - Awesome OmniGraffle stencils | Graffletopia
http://www.graffletopia.com/ - Wireframes Magazine
http://wireframes.linowski.ca/
Exemples, modèles et bonnes pratiques pour des application Android
- 15 beautiful Android app designs
http://www.creativebloq.com/app-design/15-beautiful-android-app-ui-designs-11121271 - Devices and Displays
http://developer.android.com/design/style/devices-displays.html - Metrics and Grids
http://developer.android.com/design/style/metrics-grids.html - 40+ Beautiful Android Application Interfaces and Icons
http://android.appstorm.net/roundups/40-beautiful-android-application-interfaces-and-icons/ - Designing For Android
http://coding.smashingmagazine.com/2011/06/30/designing-for-android/ - Outil de prévisualisation pour mobile websites, design mockups, and local HTML on Mac or PC.
http://www.springbox.com/mobilizer/
