Taller de Construcción DG 4 - 2012
| Asignatura(s) | Construcción de Diseño Gráfico 4 |
|---|---|
| Año | 2012 |
| Tipo de Curso | Taller de Construcción |
| Talleres | DG 3º, DG 4º |
| Profesores | Herbert Spencer |
| Estudiantes | Celeste Mardones, Daniela Pardo, Camila Valenzuela, Camila De la Vega, Samira Bajbuj, Caterina Da Silva, Nicole Arce, Alison Saravia |
| Palabras Clave | diseño de interfaz, diseño de interacción, internet |
| Carreras Relacionadas | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Estudiantes
Clase 1
- La herramienta de trabajo se transforma en soporte.
- Hipertexto. Los discursos ya no son grandes textos, bloques, sino que son fragmentos que se encadenan. El lector participa cada vez más ya que es él quien completa la lectura. Cada parte tiene que ser mucho más que sí misma ya que forma parte de un todo.
- Todo está avanzando hacia una desmaterialización y puesta en valor del diseño.
Revisión del reporte de AyerViernes: Reboot: Reporte sobre experiencia de personas en medios digitales
- Evolución
- Existe una aceleración exponencial: Las personas se demoran cada vez menos en adaptarse a las nuevas tecnologías, las cuales se van desarrollando y renovándose también cada vez más rápido. Esto se ve si comparamos por ejemplo el tiempo de adaptación de las personas a la radio o posteriormente a la televisión versus el tiempo de adaptación a la internet móvil.
- Globalización. El mundo está completamente contenido en un sistema.
- Inmaterial.
- Interconectado. Lo que pase en cualquier otro lugar del mundo nos va a afectar. Hay una lógica de suma cero.
- Modelo de Negocios. El ciclo de una empresa circula entre crear, servir y cosechar. Para esto son necesarios tres pilares fundamentales: infraestructura, cartera de clientes y grandes presupuestos de marketing.
- Fragmentación
- Centro y periferia. Se crea una periferia, un margen colectivo. Muchas veces utilizamos incluso más de una pantalla a la vez.
- Impacto de la transparencia: autocontrol.
- "La bella rosa (...) sólo puede lograr el máximo de su esplendor y perfume que nos encantan, si sacrificamos a los capullos que crecen en su alrededor. Esto no es una tendencia malsana en los negocios. Es simplemente el resultado de una combinación de una ley de la naturaleza con una ley de Dios"
John D. Rockefeller.
- Lo que Rockefeller no considera es que la rosa (el negocio) debe generar valor en el entorno. Ya no hay que competir sino que colaborar. La misión principal de una empresa no es la de generar dinero sino la de dar valor al cliente. El lucro no puede ser el fin, este llega de forma secundaria.
- Lo principal no es el "afiche" (el objeto de diseño) sino lo que pasa con la persona que lo lee. Lo que hay que diseñar son las respuestas. Cada vez que yo hago algo al sistema, este cambia de estado.
- Finalmente el modelo de negocio presentado funciona siempre y cuando se encuentre en el contexto de una red.
Próxima Clase: Grillas
Tarea 1
Rediseñar cualquier artefacto, no es necesario que sea complejo, tanto en su funcionamiento como en su forma, etc. La idea es resolver un problema que encontremos en el diseño de dicho artefacto.
- Formato: PDF doble carta.
- Debe ser enviado por mail antes de la próxima clase.
--Camila valenzuela 20:30 11 jun 2012 (CLT)
Diseño para soportes digitales
Diseño para la experiencia
El diseño se realiza del producto hacia el servicio, es completamente conversacional, hablamos del "diseño de la experiencia", pero esto quiere decir en realidad "Diseño para la experiencia"
¿Qué es la experiencia y cuáles son sus componentes?
- "el arte como experiencia" - John Dewey
¿Porqué se piensa sobre la experiencia ante las cosas?
- La experiencia es un entero de sucesos orquestados y secuenciales
- Es algo memorable
- Le da coherencia a los sucesos (principio-desarrollo-final)
- La experiencia conforma una "figura" de arco.
- Se vuelve apropiable, personal
En el diseño para la experiencia existen el concepto de "experiencia individual" más el concepto de "entorno diseñado" que se relacionan a través de una interfaz gráfica,gestual,héptica,etc. Determinando el grado de lo apropiado en el diseño del contexto y para la experiencia.
Arte y Ciencia
- "Artistry for the strategist" - Hilary Austen Johnson
Se relacionan los siguientes conceptos:
- Experiencia, Sensibilidad, Destreza
- Conocimiento, Comprensión, Organización
- Ethos, Intencionalidad, Identidad
Lo que yo diseño va a producir un valor, teniendo consecuencias mutuas, por lo tanto, debe existir un propósito y una responsabilidad de lo que se hace.
- Conocer las metodologías y técnicas (Ciencia)
- Originalidad en la creación de lo nuevo (Arte)
Problema de la comunicación
expresión de una situación
- Transmisión
- Interrelación (Interfaz)
- Interacción (Transacción)
- Diseño de la organización (Sistema de Interacciones)
Grillas
Presentación trabajo de alumnos de título: Baobab: Plataforma para el desarrollo de comunidades
- Definir una estructura y mejorarla
- Bloques de contenidos
- Definen tamaño a x a, teniendo como máximo 4a x 4a.
- Luego el ancho "a" definía la columna, pero el alto es "x" (depende de cada contenido)
- Se escoge las etiquetas HTML5 ya que son mucho más semánticas, se piensa semánticamente
- en CSS "a." viene de "anchor" (ancla), el HTML es hipertexto porque viene de a. Es el "ancla" dentro del sitio
- h1. corresponde a los niveles de vinculación (van de h1 a h6)
- es un Diseño Responsivo(Responsive Design)
- Existe un control en el diseño
- Trabajar con medidas estándares de resolución de los dispositivos
- Se especifican las condiciones para cada ancho de pantalla
- El diseño llega a todos los dispositivos
- Diseño adaptable independiente del soporte
- Trabaja con medidas EMS, Max-widht y media queries
- Al entrar al sitio se descarga CSS, JSS Java-Script, Demo
- Se utiliza Gridpak, herramienta online para definir grillas en distintas resoluciones
- Existe un problema de intercalación y de orden
- Problema de las publicaciones más grandes o complejas que una columna
- Se rediseñan los elementos, no funcionan como "ladrillos"
- "The Goldilocks Approach", Respeto a la tipografía o construcciones tipográficas (Too Big - Just Right - Too Small)
- Controlar ancho de la columna ilegible, es controlable en base a una construcción
- La manera de diseñar es escéptica del dispositivo
- Es importante que tenga coherencia gráfica en las múltiples escalas. El énfasis está en la estructura que soporta la visualidad.
- Uso de Base line Grid (Grilla de base) hay una correspondencia en los elementos, calzan.
- Golden Grid System(proporción áurea), armónico y con una lógica equivalente.
Tarea 3
Revisar Los lenguajes de diseño ("Design Patterns" - Christopher Alexander)
Interface Pack
- ¿Cuáles son los elementos de interfaz en HTML? (Ejemplo: botón)
- Diseñar un PNG (editable) con un GUI PACK (archivo fuente del diseño), proponiendo un lenguaje gráfico corporativo e[a.d] (definir anchos, elementos, cualidad gráfica..)
Look & Feel; "cómo se ve y cómo se siente"
--Samirabajbujr 20:28 19 jun 2012 (CLT)
Patrones de Interacción
"Reciclando las buenas prácticas" Lenguaje de patrones de Cristopher Alexander, quien da origen a las Tipologías Arquitectónicas Chunking - concepto Cuando uno aprende puede abstraer en un concepto, una tipología, un proceso de atributos, patrones
Patrón solución general a problemas de usabilidad y/o accesibilidad que puede ser reutilizable (selector de flecha, carrusel de fotos, estrellas para calificar, pulgares para evaluar, etiquetas para clasificar)
- Dan consistencia al lenguaje
- Facilitan la colaboración entre estrategia y desarrollo
- Facilitan el aprendizaje para los jóvenes miembros del grupo
Críticas a la lógica de Patrones
- A pesar de tener fines muy nobles, los patrones no interpretan como realmente se trabaja en equipo
- No son recordables
¿Porqué se hacen?
- Se hacen como necesidad interna de UX (user experience)
(es necesario tener documentación de los patrones que se usan) internet como interfaces de software, los sitios web son mas complejos
AJAX [[1]]web application model, la idea de continuidad
- Para zanjar (y dejar por escrito) cómo realmente se deben hacer las cosas
La solución
- Centrada en las personas
- Es un problema cultural
Dos escalas de Patrones
Escalas macro
- Lógicas conversacionales
- Normalmente involucran a +1 soporte
- Documentación Partituras + referencia a patrones
Escalas micro
- Las más diseñables
- Las más rentables
(Tipografía, paleta de colores, Sonido) importante documentar en forma de código Bootstrap Biblioteca de códigos
El diseño se aborda con una mirada que trasciende los patrones, es necesario que se piense como un framework
Una manera para trabajar con css precompiladores de estilo
Mixins - Propiedades que las puedo meter dentro de otras propiedades
La idea es diseñar un Framework para la escuela, estilos tipográficos - Fineza gráfica LLegar a una perfección tipográfica
- Entorno flexible
- Bien pensada la lectura
- La imagen como un framework
- Font Awesome estilos tipográficos
Titulos/ Párrafos/ Listas/ Listas no numeradas/ Encabezados/ Superíndice/ Subíndice/ Acronim
Encargo
- Diseñar una propuesta gráfica madura para el sitio de la escuela
- Casos de estudio crear un objeto en la wiki, seguir un proceso de estudio durante el período
Casos de Estudio
- 960 GRID SYSTEM(Alumnos: Alison Saravia)
- Frameless(Alumnos: Nicole Arce)
- GEL: Global Experience Language(Alumnos: Caterina Da Silva)
- Golden Grid System(Alumnos: Camila Valenzuela)
- Gridless(Alumnos: Antonia Casali)
- Responsive Grid System(Alumnos: Daniela Pardo)
- The Goldilocks Approach(Alumnos: Samira Bajbuj)
