Configurer Illustrator pour créer les wireframes d’un site Internet

Publié le 22 juin 09 à 08:34 | Catégorie : Design Web | 15 commentaires

Adobe Illustrator est un logiciel vraiment adapté pour concevoir des wireframes. Pour rappel, un wireframe est un document généralement en noir & blanc qui décrit l’aspect des pages principales d’un site ou d’une application web. Il ne contient aucune information visuelle (couleurs, typographie, éléments graphiques, …) dans le but de délaisser la forme et de se concentrer uniquement sur le fond.

Il s’agit d’un support de maquettage rapide, facile à créer et à modifier et qui permet de travailler sur le contenu, son agencement, la navigation, les libellés, … Il donne une très bonne vision du site à concevoir et des cas d’utilisation qu’il faudra implémenter par la suite. Je vous conseille à ce sujet cet excellent blog sur les wireframes, qui présente d’ailleurs différentes techniques.

Dans certains cas, il est même possible d’utiliser Illustrator pour la conception des wireframes, mais également de la maquette graphique. L’objectif est alors de diminuer le temps de développement en sautant l’étape de conception sur Photoshop. Cela a par exemple été le cas lorsque Hitomi Studio a créé la nouvelle boutique de Pull-In, car la charte graphique minimaliste permettait vraiment ce type d’approche.

En revanche, si l’on souhaite employer Illustrator dans cette optique, il faut configurer ce logiciel de création vectorielle pour l’adapter aux contraintes d’un environnement web et être ainsi le plus proche possible du rendu final. Voici la liste des paramétrages à effectuer :

  1. Utiliser les pixels comme unité de mesure (dans le menu Edit > Préférence > Units)
  2. Choisir une résolution de type écran de 72 ppi pour le rendu (dans le menu Effect >  Document Raster Effect Settings...)
  3. Activer la prévisualisation des pixels (dans le menu View > Pixel Preview)

Il suffit ensuite d’utiliser la fonction de sauvegarde pour le web (dans le menu File> Save for Web & Devices) et le tour est joué. Notez qu’il est toujours possible d’exporter l’ensemble du fichier vers Photoshop pour retravailler l’aspect graphique ou effectuer le découpage des images.

En tout cas, je trouve que le système de styles, la facilité à redimensionner et à déplacer n’importe quel élément et la possibilité de créer des bibliothèques de formes font d’Illustrator un outil vraiment pertinent dans le cadre de la création de wireframes. Il y a également Omnigrafle qui semble très pertinent aussi (mais il faut avoir un Mac). Et vous, quel outils utilisez-vous pour ce genre de choses ?

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 39 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

