DIAGRAMACIÓN. Fundamentos y principios básicos.Monica Pelaez
Encuentra en esta serie de presentaciones, la información necesaria para iniciar un proyecto editorial con las bases y principios básicos de la "diagramación" en diseño visual.
UX significa diseño de experiencia del usuario, que es el proceso de identificar la necesidad de un usuario seguido de los pasos necesarios para ejecutarse, como pruebas e improvisación, hasta su desarrollo.
DIAGRAMACIÓN. Fundamentos y principios básicos.Monica Pelaez
Encuentra en esta serie de presentaciones, la información necesaria para iniciar un proyecto editorial con las bases y principios básicos de la "diagramación" en diseño visual.
UX significa diseño de experiencia del usuario, que es el proceso de identificar la necesidad de un usuario seguido de los pasos necesarios para ejecutarse, como pruebas e improvisación, hasta su desarrollo.
Celebramos el Día Mundial del Diseño realizando un workshop gratuito, en Duoc UC sede Vespucio para profesionales interesados y estudiantes de producción web.
Invitamos a profesionales y estudiantes de la academia, la industria y el sector público a explorar el estado actual de la educación de diseño de interacción en nuestra región y reunir a estas grandes mentes para establecer una visión para el futuro.
Interaction South America 14 Redux SantiagoRodrigo Vera
Presentación de IxDA Santiago en #ISA14REDUX
IxDA es la Asociación de Diseño de Interacción y existe desde el año 2003. Es una organización internacional con más de 15.000 miembros y más de 80 grupos locales en todo el mundo. Su objetivo es la difusión de la disciplina del Diseño de Interacción basado en un modelo de grupos o capítulos locales por ciudad.
Pertenecer a alguno de los capítulos de IxDA no tiene costo. El modelo de organización es flexible y autónomo para cada capítulo y se basa en las iniciativas locales para lograr sus objetivos de difusión de la disciplina en los ámbitos profesionales, académicos, de negocios y sociales.
IxDA Santiago es el Capítulo Santiago de Chile de IxDA y estamos funcionando desde junio de 2011.
Co-Leaders Capítulo Santiago: Eduardo Aguayo & Rodrigo Vera.
@ixdasantiago
www.ixdasantiago.cl
GAMO | Diseño Orientado a la Manufactura, MADARodrigo Vera
Presentación final para el curso de Diseño Orientado a la Manufactura del Magister en Diseño Avanzado, PUC (MADA).
Alumnos:
Barbara Bonati
Alan Eaglehurst
Francisco Leyton
Rodrigo Vera
Jer Thorp | Visualización de Datos, MADARodrigo Vera
Presentación sobre el trabajo de Jer Thorp para el curso de Visualización de Datos del Magister en Diseño Avanzado PUC (MADA).
Alumnos: Roberto Puentes, Rodrigo Vera
Pantallas e Interacciones en prototipo del proyecto Con§tel. Examen de Título Carrera de Diseño Gráfico, 2004.
e[ad] Escuela de Arquitectura y Diseño, Pontificia Universidad Católica de Valparaíso, Chile.
El movimiento moderno en la arquitectura venezolana tuvo sus inicios a mediados del siglo XX, influenciado por la corriente internacional del modernismo. Aunque inicialmente fue resistido por la sociedad conservadora y los arquitectos tradicionalistas, poco a poco se fue abriendo camino y dejando una huella importante en el país.
Uno de los arquitectos más destacados de la época fue Carlos Raúl Villanueva, quien dejó un legado significativo en la arquitectura venezolana con obras como la Ciudad Universitaria de Caracas, considerada Patrimonio de la Humanidad por la UNESCO. Su enfoque en la integración de la arquitectura con el entorno natural y la creación de espacios que favorecen la interacción social, marcaron un punto de inflexión en la arquitectura venezolana.
Otro arquitecto importante en la evolución del movimiento moderno en Venezuela fue Tomás Sanabria, quien también abogó por la integración de la arquitectura con el paisaje y la creación de espacios abiertos y funcionales. Su obra más conocida es el Parque Central, un complejo urbanístico que se convirtió en un ícono de la modernidad en Caracas.
En la actualidad, el movimiento moderno sigue teniendo influencia en la arquitectura venezolana, aunque se ha visto enriquecido por nuevas corrientes y enfoques que buscan combinar la modernidad con la identidad cultural del país. Proyectos como el Centro Simón Bolívar, diseñado por el arquitecto Fruto Vivas, son ejemplos de cómo la arquitectura contemporánea en Venezuela sigue evolucionando y adaptándose a las necesidades actuales.
Arquitectura Ecléctica e Historicista en Latinoaméricaimariagsg
La arquitectura ecléctica e historicista en Latinoamérica tuvo un impacto significativo y dejó un legado duradero en la región. Surgida entre finales del siglo XIX y principios del XX, esta corriente arquitectónica se caracteriza por la combinación de diversos estilos históricos europeos, adaptados a los contextos locales.
3. 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.
4. 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
5. 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.
6. Taller de wireframes por @rots y @ypezzopane 6 de 34
Utilidad de los wireframes
La 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
7. Taller de wireframes por @rots y @ypezzopane 7 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.
9. Taller de wireframes por @rots y @ypezzopane 9 de 34
Son simples y no tienen distracciones visuales
tales como color o imágenes
10. Taller de wireframes por @rots y @ypezzopane 10 de 34
Pueden ser dibujados a mano o creados con alguna
aplicación computacional
11. Taller de wireframes por @rots y @ypezzopane 11 de 34
Cada página o pantalla de una interfaz está
representada en 1 wireframe
12. Taller de wireframes por @rots y @ypezzopane 12 de 34
Siempre van acompañados de una explicación
acerca de las zonas e interacciones
13. 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.)
14. Taller de wireframes por @rots y @ypezzopane 14 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
16. Taller de wireframes por @rots y @ypezzopane 16 de 34
Son estructuras simples conformados
principalmente de líneas y cajas
17. Taller de wireframes por @rots y @ypezzopane 17 de 34
Están diseñados en escala de grises
18. 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
19. Taller de wireframes por @rots y @ypezzopane 19 de 34
Se utiliza solamente una familia tipográfica
1234567890¿?
abcdefghijklmn
ñopqrstuvwxyz
20. Taller de wireframes por @rots y @ypezzopane 20 de 34
Los contenidos deben ser reales (de preferencia)
¿Lorem ipsum?
28. 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.
29. Taller de wireframes por @rots y @ypezzopane 29 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)
30. Taller de wireframes por @rots y @ypezzopane 30 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.
31. Taller de wireframes por @rots y @ypezzopane 31 de 34
Herramientas digitales
Fireworks
Omnigraffle
Microsoft Visio
Axure
Balsamiq
Keynote
Apliaciones
escritorio
Apliaciones
web
Hotgloo
iplotz
Balsamiq
Cacoo
Algunos ejemplos de aplicaciones para realizas Wireframes:
Lo recomienda @rots
Lo recomienda @ypezzopane
32. Taller de wireframes por @rots y @ypezzopane 32 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.
34. Taller de wireframes por @rots y @ypezzopane 14 de 34
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
36. Gracias.
Yerko Pezzopane (@ypezzopane)
Diseñador Gráfico
Director de Arte en Multiplica Chile
RodrigoVera (@rots)
Diseñador Gráfico
Arquitecto de Información en Digitaria
Taller de wireframes por @rots y @ypezzopane 34 de 34