Stampa: Lenguaje iconográfico para la Escuela

De Casiopea



Título
Tipo de ProyectoProyecto de Titulación
Palabras Claveiconos, iconografía, fuente, stampa
Período2014-2014
Del CursoTaller de Diseño Gráfico Titulación 2
CarrerasDiseño Gráfico
Alumno(s)Catalina Reyes
ProfesorHerbert Spencer

Stampa es una familia tipográfica de iconos diseñada para trabajar con Pyxis.

El ícono se define como una representación gráfica esquematizada, ya sea de algún objeto, función o servicio. Es un elemento de diseño clave dentro del desarrollo gráfico en web, ya que condensa ideas, aumenta la legibilidad del contenido y permite una mayor accesibilidad para el usuario. Debido a la necesidad de un lenguaje gráfico esquematizado, surge el proyecto Stampa, un lenguaje iconográfico, que en combinación con el Framework gráfico del sitio web de la Escuela de Arquitectura y Diseño de la PUCV, va construyendo una identidad visual de la organización.

Repositorio de Stampa

Tabla de Contenidos

El icono como átomo

Brad Frost, diseñador web, indica en un artículo para su blog personal, que a medida que el diseño se desarrolla dentro de plataformas digitales, se vuelven necesarios sistemas de diseño con la finalidad de mejorar la experiencia del usuario.

Este modo de contemplar el diseño web, revela una metodología en la cual se distinguen niveles progresivos de diseño que van desde la abstracción a la concreción. Gracias a esto, el sistema adquiere consistencia y escalabilidad.

Es a partir de esta concepción del diseño como sistema, que se origina el proyecto iconográfico Stampa.


Atomic-design.png

  • Átomos

Los átomos son las unidades básicas del diseño que incorporándolos al diseño web, pueden identificarse como las etiquetas HTML, tipografías, colores e iconos. En este punto los elementos son meramente abstractos, ya que no son construidos para realizar interacciones con el usuario.

  • Moléculas

Cuando se combinan estas unidades básicas; los átomos; o unidades básicas, dan origen a estructuras fundamentales dentro del sitio web llamadas moléculas. Estas moléculas tienen propiedades particulares y empiezan a realizar funciones.

  • Organismos

De los bloques funcionales conformados por las moléculas se construyen organismos, que son segmentos complejos dentro de una interfaz. El diseño en este punto de elaboración se vuelve más concreto, donde los componentes empiezan a sostenerse por sí mismos.

  • Patrones

Los patrones son las distintas articulaciones de los organismos que conforman plantillas. Dentro del diseño web, pasan por ser wireframes que al desarrollarlos, conforman el diseño final.

  • Páginas

En esta etapa del diseño, los patrones pasan a conformar páginas únicas con contenidos e imágenes, que permiten apreciar la efectividad de las etapas previas que conforman el sistema de diseño. De este modo, se genera un ciclo dentro del proceso, permitiendo a los diseñadores volver a modificar tanto átomos como moléculas y organismos.


Dentro de la metodología del diseño atómico, aparece el Framework como sistema de bases del diseño dentro de una plataforma web. Es contenido dentro del Framework el ícono como un átomo, con cierta escalabilidad y consistencia, que le permite elaborar moléculas y organismos en relación con su funcionalidad, manteniendo la identidad visual del total de la página.

El ícono, que es una representación gráfica esquematizada de algún objeto, función o servicio, es un pilar fundamental dentro del desarrollo gráfico de la web, en cuanto condensa ideas y permite una mayor accesibilidad para el usuario.

Debido a la necesidad de un lenguaje gráfico esquematizado, surge el proyecto Stampa, un lenguaje iconográfico, que en combinación con el Framework gráfico del sitio web de la Escuela de Arquitectura y Diseño de la PUCV, va construyendo una identidad visual de la organización.

El icono en la web

Debido a que el proyecto Stampa se plantea en una primera fase con un desempeño digital, se exploran las posibilidades de plataformas para éste.

Los íconos, al ser esquemas condensados de objetos, acciones o servicios; han sido manejados comúnmente en la web como imágenes en formato .svg.

Formato SVG

El formato SVG produce vectores gráficos con el lenguaje de XML -un lenguaje de marcado de texto expansible y flexible- describiendo formas, trazados y texto.