14 commentaires à propos de “Configurer Illustrator pour créer les wireframes d’un site Internet” :

  1. Bonjour,

    j’en profite pour faire la promo d’un outils de wireframe online qui propose une version de gratuite. testé et éprouvé.
    http://www.balsamiq.com/demos/mockups/Mockups.html

    alec le 22 juin 2009 à 10:07 (#1)

  2. En effet OmniGraffle sur Mac est vraiment top pour ca!

    Allogarage le 22 juin 2009 à 10:24 (#2)

  3. Etant sur Pc, j’utilise Axure, reconnu comme étant un logiciel assez performant et dédié au prototypage. Bien que payant, il permet aisément de faire des wireframes, et surtout de les animer (maquette cliquable en html), puis de générer les specs au format word. Je ne suis pas payé pour faire de la pub, mais je le trouve vraiment TRES performant ! Bon ok, je dois avouer que c’est devenu mon meilleur ami…

    Bonne journée :)

    Tanek le 22 juin 2009 à 10:35 (#3)

  4. J’utilise le plug in Pencil Sketching de Firefox, mais quand il faut faire des choses plus complexe, c’est lourd.

    Je vais essayer omnigrafle.

    senjy le 22 juin 2009 à 10:53 (#4)

  5. J’utilise Illustrator pour faire tous mes wireframes et mes maquettes graphiques d’interfaces Web depuis une bonne dizaine d’années…

    Du coup, à l’inverse, je ne perçois pas bien ce qui pousse la plupart des webdesigners à vouloir faire leurs maquettes sur Photoshop. Peut-être une question d’habitude ou de formation. Il est vrai aussi que le type de design joue dans le choix de l’outil de maquettage. Ainsi un site assez très orienté marketing (site vitrine, évènementiel, etc) méritera de pouvoir se focaliser sur les forces de Photoshop, à savoir la gestion d’effets et de composition bitmap.
    Par opposition, pour les sites plutôt applicatif (ceux que l’on a tendance à estampillé du fameux label “2.0″), Illustrator permet, à mon sens, un plus grande productivité, car le design est alors basé sur des formes simples qui ne perturbent pas l’utilisateur, permettent de mettre en avant le contenu et autorisent de réutiliser des éléments génériques d’un model de page à un autre (onglets, boites, menus… les fameux UI Patterns). Ce genre d’éléments d’interfaces sont un vrai bonheur à gérer avec Illustrator, grâce notamment aux outils qu’évoque Stéphane dans cet article. Pour moins ce sont par exemple la gestion des “symboles” et de palettes de couleurs “globales” qui font la différence.

    Peut-être qu’on peut en déduire qu’Illustrator est l’outil de maquettage privilégié pour les sites de nouvelle génération (les fameux “2.0″) ? ;-)

    Bon ce n’est peut-être pas à ce point là, mais il est certains que pas mal de Webdesigners, et d’infographistes en général, ne maîtrisent pas Illustrator, ni les principes même du design vectoriel. Ce qui joue pas mal dans le fait que Photoshop soit encore l’outil par défaut des Webdesigners…

    kossdav le 22 juin 2009 à 10:58 (#5)

  6. Pour axure, je trouve que la possibilité de faire des maquettes vivantes(clicable est interessante).
    Mais au final assez peux ressemblant a la realité, du coup nous utilisons surtout Dreamweaver.

    senjy le 22 juin 2009 à 11:00 (#6)

  7. Adobe Fireworks sans hésitation !!

    Laurent Assouad le 22 juin 2009 à 14:08 (#7)

  8. Oui, c’est vrai que Fireworks est très bien, mais il devient malheureusement assez lourd sur des maquettes très complexes…

    kossdav le 22 juin 2009 à 14:11 (#8)

  9. Pour en revenir à Balsamiq, je pense que cet outil a ouvert la voie à une nouvelle génération d’outils de prototypage. La plupart utilise la technologie Adobe Air, ce qui facilite un éventuel passage de l’application du web au desktop (et inversement).

    En vrac, on trouve maintenant FlairBuilder, iPlotz, Rapidrabb.it, ForeUI et je dois probablement en oublier.

    Chacune ont leur spécificités et sont plus ou moins axées sur une certaine étape du prototypage: Balsamiq est parfait pour des maquettes rapides et instantanées, tandis que FlairBuilder tend déjà plus vers des maquettes fonctionnelles, avec la possibilité de créer des liens entre les pages, ajouter des composants interactifs (carrousel, onglets, listes déroulantes) et un système de conditions pour afficher ou non des éléments.

    Sinon, Omnigraffle avec le Yahoo! Design Stencil Kit ou le Sketch Stencils de chez Konigi constituent également un combo assez puissant. Pour des besoins plus spécifiques (par exemple, développer une maquette pour iPhone), on peut également aller chercher d’autres composants sur Graffletopia.

    Jean-Christophe B. le 22 juin 2009 à 14:28 (#9)

  10. Utilisateur d’Axure, je trouve cet outil formidable.
    Seul regret, les bibliothèques de widgets assez “maigres” et parfois payantes.

    michael le 23 juin 2009 à 12:57 (#10)

  11. Personne n’a testé Flash Catalyst ? Qui lorsqu’il possèdera une bibliothèque de composants sera redoutable.

    Julien Dubois le 23 juin 2009 à 22:58 (#11)

  12. Flash Catalyst sans hésitation car il permet de faire un wireframe cliquable, animé avec un découpage en composant.

    Pour jeter une idée : Balsamiq est vraiment simple et suffisant.

    Omnigraffe est mauvais, ConceptDraw n’est pas un logiciel fiable et terminé (malgré ce qu’ils mettent sur leur site…)

    GHULAM le 24 juin 2009 à 20:07 (#12)

  13. J’ai commencé avec Visio et Omnigraffle, maintenant je n’utilise quasiment plus que Balsamiq et surtout Axure. L’interactivité proposée par ce dernier est un gros plus, surtout qu’elle ne nécessite pas de compétences techniques particulières. Elle me permet d’être beaucoup plus autonome dans la conception, et d’illustrer de façon plus concrète les spécifications de l’interface et le rendu final que je souhaite obtenir.

    Je suis en train de découvrir Flash Catalyst, je le vois comme un Axure 2.0 grâce à son intégration dans la chaîne de production design & développement (insertion de PSD, génération automatique de code Flex), et dans la création d’animations plus riches que ne le permet Axure actuellement (drag ‘n drop pour ne citer que ça).

    Rémi Favretto le 25 juin 2009 à 11:11 (#13)

  14. Venez faire un tour sur notre blog •http://blog.piaction.com•, nous avons testé différents outils de prototypage (Flash Catalyst, SkecthFlow, …)
    Personnellement, j’utilise indifféremment Omnigraffle, Flairbuilder, Illustrator, Flash ou Photoshop. tout dépend du type de projet. Prototype interactif? Du travail collaboratif? Un résultat super rapide? Dissocier ou pas le fonctionnel de l’émotionnel…
    A mon sens, Flash Catalyst est très prometteur, et s’améliore de jour en jour…

    Yoan le 3 septembre 2009 à 11:29 (#14)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Un rétrolien à propos de “Configurer Illustrator pour créer les wireframes d’un site Internet” :

  1. Mes favoris du 12-07-09
    Le 13 juillet 2009 à 09:03
Le processus de découverte

Articles Récents

Les derniers articles publiés

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…