Clase 01

Bienvenidos a Diseño Visual y Funcionalidad. A continuación dejamos el plan actividades de la primera clase, en formato PDF. En lo posible, habrá un plan de actividades para cada clase, en este mismo formato.

Diapositivas clase 01.

Saludos!

Entrega final – consigna

El examen final de la materia consiste en la entrega del siguiente proyecto: diseño de un sitio web desde la problemática de la comunicación visual y la funcionalidad.

En este sentido, deberás considerar tu propio proceso de diseño, la devolución realizada por la cátedra sobre tu proyecto y el criterio profesional que has comenzado a formar a lo largo de tu carrera en la Escuela Da Vinci.

Consideramos tu proyecto como la tesis práctica de un proceso que se basó en iteraciones semana a semana. Tu entrega es la culminación de ese proceso, por eso esperamos que la tomes con la responsabilidad necesaria.

La entrega es grupal. Los grupos, como no puede ser de otra manera, incluyen únicamente a los alumnos que se encuentran cursando la materia Diseño Visual y Funcionalidad. Consideramos este trabajo como particular de esta materia —aún cuando existe la posibilidad de que el proyecto comparta items importantes con otras materias, esto no es necesario ni requerimiento excluyente.

Características

La presentación del proyecto deberá incluir como mínimo el recorrido correspondiente a dos tareas de usuario; una de ellas será la tarea principal en relación a la aplicación web que están planificando.

También se incluirá el mapa del sitio. El mapa del sitio es una pieza importante, que dará cuenta de la claridad de pensamiento proyectual aplicado al proceso de diseño de la interacción y la navegación. Se trata de una pieza de diseño comunicacional visual, en este sentido no puede perderse de vista la forma en la que esté diseñada dicha pieza, a nivel gráfico.

Se adjuntará, también, la maquetación de —por lo menos— la home del sitio web y una pantalla interna (a elección). Dicha maquetación se realizará manteniendo una estricta separación de: contenido (HTML), presentación (CSS) y comportamiento (JS). Pueden elegir la versión de HTML o XHTML que deseen.

La maquetación debe cumplir con los lineamientos de accesibilidad web establecidos en la WCAG 2.0 Nivel AA.

Cuándo entregarán

La entrega será en la instancia de examen final (todavía no sabemos la fecha).

Qué entregarán

Cada grupo entregará una carpeta zipeada con todos los archivos dentro. Recomendamos entregar en CD-ROM y llevar una copia en un pendrive, para evitar problemas técnicos en los archivos, durante el examen.
El archivo adjunto podrá llamarse ENTREGA FINAL – Apellidos Del Grupo.zip

En dicho zip, se incluirán:

• Prototipos finales en alta de los dos recorridos elegidos. Se organizarán prolijamente en carpetas, y se entregarán en archivos JPEG en modo de color RGB y a 72ppi.
• Su proceso, es decir los prototipos (en baja y en alta) que fueron mejorando en cada entrega. No se requiere que inventen proceso. Por favor no pierdan tiempo inventando prototipos que jamás entregaron.
• El mapa del sitio: en formato PDF, con las dimensiones: 70cm x 50cm (horizontal, preferentemente). Recomendamos realizarlo de manera vectorial, pero si se realiza en píxels deberá tener una resolución de al menos 200 ppi (px/inch).
• Maquetación de, al menos, la home del sitio y una pantalla interna: los archivos necesarios, HTML, CSS, JS, imágenes y lo que necesiten. Únicamente archivos de tecnologías client-side.
• Informe de accesibilidad (nivel AA) de las pantallas maquetadas, generado a partir de la herramienta http://www.tawdis.net

Qué recordarán

No es momento de olvidar todo lo que se vio clase a clase durante las instancias de taller. La práctica del diseño requiere un aprendizaje que se basa principalmente en un saber-hacer. Los saberes meramente teóricos no funcionan y en muchos casos no sirven si luego no se pueden aplicar de manera efectiva en un proyecto. El saber meramente teórico —en diseño— es un no-saber. Es menester del diseñador, aprender haciendo, o en todo caso transportar su saber teórico al saber práctico, caso contrario dicho saber es absolutamente inútil: se mantiene cristalizado en una red conceptual ideal, fija y sin vida.