Las imágenes vectoriales están basadas en formulas matemáticas y en un sistema de coordenadas, por lo que no se limitan a pixeles como si lo hacen los gráficos bitmap (.BMP).

Los archivos .SVG contienen una serie de indicaciones que permiten al navegador interpretarlos como formas, trazos, curvas, texturas, etc.

Este formato está basado en código, lo que significa que puede ser leído y modificado por desarrolladores web -al contrario de lo que ocurre con el código binario que utilizan otros formatos de imágenes, los cuales sólo permite a los mismo computadores leer sus componentes. A los gráficos SVG se les puede fácilmente animar y dar estilos mediante CSS3.

Fuentes de iconos web

Una fuente de iconos es un set de imágenes en formato SVG que se compactan en una fuente web, la que posteriormente es llamada en la cascada de estilos. El icono es insertado y tratado dentro del HTML como texto, haciendo su capacidad expansiva y su modificación de estilos mucho más fácil para el desarrollador web. Al mismo tiempo, el uso de fuentes de iconos otorga una mayor velocidad -hasta de un 14%- para el servidor web, con lo que logra una navegación delsitio mucho más expedita.

Ejemplos

Font Awesome

Font Awesome es el lenguaje iconográfico diseñado especialmente para Bootstrap. El proyecto está completamente documentado en Github, y siendo de código abierto, fue posible incorporar ciertos componentes de su repositorio al proyecto Stampa.

Sitio oficial

Font Awesome en Git

Sitio oficial de Font Awesome
Ejemplo de ícono 'fa-rocket' en distintas resoluciones
Aplicaciones de Font Awesome para el framework de Bootstrap
Symbolset

Symbolset es un servicio pagado de fuentes iconográficas que se concentra en el uso semántico de sus iconos. En su sitio web oficial ofrecen un módulo donde el usuario puede escribir una palabra, y si el sistema reconoce una relación semántica con un ícono, lo muestra.

Sitio oficial

Sitio oficial de Symbolset
Ejemplo del ícono paraguas y su grilla aplicada
Iconic

La fuente iconográfica Iconic, se plantea a sí misma como un nuevo modo de pensar los iconos: su estructura, estética y función.

Uno de sus avances es la construcción de los íconos pensando una legibilidad en distintas dimensiones, es decir, plantear tres tamaños para cada ícono de modo que se pueda leer correctamente y respetando su estética en distintos dispositivos (celular, tablet y desktop)

Sitio oficial

Sitio oficial de Iconic
Ejemplo del ícono lupa en sus tres tamaños

Lenguaje iconográfico actual de la Escuela

De modo de establecer la situación actual de la iconografía en las plataformas web de la Escuela de Arquitectura y Diseño PUCV, se recopilan elementos moléculas con presencia de íconos.

Uso de íconos en los servicios web

Se toman ejemplos de uso de iconografía dentro de los servicios web de la organización en tres plataformas:

Sitio oficial de la Escuela de Arquitectura y Diseño

Wiki Casiopea (sitio en formato wiki que recopila el desarrollo de talleres, proyectos de título, travesías y documentos de índole histórico)

Estorninos (plataforma web de los estudiantes para que conformen su autonomía como comunidad generando redes de contacto)

Problemáticas

Escaso uso de íconos

Si bien el contenido de un sitio web es más directo mediante el contenido y su correcta jerarquización, los íconos son elementos que permiten atraer la atención del usuario, y explicar elementos o funciones de una manera más simplificada, aumentando la legibilidad de los contenidos.

La plataforma de los servicios web de la Escuela tiene un uso muy limitado de los recursos iconográficos, enfocándose principalmente en el contenido de los distintos sitios y no en su legibilidad.

Falta de unidad en cuanto al lenguaje gráfico utilizado

Los íconos presentes en distintas plataformas web de la organización son de distinta índole, provenientes de diferentes set iconográficos.

Esto muestra al usuario que navega las distintas plataformas una falta de unidad gráfica, haciendo más compleja la identificación de los distintos sitios como propias de una misma organización, la Escuela de Arquitectura y Diseño.

Fundamentos de Stampa

