Wireframe (Diseño Web)
Wireframe (Diseño Web)
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.
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.
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.
Licencia
Creative Commons Attribution-Share Alike 3.0 //creativecommons.org/licenses/by-sa/3.0/