-
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