Dentro del planteamiento del rediseño de los servicios web de la Escuela, aparece la necesidad de una fuente iconográfica que unifique gráficamente, a un nivel micro, la imagen de la organización. Esto es, que de manera esquematizada pero concreta y maleable, elementos gráficos acompañen la lectura y la experiencia del usuario al navegar el sitio.

Stampa surge del proyecto Pyxis, un framework gráfico construido para su uso dentro de la plataforma web de la Escuela de Arquitectura y Diseño. Su nombre 'Stampa', significa en italiano 'carattere, indole', lo que en español sería carácter o indole. Paralelamente, los dos proyectos buscan dar forma y estructura dentro de la web a la organización, construyendo una plataforma que albergue tanto a estudiantes como profesores y/o usuarios externos.

La gráfica de los íconos de Stampa esta diseñada para que acompañen la lectura en la fuente tipográfica Source Sans Pro, al mismo tiempo de entregar en cada ícono una esquematización correcta del concepto o idea a transmitir.

Fundamentistampa.jpg

Escalabilidad

Los íconos se diseñan como gráficos vectoriales escalables. Esto implica que aunque la dimensión se aumente o reduzca, la resolución se mantiene, al igual que la fidelidad al diseño inicial del ícono. Por esta razon, los íconos deben ser pensados para que se aprecien en distintas escalas, ya sea en una mínima o máxima expresión tipográfica.

Para que gráficamente sea visible el ícono en una mínima expresión, se busca una simpleza en cuanto a las formas de manera que los vectores se alineen con una grilla base -y esto evite que los elementos se tornen borrosos a una menor escala.

Usabilidad

Uno de los principales fundamentos tanto de Pyxis como de Stampa es su usabilidad. La creación del proyecto, es en sí un intento en mejorar la experiencia del usuario al navegar por los servicios web de la Escuela de Arquitectura y Diseño.

Los íconos, son en sí una esquematización de ideas o conceptos, por lo que apuntan a una simpleza y condensación de contenidos dentro de la interfaz, y a su vez, a una navegación intuitiva por el sitio.

El hecho de que sea una fuente iconográfica construida como web font, conlleva una significativa reducción del tiempo de espera para cargar el sitio, en comparación con íconos no comprimidos en una fuente.

Accesibilidad

La accesibilidad tiene como objetivo el que los sitios web sean utilizables por el máximo número de personas posibles, indistintamente de los conocimientos que posean o de sus capacidades personales.

"Un sitio web es accesible si las personas con discapacidad lo pueden utilizar con la misma efectividad, seguridad y protección que las personas sin discapacidad."

Validity and Reliability of Accessibility Evaluation Methods, Giorgio Brajnik.

Compatibilidad con lector de pantalla

Los lectores de pantalla o screen readers, son un software que permite al usuario utilizar el sistema operativo y sus aplicaciones mediante el uso de un sintetizador de voz que va identificando, leyendo y explicando lo que se visualiza en la pantalla. Esta herramienta dentro de la accesibilidad es de gran ayuda para usuarios con problemas de visión o ciegas.

Stampa es compatible con los lectores de pantalla, lo que significa que la aplicación que identifica e interpreta contenidos del sitio web para el usuario, no reconoce el contenido de la fuente tipográfica, de manera que no interviene en la correcta apreciación del sitio.

Flexibilidad

Stampa utiliza el repositorio de Font Awesome como base, de modo que es compatible no solamente con Pyxis, si no también con Bootstrap y otros frameworks que utilicen el formato LESS.

La construcción de Stampa está diseñada de modo que el desarrollador web tenga una variedad de opciones en cuanto a tamaños y funciones para aplicarlas en el sitio web.

Estas dos características permiten una amplia gama de posibles usos para la fuente tipográfica, no limitándola al proyecto actual del rediseño de los servicios web de la Escuela de Arquitectura y Diseño.

Proyecto abierto

Stampa es un proyecto abierto a la comunidad, tanto de desarrolladores como de diseñadores web.

Creación de un repositorio

Al igual que Pyxis, el proyecto Stampa es alojado en GitHub, una plataforma digital de desarrollo colaborativo que funciona con el controlador de versiones Git.

Git es un software que permite controlar versiones que se realizan sobre algún elemento, diseñado por Linus Torvalds, el cual puede ser utilizado mediante plataformas o directamente en la raíz.

