El blog de dinahosting
  • Inicio
    • Noticias
  • Productos
    • Novedades
    • Dominios
    • Hosting
      • WordPress
    • Servidores
    • Resellers
    • Afiliados
  • Seguridad
  • Crear tienda online
    • Prestashop
    • WooCommerce
  • Digitalización pymes
  • Marketing
  • Somos DH
    • Eventos
    • Equipo DH
    • Clientes

El blog de dinahosting

  • Inicio
    • Noticias
  • Productos
    • Novedades
    • Dominios
    • Hosting
      • WordPress
    • Servidores
    • Resellers
    • Afiliados
  • Seguridad
  • Crear tienda online
    • Prestashop
    • WooCommerce
  • Digitalización pymes
  • Marketing
  • Somos DH
    • Eventos
    • Equipo DH
    • Clientes
#HalloweenDH

Suscríbete a nuestra newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

Newsletter
Prototipado web | dinahosting

Prototipado web: ventajas y herramientas

escrito por Adriana Freire febrero 13, 2019

Cuando inicias un proyecto web, es muy importante que tengas clara la jerarquía de contenidos bajo la que se estructurará tu sitio. Para ello, puedes ayudarte de herramientas de prototipado, que mediante mockups o maquetas te permiten proyectar de una forma muy sencilla las posibles alternativas de arquitectura y diseño.

Las ventajas del prototipado web


Para que el resultado final de un desarrollo se ajuste a las necesidades y expectativas de partida, es muy importante no saltarse la fase de prototipado. Sus ventajas son muchas:

  • Es una forma muy visual de explicarle a tu cliente cómo será su sitio web, puesto que arrojan un resultado realista de su navegación y sus secciones.
  • Permite compartir opiniones con el resto del equipo y aclarar los conceptos básicos del proyecto antes de entrar en etapas más avanzadas. Tener que corregir el producto una vez está desarrollado alarga los tiempos y desajusta el presupuesto.
  • No necesitas controlar de programación web. La interfaz gráfica de estas herramientas está pensada para crear diseños altamente interactivos sin necesidad de escribir una sola línea de código.
  • Minimiza los tiempos de entrega. Si tienes muchos proyectos entre manos y todos tus clientes te piden varios bocetos, necesitarás una herramienta ligera y sencilla que agilice su montaje.

5 herramientas de prototipado

En el mercado existen multitud de herramientas de previsualización de tu web a través de mockups. Aquí te presentamos cinco que cumplen con las funcionalidades necesarias, pero antes de ponernos manos a la obra, es interesante que conozcas el proceso a seguir en el diseño de una web o app.

Primero, lápiz y papel

Aunque a veces no se le da la importancia que merece, coger lápiz y papel nos permite dibujar rápidamente y a mano alzada el flujo de navegación y las diferentes pantallas con las que podemos jugar. En esta primera fase, no es necesario que diseñes tu web al detalle (botones, enlaces, imágenes, logotipos, colores, tipografías, etc.). Basta con dejar cimentada una base donde apoyar los wireframes que haremos a continuación.

Wireframing, mockuping y prototipado web

El wireframing es una fase previa al mockuping en la que introducimos en nuestro diseño elementos de la web (formularios, enlaces, cajas de texto, imágenes…) que determinarán su estructura y composición. Se trata de un esqueleto completo del sitio.

El mockuping ya se va a los detalles visuales: el color, la tipografía, las sombras, los bordes, etc. En esta fase ya tenemos una representación visual de lo que será nuestra web.

Lo siguiente es el desarrollo de un prototipo, que consiste en añadir a todo lo anterior elementos de User Experience que permitan interactuar con los elementos de la web: botones, enlaces, animaciones, etc. Con esto ya tienes lista una versión casi al milímetro de lo que será tu web.

Prueba con estas herramientas

Ahora sí, puedes comenzar a plasmar ese proyecto web que tienes en mente. Te dejamos por aquí una selección de herramientas:

  • Balsamiq: de las herramientas de wireframing y mockuping más populares.
  • Moqups: una posibilidad rápida y efectiva para crear mockups online.
  • Sketch: con una gran cantidad de plugins que la complementan a la perfección.
  • Axure: te sirve tanto para la creación de wireframes sencillos como para la de prototipos detallados. Es una de las opciones más complejas pero también más completa.
  • InVision: destaca por sus funcionalidades para trabajar en equipo y facilitar la comunicación con el cliente.

La lista de herramientas en el mercado es infinita, y quizás tú conozcas otras que también están muy bien. Si es así, ¡no dejes de recomendárnoslas! 🙂

0 comentario
1
Facebook Twitter Google + Pinterest

Deja un comentario Cancelar respuesta

Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional

Información básica sobre protección de datos

Responsable
Dinahosting S.L.  [+ info]
Finalidad y legitimación
Tratamos los datos que nos proporcionas con la finalidad de gestionar tu comentario, incluida su publicación en nuestro blog. Al enviarnos tu comentario o sugerencia nos das tu consentimiento explícito para que tratemos tus datos con esta finalidad  [+ info]
Destinatarios
Publicamos los comentarios que nos envías en el blog. Enviar un comentario en nuestro blog implica la publicación en el blog del ‘nombre’ y, en su caso, el ‘avatar’ que utilices al dejar el comentario  [+ info]
Derechos
Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad

En dinahosting

Promotion Image

Dominios

Promotion Image

Hosting SSD NVMe

Promotion Image

VPS

Suscríbete a nuestra newsletter

Promotion Image Newsletter

Newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL. [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter.[+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal.[+info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción.[+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad.

Conviértete en afiliado

Gana dinero recomendando dinahosting a todo el mundo.
Hazte afiliado

¡Síguenos!

Facebook Twitter Instagram Linkedin Youtube
Facebook Twitter Instagram Linkedin Youtube

LLÁMANOS GRATIS

900 854 000


ESCRÍBENOS

soporte@dinahosting.com

En dinahosting

  • Hosting
  • Dominios

Área privada

  • Panel de administración
  • Webmail
  • Feedback
  • Protección de datos
  • Ayuda
  • 900 854 000
  • soporte@dinahosting.com

@2020 - Dinahosting

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL  [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter  [+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal  [+ info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad