Gráfica Digital 2013

De Casiopea


Asignatura(s)Gráfica Digital
Año2013
Tipo de CursoRamo Lectivo
TalleresDG 4º
ProfesoresKatherine Exss
AyudantesJaime Pérez Moena
AlumnosSamira Bajbuj, Josefina Borja, Franco Baldassare, Paulina Buvinic, Michelle Camus, Carlos Chávez, Caterina Da Silva, Camila De la Vega, María Ignacia Falcone, Christopher Fattori, Juan Antonio Godoy, Idar González, Danila Ilabaca, Celeste Mardones, Carolina Nuñez, José Miguel Ortega, Daniela Pardo, Gabriela Pérez, Catalina Reyes, Alison Saravia, Nathaly Sepúlveda, Bernardo Silva, Nicol Valenzuela, Camila Valenzuela, Karla Vargas, Francisca Wevar
Palabras Clavesoftware, interfaz gráfica, responsive web design, wireframes
Carreras RelacionadasDiseño Gráfico
Importante: En el grupo de gráfica digital se realizará toda la comunicación oficial. Cada uno debe inscribirse para recibir los mensajes. El email es: graficadigital2013@arquitecturaucv.cl.

Gráfica Digital 2013 | Tareas Gráfica Digital 2013

Clase 0: Introducción y problemática

20 de Junio

Does-Samsung-make-too-many-phones.png

El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una función de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos "aceptar el flujo y reflujo de las cosas."[1]

  1. John Allsopp, "A Dao of Web Design"

Encargo

Frente a este hecho concreto en cuanto a parámetros y medidas estándar de resolución ¿cómo nos afecta a nosotros como diseñadores? ¿de qué manera influye que las nuevas tecnologías, dispositivos y los gustos y preferencias de las mismas personas van cambiando mucho más rápido de lo que pensamos?

Escribir de uno a tres párrafos breves como reflexión en la wiki, en la página Tareas Gráfica Digital 2013.

Clase 01: Responsive Web Design

27 de Junio

¿Qué es mejor diseñar , para una pantalla y adaptarlo o un diseño para cada porte de pantalla?

se encuentran varios teorías ,hay que pensar que una pantalla para computador grande es distinta a una pantalla de móvil , pues las condiciones de usos son diferentes , un computador grande esta pensando para alguien que esta sentado cómodamente tomando un cafe , versus el móvil para alguien que esta expuesto al ruido , al movimiento ... etc

¿Creen que esta bien , que hayan distintos tipos de soportes y tamaños?

fanco: creo que es bueno que haya un campo abierto, para que así el diseñador no tenga límites , en cambios como la de la diagramación.

Responsive web design

  • Para el año 2000, la resolución era: 1024 px.
  • Con la llegada del iphone empezó a cambiar completamente la vista de estas pantallas.
  • 2007: iphone 320 px
  • 2010: ipad 768 px

¿Por que Samsung opto por tener múltiples tipos de pantallas? En Chile el año 2009, habían 2961 conexiones a 3g y a fines del 2012 casi 4.921.587 subió favorablemente.

  1. hay múltiples de dispositivos
  2. Disntintas resoluciones
  3. Aumento de conexiones móviles

Cada año las personas están ocupando mayormente el formato tablet más que los computadores. Trabajar en un soporte impreso es muy distinto que trabajar en un soporte web. Por ende tenemos que adelantarnos y prever ( lo que puede pasar más adelante), hay que pensar con una fluidez y que sean flexibles. Hay que pensar en un diseño responsive para estos nuevos tiempos , no solo adaptable.

Esta es una buena frase, para los diseñadores, pues hay que ir adaptando constantemente

" …mantener el paso ganado, hay que ser absolutamente moderno…"

  1. Grilla flexible
  2. Contenidos Fluidos
  3. Media Queries (criterios y rangos de tamaño, pues me permite trabajar dentro de este espacio)

Metodología de trabajo

  1. Dibujo
  2. Wireframes
  3. Diseño front
  4. Prototipado-Testeo

(es un circulo, que se forma un ciclo) se forman muchas iteraciones, hasta que llega un punto que finalmente queda como había quedado. Siempre es bueno ir probándolo inmediatamente.

Ejemplos de responsive: sitio web Food Sense www.foodsense.com, www.alisiapari.com, www.goldengrid.com (para ver como se va afectando la grilla).

Cuando uno trabaja en móvil o trablet, los textos se van achicar entre más pequeño el tamaño, pero los botones

Encargo

Trabajo personal, donde cada uno tengo que elegir un sitio responsive para analizar su grilla, márgenes, etc.

  • Debe tener a lo menos tres portes
  • Debe ser rico en información: párrafos de textos, menús y navegaciones

