Taller de Wireframes
-
Upload
rodrigo-vera -
Category
Design
-
view
8.169 -
download
0
description
Transcript of Taller de Wireframes
Wireframestaller por Rodrigo Vera y Yerko Pezzopane
22 y 23 de Octubre de 2010
Que son los wireframes?
? -
Taller de wireframes por @rots y @ypezzopane 3 de 34
Que son los wireframes?
? -El Wireframe es una jerarquización de contenidos distribuida visualmente y una esquematización de la interfaz.
Gráficamente, son estructuras muy simples y están enfocados a visualizar la distribución de los contenidos dentro de una pantalla.
Taller de wireframes por @rots y @ypezzopane 4 de 34
Relacion entre AI y diseno- -El Wireframe es el puente que une la Arquitectura de Información y Diseño. Pasa de la “mentalidad estructural” de un mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz. Arquitectura de información
Estrategia
Diseño de interfaz
Desarrollo
Wireframes
Taller de wireframes por @rots y @ypezzopane 5 de 34
-Relacion entre AI y diseno-Pasar de la AI al Wireframe, compete varios procesos de un desarrollo de interfaz digital.
Será importante en esta traducción aspectos estratégicos, definiciones de buenas prácticas del benchmark y la definición de los contenidos.
Luego, valiéndonos del árbol de contenidos, podremos plasmar una correcta jerarquía de contenidos en nuestro esquema.
Taller de wireframes por @rots y @ypezzopane 6 de 34
Utilidad de los wireframesLa principal ventaja de los Wireframes, es que ofrecen una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.).
Esto último, ayuda a que el proyecto en desarrollo no se retrase por falta de definición o que el resultado se aleje mucho de lo que se esperaba.
_ <
Tiempos
_<
Productividad_ <
Costos
Taller de wireframes por @rots y @ypezzopane 7 de 34
Utilidad de los wireframesAdemás, son una excelente herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
Caracteristicasy ventajas
-
Taller de wireframes por @rots y @ypezzopane 9 de 34
Son simples y no tienen distracciones visuales tales como color o imágenes
Taller de wireframes por @rots y @ypezzopane 10 de 34
Pueden ser dibujados a mano o creados con alguna aplicación computacional
Taller de wireframes por @rots y @ypezzopane 11 de 34
Cada página o pantalla de una interfaz está representada en 1 wireframe
Taller de wireframes por @rots y @ypezzopane 12 de 34
Siempre van acompañados de una explicación acerca de las zonas e interacciones
Taller de wireframes por @rots y @ypezzopane 13 de 34
Se utilizan en la creación de cualquier tipo de interfaces digitales (web, móviles, ATM, etc.)
Taller de wireframes por @rots y @ypezzopane 14 de 34
Ventajas de los wireframesDefinen qué quiere tu cliente y cuáles son sus objetivos
Permite la comunicación fluida entre el equipo de trabajo y el cliente
Las correcciones son objetivas, basadas en contenidos y funcionalidad Se evitan las discusiones gráficas
Se reducen los tiempos de trabajo y costos
Permiten visualizar interacciones y flujos
Se pueden identificar problemas de Interacción, Usabilidad, Accesibilidad, etc. que puedan presentarse más adelante
Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz
Guias visuales-
Taller de wireframes por @rots y @ypezzopane 16 de 34
Son estructuras simples conformados principalmente de líneas y cajas
Taller de wireframes por @rots y @ypezzopane 17 de 34
Están diseñados en escala de grises
Taller de wireframes por @rots y @ypezzopane 18 de 34
Todos los elementos gráficos (imágenes, marcas, iconos) y de sistema (radio button, dropdown,
checkbox) están representados esquemáticamente
Taller de wireframes por @rots y @ypezzopane 19 de 34
Se utiliza solamente una familia tipográfica
1234567890¿?abcdefghijklmnñopqrstuvwxyz
Taller de wireframes por @rots y @ypezzopane 20 de 34
Los contenidos deben ser reales (de preferencia)
¿Lorem ipsum?
Malas practicas-
Taller de wireframes por @rots y @ypezzopane 22 de 34
Uso del color e imágenes
Taller de wireframes por @rots y @ypezzopane 23 de 34
Confusión por parte del cliente al ver un Wireframe a color anteriormente
Taller de wireframes por @rots y @ypezzopane 24 de 34
Mezcla con interfaz real
Taller de wireframes por @rots y @ypezzopane 25 de 34
Wireframes muy complejos (mezcla de formas y colores)
Taller de wireframes por @rots y @ypezzopane 26 de 34
Wireframes muy simples (sin contenido)
Herramientaspara disenar wireframes
-
Taller de wireframes por @rots y @ypezzopane 28 de 34
Lapiz y papel-Es la manera más rápida y espontánea de diseñar wireframes, donde se favorece la acción de plasmar una idea al instante.
Se recomienda empezar de esta manera, ya que dibujando comenzamos a armar, de una forma mucho más abstracta, las áreas generales del Wireframe. Después, en formato digital, se desarrolla con más profundidad.
Taller de wireframes por @rots y @ypezzopane 29 de 34
Prototipos en papelEl prototipado en papel es ideal para hacer los primeros esbozos del funcionamiento de una futura aplicación, constituyéndose en un elemento de testeo, debate rápido y económico que evitará futuros y costosos errores en fases posteriores de desarrollo.
Ver ejemplo en video (YouTube)
Taller de wireframes por @rots y @ypezzopane 30 de 34
Herramientas digitalesEs la manera más común de realizar Wireframes.
Se puede comenzar desde cero o teniendo un prototipo hecho en papel como base, existiendo muchas aplicaciones de escritorio y web-based para realizarlos.
Taller de wireframes por @rots y @ypezzopane 31 de 34
Herramientas digitales
Fireworks
Omnigraffle
Microsoft Visio
Axure
Balsamiq
Keynote
Apliacionesescritorio
Apliacionesweb
Hotgloo
iplotz
Balsamiq
Cacoo
Algunos ejemplos de aplicaciones para realizas Wireframes:
Lo recomienda @rots
Lo recomienda @ypezzopane
Taller de wireframes por @rots y @ypezzopane 32 de 34
Otros usos del wireframeEn algunos casos, los Diseñadores Front usan el Wireframe para entender y conceptualizar. Es así como pueden utilizar un “mapa de divs” para ordenar la forma en que se llevará a código el diseño de Interfaz.
Así entonces, este proceso se concibe como una visualización de la zonificación de pantalla en un mapa de divs, el cual descifra la modulación de los contenedores (divs) y las demás etiquetas del contenido.
10 consejos para mejorar tus wireframes
Taller de wireframes por @rots y @ypezzopane 14 de 34
10 consejos para mejorartus wireframes
Simple sobre todas las cosas
Usa la mayor cantidad de contenido real posible
Siempre trabaja en escala de grises
Evita usar imágenes, logos e iconografía
No te limites a usar una aplicación digital, ¡dibuja!
Define muy bien la estrategia y los contenidos antes de empezar
Siempre haz wireframes antes de diseñar
Explica las zonas e interacciones
Discute los wireframes con tu equipo de trabajo
Corrige problemas detectados en wireframes, no en diseño
Preguntas??
Gracias.
Yerko Pezzopane (@ypezzopane)
Diseñador GráficoDirector de Arte en Multiplica Chile
Rodrigo Vera (@rots)
Diseñador GráficoArquitecto de Información en Digitaria
Taller de wireframes por @rots y @ypezzopane 34 de 34