Cómo construir wireframes

Wireframes son etapas esenciales del proceso de desarrollo web. Un alambre proporciona un esquema visual de cómo funcionará el producto final. De manera similar a un esquema para un ensayo o un proyecto de construcción, el objetivo principal de crear wireframes es organizar y disponer los elementos funcionales de las páginas que está diseñando. Más simple que maquetas de pleno derecho, wireframes expresan de manera eficiente los requerimientos visuales para ayudar en la comunicación y colaboración con las partes interesadas e informar a los desarrolladores cómo construir el producto.

Instrucciones

1 Investigación de las necesidades y requerimientos de los usuarios. Si no hay requisitos formales ya documentados, piense en las tareas que el usuario debe completar o la información que debe ser transmitida a través de su sitio web o aplicación. El diseño de su sitio para que los usuarios puedan realizar las acciones deseadas con un mínimo de distracciones, clics del ratón y el desplazamiento del navegador.

2 Crear varios bocetos con un lápiz y papel. Invitar a las partes interesadas y los usuarios para esbozar sus visiones también. Lápiz y papel implica poco compromiso, por lo que se sentirán libres para expandir sus ideas y crear muchas versiones sin temor a esfuerzo inútil.

3 Seleccionar las herramientas que va a utilizar para construir sus estructuras alámbricas. Hay muchos productos creados específicamente para el desarrollo de alambre, que van desde herramientas sofisticadas - como Omnigraffle y Axure - a herramientas basadas en la web gratuitas o de bajo costo, tales como Gliffy. Si usted no tiene el software de creación de estructura metálica, se pueden crear estructuras alámbricas con software gráfico de escritorio común, como Microsoft PowerPoint o Microsoft Visio.

4 Trazar el mapa del sitio, número de páginas y la navegación en general. (Esto también se conoce como la arquitectura del sitio.) Piense en los casos y las necesidades de uso y construir el modo de navegación de páginas fluyen lógicamente de acuerdo con las necesidades del usuario.

5 Presente a las principales secciones de las páginas o aplicaciones que utilizan las mejores ideas de la lluvia de ideas y ejercicios de boceto. Algunas secciones comunes son barras de navegación, encabezados, pies de página, áreas de texto y unidades de publicidad. Crear una estructura metálica para cada página o estado visual dentro de la arquitectura del sitio.

6 Agregar elementos de página más pequeñas dentro de las secciones que ha creado. Coloque los objetos como botones, los marcadores de imagen, marcadores de posición de texto, enlaces, barras de desplazamiento y similares en el alambre. Etiqueta de cada elemento en su caso.

7 Anotar tus prototipos, señalando los principales elementos de funcionalidad y de transición. Esto es importante para transmitir a las partes interesadas y los desarrolladores cómo el usuario puede interactuar con las páginas.

8 Pedir información y hacer las revisiones. Pensar en estructuras alámbricas como un medio para un fin y no un entregable. Esperar a hacer varias revisiones hasta las partes interesadas y los usuarios están de acuerdo en que el diseño cumple con los requisitos y objetivos del usuario. Una vez que se logra el consenso, el desarrollo de prototipos puede comenzar.