Estos son los requisitos para que uno estudie el sitio. Para así se pueda analizar lo mayor posible. Para próximo jueves.

Herramienta útil: Resize my browser

--Javierarojas (discusión) 17:59 27 jun 2013 (CLT)

Listado de sitios a investigar

  1. Carlos Chávez Tyler School of Art
  2. Caterina Da Silva Belelú
  3. Nathaly Sepúlveda Sleepstreet
  4. Franco Baldassare Spektrum
  5. Karla Vargas ILLYCAFFÈ
  6. Paulina Buvinic Spigot Design Aids Gov
  7. Francisca Wevar Revista Capital
  8. Bernardo Silva Food Sense
  9. Danila Ilabaca Gobloomhealth
  10. Idar González Made by Fibb
  11. Carolina Núñez El Sendero del Cacao
  12. Juan Antonio Godoy The Boston Globe
  13. Camila Valenzuela Rojo Trionn Design
  14. Michelle Camus 3200tigres
  15. José Miguel Ortega ASU Online
  16. Daniela Pardo Tagle Smashing Magazine
  17. Christopher Fattori Kings Hill Cars
  18. Gabriela Pérez World wild life
  19. Alison Saravia UX London
  20. Camila De la Vega Sparkbox
  21. Nicol Valenzuela Awwwards
  22. Samira Bajbuj Children's Museum of Pittsburgh
  23. María Ignacia Falcone St Paul's School
  24. Catalina Reyes Grey Goose
  25. Josefina Borja C. Starbucks

Clase 02

No basta solo con subir imágenes a la wiki, hay que anotar las conclusiones. Si es que hubiese un cambio estructural, se muestra. Si no lo hay, se puede solo describir.

¿Por qué importa que las imágenes no desaparecen? Se debe pensar en la línea editorial, la toma de decisiones. Hay que ver como funcionan las imágenes. ¿Funcionan como fondo? ¿Cómo div? Entender su comportamiento.

Faltan medidas en pixeles. Agregar las medidas de las columnas.

Definir los elementos del sitio y mostrar sus cambios en cada disgramación es un buen ejercicio.

El caso elegido puede ser interesante precisamente porque tiene errores y no es perfecto.


Encargo

Próxima clase:

  • Análisis más detallado de las medidas (todo en pixeles).
  • Análisis de la tipografía en profundidad.
  • Detalle del comportamiento de las imágenes.
  • Comportamiento de menús y elementos de navegación.

Parte de la nota es que el uso de la wiki esté bien. Se debería tener claro los elementos del texto (como los títulos) y formatos. --Mari falcone (discusión) 12:52 10 jul 2013 (CLT)


Clase 03

De acuerdo a la entrega correspondiente para este día, encargo grupal que contempla las propuestas iniciales de wireframes de baja intensidad, se hace una revisión por grupos y textos abarcados; de esto se desprende lo siguiente:

Grupo 1: Carta del Errante

El grupo establece un mapa de contenidos para la propuesta inicial. En este, se tiene en consideración un menú que toca las secciones:

  • Texto
  • Acerca del texto
  • Imágenes
  • Índice de autores (con sus notas incluidas)
  • Enlaces a otros textos

Además se presenta una barra de búsqueda dispuesta en el header, para cada uno de los soportes de pantalla. Una problemática fue partir desde la capa emocional del diseño del sitio, sin antes exponer el cómo se llegó a tomar las decisiones gráficas que tuvieron implicacia en la elección tanto de colores como de fondos o tipografías. Se sugiere para ello mostrar el trabajo en papel que hicieron o bien en su estado wireframe, ya que a partir de este es más fácil abrir ideas en conjunto. El planteamiento parte desde el diseño para móviles antes que desktop, definiendo allí los elementos estructurales del sitio.

  • Sobre las secciones escogidas como menú, se tiene que el título Acerca del Autor incluiría una reseña de autores, año y editorial, todo esto se mostraría aplicando una distinción a través de jerarquías tipográficas. El Índice de autores en tanto trataría de ubicar al lector a través de letras por orden alfabético sobre los autores, vinculándolo directamente con el lugar donde se halla dentro del texto.
  • El mapa de navegación debe exponer esa manera de ir y volver dentro del sitio (retornar).
  • Cada imagen, además corresponde a un capítulo distinto, linkeable y medio por el cual accedes a estas partes del texto.
  • Hay un menú lateral que funciona a modo ancla.
  • El diseño en tablet sigue la idea de la propuesta de navegación en desktop.

