Ús de wireframes per optimitzar el desenvolupament web
La creació dels wireframes és una de les primeres passes que cal fer abans de dissenyar un lloc web. El wireframe ajuda a organitzar i simplificar els elements i els continguts dins d’un lloc web, i és una eina essencial en el procés de desenvolupament.
Un wireframe és bàsicament una representació visual de la disposició dels continguts en un lloc web. És un prototip que mostra la ubicació dels elements de la pàgina, com ara la capçalera, el peu de pàgina, el contingut, les barres laterals, la navegació, etc.
També especifica la ubicació dels elements dins d’aquestes àrees de contingut. Si es desitja desenvolupar un web que coincideixi amb exactitud amb les exigències del client i reduir al mínim les revisions del projecte, el wireframing us mantindrà en el bon camí.
Beneficis del wireframing
La creació de wireframes dóna al client, programador o dissenyador l’oportunitat de tenir una mirada crítca a l’estructura del lloc web i permet de fer les revisions amb facilitat en les primeres etapes del procés. El wireframing porta els següents beneficis:
- Dóna al client una visió ràpida del disseny del web.
- Pot inspirar el disseny i desemboca en un procés creatiu més fluid.
- Dona al desenvolupador un panorama clar dels elements que es necessiten per codificar.
- Clarifica les accions o funcions de cada pàgina.
- És fàcil d’adaptar i pot mostrar la disposició de moltes seccions del web.
Eines per al desenvolupament de wireframes
- Dibuixar a mà en paper. Sempre un bon punt de partida per a qualsevol dissenyador. Si s’és molt precís en el dibuix, es pot fer servir com a wireframe definitiu de cara al client.
- Software: Visio, OmniGraffle, Gliffy, Balsamiq, i qualsevol programa gràfic del tipus Illustrator, Photoshop, etc.
Exemples
Autor: Meddia
Autor: Mike Rohde
Autor: Phil Hawksworth
Autor: Matthieu Mingasson
Font: Webdesigner Depot
6 respostes a “Ús de wireframes per optimitzar el desenvolupament web”
Deixa un comentari
Guillem on July 13th, 2009
Que és el que solen treballar l’Ana, la Núria o la Carmela abans que entrin en el tema els equips d’informàtics i dissenyadors, no?
Lluís on July 13th, 2009
Exacte!
Jordi on July 14th, 2009
Wireframing, quina gran (essencial) ajuda…
Samuel on July 14th, 2009
Hi ha un que no se perqué, però em sona…
Deixo un parell d’enllasos relacionats sobre el tema, que trobo força interessants.
Aquí trobem una galeria de varis wireframes i les diferents formes de construcció, amb software i sense ( http://wireframes.tumblr.com/ )
En aquest altre, un conegut comenta la construcció de Microsoft Surface, amb els seus respectius wireframes ( http://maximocastagno.tumblr.com/ )
Lluís on July 14th, 2009
Samuel, jeje, de fet en tenim suficients per ocupar tota la graella d’exemples, però també està bé veure el que es fa pels puestos…
Merci pels enllaços!!
Carles (aka Mhz) on July 18th, 2009
Bon post,
es bó tenir en un mètode per “produir” webs, i el wireframing és la clau per prototipar les webs.
Segueixo llegint el vostre blog.
Salut i empenta!