Qu son los wireframes de un proyecto online y por qu son importantes | ...

1 de 4

http://www.internetshake.com/2012/08/que-son-los-wireframes-de-un-pr...

BLOG PROFESIONAL DE JUAN DEL REAL MARTN SOBRE

COMERCIO ELECTRNICO, MARKETING ONLINE E INTERNET

Blog

ago

07

Gua SEO

Gua E-Commerce

Sobre M

Consultant

Buscar

Contacto

Qu son los wireframes de un proyecto online y por qu son importantes

2012

Amazon, Compra online, E-Commerce, Gua E-commerce, Multicanalidad, SEO

Aadir comentarios

Una vez que se tiene claro funcionalmente qu queremos que haga

nuestra tienda online, la siguiente fase en nuestro proyecto es la de
aterrizar nuestra voluntad consensuada con el departamento
tcnico, en un diseo elegante, que convierta, que transmita los
valores de nuestra marca, etc.

Gua E-Commerce
01 Introduccin al e-Commerce
01.1 Definicin de e-Commerce
01.2 Antecedentes del comercio electrnico
01.3 Qu est pasando en el comercio electrnico

Pero justo entre medias, y antes de entrar en una fase tan

subjetiva y opinable como es el diseo web, hay una especie de
guin visual: el wireframing, es decir, la plasmacin visual, pgina por pgina, de la
funcionalidad que queremos para nuestra web, pero sin diseo.

01.4 Algunas cifras de comercio electrnico en el

mundo y en Espaa
02 Modelos de negocio publicitarios
03 Modelos de e-commerce
04 Por qu hacer un proyecto online

Wireframe de una pgina web (homepage)

Los wireframes son

Wireframe de una pgina web (homepage)