Consideraciones:

  1. Ver estructuras distintas, son 3 en este caso (PC, Tablet y móvil) pero como reaccionan sus diseños en sus distintas orientaciones (vertical u horizontal para el caso de móviles y tablets).
  2. Analizar en cada caso sus medidas reales.
  3. Abrir ideas sin restringirse a las posibilidades de diseño en cada dispositivo.


Grupo 5: Segunda Carta sobre la Phalène

  • Las notas en el caso del diseño móvil plantean un despliegue de menú, que ocupa mucho espacio en pantalla. Se debe definir una óptima estructura para cada caso, privilegiando siempre el texto, la capacidad de lectura de este, en los distintos medios.
  • Ver un rótulo significativo para los botones que quieran integrarse al diseño.
  • La sección notas dentro del menú general debe contener un orden mejor, ya que si bien el texto debe exponer los demás enlaces a los otros contenidos, hay una unión directa de las notas con el texto en cuestión, que no debe ser poco destacado como esta hasta ahora en el menú.
  • En la versión desktop no es necesario aplicar la tendencia de ocultar cosas, ya que el espacio ahora es considerable y facilita o da aire al cuerpo de texto. Hay que saber bien como es el menú , espacios del header, botones de navegación márgenes y estructuración de página.

Consideraciones:

  1. Cada grupo debe hacer una presentación inicial al tema responsive, para ubicar dentro del proyecto al usuario o lector.
  2. Esta bastante avanzado en cuanto a posibles propuestas, pero debe ser decidido ahora una manera que cumpla con las opciones o requerimientos de cada dispositivo.


Grupo 6: Mantos de Gea

  • El grupo realiza al igual que los demás presentados, una capitulación, decide dividir el texto en 5 partes, organizarlo en base a lo que cada soporte permitiría visualizar respecto a la lectura adecuada.
  • Cada propuesta de wireframe en papel fue planteada con una nube de tags que acompañan al texto. Esto corresponde a palabras claves ubicadas bajo el título central.
  • Se plantea un botón para volver o ingresar a otras secciones.
  • Trabajaran con una herramienta de grilla llamada Frameless.

Encargo

  • Traer wireframes de alta intensidad, del diseño ya decidido para cada plataforma o soporte. Estos serán evaluados por su estructura, grillas con medidas reales y sus variaciones.
  • Se tendrá una clase de programación HTML.
  • Ojalá cada propuesta sea puesta en comparativa respecto a sus wireframes y variables.
  • Detallar toda la interacción que se genere.

--Gabriela (discusión) 15:05 23 jul 2013 (CLT)

Clase 04

(Clase express de HTML)

Conceptos básicos del HTML

HTML

  • Lenguaje de Marcado hipertextal
  • Sintaxis de etiqueta
  • Páginas web, plantillas

CSS

  • Cascada de estilos
  • Sintaxis en forma de reglas
  • Aspecto y formato enriquecido del documento de marcado

La cascada de estilos tiene una lógica similar a la que usamos en Indesign. En HTML pongo todo en bruto, y en la cascada de estilo defino los estilos que quiero darle a cada cosa.

  • <html>: Define un documento html
  • <head>: Define información y metadatos del documento, llama a archivos externos.
  • <body>:Comprende todo el contenido del documento HTML
  • <Header>: Cabecera
  • <Footer>: Pie de página

No confundir <head>, con <header>, <head> metadatos invisible en la página a menos que uno le ponga un "title", <header>, es visible.

HTML5 es una versión nueva, como las versiones de photoshop que van mejorando. Se definen ciertos estándares. Los navegadores leen la información.

En la primera línea le ponemos que es lenguaje html para que lo lea como tal. Cada etiqueta tiene un cierre, son grupos de contenidos, como una especie de paréntesis. Es importante ir tabulando todo lo que voy abriendo, esto sirve para visualizar lo que estoy programando

REGLAS DE LA HOJA DE ESTILOS CSS

El background definen el color del fondo del elemento. El color define variables de color de un elemento. Se usa valor hexadecimal, RGB o con el mismo nombre del color.

Repeat backround: Es como poner fondo de pantalla mosaico. Le puedo decir, no-repeat, o repetir solo en x, y me lo repetira en todo el espacio horizontal.

Margin: Sigue el sentido de las agujas del reloj. Al Margin le pongo un borde, fuera del borde corresponde al espacio de márgen externo del div, y el padding, del borde hacia adentro, el márgen interno del div.

ID

  • Elemento único para un HTML
  • Usado oara dar atributos con hojas de estilos por Javascript para manipular ciertos elementos con ID específicas.
  • En la hoja de estilos se nombra con "#" antes del selector

MAPA DE DIVS

  • Visualización estructura de los elementos HTML

