• Ir a navegación principal
  • Ir al contenido principal
MondoMarketing

MondoMarketing

El blog de Mondo, donde emprendedores podrán encontrar inspiración sobre Marketing Digital y creatividad y diseño web.

  • Marketing Digital
    • Redes Sociales
    • SEO
  • Diseño web
  • Emprendimiento
  • Creatividad
    • Diseño gráfico
  • Recursos gratis
  • Descubre Mondo
Qué es un wireframe y qué tipos hay

Qué es un wireframe y qué tipos hay

29 agosto, 2022 by admin

Si trabajáis como diseñadores/desarrolladores web o UX/UI probablemente la realización de wireframes es el pan de vuestro día a día. Pero es probable que si has llegado aquí es porque quien os está diseñando la web os ha dicho: – Mañana os mando los wireframes – y habéis entrado en pánico pensando qué es lo que os va a enviar.

Qué es un wireframe

Un wireframe, es una representación gráfica de la estructura y funcionalidades de una página web o app. Se tata de una versión muy simplificada evitando el uso de colores, logotipo, tipografías o imágenes. Se realiza en una fase inicial del proyecto y sirve para validar de una forma sencilla la navegación, estructura y funcionalidades del sitio web.

Wireframes y navegación

Gracias al diseño de las pantallas a modo de wireframe, podemos presentar la navegación del sitio web en general. Puede reemplazar de una manera más completa a lo que también se puede validar mediante un mapa web. Realizando un conjunto de wireframes interactivos, el usuario podrá navegar entre ellas y prever el uso y navegación antes de desarrollarlo y aumentar el tiempo invertido en los cambios.

Wireframes y estructura

Gracias a la elaboración de wireframes, podemos establecer las principales secciones de cada página así como los titulares principales (h1) y secundarios (h2, h3) para que tanto el cliente como el experto en SEO puedan prever dónde irán colocados.

Wireframes y bloques de texto

Gracias a los wireframes, también es más sencillo visualizar los bloques de texto para coordinar con la persona encargada de redactarlos.

Ventajas de realizar un wireframe

A la hora de crear una web o una app, es necesario crear un wireframe por lo siguiente:

  • Agilidad: haciéndolos de manera muy sencilla puedes realizar todas las pantallas de manera rápida.
  • Ahorro: ahorras tiempo y recursos al realizar cambios en fases iniciales antes de que la web ya esté diseñada/desarrollada y sean más costosos de modificar.
  • Se detectan antes posibles fallos en la usabilidad y la experiencia de usuario, ya que podemos navegar en ella de manera sencilla.
  • Mejora la comunicación: Gracias al wireframe, el equipo implicado en el diseño y desarrollo de la web puede saber de antemano (como comentábamos previamente), cantidad de texto, estructura, navegación, etc.

Qué tipos de wireframes existen

Dependiendo de lo fieles que queramos ser al diseño final, existen varios grados de wireframes.

Wireframe baja fidelidad (low-fi wireframe): Son muy básicos, generalmente en blanco y negro.

Una variables de los wireframes podrían ser los wireframes con anotaciones, en los cuales incluimos pequeñas explicaciones de cada una de las secciones a un lado o al final del documento.

Wireframes fidelidad media (mid-fi wireframes): sin llegar a ser con un detalle final, vamos aplicando pequeños detalles que nos ayuden a seguir validando contenido, estructura y navegación. Si disponemos ya del contenido en texto es un buen momento para ver qué tal encaja.

Wireframe alta fidelidad o mockup: Es posible que si cuentas con un equipo de UX/UI esta fase sea la que se encarguen directamente los diseñadores visuales. Se trata de dar la capa final visual al diseño, en él ya incluimos todo lo referente a iconos, imágenes, tipografías finales, etc.

¿Podemos ayudarte en algo? Estaremos encantados de comenzar un proyecto web contigo. ¡Contáctanos!

Archivado en:Diseño web

También te puede interesar…

  • Días especiales junio 2023
  • ¡No cometas estos errores básicos en SEO!
  • Marketing digital para pequeños negocios. Por donde empezar
  • Días especiales mayo 2023
  • Por qué tener una web multiidioma (y por qué no)

Copyright © 2023 · mondoestudio · Política Privacidad

Gestionar el consentimiento de las cookies
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}