Cómo jaula de alambre de una página web (en 6 pasos)

 

Si usted está en el proceso de creación de una página web, ya sea por sí mismo o un cliente, es muy probable preocupados por la experiencia del usuario (UX). Después de todo, su sitio no va a tener mucho éxito si los visitantes no pueden encontrar la manera de navegar y encontrar la información que necesitan.

Afortunadamente, hay una estrategia útil que puede utilizar para trabajar en la mejora UX antes de su sitio nunca llega a la web. Mediante el uso de una estructura metálica, se pueden probar los flujos de usuario de la unidad y diseños de página, para que sepa exactamente cómo se va a trabajar en su sitio en línea.

En este post, vamos a discutir lo que wireframes son y por qué son esenciales en el diseño web. A continuación, vamos a compartir seis pasos para ayudarle a crear maquetas para su propio sitio. ¡Empecemos!

Sitio Web Profesional de diseño Made Easy

Haga que su sitio se destacan con un diseño profesional de nuestros socios en RipeConcepts. Los paquetes comienzan de $ 299.

Una introducción a wireframes (y por qué son útiles)

Un alambre es como un plano UX para su sitio web. Traza ciertas características de su sitio, como los menús, botones y diseños, mientras que quitando el diseño visual. Esto le da una idea de la funcionalidad subyacente y la navegación de su sitio, sin distraer elementos tales como su esquema y contenido de color.

El propósito de una estructura metálica es maximizar el potencial UX de un sitio antes de que sea aún disponibles para los visitantes. Mediante la creación de maquetas de UX de su sitio en papel o con una herramienta wireframing digital, puede solucionar los problemas antes de que se conviertan en un problema para los usuarios. Esto le puede ahorrar tiempo y dinero en la línea.

sea que esté planeando un pequeño sitio de una página, un gran portal de la compañía, o algo intermedio, wireframing puede ser una parte beneficiosa del proceso de planificación. A menos que usted está reutilizando una plantilla de probado y verdadero con una UX que diseñar estamos en confianza, wireframing podría proporcionar beneficios significativos a su sitio.

Después de todo, el diseño eficaz UX se centra en conseguir la funcionalidad clave de su sitio justo. Sin un diseño que soporta una fuerte UX positivo, se corre el riesgo de las tasas de rebote más altas y tasas de conversión más bajos. Un alambre no sólo suavizará su proceso creativo; También podría ayudar a promover el éxito general de su sitio.

relacionadas: Cómo optimizar su sitio web con Responsive Design

Cómo Estructura metálica de una página web (en 6 etapas)

Creación de una estructura metálica puede convertirse en un proceso que consume tiempo, especialmente si las cosas no van bien durante la etapa de prueba. Sin embargo, tomarse el tiempo para limar cuestiones UX antes de tiempo le dará a su sitio una mejor oportunidad de éxito en el futuro. Los seis pasos que se indican a continuación le ayudarán a empezar.

Paso 1: reunir las herramientas para Wireframing

Hay dos métodos principales para la creación de wireframes – a mano o en formato digital. Si vas con la primera opción, todo lo que necesita es un lápiz y papel para empezar. Algunos diseñadores comienzan con una ‘baja fidelidad’ de alambre de papel para la lluvia de ideas y luego crear una versión digital de ‘alta fidelidad’ más adelante.

En cuanto a las opciones digitales ir, hay una amplia variedad de herramientas de mallas disponibles. Si este es su primer alambre, o si usted es solo lo hace usted mismo dueño de un (DIY) sitio y no un diseñador, se podría tratar de una herramienta gratuita como Wireframe.cc.

Esta herramienta sencilla wireframing mantiene sus proyectos se conviertan en estorbado por la limitación de su paleta de colores. Puede crear diseños sencillos con su interfaz de arrastrar y soltar, y anotar sus corrientes de aire para que no se olvide de información importante.

Otra opción es Wirify, un bookmarklet que se puede añadir a su navegador.

interfaz de esta herramienta vueltas páginas web en estructuras alámbricas existentes. En lugar de ayudar a redactar el diseño UX para un nuevo sitio, que es más útil para el rediseño web.

