Wireframe (Diseo web)

Wireframe (Diseo web)

Un wireframe para un sitio web, tambin conocido como un esquema de pgina o plano de pantalla, es una gua visual que representa el esqueleto o estructura visual de un sitio web.[1] El wireframe esquematiza el diseo de pgina u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegacin, y cmo funcionan en conjunto.[2] Usualmente, este esquema carece de estilo tipogrfico, color o aplicaciones grficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarqua de contenidos.[3] En otras palabras, se enfoca en qu hace la pantalla, no cmo se ve.[4] Los esquemas pueden ser dibujados con lpiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseo de aplicaciones de software libre o comerciales. Los wireframes se enfocan en:[5] Los tipos de informacin que ser mostrada La cantidad de las funciones disponibles Las prioridades relativas de la informacin y las funciones Las reglas para mostrar ciertos tipos de informacin El efecto de los distintos escenarios en la pantalla
Un documento esquemtico para un perfil personal creado usando Balsamiq.

El wireframe del sitio web conecta la estructura conceptual, o arquitectura de la informacin, con la superficie, o diseo visual del sitio web. Los wireframes ayudan a establecer funcionalidad, y las relaciones entre las diferentes plantillas de pantallas de un sitio web. Un proceso iterativo de creacin de wireframes es una forma efectiva de hacer prototipos de pginas rpidos, mientras se mide la practicidad de un concepto de diseo. Tpicamente, la esquematizacin comienza entre diagramas de flujo de estructuras de trabajo de alto nivel o mapas de sitio y diseos de pantallas. Dentro del proceso de construccin de un sitio web, el dibujo de un wireframe es donde el concepto se vuelve tangible.[6] A parte de los sitios web, los wireframes son usados para hacer prototipos de sitios mviles, aplicaciones para ordenador, u otros productos basados en pantalla que impliquen interaccin hombre-mquina.[7] Las tecnologas futuras y los medios forzarn a los wireframes a adaptarse y evolucionar.

Usos de los wireframes

Los wireframes pueden ser utilizados por diferentes disciplinas. Los desarrolladores usan wireframes para obtener una aproximacin ms tangible de las funcionalidades del sitio, mientras que los diseadores los usan para tener impulsar el proceso de diseo de la interfaz de usuario (UI). Los diseadores de experiencia de usuario y arquitectos de informacin usan wireframes para mostrar las rutas de navegacin entre pginas. Los interesados en un negocio los usan para asegurarse que los requerimientos y objetivos se conectan a travs del diseo. Otros profesionales que crean wireframes incluyen a los analistas de negocios, arquitectos de informacin, diseadores de interaccin, diseadores de experiencia de usuario, diseadores grficos, programadores y gestores de productos. Trabajar con wireframes puede ser un esfuerzo colaborativo ya que este conecta la arquitectura de informacin con el diseo visual. Debido al cruce de estos roles profesionales, pueden surgir conflictos, haciendo del desarrollo de un wireframe una parte controvertida del proceso de diseo. Como los wireframes tienen una esttica "desnuda", es difcil para los diseadores asumir que tan cerca el wireframe puede representar los diseos de pantalla. Otra dificultad con los wireframes es que, efectivamente, no muestran los detalles interactivos. El diseo moderno de UI incorpora varios dispositivos como paneles expansibles, efectos de intercambio visual y carruseles que representan

Wireframe (Diseo web) un reto para diagramas en 2-D.[8] Los wireframes pueden tener mltiples niveles de detalle y pueden dividirse en dos categoras en trminos de fidelidad, o que tan parecidos son al producto final. Baja fidelidad Caracterizado por un dibujo en bruto o un boceto rpido, los wireframes de baja fidelidad tienen menos detalles y son rpidos de producir. Estos wireframes ayudan a un equipo de proyecto a colaborar ms efectivamente debido a que son ms abstractos, usando rectngulos y etiquetas para representar el contenido.[9] Contenido de prueba, texto de relleno en latn (lorem ipsum), muestra o contenido simblico son utilizados para representar datos cuando el contenido real no est disponible.[10] Alta fidelidad Los wireframes de alta fidelidad son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca ms al diseo final de una pgina web, pero toma ms tiempo para ser creado. Para dibujos sencillos o de baja fidelidad, los prototipos en papel es una tcnica comn. Como estos son slo representaciones, las notas al margen para explicar comportamientos son tiles.[11] Para proyectos ms complejos, representar wireframes con software de computador es popular. Algunas herramientas permiten incorporar interactividad, incluyendo animacin en Flash, y tecnologas de presentacin web como HTML, CSS, y JavaScript.

