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.
presentación de historia; arquitectura renacentista
Lenguaje iconográfico Stampa para ecosistema digital
1. Lenguaje iconográfico Stampa
El desarrollo de un sistema de diseño complejo en la web y sus lenguajes
Idar Gonzalez | Juan Antonio Godoy | Gabriela Pérez | Catalina Reyes
2. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
diseño atómico
5. Fuente: http://patternlab.io/
moléculas
“Grupo de átomos que
generan una función
específica en su conjunto”
INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
11. Fuente: http://patternlab.io/
plantillas
“Modelos de organismos que se
rigen en términos de proporción
y legibilidad”
INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
15. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
1.
Interdependiente
2.
Simultáneo
3.
Colaborativo
S I S T E M A
16. servicios web de la organización
INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
17. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
Archivo Histórico Travesías Estorninos Casiopea Personas Sitio oficial
18. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
situación digital actual
26. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
1
E S T R U C T U R A Y N A V E G A C I Ó N
Presentación y jerarquía (niveles de profundidad) de los contenidos
Estructura de navegación que permita al lector visualizar todos los
contenidos de manera fácil y clara.
27. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
2
I D E N T I D A D
No existe una gráfica transversal que permita identificar la esencia o
fundamentos que la organización quiere representar.
28. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
3
A C C E S I B I L I D A D
Desde el punto de vista del diseño adaptativo y la experiencia de
usuario, no hay tratamiento en esta área, por ende, la visualización
de contenidos en diferentes dispositivos no es posible.
29. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
4
C O N T E N I D O S
Los contenidos deben ser pensados acorde a los usuarios o lectores
que navegan los sitios y la calidad de información que estos requieren
30. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
expectativa de diseño
31. ecosistema digital
INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
USUARIOS NECESIDADES SOPORTES LENGUAJE
32. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
1
U S U A R I O S
Se define un público objetivo que se enmarca en el contexto de
escuela como organización, estos son: alumno, docente, postulante,
funcionarios e investigadores
33. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
2
N E C E S I D A D E S
A través de los usuarios pueden reconocerse sus necesidades, en este
sentido se tiene: contenidos, accesibilidad, disfusión e identidad.
34. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
3
S O P O R T E S
Parámetros o pautas estructurales respecto al diseño y adaptación
de los contenidos. Los soportes son: computador, tablet y teléfono
móvil.
35. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
4
L E N G U A J E
Propone las herramientas para el desarrollo y cohesión de los
elementos de diseño: grilla, color, tipografía, iconografía e
interacción.
36. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
e[ad]
Casiopea
Travesías
Estorninos
Personas
Casiopea
Sitio oficial
37. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Lenguaje gráfico para un ecosistema digital
PyxisFramework
38. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
¿qué es pyxis framework?
Una matriz de declaraciones gráficas y estructurales
en etapa de desarrollo, que delimita la gráfica de las
plataformas pertenecientes a la organización e[ad].
39. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Pyxis
Es una constelación menor del sur. Está compuesta por tres
estrellas principales: Gamma, Alpha y Beta.
La palabra proviene del latín y significa “brújula”.
Constelación del sur - Brújula
¿qué es pyxis?
40. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Framework
En términos de diseño web, es una librería de patrones que
facilita el proceso de desarrollo.
El framework trae consigo una forma específica de mostrar los
elementos por lo tanto cada framework trabaja fuertemente
con su identidad gráfica.
Matriz gráfica - Identidad
¿qué es un framework?
41. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
ejemplos de frameworks
Bootstrap Foundation
Material Google Skeleton
42. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
potencialidad y proyecciones
43. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Parametrizar los estilos gráficos bajo una estructura de uso, permite
entender la totalidad de los estilos de una forma conceptual.
1
P A R A M E T R I Z A R
44. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Al estar albergado en GitHub el proyecto es accesible a cualquier
persona y disponible a futuros diseñadores colaboradores.
2
A C C E S I B I L I D A D
45. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
3
S U S T E N T A B I L I D A D
Pyxis presenta una base para futuros proyectos que se inscriben
dentro de la organización.
47. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
1
E L E M E N T O E S T R U C T U R A L
48. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
elementos estructurales
GRILLA
1 2 3 4 5 6 7 8 9 10 11 12
8 4
444
6 6
Las columnas pueden adoptar
diversas diagramaciones y variar
según el ancho de pantalla.
Diseño responsivo y ajustable a
diversos soportes.
1 1 1 1 1 1 1 1 1 1 1 1
49. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
2
E L E M E N T O S I N T E R A C T I V O S
50. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
elementos interactivos
BOTONESFORMULARIOSJAVASCRIPT
Evidencia comunicación
entre el usuario y el
sistema además de proveer
elementos interactivos
para la interfaz del diseño.
Reciben datos que
proporciona el usuario
y los transfiere a la
organización.
Elementos que gatillan
alguna acción.
51. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
3
E L E M E N T O S G R Á F I C O S
52. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
elementos gráficos
ICONOGRAFÍAPALETA CROMÁTICATIPOGRAFÍA
Para encabezados se utiliza
Source Sans Pro, mientras
que para texto contínuo,
Merriweather.
Las paleta de colores
del framework
proviene de un proceso
de observación.
Familia iconográfica
Stampa que se compone
de 93 glifos.
Aa/Aa
54. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
¿qué es stampa?
Stampa es un lenguaje iconográfico que busca construir en conjunto
a Pyxis la identidad gráfica de la organización e[ad]
55. Proyecto de una fuente iconográfica web (webfont) que es
diseñada especialmente para soporte digital
INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
56. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Font Awesome es el lenguaje iconográfico diseñado especialmente
para Bootstrap.
57. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Stampa [stàm-pa] s.f.
Tecnica di riproduzione in più esemplari, su carta o altro mate-
riale, di testi scritti, disegni o fotografie, a partire da una ma-
trice e mediante procedimenti diversi; l’operazione di stampa-
re e il risultato di tale procedimento: opera in corso di s. || dare
alle s., pubblicare
Carattere, indole.
59. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
ejemplos de iconografías en plataformas de la organización |
problemáticas
60. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
ejemplos de iconografías en plataformas de la organización |
Escaso uso de íconos Falta de unidad gráfica
61. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
¿cuál es el proceso de diseño?
63. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
1
D I S E Ñ A R
proceso del bosquejo de íconos |
64. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
1
D I S E Ñ A R
vectorización de los dibujos |
65. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
1
D I S E Ñ A R
aplicación de la grilla a los dibujos vectoriales |
66. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
2
C O M P R I M I R
aplicación web icomoon |
74. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.2.1
S T A M P A
stampa v.2.1: set de 123 íconos |
75. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
construcción
gráfica
v.2.1
S T A M P A
REMATE RECTO
BORDES EXTERNOS
REDONDEADOS
BORDES INTERNOS
RECTOS
76. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.2.1
S T A M P A
aviso aviso-l
lapiz lapiz-l
variables lineales
mapa-agregar mapa-agregar-l
77. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.2.1
S T A M P A
flecha
flecha-der flecha-arriba flecha-izq flecha-abajo
90º 180º 270º
variables direccionales
78. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.2.1
S T A M P A
| PESO VISUAL
problemáticas
| ABSTRACCIÓN
79. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.3.0
S T A M P A
stampa v.3.0: set de 92 íconos |
80. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
peso visual
v.3.0
S T A M P A
ÍCONOS SE VUELVEN LINEALES
82. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.3.0
S T A M P A
Regular Ligera
83. calendario calendario-lig
INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
v.3.0
S T A M P A
variables de peso
casiopea casiopea-lig
lupa lupa-liglapiz lapiz-lig
85. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
fortalezas del proyecto
86. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Íconos deben ser pensados para que se aprecien en distintas escalas,
ya sea en una mínima o máxima expresión tipográfica
87. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
El proyecto busca mejorar la experiencia del usuario al navegar por
los servicios web de la Escuela de Arquitectura y Diseño
88. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Stampa está diseñada de modo que el desarrollador web tenga una
variedad de opciones en cuanto a tamaños y funciones para aplicar
89. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
Stampa es un proyecto abierto a la comunidad, tanto de
desarrolladores como de diseñadores web.
90. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
repositorio de stampa |
91. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
repositorio de stampa |
92. INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
repositorio de stampa |