Si necesita crear un nuevo sitio web desde cero o rediseñar uno nuevo, el wireframing es la técnica que lo ayudará a hacerlo.
La estructuración de un sitio web es especialmente útil cuando se trata de clientes que necesitarán revisarlo y proporcionar comentarios rápidos. Pero también lo ayudará a acelerar el proceso de diseño y le permitirá cambiar las cosas mucho más rápido antes de construir el producto final.
En este artículo, cubriremos cómo estructurar un sitio web desde cero.
Hay 5 pasos básicos involucrados en la estructuración de un sitio web:
- Recolectando tus herramientas para wireframing
- Acotando tu público objetivo.
- Identificación de los flujos de usuario
- Crear el primer borrador de su estructura alámbrica
- Probando la estructura alámbrica
Cómo estructurar un sitio web
Echemos un vistazo más de cerca a cada uno de los pasos:
Paso 1: recopile las herramientas para el wireframing
Las herramientas que necesitará para estructurar un sitio web dependerán en gran medida de si su objetivo final es una estructura digital o una dibujada a mano. Como puede imaginar, una estructura alámbrica dibujada a mano es como cualquier otro boceto. Todo lo que necesitará es algo para dibujar (como un bolígrafo o un lápiz) y algo para escribir (algún tipo de papel)
Muchos diseñadores tienden a preferir estos wireframes dibujados a mano para controlar sus ideas y luego convertirlos en uno digitalizado después de que les gusta lo que han dibujado a mano.
Por otro lado, si decide crear una estructura alámbrica digital desde cero, puede utilizar su elección de muchos programas gratuitos y de pago, como Wirify, Wireframe.cc, Figma, Adobe XD y muchos otros. Alternativamente, puede optar por utilizar uno de los muchos ejemplos de estructura alámbrica del sitio web o plantillas disponibles en línea como punto de partida para transformarse en lo que necesita.
Paso 2: reduzca su público objetivo a través de la investigación
El segundo paso sobre cómo crear una estructura alámbrica: comprender quién será su audiencia lo ayudará en gran medida a determinar las características y los elementos necesarios en la estructura alámbrica de su sitio web. Diferentes grupos de usuarios interactuarán y se relacionarán con las funciones utilizadas de una manera diferente a como lo harían otros. Por lo tanto, definir este factor es vital para el éxito de tu wireframe.
La creación de personajes de usuario puede ayudar en este paso de su proceso de creación de wireframes. Una persona de usuario es esencialmente un boceto de personaje. Le dice quién es su cliente ideal mientras toma en perspectiva sus datos psicográficos y demográficos. Esto le ayuda a delimitar cuál será su objetivo principal y las barreras potenciales que pueden enfrentar al tratar de lograr ese objetivo.
Paso 3: Identifique los flujos de usuario necesarios para completar su objetivo deseado
En este paso, creará lo que se conoce como flujo de usuario. Este es un diagrama simple que visualiza la ruta que tomaría su persona de usuario para completar una tarea en su sitio web. Tiene en cuenta todos los pasos que tendrían que pasar desde el punto de partida (generalmente, acceder a su sitio web) hasta completar el objetivo deseado.
Para completar con éxito este paso sobre cómo estructurar un sitio web, deberá considerar las tareas clave que el usuario de su sitio web deberá realizar para garantizar que su sitio siga siendo efectivo y fácil de usar. El objetivo es tener en cuenta la experiencia general del usuario. Hágase preguntas que le ayuden a averiguar:
- El problema inicial. Pregúntese qué problemas debería resolver el sitio web para el usuario.
- El objetivo deseado. ¿Cuál es el resultado final que le gustaría que el sitio web lograra para el usuario?
- Las mejores características para apoyar el objetivo deseado. ¿Agregar funciones como enlaces, videos, botones o menús adicionales llevará al usuario a la meta más rápido?
- El orden en que el usuario debe ver la información específica. Controlar el orden en que un usuario recibe información de su sitio web podría ser beneficioso en las conversiones de usuarios. Mostrarles lo que el sitio web podría ofrecerles, por ejemplo, generalmente sería mejor recibido que liderar con el costo del producto.
- El posicionamiento de la llamada a la acción. Pregúntese cuál sería el mejor lugar para agregar su solicitud de CTA para que el usuario no solo tome nota sino que también interactúe con su botón o enlace.
Comprender las respuestas a estas preguntas podría hacer o deshacer su estructura metálica en el siguiente paso.
Paso 4: cree el primer borrador de su estructura metálica
A continuación, finalmente es el momento de crear el primer borrador de su estructura alámbrica. Su objetivo aquí es tener en cuenta la experiencia del usuario, centrándose en cómo cada interacción o función influirá en su viaje hacia el objetivo del sitio web. No estarás diseñando. Por lo tanto, no hay fuentes sofisticadas, colores precisos o incluso imágenes. Lo que quieres es una especie de plano.
Dicho esto, si hay características específicas o elementos de diseño que serían vitales para la experiencia de su usuario o las interacciones con su sitio, entonces el posicionamiento de estos puede anotarse en su esquema usando marcadores de posición.
También puede optar por incluir su menú de navegación principal, botones o enlaces importantes, su llamado a la acción y cualquier información vital que estaría en el pie de página del sitio web.
Recuerde tener en cuenta todos los datos que recopiló anteriormente con respecto a su público objetivo, su objetivo y las posibles barreras a medida que crea la estructura real.
Paso 5: prueba tu diseño
Ahora que ha creado el primer borrador de su estructura alámbrica, es hora de ponerlo a prueba. Probar su estructura alámbrica antes de pasar al proceso de diseño resaltará cualquier barrera o inconsistencia imprevista que pueda estar presente en el diseño o flujo propuesto.
Este sería el mejor momento para colaborar con otros miembros del equipo u obtener comentarios de su cliente, ya que tendrían una visión clara de cómo un usuario viajaría a través de su sitio web hacia su objetivo final.
Tome nota de cualquier problema o mejora necesaria resaltada, luego ajuste la estructura alámbrica según sea necesario antes de regresar para crear el borrador final de la estructura alámbrica.
¿Qué se debe incluir en un wireframe de sitio web?
Ahora que sabes cómo crear un wireframe para un sitio web, veamos qué debe incluir un wireframe:
- Un logotipo o nombre de la empresa. Aunque el logotipo real normalmente no estaría presente, la estructura alámbrica incluiría marcadores de posición que mostrarían el posicionamiento proyectado del logotipo o el nombre de la empresa.
- Barra de navegación. La posición de la barra de navegación principal se representaría en la estructura alámbrica a menos que sea para una página de destino. Incluso los sitios web de una sola página tendrían páginas de anclaje que requerirían algún tipo de movimiento del usuario entre las secciones. La barra de navegación también mostraría claramente el método deseado para volver a la pantalla de la página de inicio o la parte superior de la página (en el caso de un sitio web de una sola página).
- El plano/diseño del sitio web. La mayor parte de la estructura alámbrica de su sitio web mostrará el posicionamiento general de todos los elementos del sitio web tal como los vería el usuario. Esto incluiría marcadores de posición para imágenes, botones, videos, etc. Básicamente, desea capturar la esencia del sitio web en un esquema o plano.
- Llamada a la acción (CTA). El elemento final de tu wireframe es el CTA. Como se discutió anteriormente, esta es la principal acción u objetivo deseado que desea que alcance el cliente. Nuevamente, esta no será la CTA real, simplemente un marcador de posición en la posición en la que el usuario la encontrará.
Estructuras metálicas Balsamiq
Balsamiq Wireframes es una herramienta de interfaz de usuario para crear wireframes para sitios web. Se puede usar para crear un boceto o una maqueta para un sitio web o una aplicación.
Esto es importante en:
- Proporcionar una maqueta que ayude a comprender la aplicación o el sitio web.
- Facilitar la discusión entre los desarrolladores y codificadores.
- Obtener retroalimentación de las partes interesadas
- Obtener la aprobación para iniciar el desarrollo
Wireframes de Balsamiq para escritorio
Se han incorporado nuevas funciones, pero la aplicación sigue siendo fácil de usar. Incluyen:
- Suave y rápido. La aplicación funciona sin problemas y rápido, lo que ayuda a mantener la eficiencia para los usuarios.
- Modo de pantalla completa. El modo de pantalla completa facilita las presentaciones. También es personalizable y mejor para las pruebas de usuario.
- Sección de revisión. Una sección de revisión y comentarios que le permite dejar comentarios para que sus desarrolladores y colaboradores trabajen o contribuyan.
- Integración. Integración con Wireframes to Go que le permite acceder directamente a más herramientas desde el editor
- Almacenamiento en la nube. A través de la aplicación, puede iniciar sesión en Balsamiq Cloud y acceder a todos los proyectos que ha guardado en la nube con facilidad.
Nube de balsamiq
Balsamiq Cloud es una herramienta de diseño de interfaz de usuario basada en la web para crear una estructura alámbrica. Se puede utilizar para acceder al contenido guardado en su nube. Puedes unirte o invitar a otros colaboradores a trabajar en un proyecto.
La nube Balsamiq puede facilitar la colaboración en la vida real y tiene una sección de comentarios donde uno puede comunicarse con otros creadores.
Con una variedad de características, los wireframes de Balsamiq son fáciles de usar y mejoran la eficacia de los equipos. Tiene varias herramientas que son útiles para cualquier desarrollador.
Además, el equipo de soporte es muy práctico y puede obtener ayuda si la necesita poniéndose en contacto con ellos. Varios tutoriales ofrecen orientación sobre cómo usar la aplicación.
Si te cuesta concentrarte, hay música de fondo que puede ayudarte a concentrarte más en tu tarea e incluso tomarte el tiempo. El equipo también incorporó varias recetas que pueden ser divertidas de probar.
Para acceder a las recetas, vaya al menú Ayuda y seleccione ¿Qué debo hacer para la cena?. Si bien puede haber nuevas características, los esquemas de Balsamiq siguen siendo fáciles de usar y tan familiares como lo eran antes de las actualizaciones.
Artículos relacionados