Elementos de un wireframe
El esqueleto de un sitio web puede ser dividido en tres componentes: diseo de informacin, diseo de navegacin y diseo de interfaz. El diseo de la pgina es donde estos componentes se unen, mientras que un wireframe es donde se representa la relacin entre estos componentes.

Diseo de informacin
Artculo principal: Diseo de informacin El diseo de informacin es la ubicacin en la presentacin y priorizacin de informacin de manera de facilitar el entendimiento. El diseo de informacin es un rea del diseo grfico pensada para representar informacin de manera efectiva para una comunicacin clara. Para sitios web, los elementos informativos deben estar ordenados de manera que reflejen los objetivos y tareas del usuario.[12]

Diseo de navegacin
El sistema de navegacin provee un conjunto de elementos en pantalla que permiten al usuario moverse entre pginas del mismo sitio web. El diseo de navegacin debe comunicar la relacin entre los enlaces que contiene de forma que esos usuarios entiendan las opciones que tienen para navegar el sitio. A menudo, los sitios web contienen mltiples sistemas de navegacin, tales como navegacin global, navegacin local, navegacin suplementaria, navegacin contextual y navegacin de cortesa.[13] Este diseo permite dar una vista de manera global, de la ubicacion y desplazamiento a traves de las diferentes paginas de un sitio web.

Diseo de interfaz
Artculo principal: Diseo de interfaz de usuario El diseo de la interfaz de usuario incluye seleccionar y ordenar los elementos de la interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema.[14] El objetivo es facilitar la usabilidad y eficiencia tanto como sea posible. Elementos comunes que se encuentran en el diseo de interfaces son los botones de accin, campos de texto, cajas de verificacin, botones radiales y mens desplegables.

Wireframe (Diseo web)

Ver adems
Diseo comprensivo Diseo grfico Arquitectura de la informacin Diseo de experiencia de usuario Diseo de interfaz de usuario Diseo web

Notas
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] Brown 2011, p. 166 Garrett 2010, p. 131 Brown 2011, p. 167 Brown 2011, p. 168 Brown (2011), p. 169 Wodtke, Govella 2009, p. 186 Konigi.com 2011 Brown 2011, p. 169 Wodtke, Govella 2009, p. 185 Brown 2011, p. 175 Brown 2011, p. 194 Garrett 2010, p. 126 Garrett 2010, p. 120-122 Garrett 2010, p. 30

Referencias
Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders. ISBN 978-0-13-138539-9. Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. ISBN 978-0-321-68865-1. Konigi Wiki Wireframes (http://konigi.com/node/1819). Consultado el 25-03-2011. Wodtke, Christina; Govella, Austin (2009). Information Architecture: Blueprints for the Web, Second Edition. New Riders. ISBN 978-0-321-59199-9.

Fuentes y contribuyentes del artculo

Fuentes y contribuyentes del artculo

Wireframe (Diseo web) Fuente: http://es.wikipedia.org/w/index.php?oldid=72674316 Contribuyentes: Aceballosgll, Agabi10, Edmenb, Jamartin, 1 ediciones annimas

Fuentes de imagen, Licencias y contribuyentes

Archivo:Profilewireframe.png Fuente: http://es.wikipedia.org/w/index.php?title=Archivo:Profilewireframe.png Licencia: Creative Commons Attribution 2.0 Contribuyentes: http://www.flickr.com/people/doos/

Licencia
Creative Commons Attribution-Share Alike 3.0 //creativecommons.org/licenses/by-sa/3.0/