Gráfica Digital 2013

De Casiopea
Revisión del 07:19 28 ago 2015 de Hspencer (discusión | contribs.)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)


Asignatura(s)Gráfica Digital
Año2013
Tipo de CursoRamo Lectivo
TalleresDG 4º
ProfesoresKatherine Exss
Profesor(es) Ayudante(s)Jaime Pérez Moena
EstudiantesSamira 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"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.

Estudiantes

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.

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. Caso de estudio: Starbucks(Alumnos: Josefina Borja)
  2. Kings Hill Cars - Estudio Responsive(Alumnos: Christopher Fattori)

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

Obtenido de «https://wiki.ead.pucv.cl/index.php?title=Gráfica_Digital_2013&oldid=360431»
Política de privacidad
Acerca de Casiopea
Descargos
Creative Commons Con Reconocimiento y Compartir Igual 4.0
Powered by MediaWiki
Powered by Semantic MediaWiki