Se vuelve necesaria la creación del proyecto utilizando git de modo que se convierta en una fuente iconográfica abierta.

Repositorio Git de Stampa

Proyecto en GIThub
Versionamiento semántico

El versionamiento semántico es un convenio que permite definir el número de la versión de actualización de algún software o proyecto.

En el sitio Semver.org se publica el modo de nombrar las versiones, estableciendo tres tipos de cambios: mayor, minor y patch.

De esta forma, al utilizar Github, se debe mantener el cuidado de un correcto nombramiento de sus versiones, emitiendo tags o etiquetas a la actualización que corresponda, de manera que para cualquier desarrollador que quisiera continuar con el proyecto de Stampa, disponga la documentación correcta para hacerlo.

Sitio oficial de versionamiento semántico en español
Legibilidad del proyecto

Durante el desarrollo del proyecto, se busca mantener una legibilidad del código, de manera que otros diseñadores o desarrolladores puedan trabajar en el proyecto y avanzar con Stampa.

  • Comentarios y documentación: En cada cambio significativo, se agregan comentarios dentro de la plataforma de GIThub, de manera que se entienda y sea fácil de modificar cierto aspecto del proyecto en caso que sea necesario.
  • Espaciado adecuado del código: Es fundamental mantener un orden dentro de la escritura del código, tanto en los documentos HTML, como CSS o LESS, de manera que sea fácil editarlos.
  • Convenciones semánticas: Se trabaja en Stampa con clases de íconos en español, lo cual se mantiene a lo largo del proyecto.

Objetivos del proyecto

Objetivos generales

  • Dar forma y estructura dentro de la web a la organización, construyendo una identidad visual que permita identificarla.
  • Mejorar la experiencia del usuario dentro de las plataformas web de a Escuela de Arquitectura y Diseño a[ad], aumentando la legibilidad, usabilidad y accesibilidad del sitio.

Objetivos específicos

  • Diseñar una cantidad extensa de íconos en función de los requerimientos de las maquetas Gamma.
  • Construir funcionalmente el proyecto de modo que sea aplicable por otros desarrolladores y compatible con Pyxis framework.
  • Publicar el repositorio del proyecto de manera que quede abierto y legible al público.

Metodología del diseño de Stampa

El modo a proceder de Stampa consta esencialmente de cuatro etapas: diseñar, comprimir, transcribir y verificar, las cuales se van reiterando hasta llegar a un resultado satisfactorio tanto estético, como estructural y funcional.

La etapa de diseñar se concentra en esbozar los íconos, en una primera etapa en papel, para posteriormente llevarlo a imágenes vectoriales. El primer bosquejo sirve como idea, mientras que la vectorización dibuja al ícono mediante nodos y manipuladores.

La segunda etapa, el comprimir, es la instancia en la cual se recopilan los íconos, añadiéndoles un título semántico que permita identificarlos individualmente y ordenarlos según una categoría.

El transcribir es el proceso en el cual los íconos, de un lenguaje gráfico, se les realiza una codificación de caracteres, de forma que se lean correctamente en los navegadores web.

La última etapa de diseño es el verificar la efectividad tanto estética como funcional de los íconos. Esto se hace observando la aplicación de los procesos previos, tanto comparando la iconografía con la tipografía Open Source Sans como examinando el desempeño en maquetas web para el sitio oficial de la Escuela de Arquitectura y Diseño.

Metodostampa.jpg

Diseño de íconos

El proyecto de Stampa surge de la fuente iconográfica E[ad] Íconos, en donde ya se habían definido una serie de 44 íconos, organizados en categorías.

El punto de partida en cuanto al diseño es la homogeneización tanto del ancho de trazos como de sus componentes; esto es, tamaños de curvas, círculos y líneas rectas que conforman gráficamente a los distintos íconos. Para esta primera etapa es fundamental establecer, a medida que se va diseñando, una grilla estable y adaptable que sirva como guía gráfica dentro del set de íconos.

A continuación se presentan algunos ejemplos del desarrollo gráfico de los íconos:


  • Camara

Desarrollo en dibujo a mano del ícono “cámara“. Se prueban distintas maneras de simplificar la figura, de manera que se lea mejor en pantalla.

Stampa dibujo camara.jpg
  • Perfil