Si usted está dispuesto a gastar un poco de dinero, por el contrario, se podría mirar en maquetas Balsamiq.

Cuenta con una interfaz wireframing fácil de usar, de colaboración que es grande para los equipos y profesionales que necesitan la colaboración en tiempo real. Sin embargo, se limita a wireframing estática. Si desea una herramienta más completa que también puede ser utilizado para la creación de prototipos (del que hablaremos más adelante en este post), es posible probar Prott.

Paso 2: Haga su usuario Target y UX Design Research

Antes de comenzar la redacción de su estructura metálica, es útil hacer algunas investigaciones. Para empezar, usted querrá saber quién es su público objetivo. Esto puede ayudar a determinar las funciones necesidad de ser más prominente en su sitio para que los visitantes pueden encontrar lo que necesitan.

las Personas de usuario pueden ser una herramienta de diseño útil para esta parte del proceso. Trate de crear algunos de los grupos de usuarios potenciales, por lo que tiene una referencia que pueda volver a lo largo del proceso de diseño de estructura metálica. Personas también pueden ayudar a crear una estrategia de marketing más adelante, por lo que aferrarse a ellos.

También es aconsejable para investigar algunas tendencias de diseño UX y las mejores prácticas. Esto puede dar una idea de elementos tales como diseños de menú, el posicionamiento de su logotipo y otros elementos de la marca significativos, y los diseños de contenido. Los usuarios encuentran más fácil de navegar un sitio web que sigue la convención cuando se trata de estas características.

Paso 3: Determine su óptima del usuario Flujos

A ‘la afluencia de usuarios’ se refiere a la trayectoria de un visitante necesita para completar un objetivo específico en su página web. Así, por ejemplo, si usted tiene un sitio de comercio electrónico, un flujo de usuario podría ser de una página de producto hasta el final del proceso de compra.

La determinación de las tareas clave Los usuarios tendrán que completar en su sitio puede ayudar a crear el flujo de usuario sencilla más para cada objetivo potencial. Esto ayudará a maximizar UX al hacer que su sitio web fácil y agradable de usar.

Dicho esto, puede ser difícil entrar en la mente de un usuario hipotético. Haciéndose estas preguntas pueden ayudar cuando se está tratando de resolver sus flujos de usuario principal: problemas

  • ¿Qué va a resolver para los usuarios? ¿Qué objetivos podrían ser que la esperanza de lograr al llegar a su sitio?
  • ¿Cómo se puede organizar su contenido (como botones, enlaces y menús) para apoyar esos objetivos?
  • Lo que debería usuarios ver de primera cuando llegan a su sitio, lo que puede ayudar a orientar ellos y hacerles saber que están en el lugar correcto?
  • ¿Cuáles son las expectativas de los usuarios de un sitio como el suyo?
  • Lo que llamar a los botones de acción (CTA) va a proporcionar, y donde se puede colocar de modo que los usuarios notarán?

Cada una de estas respuestas le sugerirá algo vital acerca de la forma en que necesita para diseñar sus páginas.

relacionadas: 7 consejos para escribir Ganar llamadas a la acción para su página web

Paso 4: Iniciar la redacción de su estructura alámbrica

Ahora que ha reunido toda la información y herramientas clave para su estructura metálica, se puede iniciar la redacción. Tenga en cuenta que el propósito de esta tarea no es crear un diseño completo para su sitio web. Usted está centrado únicamente en UX y cómo se puede crear una página que es fácil de navegar y entender.

A tal fin, el alambre debe incluir características y formatos que son importantes para cómo los usuarios interactúan con y hacer uso de su sitio web. Estos podrían incluir:

  • un diseño señalando donde colocar las imágenes, elementos de marca, contenido escrito, y reproductores de vídeo
  • su menú de navegación, incluyendo una lista de cada elemento se incluirá y el orden en el que aparecerán
  • Todos los enlaces y botones presentan en la página de contenido
  • pie de página, como su información de contacto y medios de comunicación social vincula

sus respuestas a las preguntas en el paso anterior es probable que ayuda con esta etapa del proceso. Recuerde tener en cuenta las convenciones de diseño web, las expectativas del usuario, y las jerarquías de información al colocar estos elementos en su página.