estructuras
cuadriculadas (sin
diseo, sin curvas, sin

imagen) y organizadas, de cada pgina de nuestra tienda online, con un peso bastante real
de lo que ponderar cada zona de la misma. De hecho, entre los wireframes ms importantes
destacan el de la cabecera (header) y el pie (footer) de nuestro e-commerce, ya que debern
incluir todo lo que se necesita a lo largo de una compra online (el logo de la tienda, el acceso a la
zona cliente, el contacta, el quines somos, el carro, etc.

04.1 Cmo saber el grado de evolucin de mi

proyecto online
04.2 Fases de un proyecto online
04.3 Qu equipo necesito para montar una tienda
online
04.4 Conocer los KPIs de mi industria
04.5 Cmo construir un modelo de negocio online
04.6 Qu plataforma de e-Commerce elegir para mi
proyecto online
04.7 Redactando un documento funcional para mi

Cada oveja con su pareja

Adems de los wireframes de encabezado y pie, cada pgina de nuestro sitio web debe tener
su propio wireframe: home, universo, categora, subcategora, producto, carro, registro, olvid

tienda online
04.8 Qu son los wireframes de un proyecto online
y por qu son importantes

mi contrasea, contacto, confirmacin de la entrega, confirmacin del pedido, contacta, aviso

legal, etc.
Muchos de ellos sern bastante parecidos as que bastar con copiarlos y cambiar lo que queramos o reaprovecharlos. Por ejemplo, las pginas
estticas de contenido en texto plano tipo quines somos, aviso legal, condiciones de compra, etc. podrn perfectamente utilizar el mismo
wireframe, y eso que nos ahorraremos en horas de diseador y fee de la agencia que haga el diseo web.
Cmo se hacen los wireframes
Cualquiera puede hacer sus propios wireframes. Basta con abrir powerpoint y mediante rectngulos ir construyendo la estructura.
Cuando tengamos un wireframe completado, bastar con copiar esa pgina y sobre la copia, manteniendo los elementos comunes como el encabezado y
pie, hacer las modificaciones necesarias para la nueva pgina.
Consejos a la hora de hacer los wireframes
Aqu algunos consejos:
1.-Empieza por tener perfectamente clara la estructura completa de navegacin de tu pgina web y la relacin de pginas estticas que la
compondrn. Aprende cules de tus pginas son realmente similares en cuanto a su estructura, de manera que puedan reaprovechar el mismo wireframe.
2.-Fjate en los lderes online, pgina a pgina, y obtn sus wireframes para luego disear el tuyo propio, pgina a pgina: home, producto, etc.
3.-Ten muy clara cmo ser la navegacin por el sitio web: por universos horizontales superiores (como por ejemplo Falabella)

10/02/2014 11:41 a.m.

Qu son los wireframes de un proyecto online y por qu son importantes | ...

2 de 4

http://www.internetshake.com/2012/08/que-son-los-wireframes-de-un-pr...

Header de Falabella.com con los universos de producto desplegados de forma horizontal

o mediante un solo botn que permita desplegar todos los departamentos (como Amazon).

Header de Amazon.es donde hay un solo botn para desplegar todos los departamentos
4.-Ataca lo primero el wireframe del que ser tu header sin olvidar los enlaces indispensables que debern acompaar al usuario durante toda la
navegacin (logo, registro/login, contacto, carro, newsletter, etc.). incluido el acceso a las tiendas fsicas si somos una empresa multicanal.
Si en el encabezado has optado por mantener universos horizontales, decide si querrs que estos desplieguen mens hacia abajo con sus categoras, o
no, en funcin de lo que est aprobado en el documento funcional, al respecto. En caso afirmativo el funcional y el wireframe debern coincidir.
5.-Ataca despus el footer de tu pgina con los indispensables que habrn de acompaar siempre al usuario est donde est: poltica de privacidad,
seguridad, telfono de contacto, quines somos, etc.
Tanto en el encabezado como en el pie de la pgina y pensando en SEO, es bueno que los enlaces irrelevantes a efectos de SEO (contrasea,
newsletter, carro, etc.) contengan una etiqueta No follow (<a href=http://www.loquesea.es rel=nofollow>), ya que al repetirse siempre a lo largo de
la navegacin, tienen demasiada relevancia para Google y dems buscadores. Con esta etiqueta conseguimos que no se tengan en cuenta a efectos de
SEO y repartimos ms link juice a otros enlaces ms relevantes de nuestras pginas (categora de producto, producto, etc.).
Tambin es interesante que se describan en el footer las categoras de producto de la tienda a modo de keywords. Por ejemplo, Niumba, una
web de alquiler vacacional en varios pases de la UE, muestra para una provincia, en el pie de su pgina, Alquiler apartamentos [nombre localidad], que
adems de ser de utilizad, le ayuda a conseguir relevancia en buscadores para esas keywords.

10/02/2014 11:41 a.m.

Qu son los wireframes de un proyecto online y por qu son importantes | ...

3 de 4

http://www.internetshake.com/2012/08/que-son-los-wireframes-de-un-pr...

6.-Donde vaya una imagen (logo, imagen de producto, imagen corporativa, etc.), simplemente pon un aspa para que el diseador entienda que ah va
una imagen, sea cual sea) y donde vaya texto (copy), se suele emplear texto de relleno sin relevancia).
Donde vayan precios prev precios mximos para ver que quepan (por ejemplo, y aunque sea poco factible: 9.999,99 , precio anterior tachado, etc.
Es decir, todos los elementos que acompaan a un precio, a un producto, a una descripcin del producto.
7.-Recuerda que una misma pgina puede tener varios wireframes. Por ejemplo, la pgina de subcategora (aquella donde se muestra un listado de
productos de la misma categora) puede tener una disposicin vertical (un producto por fila) o matricial (tres columnas por fila, etc.). Por tanto, esta pgina
deber prever tales disposiciones, la opcin de la primera a la segunda y a la inversa y aunque compartirn al mximo el wireframe, tendrn variaciones.
8.-No inventes nada ni quieras ser revolucionario con los wireframes. En mi opinin, lo funcional debe primar sobre lo novedoso. Por ejemplo, puedes
decidir que el carro de compra aparezca a la izquierda, junto al logotipo de tu tienda, pero la realidad es que los usuarios estamos acostumbrados a verlo
en la esquina superior derecha de tu header.
9.-Hay secciones completas del sitio como el checkout que requiren un anlisis muy profundo si se quiere tener xito con la conversin de
producto aadido a la cesta a pedido web.
10.-No olvides que el wireframe es la traslacin visual del documento funcional pero sin diseo, as que revsalos a fondo para no olvidar incluir
funcionalidad en tus pginas.
Y por ltimo, no olvides comentar los wireframes para que el diseador que los transforme en diseo tenga en cuenta tus expectativas.
Be Sociable, Share!

Twittear

Me gusta

Share

24

Publicado por Juan del Real en 13:41

Etiquetado como: Amazon, Falabella, Funcional, Niumba, Wireframes

Deja un comentario
Nombre

(requerido)

E-mail

(requerido)

URI

Tu comentario

10/02/2014 11:41 a.m.

Qu son los wireframes de un proyecto online y por qu son importantes | ...

4 de 4

http://www.internetshake.com/2012/08/que-son-los-wireframes-de-un-pr...

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite>
<code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Enviar comentario

El programa Amazon Vine de product reviews o cmo asegurarse mucho y buen contenido en una
tienda online

2012 Internet Shake

Algunas pistas y trucos para tener una buena pasarela de pagos en nuestra
tienda online

Suffusion theme by Sayontan Sinha

10/02/2014 11:41 a.m.