Desarrollo del ícono de perfil proveniente de la plataforma web Wiki Casiopea.

Stampa perfil.png
  • Acto

Proceso gráfico del diseño, que lleva la figura a una abtracción y posteriormente, a una vectorización.

Stampaacto.jpg
  • Estorninos

Observaciones en torno al concepto de Estorninos, a partir de fotografías, con su posterior dibujo vectorial.

Stampa dibujo estorn.jpg
Stampa estorn vector.png
  • Bower

Se extrae el logo de Bower y es llevado como contorno a Illustrator, donde se desarrolla gráficamente

Stampa bower.jpg

Conversión a vectores y a formato SVG

Para la producción de los íconos de Stampa, se decide utilizar como herramienta Illustrator. De esta manera, a partir de bosquejos de íconos, se convierten en elementos vectorizados.

Iconovector.png

Como se mencionó previamente, el formato SVG produce vectores gráficos con el lenguaje de XML, describiendo formas, trazados y texto. De esta forma, el formato permite una correcta visualización del vector original en cualquier navegador.

Para que se genere la correcta exportación del archivo, es necesario convertir las líneas y formas en contornos, de manera que se lean correctamente en el lenguaje XML.

Compresión en fuente de íconos

Existen una serie de herramientas web gratuitas que realizan la compresión de imágenes SVG en fuentes web. Para el proyecto, se decide usar la aplicación web Icomoon.

Icomoon es una solución para la problemática de los iconos escalables en la web. Incluye sets de iconos, una aplicación web y un host para fuentes iconográficas. Para el desarrollo de Stampa se usa la aplicación Icomoon App, con la cual se convierten los archivos en formato SVG provenientes de Illustrator en glifos con un código Unicode asignado.

Transcripción a web

Para la implementación de los íconos en el framework de Pyxis, se usa el repositorio de Font Awesome como base. En sus archivos .less, se pueden ir añadiendo caracteres provenientes de la fuente de íconos comprimida por Icomoon.

Codificación

A cada ícono le corresponde una clase, debiendo establecer la correspondencia entre el código unicode y la clase deseada. Siguiendo las normas de Pyxis, los nombres de los íconos se mantienen en español, anteponiendo el prefijo icn-

Aplicación

Se establecen distintas funciones en Font Awesome que son aplicadas en la funcionalidad de Stampa.

  • Alineación con el texto

Los íconos de Stampa pueden ser usados en cualquier parrafo usando la etiqueta < i >

  • Distinción de tamaños

A los íconos se les puede incorporar las clases sm md lg y xl; que varían su tamaño en relación con el parrafo en que se encuentra.

  • Enumeración de elementos

Se incluye dentro de los usos de los íconos en listas ordenadas de elementos. Incorporando las clases icn-ul e icn-li se reemplazan las viñetas.

  • Acentuación del ícono

Usando las clases icn-border, que bordea el ícono, en conjunto con pull-left o pull-right, se obtiene como resultado un elemento que sirve para iniciar parrafos y darles un cierto carácter.

  • Rotación y efecto espejo

Usando las clases icn-rotate- e icn-flip- se puede modificar la dirección y el sentido del ícono.

La dirección del ícono se puede modificar agregando al final de la clase la cantidad de ángulos que se desea rotar. De modo que las clases icn-rotate-90, icn-rotate-180 e icn-rotate-270 van cambiando la dirección del ícono.

Las clases icn-flip-horizontal e icn-flip-vertical hacen un efecto espejo sobre el ícono en el sentido correspondiente.

  • Giro de íconos

Mediante una animación CSS3, la clase icn-spin permite que cualquier ícono gire (funciona de mejor manera con aquellos circulares).

  • Apilación de íconos por capas

Se pueden apilar iconos de Stampa usando la clase icn-stack dentro de la etiqueta agrupadora < span >, seguida por los íconos que se desean agrupar.

Para los íconos, se pueden usar las clases icn-stack-1x para el ícono de menor tamaño e icn-stack-2x para el de mayor, de manera que no se sobrepongan entre ellos.

Se incluye la clase icn-inverse la cual cambia el color de relleno del ícono a su opuesto, siendo en este caso el blanco, de manera que se pueda sobreponer un ícono en uno con relleno.

