wireframe

wireframe

1. QUE ES

   • significaba una representación visual de objetos tridimensionales, como aquellos empleados en el desarrollo y diseño de productos. Ahora también se usa para describir el modelado 3D en animación por computadora y en el diseño y desarrollo de aplicaciones móviles y páginas web 2D.
     • Wireframes básicos. También conocidos como "representaciones de baja fidelidad", son esquemas de páginas muy simples, por lo general en blanco y negro.
     • Wireframes anotados. Las anotaciones son notas breves, que se ubican por lo general a un lado o al final de un wireframe y describen cada elemento del mismo.
       • Generalmente están separadas por áreas de contenido y funcionalidad, y muestran (de forma breve) el motivo y propósito de cada elemento.o.
     • Wireframes de flujo de usuarios. Cuando las anotaciones no alcanzan para mostrar cómo el usuario de una aplicación o página web se desplazará lógicamente a través del contenido de una página a la otra, Estos wireframes pueden ser visualizaciones estáticas de un wireframe totalmente interactivo
       • Estos suelen contener anotaciones que explican qué hace cada botón, sección, etc. El texto que se utiliza podría ser texto real. No debe confundirse con un diseño final.
     • Wireframes de flujo de usuarios. . Estos wireframes pueden ser visualizaciones estáticas de un wireframe totalmente interactivo, pero pueden incluir una presentación o un conjunto de wireframes en serie para indicar un flujo de un usuario primario o un conjunto de flujos de usuarios.
       • Muestra la secuencia de pantallas, acciones y decisiones que toma un usuario para completar una tarea, desde el comienzo del proceso hasta el final.
     • Cómo diseñar y crear un wireframe simple
       • 1. Piensa en el objetivo principal de la página web y realiza el diseño con eso en mente. Ten en cuenta cómo interactuará el usuario con la interfaz. 2. Comienza con una representación simple y de baja fidelidad de una página web dividida en tres partes: el encabezado (lo primero que los usuarios verán en la parte superior de la página), el cuerpo del sitio y el pie de página, que generalmente contiene información menos importante.
         • 3. Luego, piensa en la navegación. Agrega botones y enlaces para que los usuarios visiten las principales secciones de tu sitio web, incluidas las áreas de contenido, búsqueda e inicio de sesión del usuario.4. Realiza anotaciones en tu wireframe para que sea más claro.
           • Una vez que llegues a esta etapa, podrás compartir el wireframe con los interesados antes de continuar con el siguiente paso. Puedes dibujar el wireframe inicial a mano en un papel o una pizarra, pero cuando llegues a la fase 4, es probable que necesites usar un software para seguir desarrollando el wireframe.

Bilder und Dateien der Mindmap