UX, Wireframe, Stencil, OmniGraffle – Créer une bibliothèque (stencil) OmniGraffle pour faire des maquettes des écrans Google TV

Après avoir conçu mollement une librairie pour Axure pour faire du wireframe des écrans d’une application de Google TV, on se devait de porter la chose sur un autre outil de wireframe à savoir OmniGraffle en attendant Balsamiq qui est aussi sur les starting-blocks ! De fait on a mis au banc d’essai quelques-uns de très nombreux outils de wireframing, mine de rien, OmniGraffle, Axure, Balsamiq !

A la différence de deux autres logiciels, OmniGraffle offre une synergie possible avec Illustrator, comme Flash en son temps ! C’est finalement la métamorphose de graphiste à UX designer : en créant des objets dans Illustrator, il est possible de les importer dans OmniGraffle au format PDF. OmniGraffle récupère alors les PDF tout en conservant le caractère vectorisé des objets ainsi crées sous Illustrator.

Toutefois, nous n’avons absolument procédé de la sorte dans l’article suivant. Il existe en effet mille et une façons de d’aborder le choix du logiciel pour faire des wireframes, Powerpoint, Photoshop ou Fireworks peuvent faire l’affaire ! Wireframe, it ain't rocket science comme disent les pragmatiques américains, on est donc en droit d’utiliser le logiciel de son choix du moment que l’on pense produit fini et UX, avec une petite dose de collaboration aussi, Agile là encore. Mieux même LeanUX, syncrétisme astucieux entre l’orientation UX c’est à dire la nécessité de délivrer une expérience, une émotion mais dans un cycle humainement et financièrement tenable.

Source : Lire au sujet du Lean UX, l’excellente expertise de Jeff Gothelf qui en a même fait un livre.
http://www.jeffgothelf.com/blog/

Pour plus d’information sur l’exigence de penser Produit Fini voir l’article de ce blog sur Agile et Scrum :

• Agile, Scrum, Méthodologie – Un tour d’horizon rapide sur la méthode agile
  http://social.hecube.net/2013/03/agile-scrum-methodologie-un-tour-dhorizon-rapide-sur-la-methode-agile/

La marche à suivre pour créer une librairie .gstencil

Créer ces objets sous OmniGraffle ou… Illustrator via un export PDF

Le mieux est de grouper vos éléments pour que les utilisateurs puissent charger un écran finalisé c’est souvent le plus intuitif… enfin c’est vous qui voyez.

Installer votre librairie .gstencil

En double-cliquant sur le fichier .gstencil, vous allez lancer l’installation de la librairie OmniGraffle dédié à la création d’écran Google TV que nous venons d’exporter via un fichier OmniGraffle standard.

Une fois installée, les différents objets/écrans de la librairie sont disponibles dans OmniGraffle

Note : Les fichiers .gstencil comme notre librairie viennent s’installer à cet endroit /Users/votre-nom-d-utilisateur/Library/Application Support/The Omni Group/OmniGraffle/Stencils sur un Mac.

La même librairie Google TV au format .gstencil mais sous Balsamiq

La version “à la hache” de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser OmniGraffle Pro 5.4.2 ou +. Télécharger OmniGraffle_Google-TV-buttons-v1_stencil_4.zip

En savoir plus

• UX, Wireframe, Widget Library, Axure – Créer une bibliothèque Widget Library Axure pour faire des maquettes des écrans Google TV
  http://social.hecube.net/2013/03/ux-wireframe-widget-library-axure-creer-une-bibliotheque-widget-library-axure-pour-faire-des-maquettes-des-ecrans-google-tv/
• Wireframes in Omnigraffle 5 (la synergie Illustrator & OmniGraffle)
  http://pathfindersoftware.com/2009/04/wireframes-in-omnigraffle-5/
• Awesome OmniGraffle stencils | Graffletopia (la sainte chapelle du stencils ou la Mecque du stencils)
  https://www.graffletopia.com/