{"id":107,"date":"2005-07-28T16:29:55","date_gmt":"2005-07-28T14:29:55","guid":{"rendered":"http:\/\/www.simdalom.com\/blog\/2005\/07\/28\/wireframes\/"},"modified":"2005-07-28T16:29:55","modified_gmt":"2005-07-28T14:29:55","slug":"wireframes","status":"publish","type":"post","link":"https:\/\/simdalom.com\/blog\/2005\/07\/28\/wireframes\/","title":{"rendered":"Wireframes"},"content":{"rendered":"


\nHace algunos d\u00edas mantuvimos una conversaci\u00f3n<\/a> sobre los wireframes en la lista de correo<\/a> de Cadius<\/a>. Aunque en muchas ocasiones he utilizado m\u00e9todos similares no lo conoc\u00eda como t\u00e9cnica concreta y ni mucho menos por ese nombre. He indagado un poco sobre el asunto y esto es lo que puedo decir por ahora.<\/p>\n

T\u00e9cnicamente los wireframes son las mayas de l\u00edneas que se utiliza en el modelado 3d para reducir dificultad en la transformaci\u00f3n del boceto. Aplicado este concepto a la arquitectura de la informaci\u00f3n deducimos que el wireframe es el esqueleto de p\u00e1ginas, con sus relaciones, dependencias y condiciones, de un sitio web. De este modo podemos planificar, y conocer para su posterior dise\u00f1o y desarrollo, todas las p\u00e1ginas y procesos de nuestro sitio web con detalle.<\/p>\n

El resultado es el inventario de contenido<\/strong> y el diagrama de contenidos<\/strong>.<\/p>\n

Las ventajas las describe muy claramente Factor Humano<\/a> en su art\u00edculo Wiframes<\/a>.<\/p>\n

En primer lugar, el definir claramente las caracter\u00edsticas de contenido de las p\u00e1ginas que componen un sitio es de una importancia sustantiva. Esto permitir\u00e1 que el desarrollo de todas las etapas posteriores se realice inequ\u00edvocamente, con todos los miembros hablando de lo mismo.<\/p>\n

En segundo lugar permite establecer hitos con el cliente que generan definiciones precisas. Al momento de validar los wireframes de un sitio con el cliente, se centra la atenci\u00f3n en el dise\u00f1o de contenidos, no en el dise\u00f1o visual. Un wireframe puede contener ciertos elementos de car\u00e1cter visual como una sugerencia de diagramaci\u00f3n general, la jerarquizaci\u00f3n de los elementos, pero en rigor se trata de organizar la informaci\u00f3n a nivel de p\u00e1gina, por lo tanto no se discute de dise\u00f1o. De hecho, es muy posible que posteriormente, al traducir el wireframe a dise\u00f1o, el dise\u00f1ador gr\u00e1fico determine que es necesario alterar ciertos elementos para optimizar aspectos comunicacionales, siempre que esto enriquezca al contenido y no sea exclusivamente por manierismos est\u00e9ticos.<\/p><\/blockquote>\n

Para establecer las relaciones informacionales y documentales entre los distintos elementos de un sitio web es necesaria la utilizaci\u00f3n de un vocabulario visual est\u00e1ndar –Un vocabulario visual es un conjunto de s\u00edmbolos usado para describir algo (usualmente un sistema, estructura o proceso)–. Hay que partir de la base de que los wireframes o diagramas documentos que van a revisar muchas parte de construcci\u00f3n de un producto: inversores, responsables de proyectos, productores de contenido, dise\u00f1adores, desarrolladores y arquitectos de informaci\u00f3n. Jesse James Garrett ha desarrollado un vocabulario visual para describir arquitectura de informaci\u00f3n y dise\u00f1o de interacci\u00f3n<\/a>.<\/p>\n

En la lista se dejaron una serie de lecturas y recursos en ingl\u00e9s<\/strong> que apunto aqu\u00ed para que todo el que quiera y yo mismo profundicemos poco a poco en el tema:<\/p>\n