Por último, en la etiqueta < span > se pueden combinar más clases, como por ejemplo, icn-stack icn-lg para hacer una agrupación de una escala mayor.

Verificación

Como última etapa dentro del proceso de diseño de Stampa, se encuentra la verificación y comprobación del desempeño, tanto funcional como gráfico, de los íconos.

La verificación ocurre tanto en las pruebas con la tipografía de Pyxis, Source Sans Pro, como también en las moléculas de diseño que comienza a conformar dentro de las maquetas del sitio oficial de la Escuela de Arquitectura y Diseño (Maquetas Giornata).

Construcción de un lenguaje gráfico

Observación identidad gráfica de la E[ad]

Elementos identitarios

Stampa v.1.0.0

Los íconos se clasifican según su temática, siendo de aplicación web, temporales, tipográficos, direccionales o de aplicación e[ad].

Se nombra al repositorio Stampa, que trabaja de manera independiente a Pyxis pero en conjunto y paralelamente a éste.

Set de íconos

En una primera etapa, se mantienen los 46 íconos diseñados para Íconos E[ad], una familia tipográfica pensada en su implementación en los servicios web de la E [ad].

Stampaset46.jpg

Ghpages

Se construye el sitio albergado en el servidor de Github para el proyecto, con su dirección bajo http://eadpucv.github.io/stampa

Ghpages de Stampa v.1.0.0

Correcciones a Stampa v.1.0.0

Luego de ser lanzada la versión 1.0.0 se comienzan a hacer unas series de correcciones, tanto gráficas como funcionales

Diseño de íconos

En una primera etapa, se simplifican los ícono y se llevan todos a trazo sin relleno, lo que permite trabajar únicamente en la forma y no en el ajuste con la contraforma.

De esta forma, se van probando distintos anchos de trazos, hasta llegar a final de 10 px.

Como segunda etapa, se comienzan a incorporar los íconos con relleno como protagonistas dentro del set, de manera que aquellos lineales se mantengan como alternativa para el desarrollador web.

Transcripción a web

Se hacen una serie de modificaciones semánticas a los íconos, de manera de acortar sus nombres y también sus variaciones.

Además, se incorporan la totalidad de las funciones provenientes de Font Awesome a los íconos, de manera de ampliar el rango de variaciones en su aplicación.

Stampa v.2.0.0

Se lanza la versión 2.0.0 de Stampa pensando en su incompatibilidad con su previa versión, en cuanto se modifican nombres y prefijos dentro de las clases.

Set de íconos

Se amplía el set de íconos totales del proyecto Stampa de 46 a 88, rediseñando los iniciales, tanto en forma como en trazo y contenido.

Los íconos se vuelven de un trazo único de 10 px, incorporando la variedad de íconos líneales, los cuales son la versión sin relleno de los principales.

Se establecen además, categorías para disponer los íconos como lo son: aplicación web, tipográficos, direccionales, de enumeración, temporales, aplicación e[ad] y redes sociales.

Stampaset86.jpg

Ghpages

Pensando en una visualización únicamente en tablet y desktop, el sitio permite al usuario ver una lista completa de los íconos, además de acceder a los usos de Stampa con ejemplos.

Se hace un énfasis en el acceso al repositorio en Github, siendo la documentación del repositorio no de los pilares fundamentales de Stampa.

Ghpages de Stampa v.2.0.0

Actualización Stampa v.2.1.0

Stampa v.2.1.0 es lanzada con la incorporación de 36 nuevos íconos, que fueron surgiendo según requerimientos de Gamma Maquetas.

Set total de íconos

La actualización v.2.1.0 para Stampa, y actual versión, realiza un ajuste a los previos 89 íconos, manteniendo el mismo ancho de trazo y contenido y añade una serie de 34 íconos, que se incorporan a todas las categorías.

Estos 34 íconos se diseñan pensando en su uso dentro de las Maquetas Gamma, para el sitio oficial e[ad] y para el Archivo Histórico José Vial Armstrong.

Se produce un pequeño cambio en cuanto a la forma de catalogar los íconos, modificando el nombre de la categoría "Redes sociales" a "Aplicación externa", pensando en que ya no incorpora únicamente sitios o software sociales, si no de toda índole.

Stampaset125.jpg

