4
Como hacer Wireframes Juan Glz.

Juan1688 Como Hacer Wireframes 1392143376

Embed Size (px)

DESCRIPTION

Wireframes Guia Breve

Citation preview

  • Como hacer Wireframes

    Juan Glz.

  • 21 Cmo hacer Wireframes

    Breve resumen de como trabajar con wireframes. Elaborado de experiencias personales y referen-cias de internet a modo de apunte personal para reforzar mis conocimientos. Cualquiera es libre decorregir y compartir en concepto de aportar al proyecto.

    Qu es un Wireframe

    Es una representacin esquemtica de un proyecto, sin elementos grcos decorativos, nicamentemuestra retcula y se concentra en describir la funcionalidad, contenido y comportamiento de cdapgina.

  • 3Excluir los elementos grcos permite concentrarse en la retcula, obviando el diseo, evitandodistraccines (discusiones sobre colores, tipografas, imgenes, textos,etc. ).

    Sirve como herramienta de comunicacin y discusin entre el equipo de trabajo, fomenta la retroal-imentacin del proyecto para pulir detalles de usabilidad adems de aportar una gua al momento decomenzar con la produccin del proyecto.

    Antes de comenzar a trabajar con wireframes es importante conocer los componentes y susnombres que puede llegar a tener un proyecto (inputs, select, checkbox, radio buttons, textarea,popup, lightbox, alert,etc. ).

    Qu se necesita para elaborar un Wireframe Sitemap

    Nomenclatura

    Denicin de Mdulos

    Nombre

    Objetivo

    Usuarios

    Descripcin

    Funcionalidad

    Criterios

    Comportamientos

    Tablas con las que se relaciona

    Validaciones

    Campos obligatorios

    Datos Muestra

    Planeacin de UI / UX Contemplar los dispositivos en los que se presentar el proyecto.

  • 4 Tomar en cuenta el perl de usuario al que va dirigido.

    Denir tipo de Usuario: Mouse o Teclado.

    Reglas de Oro: Mostrar datos demo pero aplicados a casos reales.

    Cualquier cambio siempre se actualiza primero en los Wireframes.

    Los Wireframes irn evolucionando junto con el proyecto.

    Herramientas de Wireframing Recomendadas Papel y Lpiz

    Lucid Chart

    Balsamiq Mockups

    Fuentes de consulta Wireframe. Wikipedia ESP

    Website Wireframe. Wikipedia EN

    A Begginers Guide to Wireframing. Webdesign Tutsplus

    Cmo hacer WireframesQu es un Wireframe Qu se necesita para elaborar un WireframePlaneacin de UI / UXReglas de Oro:Herramientas de Wireframing RecomendadasFuentes de consulta