Taller de Construcción DG 4 - 2012

De Casiopea



Asignatura(s)Construcción de Diseño Gráfico 4
Año2012
Tipo de CursoTaller de Construcción
TalleresDG 3º, DG 4º
ProfesoresHerbert Spencer
AlumnosCeleste Mardones, Daniela Pardo, Camila Valenzuela, Camila De la Vega, Samira Bajbuj, Caterina Da Silva, Nicole Arce, Alison Saravia
Palabras Clavediseño de interfaz, diseño de interacción, internet
Carreras RelacionadasDiseño Gráfico

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

  1. Evolución
    1. 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.
    2. Globalización. El mundo está completamente contenido en un sistema.
    3. Inmaterial.
    4. Interconectado. Lo que pase en cualquier otro lugar del mundo nos va a afectar. Hay una lógica de suma cero.
    5. 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.
  2. Fragmentación
    1. Centro y periferia. Se crea una periferia, un margen colectivo. Muchas veces utilizamos incluso más de una pantalla a la vez.
    2. Impacto de la transparencia: autocontrol.
    3. "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

  1. ¿Cuáles son los elementos de interfaz en HTML? (Ejemplo: botón)
  2. 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

--Nicolearce

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

  1. 960 GRID SYSTEM (Alumnos Alison Saravia)
  2. Frameless (Alumnos Nicole Arce)
  3. GEL: Global Experience Language (Alumnos Caterina Da Silva)
  4. Golden Grid System (Alumnos Camila Valenzuela)
  5. Gridless (Alumnos Antonia Casali)
  6. Responsive Grid System (Alumnos Daniela Pardo)
  7. The Goldilocks Approach (Alumnos Samira Bajbuj)


Proyectos

  1. Diseño Visual Sitio ead (Alumnos Daniela Pardo)
  2. Iconos poéticos (Alumnos Antonia Casali)
  3. Lenguaje para la Portada del sitio ead (Alumnos Nicole Arce)
  4. Propuesta de Diseño para portada del sitio ead (Alumnos Samira Bajbuj)
  5. Propuesta de portada para el sitio ead (Alumnos Caterina Da Silva)
  6. Rediseño Portada Sitio EAD (Alumnos Camila Valenzuela)
  7. Rediseño para portada del sitio e.ad (Alumnos Alison Saravia)