Atajos

Se construye dentro de los archivos .less shorts.less, que mediante la función rotatoria de Font Awesome, simplifica los íconos direccionales.

De este modo, por ejemplo, mano-izq no es un glifo en sí, si no que es el ícono mano-der rotado.

Atajosstampa.jpg

Ghpages

Se actualiza el sitio de Stampa, tomando protagonismo como medio de exposición para el set de íconos y sus aplicaciones.

Lista completa de íconos

Se decide hacer una sección en la cual se listen todos los íconos ordenados alfabéticamente según su categoría. Como página anexa, se encuentra la Cheatsheet, una lista de todos los íconos alineados con su nombre ordenados alfabéticamente sin categorías.

Usos y aplicaciones de los íconos

Se construye una sección donde se especifican, con ejemplos, los distintos usos y aplicaciones de Stampa, de manera que sea fácil entender y hacer empleo del set tipográfico de íconos.

Aplicación web en conjunto a Pyxis

El desempeño del proyecto iconográfico Stampa es medido según su aplicación en las maquetas de Gamma, que abarcan al sitio oficial de la Escuela de Arquitectura y Diseño PUCV y a una de sus secciones, el Archivo Histórico Jose Vial Armstrong.

En ambas, Stampa aparece como un lenguaje gráfico que ayuda a una mayor legibilidad de los contenidos, resaltando contenidos como la categoría a la cual pertenecen ciertos posts, hipervínculos a aplicaciones externas y a los diferentes sitios web dentro de la plataforma web de la organización.

Maquetas Gamma

Gamma es una plataforma digital de trabajo colaborativo (específicamente almacenado como repositorio en GitHub), donde se registra el avance de las maquetas navegables para el re-diseño del sitio web oficial de la e[ad] ,previamente investigada como una organización compleja de estructuras en base a una jerarquía y oficio reconocibles en su identidad. Es desde la conceptualización de dicha identidad que Gamma sostiene el proceso constructivo-gráfico ulterior a la arquitectura de información y diseño de Wireframes.


Maquetas Archivo Histórico José Vial Armstrong

El Archivo Histórico José Vial Armstrong(AHJVA) existe como plataforma digital en Flickr. Sin embargo hoy es un proyecto en paralelo y que se reúne como maqueta en Gamma, para transformarse en un sitio de diseño autónomo, pero siguiendo la misma línea gráfica del Framework Pyxis en conjunto a Stampa.

A partir del framework se toman elementos para componer el sitio, que comprenden: tipografía, grilla, interacciones, color e iconografía.Cada una de estas variables agrupa un estilo o manera de trabajarlas. El framework propone los componentes para armar el diseño y esta abierto a su extensión a través de las nuevas clases o atributos que puedan surgir en este proyecto.

Stampa v.3.0.0

Se lanza la versión 3.0.0 de Stampa pensando en su incompatibilidad gráfica funcional con su previa versión ya que se modifican prefijos dentro de las clases.

Correcciones previa versión

Una vez lanzada la versión 2.1.0 de Stampa, comenzó el proceso de reconocimiento y análisis del set iconográfico, identificando no sólo sus fortalezas si no también sus debilidades. Entre sus debilidades, se encontraron dos: falta de unidad gráfica y desigualdad en el nivel de abstracción.

Unidad gráfica

Para la versión 2.0.0 de Stampa, se tomó la decisión de establecer íconos con relleno y su variación lineal. Esta determinación buscaba dar más opciones gráficas a los desarrolladores que trataran con la fuente iconográfica.

Una de sus debilidades fue la falta de unidad gráfica que causaba el tener variaciones de relleno y lineales. Al contemplar el set iconográfico como un todo, se notaba una desigualdad de pesos visuales importante.

Para corregir esta disparidad en el ámbito gráfico, se tomó la decisión de construir el set de Stampa a base de íconos únicamente líneales.

Abstracción

Otro aspecto débil dentro del set iconográfico era la disparidad del nivel de abstracción con el cual eran construidos los íconos.

-imagen-

Como se puede observar, existían íconos muy abstractos, como lo era el caso de "compartir" en comparación con "estorninos", que no lo era tanto. Para su siguiente versión se ajustaron los íconos para lograr una mayor equivalencia entre sus niveles de abstracción, relacionándose con una de las observaciones rescatadas en una primera etapa sobre la identidad gráfica dentro de la organización de la Escuela de Arquitectura y Diseño, PUCV.

