ABC - Wireframes

download ABC - Wireframes

of 23

  • date post

    02-Jul-2015
  • Category

    Education

  • view

    706
  • download

    0

Embed Size (px)

description

ABC - Wireframes

Transcript of ABC - Wireframes

  • 1.

2.

  • Storyboard
  • Serie de diagramas que resumen la secuencia y la disposicin del contenido (informacin y funcionalidad) a lo largo del sitio web y en cada una de las pginas

3.

  • Diagramas de organizacin y funcionamiento
  • BluePrint
    • Mostrar la estructura del sitio y su flujo de navegacin

4.

  • Diagramas de presentacin I
  • Wireframe o StoryBoard (Prototipos de Baja fidelidad)
    • Dibujos que representan cmo estarn organizados los elementos en las pginas

5.

  • Diagramas de presentacin II
  • Maquetao MockUp (Prototipo de Alta Fidelidad)
    • Representan aspectos ms precisos de forma interactiva

6.

  • Objetivos
  • Mostrar el contenido de las pginas 7. En ningn caso significan un compromiso de diseo grfico 8. Sirven como herramienta de comunicacin y discusin entre arquitectos de informacin, programadores, diseadores y clientes

9.

  • Ventajas
  • El equipo y el cliente se centran en el diseo de contenidos y no en el diseo visual 10. Se evitan cambios posteriores ms costosos

11.

  • Atencin!
  • Es muy importante aclararle siempre al cliente qu es un Wireframe, estar seguros de que entiende que ese no es el aspecto final del sitio, sino una mera representacin grfica de su contenido.

12.

  • Informacin que contiene
  • Inventario de contenido
    • Contenidos de cada pgina
  • Elementos de la pgina
    • Cabeceras, enlaces, botones, imgenes, formularios, etc
  • Etiquetado
    • De vnculos, ttulos, etc.
  • Layout
    • Ubicacin, colocacin y agrupacin de los elementos de la pgina
  • Comportamiento
    • Mediante notas asociadas a los elementos para indicar cmo se deben mostrar

13.

  • Nivel de detalle
  • Content-only
    • Nombre de la pgina y un listado de contenidos

14.

  • Nivel de detalle
  • Diagrama de bloques
    • Informacin bsica a travs de bloques de funcionalidad y agrupamiento de contenidos

15.

  • Nivel de detalle
  • Diagrama de bloques: Ms ejemplos

16.

  • Nivel de detalle
  • Diagrama de bloques: Ms ejemplos

17.

  • Nivel de detalle
  • Diagrama de bloques: Ms ejemplos

18.

  • Nivel de detalle
  • Wireframe detallado
    • Todo lo anterior ms notas de comportamiento

19.

  • Cantidad de pginas
  • Principal 20. Principales tipos de subpginas o plantillas (incluidos formularios, resultados de bsqueda, pgina de error, etc.)

21.

  • Metodologa
  • Hacer una lista numerada
    • Informacin y funciones ("bit")

22.

  • Metodologa
  • Priorizar grupos
    • Lo ms importante 23. Lo necesario 24. Lo que es bueno tener

25.

  • Metodologa
  • Agrupar los "bits" que se relacionan entre s
    • Grupos con letra (ej. A:1,3,5)

26.

  • Metodologa
  • Disear fragmentos
    • Dar forma a cada agrupacin de "bits"

27.

  • Metodologa
  • Componer los fragmentos
    • Prioridad 28. Equilibrio

29.

  • Metodologa
  • Acabado
    • En pantalla

30.

  • Recomendaciones
  • Simplificar
    • Menor cantidad posible de colores y tipos de letra
  • Quitar detalles innecesarios
    • Elementos que distraigan la atencin
  • Anotar slo lo relevante
    • Autoexplicativo 31. Presentacin