Priority Guides : A Content-First Alternative to Wireframes · An A List Apart Article
►http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
Priority Guides : A Content-First Alternative to Wireframes · An A List Apart Article
►http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
C’est intéressant même si je ne suis pas d’accord avec le démarrage de sa réflexion sur le faire qu’un wireframe c’est forcément un dessin statique (et donc dans son argumentation pas responsive etc).
Du coup c’est déjà un peu ce qu’on fait, puisqu’on commence par mettre des blocs de contenu (faux ou plus précis suivant ce qu’on connait comme détails à ce moment) dans du HTML. Puis on style ce HTML en bloc que l’on place petit à petit. On pourrait aller plus loin et vraiment commencer par TOUT mettre en détail et faire valider cette liste de choses à placer dans un ordre de priorité, puis le styler une fois que c’est validé seulement.
Mais du coup ses documents de priorités il continue de les faire en pixels, alors qu’on peut parfaitement les faire en HTML directement (et donc au départ c’est mobile first tant qu’on n’a rien stylé oui mais on PEUT les styler ensuite, ce qui n’est pas possible avec un truc statique).
Bref, ça va dans le bon sens, mais je pense qu’il faut continuer à améliorer dans la voix de partir directement sur le HTML, jamais depuis un outil statique : aussi puissant qu’ils peuvent être (sketch etc), je trouve que c’est obsolète, des outils du passé, pour la majorité des cas.
#conception #web #prototype #design #maquette #méthodologie #bonnes_pratiques
Alors je suis tout à fait d’accord, je viens encore d’en faire les frais ^^ Les outils comme sketch ou autre enferme dans une reflexion « pixel perfect » qui effectivement viens du print ou tout du moins tendrait a y ressembler.
Le problème c’est aussi les gens qui utilisent le logiciel. Je retrouve les mêmes erreurs de conception de document, identiques a quand je faisais de la production et que j’executais les doc des directeurs artistique (ex 30 couleurs aucune dans le même format).
On récolte donc des protos, conçues par des gens qui n’on jamais intégré ou conscience du markup, ni des implications de leurs choix graphiques.
En exemple le plus courrant, des titres qui change de place suivant le mode mobile, mais change de bloc container : on se retrouve a dupliquer le code, a masquer en aria-hidden pour pas que les lecteurs vocaux double… bref moi j’aime pas et généralement on peut faire sans …
Ce sont des méthodes ou type de réflexion, qui vont a l’encontre du progressive enhancement, et du mobile first.
La en tout cas ce concept est intéressant car on pense la page en fonction du contenu réel : ce qui est totalement l’inverse des méthodes les plus couramment employées, encore largement tirés du print, sauf que l’ont à enlevé des étapes comme le calibrage ^^, et que maintenant on nous envoie le contenu quand le travail est fini, on marche à l’envers.
Il y’a quelques années, j’avais été intéressé, par un projet Project Hub lancé par Brad Frost (Atomic Design methodology) : ▻https://github.com/bradfrost/project-hub. En fait l’idée est de constatent garder le fil avec le client en le poussant a participer (genre Agile) . Je pense que l’implication, le suivi, le déroulement devrait faire partie d’un seul outil ou chaque intervenant à accès aux infos, a la timeline, des notifications rappels, guideline, …
Dans un outil qui gérerait l’ensemble de la progression, l’exemple cité dans l’article peut effectivement permettre au SEO, marketeux de faire leur sauce en parallèle de l’intégrateur, sans interférer avec la partie purement dev.
Je pense que réfléchir parallèlement ainsi pourrait éviter pas mal de problème pour ceux qui sont en fin de chaine, et surtout amener à se poser les bonnes questions sans penser QUE cosmétique mais contenu. Certainement un gain de temps aussi quand on travaille a plusieurs intervenants, …
Article sur les paginations, juste pour mémoire et pour les illustrations/#wireframes de paginations, en vu du composant pour css-wireframe par exemple.
Sinon le reste est déjà majoritairement intégré dans spip.
Pagination Best Practices – UX Planet
▻https://uxplanet.org/pagination-best-practices-76fbd3f5a78d
Ajoutons qu’en accessibilité, il DOIT y avoir le nombre total de résultats et où on en est dedans, et possiblement le pas aussi, il faut que je vérifie. Les trucs du genre « 11 à 20 sur 437 » c’est généralement une bonne pratique d’avoir ça bien visible et pas tout en bas (faut le savoir au début quand on arrive sur la page).
Tableau comparatif des logiciels de prototypage et maquettes
▻http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools
Dernièrement j’ai utilisé NinjaMock, que m’avait trouvé @b_b, et qui peut être utilisé gratuitement sans multi-utilisateurs (mais il suffit de feinter en se connectant tous avec le même compte).
Ça permet de faire des maquettes filaires ET maquettes graphiques. Mais ça permet aussi de commenter les maquettes avec des notes placées où on veut. Du coup on peut travailler à plusieurs par internet, en donnant des commentaires sur ce qu’ont fait les autres.
Personal
Free!
Ideal for individuals prototyping their ideas and creating their own designs.
– All mockup features
– Three projects maximum
– For non-commercial use only
Du zoning au mockup, itinéraire d’une maquette web - romy.tetue.net
▻http://romy.tetue.net/zoning-mockup-maquette-web?lang=fr
« évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. » Tags : #webdesign #wireframe #ui
Un autre article sur les #style-tiles par Marie Alhomme (pouipouidesign) sur le train :
▻http://letrainde13h37.fr/4/style-tiles-nouvel-outil-pour-webdesigner
Et sinon, ça y est ! On vient de commencer à utiliser ces planches graphiques, pour voir ce que ça donne ! Pour l’instant je trouve ça assez cool, à voir quand ce sera l’heure de les présenter au client…
Cet excellent article de Marie est linké dans la prez (slide 24 + dans le CR) : y’a plein de liens et ressources à y grapiller :)
Ah super ! Si ça passe pas auprès des clients (qui préfèrent parfois rester dans la mystification du coup de génie créatif et ne supportent pas de découvrir qu’un contraire, ça s’explique et ça se (dé)construit), ça sert au moins en interne, à mieux réfléchir et construire son argumentaire graphique. Bref, go !
Tiens, j’ai appris récemment le concept de #wireframe pour le développement d’un site #Web alors je partage les trucs que j’ai lu :
Bon article du Wikipédia anglophone ►http://en.wikipedia.org/wiki/Website_wireframe
Dix outils pour faire des wireframes : ►http://mashable.com/2010/07/15/wireframing-tools La plupart sont non-libres mais mon préféré, Pencil, est libre
►http://pencil.evolus.vn/en-US/Home.aspx (notez le TLD du Viêt Nam)
(In)utilité des #wireframes et gestion de projet, un plaidoyer pour le prototypage haute-fidélité. Je plussoie :)
►http://www.fabernovel.com/en/blog/284-the-death-of-the-wireframe-towards-an-integrated-approach-to-ux-desi
Vendredi c’est Graphism’ | Geoffrey Dorne
►http://owni.fr/2012/03/23/vendredi-cest-graphism-culture-design
Malheur à toi qui ne lis pas chaque vendredi notre magnifique « Vendredi c’est graphism », parce que, il faut bien le reconnaître, pour progresser dans l’existence il est préférable de s’adjoindre les services d’un guide, d’un gourou ou alors d’un machin rigolo qui chaque vendredi réfléchit joliment le monde. Affaire de caractère.
#Chronique #Cultures_numériques #Graphisme #Art #clip #créativité #Culture #design #dieter #dorne #financement #geoffey #geoffrey_dorne #geoffreydorne #graphique #graphisme #lire #rams #vendredi-graphisme #visualisation #wireframe #wtf
Un outil libre pour faire une maquette rapide d’un nouveau site
►http://pencil.evolus.vn/en-US/Home.aspx
Pour réaliser un croquis assez rapidement d’un site à construire, il existe un certain nombre de solutions commerciales (et ne fonctionnant souvent que sur Ipad, comme Proto le dernier né d’Adobe, grmf).
►http://www.simpleweb.fr/2011/01/17/wireframes-4-styles-pour-4-types-doutils
Une solution libre (non listée dans l’article ci-dessus) existe, en tant qu’extension de Firefox ou d’application spécifique, Pencil Sketching.
►http://pencil.evolus.vn/en-US/Home.aspx
La prise en main est rapide, plus besoin donc de maîtriser un logiciel de mise en page ou d’illustration pour faire un croquis relativement fonctionnel, et se mettre d’accord, par exemple en réunion, sur l’organisation du contenu. Et bien plus facilement maniable qu’un croquis sur papier. Léger défaut : la typo par défaut, c’est du Comic Sans MS ;-)
Gesturecons - Multi-Touch Icons
►http://gesturecons.com
“Vector based icons created to aid in the design, development, implementation and promotion of multi-touch interfaces. These icons will aid in the creation of wire-frame documents, digital help files and printed documentation.”
Storyboarding for the web : Methodology and Tools
►http://www.slideshare.net/SuperFiction/storyboarding-for-the-web-methodology-and-tools
#storyboard #wireframe #zoning #vocabulaire #conception #prototype #clevermarks
Storyboarding for the web : Methodology and Tools
►http://www.slideshare.net/SuperFiction/storyboarding-for-the-web-methodology-and-tools
#storyboard #wireframe #zoning #vocabulaire #conception #prototype #clevermarks
A Collection of Printable Sketch Templates and Sketch Books for Wireframing
►http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframin
“more than 20 resources that you can use in sketching phase of application development.”
#sketch #template #wireframe #modèle #papier #impression #prototype #design #web #interface #clevermarks
Free Sketching & Wireframing Kit
►http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
#webdesign #design #tools #resources #templates #gui #wireframe #free #ui #template #wireframes #prototyping
Create
►http://www.webappers.com/2009/10/14/create-collaborate-interactive-ui-mockups-for-your-sites
“MockFlow is an online tool for creating wireframes of software and websites. It helps to enhance your planning process by enabling to quickly design and share interactive UI mockups.”
#mockup #wireframe #prototype #interface #collaboratif #online #web #dev #conception #design #clevermarks
Briefs: A Cocoa Touch Framework for Live Wireframes
►http://giveabrief.com
Briefs is a framework for packaging concept screens
Wireframes Magazine
►http://wireframes.linowski.ca
#wireframe #storyboard #type:blog #clevermarks
Design Stencils - Yahoo! Design Pattern Library
►http://developer.yahoo.com/ypatterns/wireframes
Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG)
#webdesign #yahoo! #wireframe #design #maquette #visio #omnigraffle #groupe:clever-age