En este sentido te pedimos que no olvides cuestiones fundamentales que tienen que ver con el saber-hacer del diseño de sitios web:

• Jerarquías: niveles de lectura.
• Contrastes.
• Llamados de atención. Llamados a la acción. Call to action.
• Correcto uso de grillas y de ajuste tipográfico, para un correcto funcionamiento del texto. Esto también es parte fundamental de la funcionalidad de un sitio.
• Alineación / agrupación de los elementos.
• Coherencia en la elección y el diseño de los componentes interactivos.
• Recursos gráficos para identificar de formas diferentes, a elementos diferentes: codificación.
• Paleta cromática con sentido.
• Lógica de relaciones internas entre los elementos: composición en el plano.
• Texturas.
• Nivel de dinamismo.
• Para quienes cursen Usabilidad: tener en cuenta los resultados obtenidos en los tests de usuario.
• Estados de los distintos elementos interactivos.

Accesibilidad

Como hablamos en nuestro taller, la entrega implica también el maquetado de la home y al menos una página interna del sitio que están diseñando. A la hora de codificar HTML+CSS+JS, es importante que tengan presente la importancia de realizar interfaces accesibles.

Nuestro objetivo es que la mayor cantidad de personas puedan acceder a la información, lo mismo que utilizando la mayor variedad de dispositivos.

Aquí algunos links que pueden ser de interés:

• Web content accessibility guidelines – priorities
• Web accessibility checker (una especie de validador)
• La página principal, genérica, sobre WAI (Web Accessibility Initiative), de la W3C

Recuerden que pretendemos un nivel de accesibilidad Doble-A, lo cual implica que todos los puntos de prioridad 1 (a lo que todo desarrollador debe prestar atención) y prioridad 2 (a lo que todo diseñador debería prestar atención) deben estar satifechos.

Brevemente, cuestiones importantes:

• Siempre brindar alternativas a los contenidos meramente visuales y auditivos (por ejemplo texto escrito que describiendo una imagen, o subtítulos en un video con sonido).
• Siempre utilizar al atributo Alt de las imágenes.
• Siempre utilizar el atributo Title, de los links.
• Chequear que el diseño general, y las imágenes sean comprensibles cuando se vean sin color (se puede probar sacando foto de pantalla y llevándola a greyscale con Photoshop).
• Siempre dividir el contenido (marcado semánticamente en lenguaje HTML), la presentación (descripta en CSS) y el comportamiento (programado en JavaScript). Es clave que realicen un correcto marcado semántico del contenido, las etiquetas permiten que dicho contenido sea comprensible no sólo por personas, sino también por software; esto es importantísimo porque una persona con dificultades de visión dependerá de un software de lectura oral para acceder a la información. El correcto marcado hará que —entre otras máquinas— el soft de lectura brinde una buena experiencia de uso. Esto permitirá, además, que los documentos puedan ser leídos sin estilos, o sin comportamiento (JS).
• Si utilizan tablas (de más está decir que únicamente para marcar información tabular), asegúrense de utilizar las etiquetas <th> para identificar a las cabeceras de columna y a los títulos de fila.
• Mucho cuidado con elementos que puedan llegar a titilar a altas velocidades.
• Validar los archivos HTML y CSS que generen, pueden utilizar el validador de la W3C: http://validator.w3.org/
• Provean una navegación clara (esto, fue parte de nuestro trabajo de taller, y del de Usabilidad, seguramente).

Es importante que tengan en cuenta la accesibilidad cuando salgan al campo laboral real. Es uno de los aspectos más trascendentes de nuestra profesión, donde podemos hacer una diferencia y agregar valor a la cultura.

Hay una gran conciencia a este respecto en nuestro campo de acción, y es uno de los puntos que —en lo personal— me enorgullecen de nuestra profesión. No existe, lamentablemente, la misma conciencia en otros campos del diseño.

Clase 12

Hoy realizaremos un esquicio, es decir: un trabajo que se comienza, termina y entrega en clase.

Arrancaremos con un cuestionario individual, en silencio:

1. ¿Se ven claramente los niveles de lectura? ¿Estos definen el orden de lectura?
2. ¿La grilla me permite variaciones, dentro de cierto orden?
3. ¿Lo tipográfico está funcionando como interfaz comunicacional? ¿Comunica lo tipográfico además de lo que dice, explícitamente, el texto? (por ejemplo, qué tipo de información se está presentando: codificación tipográfica de la información)
4. ¿Qué está funcionando bien en mi interfaz? ¿Por qué? ¿Cómo me doy cuenta?
5. ¿Qué está funcionando mal en mi interfaz? ¿Por qué? ¿Cómo me doy cuenta? Hacer especial hincapié en dos ítems.

La entrega del día de hoy, será el TP08 modificado; esto es, el resultado de lo trabajado en clase: la finalización del esquicio. Si quieren pueden adjuntar el proyecto previo al esquicio, pero es a elección, y sólo a modo comparativo. Se corregirá el resultado de las modificaciones hechas en clase.

 

Clase 11

Recordatorio:

Como todas las semanas, hoy se entrega el tp propuesto en la última clase: TP07.

Actividad de taller:

Seguimos con nuestra dinámica taller. Continuamos la corrección de dos tareas de usuario en prototipos en alta. Una de las dos tareas, debe ser la principal del proyecto, la segunda una a elección.

Calendario restante:

Ojo, salvo error u omisión, nos quedan las siguientes clases

• Miércoles 02/11/2011 (hoy)
• Miércoles 09/11/2011
• Miércoles 16/11/2011
• Miércoles 23/11/2011
• Miércoles 30/11/2011

Tarea:

La clase que viene realizaremos un esquicio en clase (¿Qué es un esquicio? Un trabajo que se comienza, se termina, y se entrega al final de la clase). En este sentido, necesitamos que traigan los archivos abiertos para poder trabajar en las computadoras del aula (los archivos PSD, AI, o el formato que estén utilizando).
Traigan también lo que hayan hecho del desarrollo web client-side para el maquetado si ya les pidieron para otras materias.

==

TP 08: Iteraciones sobre las dos tareas de usuario

Continuamos con las 2 tareas de usuario en alta, tratando de pulir ya detalles más finos e imperceptibles. El correcto ajuste de todos estos detalles, en suma, hará que lleguemos a un producto de diseño de buena calidad.

Nuevamente pedimos que se entreguen dos versiones de la home: una normal y otra con la grilla a la vista. Recuerden la recomendación de utilizar grillas con una cantidad importante de columnas, que les permita diferentes combinaciones.

Características

Prototipado de dos tareas completas en alta, en formato JPEG, en modo de color RGB, a 72 ppi (pixels per inch). Lo entregarán al tamaño final, real, medido en pixels.

Es necesario traer los archivos abiertos en el formato que estén trabajando (PSD, AI, etc.), para poder seguir trabajándolos en clase.

Si ya arrancaron con la maquetación, traigan por favor los archivos en cuestión (HTML+CSS+JS).

Cuándo entregarán

Fecha de entrega: miércoles 09/11

Qué entregarán

Cada grupo entregará  una carpeta zipeada con todos los archivos dentro. Recomendamos enviarlo por mail durante la clase, con el subject: “Funcionalidad – TP08 – Apellidos Del Grupo”.

El archivo adjunto podrá llamarse TP08 – Apellidos Del Grupo.zip

Qué recordarán

El aprendizaje de la práctica del diseño es complejo. No se trata de aprender a través del acopio: acumular información en la cabeza no los ayudará —por lo menos no será suficiente—. El diseño es un saber-hacer, en este sentido lo consideramos una práctica. El profundo saber del diseño se logra a través del hacer, y de las iteraciones sobre el hacer. No teman al hacer y deshacer. Tampoco teman retroceder: en la era digital en la que nos encontramos, no perdemos nada retrocediendo, siempre tenemos el archivo en su versión anterior para poder continuar. Graben muchas versiones de los archivos, y prueben diferentes soluciones a iguales problemas.

