Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Taller de Wireframes

on

  • 7,656 views

Clase sobre Wireframes.

Clase sobre Wireframes.
VI Seminario de Arquitectura de Información Chile, 22 y 23 de Octubre, Viña del Mar y Santiago.
www.aichile.org

Statistics

Views

Total Views
7,656
Views on SlideShare
6,309
Embed Views
1,347

Actions

Likes
36
Downloads
315
Comments
8

22 Embeds 1,347

http://moodle.ucentral.edu.co 608
http://blog.nomono.co 168
http://hiperterminal.novenopiso.org 168
http://rots.cl 124
http://jugodenaranja.cl 86
http://wiki.ead.pucv.cl 64
http://uao.libguides.com 26
http://www.jairoinagan.com 25
http://taller.joseignacio.cl 24
http://www.kayograco.com 20
http://www.linkedin.com 18
http://webcache.googleusercontent.com 3
http://cms.76440proyecto.webnode.es 2
http://us-w1.rockmelt.com 2
http://www.artisteer-text.com 2
http://kayograco.com 1
http://feeds.feedburner.com 1
http://static.slideshare.net 1
http://tweetedtimes.com 1
http://ebook 1
http://a0.twimg.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

18 of 8 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Taller de Wireframes Taller de Wireframes Presentation Transcript

    • Wireframes taller por Rodrigo Vera y Yerko Pezzopane 22 y 23 de Octubre de 2010
    • ? Que son los - wireframes?
    • ? 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 3 de 34
    • - Relacion entre AI y diseno - El Wireframe es el puente que Desarrollo une la Arquitectura de Información y Diseño. Pasa de la “mentalidad estructural” de un mapa de contenidos, dónde Diseño de interfaz decidimos y ordenamos los contenidos de nuestro sitio web, a Wireframes la emocionalidad del Diseño de Arquitectura de información Interfaz.  Estrategia Taller de wireframes por @rots y @ypezzopane 4 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 5 de 34
    • Utilidad de los wireframes < La principal ventaja de los Wireframes, es que ofrecen una Productividad _ 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 Tiempos Costos retrase por falta de definición o que el resultado se aleje mucho de lo que se esperaba. Taller de wireframes por @rots y @ypezzopane 6 de 34
    • Utilidad de los wireframes Además, son una excelente herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. Taller de wireframes por @rots y @ypezzopane 7 de 34
    • Caracteristicas - y ventajas
    • Son simples y no tienen distracciones visuales tales como color o imágenes Taller de wireframes por @rots y @ypezzopane 9 de 34
    • Pueden ser dibujados a mano o creados con alguna aplicación computacional Taller de wireframes por @rots y @ypezzopane 10 de 34
    • Cada página o pantalla de una interfaz está representada en 1 wireframe Taller de wireframes por @rots y @ypezzopane 11 de 34
    • Siempre van acompañados de una explicación acerca de las zonas e interacciones Taller de wireframes por @rots y @ypezzopane 12 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 13 de 34
    • Ventajas de los wireframes Definen 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 Taller de wireframes por @rots y @ypezzopane 14 de 34
    • Guias visuales -
    • Son estructuras simples conformados principalmente de líneas y cajas Taller de wireframes por @rots y @ypezzopane 16 de 34
    • Están diseñados en escala de grises Taller de wireframes por @rots y @ypezzopane 17 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 18 de 34
    • Se utiliza solamente una familia tipográfica 1234567890¿? abcdefghijklmn ñopqrstuvwxyz Taller de wireframes por @rots y @ypezzopane 19 de 34
    • Los contenidos deben ser reales (de preferencia) ¿Lorem ipsum? Taller de wireframes por @rots y @ypezzopane 20 de 34
    • Malas practicas -
    • Uso del color e imágenes Taller de wireframes por @rots y @ypezzopane 22 de 34
    • Confusión por parte del cliente al ver un Wireframe a color anteriormente Taller de wireframes por @rots y @ypezzopane 23 de 34
    • Mezcla con interfaz real Taller de wireframes por @rots y @ypezzopane 24 de 34
    • Wireframes muy complejos (mezcla de formas y colores) Taller de wireframes por @rots y @ypezzopane 25 de 34
    • Wireframes muy simples (sin contenido) Taller de wireframes por @rots y @ypezzopane 26 de 34
    • Herramientas - para disenar wireframes
    • 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 28 de 34
    • Prototipos en papel El 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 29 de 34
    • Herramientas digitales Es 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 30 de 34
    • Herramientas digitales Algunos ejemplos de aplicaciones para realizas Wireframes: Apliaciones Apliaciones escritorio web Fireworks Hotgloo Omnigraffle iplotz Microsoft Visio Balsamiq Axure Cacoo Balsamiq Keynote Lo recomienda @rots Lo recomienda @ypezzopane Taller de wireframes por @rots y @ypezzopane 31 de 34
    • Otros usos del wireframe En 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. Taller de wireframes por @rots y @ypezzopane 32 de 34
    • 10 consejos para mejorar tus wireframes
    • 10 consejos para mejorar tus 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 Taller de wireframes por @rots y @ypezzopane 14 de 34
    • ? Preguntas?
    • Gracias. Yerko Pezzopane (@ypezzopane) Diseñador Gráfico Director de Arte en Multiplica Chile Rodrigo Vera (@rots) Diseñador Gráfico Arquitecto de Información en Digitaria Taller de wireframes por @rots y @ypezzopane 34 de 34