El documento describe un taller de producción digital que aborda la creación y presentación de proyectos de diseño web, incluyendo la elaboración de maquetas y prototipos. Se enfatiza la importancia de la usabilidad, la arquitectura de la información y la efectividad en la comunicación visual para el diseño de interfaces. Además, se discuten herramientas y procesos necesarios para optimizar la experiencia del usuario en entornos digitales.

1. taller
PRODUCCIÓN DIGITAL
Patricio Rodríguez M.
@taller_media

2. “[
]porque
todo
diseño
comienza
cuando
se
comprende
y
se
interpreta”
Alan Fletcher

3. The world is complex, dynamic, multidimensional; the
paper is static, flat. How are we to represent the rich
visual world of experience and measurement on mere
flatland?
!
Edward Tufte, Envisioning Information, 1990.
El mundo es complejo, dinámico, multidimensional; el papel es
estático, plano. ¿Como vamos a representar el rico mundo
visual de las experiencias y las medidas en un pobre espacio
plano?

4. programa
instruccional
REALIZAR MAQUETAS DE CORRECCIÓN Y
PRESENTACIÓN DE PROYECTOS DE DISEÑO, PARA
DIFERENTES MEDIOS Y SOPORTES DE ACUERDO A LOS
REQUERIMIENTOS DEL PROYECTO.

5. programa
instruccional
Identifica información de test de usuario para correcciones y/o ajustes a realizar en
producto web, en función de sus requerimientos.
!
Realiza prototipos en documentos codificados bajo estándares de construcción
web.
Realiza validaciones de estándares web aplicado a los documentos de la maqueta,
en función de los requerimientos del proyecto.
!
Identifica estándares de construcción web aplicables a un proyecto, de acuerdo a
los requerimientos definidos.
!
Identifica características de maquetas y prototipos web, en función de los
requerimientos de la pieza a producir. Realiza maquetas gráficas para el prototipado
web según requerimientos del proyecto.
Realiza correcciones en maqueta de acuerdo a información de test de usuarios.

6. taller + producción
TIEMPOS DE TRABAJO

7. experiencia de usuario UX
Usabilidad
Factores sociales
Factores culturales
Contexto de uso

8. experiencia de usuario UX
Usabilidad
Factores sociales
Factores culturales
Contexto de uso
arquitectura de la información
Contenido (card sorting)
Estudio (blue prints)
Representación (wireframes)
Evaluación (test de usuario)

9. diseño de interfaz UI
Elementos gráficos (el rol del diseñador)
Elementos activos (el rol del programador)
La semántica del la web (el rol del usuario)
Frameworks (pensando en dispositivos)

10. diseño de interfaz UI
Elementos gráficos (el rol del diseñador)
Elementos activos (el rol del programador)
La semántica del la web (el rol del usuario)
Frameworks (pensando en dispositivos)
desarrollo web
HTML5, HTML
CSS3, CSS
Javascript (lenguajes de interactividad)
Publicación
Administración de contenidos

11. evaluaciones
13 Notas
5 Individuales
8 Grupales
!
No existen entregas atrasadas
Correcciones grupales
Comunicación

12. etapas de un
PROYECTO WEB

13. armar documentos para la web desde
su diseño, optimización y vinculación
entre lenguajes de programación

14. diseño basado en estándares
proceso productivo
del diseño web

15. arquitectura de contenidos
define las categorías, páginas y flujo de navegación de un sitio web

16. wireframe
estructura de alambre, que
define la diagramación de un
documento web

17. mock up
maqueta final que presenta la
propuesta gráfica de un
documento, línea visual de un
sitio

18. … y la información también se diseña
lo importante siempre en
una pieza comunicacional
es la información

19. diseño de la
información

20. El DI puede definirse como el arte y la ciencia
de preparar la información, de modo que
pueda usarse por los humanos con eficacia y
eficiencia
Horn (1999)
diseño de la
información

22. definición de la
información
La información es un conjunto de mecanismos que permiten al
individuo retomar los datos de su ambiente y estructurarlos de una
manera determinada, de modo que le sirvan de guía para su acción.

23. definición de la
información
La información es un conjunto de mecanismos que permiten al
individuo retomar los datos de su ambiente y estructurarlos de una
manera determinada, de modo que le sirvan de guía para su acción.

24. 38 años50 millones de
usuarios

25. 13 años50 millones de
usuarios

26. 4 años50 millones de
usuarios

27. 3 años50 millones de
usuarios

28. 2 años50 millones de
usuarios

29. es progresiva y por ende altamente complejizada en razón
de las nuevas tecnologías
la información

30. 1. El diseñar información es trabajar con datos que puedan llegar a
convertirse en información valiosa para un lector meta
!
2. En el diseño se persigue no solo la comunicación de la
información, sino también su asimilación o aprendizaje a fin de
convertirse en conocimiento
!
3. La información que se diseña, se hace con base en la intención,
experiencia y pertinencia del usuario final
3 puntos
fundamentales

31. La comprensibilidad del documento
se puede conseguir mediante la
visualización de los componentes
que lo forman

32. documentos
comprensibles
El primer requisito del DI es que los
documentos que transmiten información
deben ser comprensibles.

33. documentos
comprensibles
sistemas
interactivos
implican la visualización de todos los
elementos de la interacción, lo que
incluye el entorno social, el estado
cognitivo del usuario, el sistema de
diseño

34. espacios de
información
navegables
documentos
comprensibles
sistemas
interactivos
Cuando los espacios informativos se
diseñan, deben ser navegables para los
usuarios.
!
Por analogía con la navegación real, se
debe diseñar la información conectando
las tareas con el modo de encontrar el
camino y de poner señales.

35. usabilidad

36. la usabilidad es la facilidad con que las
personas pueden utilizar una
herramienta con el fin de alcanzar un
objetivo concreto

38. DON’T MAKE
ME THINK
Steve Krug
diseñar es organizar elementos de modo que cumplan una
necesidad particular de la mejor manera/forma posible.
(Charles Eames)
usabilidad

39. orga
ni
zar
estructura
clara y
convincente

40. orga
ni
zar
estructura
clara y
convincente
eco
nomi
zar
lo máximo con
la menor
cantidad de
elementos

41. orga
ni
zar
estructura
clara y
convincente
eco
nomi
zar
lo máximo con
la menor
cantidad de
elementos
co
muni
car
presentación a
la capacidad
del usuario

42. encargo
01

43. Análisis de sitios web como herramienta digital
!
Establecer la utilidad (para qué, rol o tarea a ejecutar),
usabilidad (el como) y experiencia de uso
!
Analisar el contexto gráfico para presentar la información y
deducir el posible perfil de usuario

44. SITIOS WEB DE MARCAS DE
AUTOMÓVILES
!
3 sitios buenos
3 sitios malos
!
FORMATO DE ENTREGA: PDF paginado con presentación.
!
OBS: la presentación también se diseña