También hay varios elementos que no son apropiados para una estructura metálica. características de diseño visual, tales como la combinación de colores, la tipografía, y cualquier pantallas decorativas, se deben dejar fuera de su estructura metálica. De hecho, lo mejor es mantener la estructura metálica en escala de grises para que pueda centrarse en la usabilidad.

También no es necesario insertar imágenes, vídeos, contenido escrito, o sus elementos de marca reales como el logotipo y el eslogan. Marcadores de posición de estas características será hecho el trabajo. La idea es evitar la incorporación de cualquier cosa que pudiera proporcionar una distracción de los flujos de usuarios y elementos de navegación que son fundamentales para UX.

sean impresionantes en Internet

Únete a nuestro boletín de noticias mensual de consejos y trucos para construir su sitio web sueño!

Paso 5: Realizar pruebas de usabilidad para probar su diseño

vez que tenga su estructura metálica inicial completado, tendrá que llevar a cabo algunas pruebas. Esto le ayudará a determinar si se ha cumplido con su objetivo de trazar fluye al usuario más simple y natural y UX para su sitio. Hay varias maneras de hacer esto.

Si está trabajando con un equipo, su primera ronda de pruebas probablemente se llevará a cabo internamente. Cada miembro del equipo debe pasar algún tiempo con la estructura metálica para ver si tiene sentido. Tener trabajo todo el mundo de forma independiente para que no se influyen mutuamente, y tomar notas sobre cualquier problema que se ejecutan en.

Sin embargo, también hay herramientas que pueden proporcionar pruebas de usabilidad más objetiva de su estructura metálica. Estas pruebas están destinadas a los usuarios reales de imitar, que puede ser particularmente útil. El hecho de que su equipo de diseñadores web encuentra su lógica alambre no significa que el usuario medio de sitio lo hará.

UsabilityHub es una plataforma que conecta a diseños con usuarios reales para darle su opinión sobre cómo el visitante medio percibe su estructura metálica.

Ofrece un plan libre de modo que incluso los pequeños sitios y no diseñadores pueden poner esta herramienta para un buen uso. Para los diseñadores profesionales y equipos, también hay planes que ofrecen características avanzadas para ayudar con la más extensa y en profundidad las pruebas.

relacionadas: Top 6 Elementos básicos de Diseño Web

Paso 6: Convertir su estructura alámbrica en un prototipo

Después de su estructura metálica tiene la prueba sufrida, y que haya determinado el mejor diseño UX posible para su sitio, es el momento para convertirlo en un prototipo. A diferencia de wireframes, que son estáticos, prototipos incluyen algunas funciones básicas para que pueda probar usuario fluye de manera más realista.

Como mencionamos en el primer paso, puede ser útil elegir una plataforma que puede dar vuelta a su estructura metálica en un prototipo. Prott, por ejemplo, le permite crear interactivos, prototipos de alta fidelidad de su estructura metálica.

Sin embargo, si usted prefiere una herramienta wireframing diferente, algunas plataformas se centran específicamente en la creación de prototipos. InVision es una plataforma de alta calidad que hace que sea fácil para los equipos a trabajar juntos y comunicarse sobre maquetas. herramienta

Cualquiera que elija, tendrá que poner su prototipo a través de otra ronda de pruebas de usuario, una vez que esté completo. Después de que su prototipo ha pasado, se puede llegar a la construcción de su sitio real con la confianza de que su UX será de primera categoría desde su fecha de lanzamiento.

Haciendo wireframes para mejorar UX

Cuando se trata de diseñar un sitio web, sólida UX es crucial si se desea establecer su proyecto para el éxito. Wireframing su sitio web antes de empezar la construcción de páginas puede ayudar a obtener UX derecho aún antes de haber lanzado su sitio.

vez que haya terminado el diseño de su sitio, usted necesitará un plan de alojamiento que puede mantenerse al día con su UX estelar. En DreamHost, proporcionamos alta calidad compartida planes de alojamiento que no se le permitirá a sus usuarios hacia abajo. Compruebe a cabo hoy!

Deja un comentario