Hago esto para visualizar lo que quiero programar, algo así como jerarquizar los contenidos (que va dentro de que, etc) y me sea más fácil comenzar a programar.

ENCARGO:

Comienzo del diseño de interfaz. Vamos a hacer el diseño paralelo con programación.

  1. Traer 3 PNG: uno de movil uno de tablet y uno web.
  2. Hacer una especie de mapa de divs; esto es, ubicar las cajas en el espacio, nada más que eso. (Ubicar los elementos y diferenciarlos (encuadrandolos) en el espacio).

Cuando uno diseña para web trabaja con dos archivos dintintos que estan completamente vinculados entre sí. En el HTML va la estructura y el texto y en el CSS defino las características que tendrán los contenidos del HTML. Existen programas como el CODA, el Sublime text, etc para programar.

Comenzar a aprender HTML --> Codeacademy [www.codecademy.com] (dedicarle una hora diaria)

--Nikki Valenzuela 11:00 1 ago 2013 (CLT)

Proyectos

  1. 3200 Tigres (Alumnos María Michelle Camus)
  2. Cacao Tour (Alumnos Carolina Nuñez)
  3. Caso de Estudio: AIDS Gov (Alumnos Paulina Buvinic)
  4. Caso de Estudio: Andersson - Wise (Alumnos Bernardo Silva)
  5. Caso de Estudio: Illy Caffe (Alumnos Karla Vargas)
  6. Caso de estudio: ASU (Alumnos José Miguel Ortega)
  7. Caso de estudio: Children's Museum of Pittsburgh (Alumnos Samira Bajbuj)
  8. Caso de estudio: Revista Capital Online (Alumnos Francisca Wevar)
  9. Caso de estudio: Sparkbox (Alumnos Camila De la Vega)
  10. Caso de estudio: Starbucks (Alumnos Josefina Borja)
  11. Caso de estudio: The Boston Globe (Alumnos Juan Antonio Godoy)
  12. Dconstruct.org (Alumnos Javiera Rojas)
  13. Gobloomhealth (Alumnos Danila Ilabaca)
  14. Grupo 1: "Carta del Errante" (Alumnos Carlos Chávez, Juan Antonio Godoy, Idar González)
  15. Grupo 3: Hay que ser Absolutamente Moderno (Alumnos Daniela Pardo, Camila De la Vega)
  16. Grupo 7: "Carta del Errante" (Alumnos Carolina Nuñez, Bernardo Silva)
  17. Grupo A: Mantos de Gea (Alumnos Caterina Da Silva, Paulina Buvinic)
  18. Grupo B: Mantos de Gea (Alumnos José Miguel Ortega, Catalina Reyes)
  19. Grupo B: Segunda carta sobre la phalène (Alumnos María Ignacia Falcone, Franco Baldassare)
  20. Kings Hill Cars - Estudio Responsive (Alumnos Christopher Fattori)
  21. La ciudad abierta: la utopía al espejismo (Alumnos Josefina Borja, Javiera Rojas)
  22. Proyecto de sitio responsive: "De la Útopía al Espejismo" (Alumnos Danila Ilabaca, María Michelle Camus)
  23. Proyecto de sitio responsive: "Hoy me voy a ocupar de mi cólera" (Alumnos Francisca Wevar, Nathaly Sepúlveda)
  24. Proyecto de sitio responsive: "Segunda Carta sobre la Phalène" (Alumnos Karla Vargas, Gabriela Pérez)
  25. Responsive Web Design: Hay que ser Absolutamente Moderno (Alumnos Nicol Valenzuela, Camila Valenzuela)
  26. Sitio Responsive: Hoy me voy a ocupar de mi cólera (Alumnos Samira Bajbuj, Christopher Fattori)
  27. St Paul's School (Alumnos María Ignacia Falcone)


Casos de estudio de sitios responsivos

  1. Awwwards (Alumnos Nicol Valenzuela)
  2. Caso de Estudio: Tyler School of Art (Alumnos Carlos Chávez)
  3. Casos de Estudio: Belelú y Create Digital Media (Alumnos Caterina Da Silva)
  4. Food Sense (Alumnos Bernardo Silva)
  5. Grey goose (Alumnos Catalina Reyes)
  6. Made by Fibb (Alumnos Idar González)
  7. SleepStreet (Alumnos Nathaly Sepúlveda)
  8. Smashing Magazine (Alumnos Daniela Pardo Tagle)
  9. Spektrum Media (Alumnos Franco Baldassare)
  10. Trionn Design (Alumnos Camila Valenzuela)
  11. UX London: análisis (Alumnos Alison Saravia)
  12. World Wild Life (Alumnos Gabriela Pérez)


Proyecto Final

GRUPO A

GRUPO B