Recordatorio: Nuevamente, realizaremos modificaciones sobre los proyectos durante la clase, por lo que es absolutamente imprescindible que traigan los archivos abiertos con posibilidad de realizar cambios de diseño, diagramación, estética, etc.
Si comenzaron con la maquetación, traigan también eso: archivos HTML, CSS y JavaScript.

Clase 10

Recordatorio:

Como todas las semanas, hoy se entrega el tp propuesto en la última clase: TP06.

Actividad de taller:

Seguimos con nuestra profunda actividad en formato taller, hoy corregiremos:

• Prototipos en alta de 2 tareas de usuario.
• Mapa del sitio.

Ya empezamos a trabajar en paralelo, y como dos cuestiones indivisibles, el tema de lo visual/comunicacional y el tema de lo funcional. Debemos comprender que ambas “capas” se interrelacionan y son interdependientes. El buen funcionamiento de una implica el correcto funcionamiento de la otra y viceversa.

Cuestionario para responder en clase, los primeros 10 minutos, individualmente y en silencio:

1. ¿Qué recursos gráficos —color, variable tipográfica, cuerpo tipográfico, misceláneas, etc.— estás utilizando para codificar información? Citá un ejemplo de tu proyecto.
2. ¿Qué componentes interactivos diseñaron específicamente para su proyecto particular? (e.g.: un grupo de elementos que muestra un “amigo” en una red social.)
3. ¿Qué tipo de grilla estás utilizando para tus pantallas? ¿Cuántas columnas tiene? ¿El tamaño de las calles es arbitrario?
4. ¿Se entiende claramente cuál es el orden de lectura de las pantallas? ¿Están bien diferenciadas las jerarquías de los elementos?
5. ¿Estás generando call to action claros para el usuario?
6. ¿Estás aprovechando los momentos de blank slate de tu aplicación web?
7. ¿Estás diseñando de tal forma que la interacción sea sencilla e intuitiva para el usuario? ¿Utilizarías tu aplicación web? ¿Cuál de las pantallas diseñadas por tu equipo es tu favorita? ¿Por qué?

==

TP 07: Concentración en dos tareas de usuario

Esta semana se concentrarán en estas 2 tareas de usuario “vestidas” y ya con un nivel de sensibilidad estética importante. Una de las dos tareas deberá ser la principal de la aplicación web.

Les pediremos, también, que se entreguen dos versiones de la home: una normal y otra con la grilla a la vista. Recuerden la recomendación de utilizar grillas con una cantidad importante de columnas, que les permita diferentes combinaciones.

Adjunten, por favor, las respuestas al cuestionario individual que realizaron en clase.

Apuntes sobre tipografía

Aquí les envio link para descargar apuntes de tipografía:

• Apuntes tipografía Cátedra Cosgaya, FADU/UBA.

Recomiendo también que visiten los blogs de Tipografía I y II de la Cátedra Longinotti, FADU/UBA.

• Longinotti – Tipografía I
• Longinotti – Tipografía II
• Links recomendados – cátedra Longinotti

Salutes!

Frameworks de grillas con CSS

Van un par de frameworks para hacer grillas fácilmente con CSS:

• 960 Grid System
• Variable Grid System
• Golden Grid System (éste, no recomiendo utilizar para el TP, pero se los paso para que lo chusmeen)

Salutes!

Clase 09

Recordatorio:

Como todas las semanas, hoy se entrega el tp propuesto en la última clase: TP05.

Actividad de taller:

Continuando la actividad de taller y las “colgadas” en la pantalla grande, hoy haremos hincapié en:

• Los prototipos en baja de las 5 tareas:
  • Grilla (columnas y calles), márgenes, jerarquías (niveles de lectura), distribución del blanco (espacio vacío).
  • Alineación de los elementos en consonancia con la grilla, los márgenes, la elección para la distribución general del blanco, etc. El orden es clave para facilitar el entendimiento de los usuarios.
  • Agrupación de los elementos que tienen que ver entre sí. Distancia y separación con los elementos que —si bien cercanos— pertenecen a diferentes funcionalidades dentro de una misma pantalla.
  • Coherencia en la elección de los componentes interactivos.
  • Recursos gráficos para codificar/identificar diferentes cosas a nivel esquemático en los wireframes: color, tipo y grosor de línea, cuerpo tipográfico (tamaño del texto), familia tipográfica (la fuente), variable tipográfica (light, regular, bold, extrabold, italic, etc.).
