Blog de E-Commerce

Cómo crear un boceto web o wireframe

Cómo crear un boceto web o wireframe

Si estás pensando en renovar el diseño de tu Tienda Online y darle una nueva imagen o simplemente quieres crear una tienda online con Palbin.com, debes empezar por crear un boceto web o wireframe donde reflejar todas tus ideas antes de empezar a crear el diseño de tu Tienda Online. Recuerda que desde Palbin ya te enseñamos a crear una página de portada con nuestro editor. Aunque, si no te aclaras, ya sabes que puedes enviarnos tu wireframe y nuestro equipo se encargará de hacerlo realidad si contratas el servicio de diseño personalizado.

Si aún no conoces que es un wireframe o no sabes cómo se hace, te recomendamos leer este artículo que te será muy útil para empezar con buen pie tu nuevo proyecto.

1. Qué es un wireframe

Un wireframe es un boceto donde se representa visualmente un esquema de una página web de manera sencilla. En este boceto se plasma tanto la organización del sitio web como su interfaz gráfica.

Esta etapa de esquematización, organización y plasmación de ideas se realiza antes de la fase de diseño web. Recomendamos la revisión de este boceto entre personas expertas en diseño y usabilidad web.

Este esquema carece de estilo, color, imágenes, tipografía, etc. Su principal objetivo es plasmar la funcionalidad, jerarquía y contenidos que van a aparecer en la Tienda Online. Un wirefame se enfoca en tipos de información mostrada, las funciones disponibles, el efecto en los distintos escenarios de pantalla, los tipos de información a mostrar..

Es en el wirefrime donde el concepto se vuelve tangible.

2. Elementos de un wireframe

Un wireframe se divide en tres componentes: diseño de información, diseño de navegación y diseño de interfaz.

Diseño de información

El diseño de información es el área del diseño gráfico que representa la información de manera efectiva para una comunicación clara. Estos elementos informativos deben estar ordenados de manera que reflejen los objetivos de la empresa (compra, registro, descarga..).

Diseño de navegación

El diseño de navegación debe comunicar la relación entre los enlaces de la página web de forma que los usuarios entiendan las opciones de navegar en el sitio.

Este diseño da una vista de manera global, de la ubicación y desplazamiento a través de las diferentes páginas de un sitio web.

Diseño de interfaz

El diseño de la interfaz incluye seleccionar y ordenar los elementos de la interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema. El objetivo de este diseño es facilitar la usabilidad del sitio online.

Elementos del diseño de interfaces son: botones de acción, campos de texto, cajas de verificación, botones radiales y menús desplegables.

3. Ventajas

  • Rápidos de crear: puedes realizar los wireframes tu mismo, con diferentes herramientas que te ahorran mucho tiempo.
  • Baratos: un boceto web tiene un coste muy bajo si tienes los objetivos y las ideas que quieres transmitir bien fijadas. Además esto te permite realizar varias versiones hasta encontrar la mejor para tu Tienda Online.
  • Detectar y corregir los problemas antes del diseño web, lo que ahorra mucho tiempo y costes. Estos problemas pueden ser de usabilidad o funcionalidades.
  • Mejorar la usabilidad web: puedes hacer test A/B con amigos o conocidos para ver cómo reaccionarían ante el diseño propuesto para tu tienda online.

4. Herramientas y programas

Estos bocetos pueden ser dibujados en papel, pizarra, programas como photoshop o herramientas de software especializadas.

  • A mano: Si estás empezando a utilizar esta técnica, puedes probar a hacer un prototipo de boceto en un papel o pizarra, te será más útil para realizar varias pruebas y ver las diferentes opciones de diseño para tu web.
  • Abode Photoshop: si tienes conocimientos de diseño, te recomendamos que utilices Photoshop para crear todos los bocetos. Te será más útil a la hora de realizar modificaciones.
  • Herramientas gratuitas para crear bocetos: si quieres ser todo un profesional, te recomendamos utilizar las siguientes herramientas:

- Pencil Project: diseñado para proporcionar una herramienta de creación de prototipos web. Esta extensión de código abierto permite que los usuarios puedan crear fácilmente bocetos web con la ayuda de una gran paleta de herramientas.

- MockFlow: esta herramienta es más limitada, sólo está abierta para proyectos de 4 páginas, con dos colaboradores. Fácil, intuitiva y con numerosos elementos para que el usuario pueda instalarlos en el wireframe.


Conclusión

Si estás pensando en darle una nueva imagen a tu tienda online, te recomendamos que lo primero de todo hagas un boceto web o wireframe que cumpla con los objetivos de tu proyecto. Ten cuenta los diferentes elementos que componen un wireframe: diseño de información, navegación e interfaz a la hora de plasmar tus ideas en el boceto web.

Además te animamos a compartir este boceto de diseño web con tus conocidos y ver sus reacciones y opiniones para seguir mejorando.

¿Y tú eres de crear tu boceto web a mano o con herramientas como las que te hemos nombrado?

¿Quiéres mejorar tu negocio online?
x
Academia digital

Únete a nuestra Academia Digital y recibe los mejores trucos y consejos sobre Comercio Electrónico y Marketing Digital diréctamente en tu correo.

Recibirás un email para confirmar tu suscripción.

Deja un Comentario

Tu email no será publicado



©2019 Siokia SL | Palbin.com: Crea tu tienda en dos pasos, 1 y 2. Condiciones de uso y Política de privacidad

Agencia certificada de Google Partners
Certificado SSL Digicert
Usamos cookies de terceros para mejorar la experiencia de navegación, y obtener estadísticas anónimas. Si continúa navegando consideramos que acepta el uso de cookies. OK Más información