Set total de íconos

La tercera versión del proyecto es lanzada en el proceso de Título III, con un total de 94 glifos y 123 íconos contando variaciones direccionales.

Stampa3regular.png

Stampa Ligera

En el proceso de verificación del proyecto aparece para su uso dentro del sitio oficial de la e[ad] la necesidad de una variante de peso tipográfico, la cual sirviera para su uso en rotulados de mayor tamaño.

Esta variante, bautizada como Stampa Ligera, se construye a partir de un trazo más angosto que Stampa Regular, y añade a su conformación gráfica un nivel más detallado de los íconos.

Stampa3ligera.png

Ghpages

Se actualiza el sitio público de Stampa en Ghpages para la versión 3.0.0 del set iconográfico. Para esta actualización se busca disponer de una mejor manera los dos pesos de la webfont.

Ghpages de Stampa v.3.0.0

Aplicaciones

Sexta Bienal de Tipografía Latinoamericana en Valparaiso

Tipos Latinos es un espacio tipográfico internacional integrado por 14 países latinoamericanos: Argentina, Bolivia, Brasil, Chile, Colombia, Cuba, Ecuador, Guatemala, México, Nicaragua, Paraguay, Perú, Uruguay y Venezuela. El propósito de esta organización es llevar a cabo la Bienal de Tipografía Latinoamericana, la cual se presenta simultáneamente en los distintos países que conforman Tipos Latinos.

Chile es uno de los países más importantes dentro de los participantes, siendo una de las sedes fundadoras de la bienal y además de contar con una alta participación y audiencia. La bienal dentro del país es organizada por el colectivo Unión de los Tipógrafos, obteniendo patrocinio de universidades e instituciones de educación superior, llevándola a 5 ciudades.

La Sexta Bienal de Tipografía Latinoamericana 2014 (6BTL) se desarrolló durante el mes de agosto en Valparaíso. El encuentro, que se llevo a cabo en el Parque Cultural de Valparaíso, reunió a profesionales latinoamericanos y sus trabajos en torno a la tipografía. La bienal constó de una exposición, talleres y un ciclo de charlas; actividades abiertas a todo público y de acceso gratuito.

Stampa dentro del ciclo de charlas de la 6BTL

Dentro del marco de la Sexta Bienal Tipográfica Latinoamericana, Stampa participo en el ciclo de eventos con una charla titulada: "Lenguaje iconográfico Stampa: El desarrollo de un sistema de diseño complejo en la web y sus lenguajes"'

Taller de titulación III de diseño gráfico de la Escuela de Arquitectura y Diseño PUCV e[ad] y su proyecto en desarrollo en torno al rediseño de sus servicios web de la Escuela, articulándolos como un Ecosistema Digital. Stampa es uno de los proyectos que conforman el rediseño de las plataformas digitales de la Escuela. El proyecto trata del diseño de una fuente iconográfica digital (webfont) construida especialmente para su uso en las dependencias web de la e[ad]. La fuente iconográfica, la cual sigue siendo desarrollada, está disponible en dos pesos tipográficos, y se encuentra disponible como proyecto abierto en Github.

Stampa en conjunto a Pyxis Framework (framework gráfico), buscan construir un lenguaje gráfico global para las distintas plataformas digitales que conforman al Ecosistema Digital de la Escuela, elaborando una estructura gráfica unificada coherente y mejorando al mismo tiempo la experiencia del usuario.

La charla tenía como principales objetivos entregar un contexto sobre el rediseño de los servicios web de la Escuela de Arquitectura y Diseño y el desarrollo del proyecto iconográfico Stampa.

Registro del evento

A continuación, los registros de la charla como noticia en el sitio oficial e[ad], dentro de los afiches web oficiales de la 6BTL y fotografías de la charla.

Bibliografía

Stampa: Definizione e significato

Atomic Design

SVG for Web Developers; Pearlman, Ellen House, Lorien; Prentice Hall Professional; 2003

Icon fonts could speed up your page loading time by 14% compared to images

The Era of Symbol Fonts

Do's and Dont's of Icon Fonts