Magellan no daría la vuelta al mundo sin sus mapas. Los mapas son guías indispensables sin las cuales estaríamos perdidos. En el sentido más amplio, son representaciones visuales que ayudan a nuestra comprensión espacial.
En el mundo digital del diseño, también usamos mapas para un propósito similar. Crear un plan visual que su equipo pueda seguir es esencial para planificar su sitio web o proyecto de aplicación.
En el mundo tecnológico, el mapa visual más completo que se puede compilar es el wireframe.
¿Qué es un mapa alámbrico?
El mapa de estructura alámbrica combina plantillas de estructura alámbrica mejoradas para las diferentes páginas que planea colocar en su sitio con su mapa del sitio. Es importante tener en cuenta que la naturaleza de los modelos de estructura alámbrica incluidos en una estructura alámbrica sirven como plantillas mejoradas para páginas web; es probable que esté implementando la estructura alámbrica después de que se haya realizado algún trabajo de diseño.
La mayoría de los procesos de diseño comienzan con algunos modelos de estructura alámbrica o diseños que muestran cómo encajarán todas las piezas en una página. Estas maquetas sirven como plantillas para páginas de destino, páginas de inicio y publicaciones de blog, por ejemplo.
El mapa de estructura alámbrica muestra cómo encajarán todas estas estructuras alámbricas para crear un sitio web coherente y una experiencia de usuario positiva.
La ventaja de crear una estructura alámbrica un poco más adelante en el proceso de diseño es que puede usarlo para verificar las inconsistencias entre las páginas. Por ejemplo, usar un mapa alámbrico puede ayudarlo a determinar si los elementos del diseño del pie de página se han cambiado accidentalmente entre páginas.
También puede usar un mapa de estructura alámbrica para ayudar a determinar cómo navegará el usuario entre las páginas. De hecho, un mapa de estructura alámbrica debe organizarse para mostrar características a medida que las diferentes páginas están relacionadas entre sí. Por ejemplo, puede diseñar su mapa alámbrico para que su página de inicio sea un punto focal, rodeado de todas las páginas adicionales a las que se puede acceder desde la página de inicio.
Beneficios de usar un mapa de estructura alámbrica
La comunicación efectiva es una parte integral del proceso de diseño. El mapa de estructura alámbrica muestra claramente la idea de diseño del producto desde el principio, manteniendo a los miembros del equipo menos confundidos a medida que avanzan en el proceso de desarrollo. Si todos están en la misma página, es menos probable que tenga arreglos costosos más adelante.
Los mapas de estructura alámbrica también son extremadamente útiles para administrar un equipo. Lo ayudarán a planificar el alcance completo del proyecto, para que sepa exactamente qué tan pesada será la carga de trabajo. También le proporcionarán espacio para asignar tareas a las personas.
Cómo crear un mapa de estructura alámbrica
- Conoce tu personalidad de usuario.
- Cree una lista del contenido que desea.
- Cree un mapa del sitio para comprender el flujo de visitantes.
- Crear maquetas.
- Cree un mapa de estructura alámbrica.
Ahora que conoce los beneficios de crear un mapa de estructura alámbrica, así es como puede crear uno.
1. Comprenda su personalidad de usuario.
Puede parecer obvio, pero no hay nada que puedas hacer hasta que sepas qué necesita tu personaje objetivo. Antes de dibujar cualquier cosa, es mejor dar un paso atrás para definir y comprender la personalidad de su usuario.
Idealmente, esto debería implicar hablar con usuarios reales (o usuarios potenciales). Pero si eso no es algo que pueda justificar ahora mismo, reflexione y responda a las indicaciones que ofrece una herramienta como HubSpot. hacer mi persona puede ayudar a sentar las bases de su personalidad.
2. Cree una lista del contenido que desea.
Use lo que sabe sobre su personalidad y comience a enumerar todas las diferentes páginas o pantallas que deben aparecer en su mapa del sitio. Es imperativo visualizar el viaje del usuario identificando los elementos relevantes a incluir.
Comience con los tipos de sitios web más utilizados e importantes (inicio, contacto, información), luego agregue páginas adicionales según sea necesario. Las páginas o pantallas que elija habilitar dependerán de las necesidades de su persona objetivo.
Por ejemplo, cada sitio de comercio electrónico necesitará páginas de productos y una página de pago, mientras que una organización sin fines de lucro necesitará una página de donaciones y posiblemente un blog que detalle sus actividades actuales.
Otros sitios posibles son:
- Testimonios o Reseñas
- galería o portafolio
- Preguntas frecuentes (faq)
- calendario o eventos
- Prensa
- trabajo o carrera
Tener en cuenta el flujo de tus visitantes es crucial para crear tu mapa del sitio. Una vez que tenga esta lista, organícela por páginas y subpáginas, elija qué elemento estará en cada página y envíela al resto de su equipo para su aprobación.
Puede agregar más elementos a medida que avanza, pero desea tener la lista más completa posible antes de crear su mapa visual del sitio.
3. Cree un mapa del sitio para comprender el flujo de visitantes.
Antes de intentar crear maquetas (o editar los bocetos iniciales), es importante comprender cómo su personaje objetivo navegará por las diferentes páginas de su sitio web.
Para ayudar a conceptualizar este proceso, es una buena idea desarrollar un mapa del sitio antes de hacer más esfuerzos para crear maquetas.
Utilice la lista de contenido que creó en el paso anterior para organizar las páginas y su relación entre sí. A medida que trabaje en él, es posible que descubra necesidades de página adicionales que ayudarán a su persona objetivo a lograr sus objetivos.
El uso de etiquetas de página además de códigos de color o numeración simples (para sitios más complejos) lo mantendrá organizado a medida que refina la naturaleza de las diferentes páginas para incluirlas en su mapa del sitio. A partir de ahí, utiliza las flechas para establecer enlaces entre las distintas páginas. Para especificar la funcionalidad que desea (por ejemplo, chat en vivo o formularios de contacto), considere usar íconos representativos.
Hay muchas maneras diferentes de crear un mapa del sitio. Puede mantener la analogía: use un buen bolígrafo y papel a la antigua, o use fichas y llévelas a su estación de trabajo. También hay muchos servicios diseñados específicamente para crear mapas de sitios visuales, incluidos GlooMaps, Mapa de flujoy Dynomapper.
Algunas de estas herramientas también le permitirán diseñar conjuntamente un mapa del sitio con los miembros de su equipo y, en última instancia, convertirlo en un flujo de trabajo útil para la gestión de proyectos.
4. Crea maquetas.
En este punto, debería haberse ocupado de todo lo que necesita para crear un mapa del sitio, así como maquetas: una lista ordenada de elementos que se incluirán, detalles de su relación entre ellos y las páginas en las que deberían aparecer.
Antes de comenzar a crear maquetas, use el mapa de su sitio para identificar las plantillas de maquetas que desea. Las páginas con la misma funcionalidad pueden usar la misma plantilla. Las páginas únicas con funcionalidad especial requerirán maquetas individuales.
Al crear un mapa de estructura alámbrica, es mejor crear esqueletos de fidelidad baja a media. Necesita algo que sea lo suficientemente detallado para ayudar a visualizar el aspecto de una página o pantalla, pero también lo suficientemente simple como para crearlo rápidamente.
Ahorre tiempo ignorando ediciones menores y asegúrese de crear esqueletos que tengan la flexibilidad de existir con o sin adiciones (por ejemplo, con o sin un control deslizante en el encabezado).
Algunas mejores prácticas y consejos a tener en cuenta al crear maquetas son:
- Comenzando con un boceto básico y agregando brillo a medida que avanza en las diversas etapas del diseño.
- Solicitar comentarios e incluirlos a medida que avanza de maquetas de fidelidad baja a media.
- Uso de herramientas de marco en línea como InVision o Bosquejo comparte diseños de esqueletos y colabora con tu equipo.
Ejemplos de esqueletos
Esta imagen muestra la diferencia entre los modelos de estructura alámbrica de alta y baja fidelidad. Como puede ver, parece que la maqueta de baja fidelidad del lado izquierdo fue dibujada a mano. El lápiz y el papel son un buen lugar para comenzar, pero es una buena idea pulir su esqueleto un poco más antes de presentarlo a una parte interesada importante para su revisión, ¡pero no demasiado! No desea pasar demasiadas horas en el proyecto solo para que alguien le diga que todo está mal.
Al igual que con los mapas de sitio, existen herramientas digitales que pueden ayudarlo a crear maquetas de forma rápida y sencilla. Miró ofrece la capacidad de crear mapas de sitio y maquetas. Además, está diseñado pensando en la colaboración, por lo que puede asignar modelos alámbricos a diferentes miembros del equipo, lo que hace que el proceso sea aún más rápido.
5. Cree un mapa de estructura alámbrica.
Ahora que tiene su mapa del sitio y maquetas, el siguiente paso es combinarlos. Organice maquetas de cada página de acuerdo con el mapa del sitio organizado.
¡Y lo conseguiste! Programe una reunión con su equipo para revisarlos, escuchar sus comentarios y estará listo para pasar al siguiente paso en el proceso de desarrollo.
¡Empieza a crear!
Como los grandes exploradores del pasado, has creado un mapa que te sirve de guía visual. Sin embargo, en lugar de guiar a los viajeros perdidos, un mapa meticulosamente diseñado conducirá a sus desarrolladores, y en última instancia al usuario, en un viaje a través de su visión de diseño digital.