• Los prototipos en alta de la home y la página interna:
• Paleta cromática.
• Lógica de relaciones internas: composición en el plano.
• Texturas.
• Nivel de dinamismo.
• Y a no perder de vista todo lo que venimos trabajando: grilla, alineación, agrupación, coherencia en los elementos interactivos utilizados, recursos gráficos para la codificación (ahora ya más complejos, y con una cantidad de recursos más rica para comunicar).

===

TP 06: Color y forma como codificación de información

Basándose en las 5 tareas que ya tienen prototipadas en baja, entregarán 2 de esas tareas “vestidas” y transformadas en prototipos en alta. Todavía se trata de prototipos, ya que no estarán en funcionamiento. Pero ya podremos ir viendo cómo funcionan las decisiones gráficas que van tomando, sobre un conjunto más grande de pantallas.

Al mismo tiempo, retomaremos el trabajo con los mapas del sitio. Ahora que ya va tomando forma la estética del sitio, iremos diseñando el mapa del sitio de manera acorde. Tengan en cuenta que al tener ya los prototipos en baja de 5 tareas de usuario, tienen muy claro qué cantidad de pantallas son necesarias, y qué opciones se incluyen en dichas pantallas. Traten de transmitir eso al mapa del sitio. Es esperable que ganen considerablemente en complejidad. Tómense el gusto de incluir información incluso muy pequeña. Piensen que el esquema del sitio se transforma en este sentido en un complejo entremado de elementos, de caráceter altamente infográfico.

Aquí un ejemplo de Complejo Textual (muy complejo).

En ambos casos, es importante que utilicen el color, las texturas, y los recursos morfológicos que tengan a la mano para codificar la información. Es decir, para poder decirle a un usuario: “esto es un título, esto es un párrafo y está subordinado a ese título, esta imagen se corresponde con este texto, etc.”. Algo parecido a lo que ocurre internamente, a nivel muy técnico, con el HTML.

Características

Prototipado de dos tareas completas en alta, en formato JPEG, en modo de color RGB, a 72 ppi (pixels per inch). Lo entregarán al tamaño final, real, medido en pixels.

El mapa del sitio se hará en formato PDF, con las dimensiones: 70cm x 50cm (horizontal, preferentemente). Recomendamos realizarlo de manera vectorial, pero si se realiza en píxels deberá tener una resolución de al menos 200 ppi (px/inch).

Cuándo entregarán

Fecha de entrega: miércoles 26/10

Qué entregarán

Cada grupo entregará  una carpeta zipeada con todos los archivos dentro. Recomendamos enviarlo por mail durante la clase, con el subject: “Funcionalidad – TP06 – Apellidos Del Grupo”.

El archivo adjunto podrá llamarse TP06 – Apellidos Del Grupo.zip

Qué recordarán

Que muchos de ustedes están llegando al final de su carrera, y que mucho de lo relacionado con el saber proyectual (es decir, el saber de diseño) se aprende haciendo. Se trata de una práctica cuyo conocimiento se aprende en el proceso mismo de diseño. Aprovechen esta oportunidad para enfrentarse con seriedad y entusiasmo a un problema (en el buen sentido de la palabra problema) de diseño, y encontrar posibles soluciones.

Arial vs Helvetica

Como les decía en clase, la familia tipográfica llamada Arial es una mala copia de la denominada Helvetica. Aquí les dejo un artículo comparativo sobre el asunto: Arial versus Helvetica

El sitio web I love typography es una fuente excelente para inspiración tipográfica.

Recomiendo, también, que vean la película Helvetica: click aquí para visitar el sitio oficial del documental.

De cualquier forma, mal que nos pese, la familia Arial —a pesar de verse horrible en cuerpos tipográficos grandes— se ve excelente en pantalla en cuerpos pequeños. Tiene una renderización en pixels que está medida, estudiada y bien calibrada. Por lo que cuando la vean impresa, desconfíen del diseñador, pero si la ven en pantalla, en cuerpos pequeños, está ok.