Lenguaje iconográfico Stampa: El desarrollo de un sistema de diseño complejo en la web y sus lenguajes

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

INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | METODOLOGÍA | PYXIS FRAMEWORK | STAMPA
diseño atómico

Fuente: http://patternlab.io/
átomos
“Componente básico de la
interface y la construcción
del sistema”

moléculas
“Grupo de átomos que
generan una función
específica en su conjunto”

átomos

átomos molécula

organismos
“Moléculas que se
inscriben en una sección
determinada”

molécula

molécula
organismo

plantillas
“Modelos de organismos que se
rigen en términos de proporción
y legibilidad”

páginas
“Instancia concreta en la
efectividad del sistema”

plantilla

plantilla página

1.
Interdependiente
2.
Simultáneo
3.
Colaborativo
S I S T E M A

servicios web de la organización

Archivo Histórico Travesías Estorninos Casiopea Personas Sitio oficial

INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA
situación digital actual

e[ad]

e[ad]
Archivo Histórico
http://www.ead.pucv.cl/mundo/archivo/

e[ad]
Archivo Histórico
Travesías
travesias.ead.pucv.cl

Casiopea
e[ad]
Archivo Histórico
Travesías
wiki.ead.pucv.cl

Casiopea
e[ad]
Personas
Archivo Histórico
Travesías
personas.ead.pucv.cl
wiki.ead.pucv.cl

Casiopea
e[ad]
Personas
Estorninos
Archivo Histórico
Travesías
estorninos.ead.pucv.cl
personas.ead.pucv.cl
wiki.ead.pucv.cl

problemáticas y requerimientos

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.

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.

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.

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

expectativa de diseño

ecosistema digital
USUARIOS NECESIDADES SOPORTES LENGUAJE

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

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.

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.

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.

e[ad]
Casiopea
Travesías
Estorninos
Personas
Casiopea
Sitio oficial

Lenguaje gráfico para un ecosistema digital
PyxisFramework

¿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].

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?

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?

ejemplos de frameworks
Bootstrap Foundation
Material Google Skeleton

potencialidad y proyecciones

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

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

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.

componentes

1
E L E M E N T O E S T R U C T U R A L

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

2
E L E M E N T O S I N T E R A C T I V O S

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.

3
E L E M E N T O S G R Á F I C O S

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

Lenguaje iconográfico como primera escala
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]

Proyecto de una fuente iconográfica web (webfont) que es
diseñada especialmente para soporte digital

Font Awesome es el lenguaje iconográfico diseñado especialmente
para Bootstrap.

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.

¿cómo surge stampa?

ejemplos de iconografías en plataformas de la organización |
problemáticas

ejemplos de iconografías en plataformas de la organización |
Escaso uso de íconos Falta de unidad gráfica

¿cuál es el proceso de diseño?

1
2
3
4
DISEÑAR
COMPRIMIR
TRANSCRIBIR
VERIFICAR

1
D I S E Ñ A R
proceso del bosquejo de íconos |

1
D I S E Ñ A R
vectorización de los dibujos |

1
D I S E Ñ A R
aplicación de la grilla a los dibujos vectoriales |

2
C O M P R I M I R
aplicación web icomoon |

3
TRANSCRIBIR

4
V E R I F I C A R

construcción de un lenguaje

pizarras escritas para la exposición 20 años |

esculturas de girola y cuadro pintado por alberto cruz |

v.2.1
S T A M P A
stampa v.2.1: set de 123 íconos |

construcción
gráfica
v.2.1
S T A M P A
REMATE RECTO
BORDES EXTERNOS
REDONDEADOS
BORDES INTERNOS
RECTOS

v.2.1
S T A M P A
aviso aviso-l
lapiz lapiz-l
variables lineales
mapa-agregar mapa-agregar-l

v.2.1
S T A M P A
flecha
flecha-der flecha-arriba flecha-izq flecha-abajo
90º 180º 270º
variables direccionales

v.2.1
S T A M P A
| PESO VISUAL
problemáticas
| ABSTRACCIÓN

v.3.0
S T A M P A
stampa v.3.0: set de 92 íconos |

peso visual
v.3.0
S T A M P A
ÍCONOS SE VUELVEN LINEALES

estorninos estorninos
alarma alarma
abstracción

v.3.0
S T A M P A
Regular Ligera

calendario calendario-lig
v.3.0
S T A M P A
variables de peso
casiopea casiopea-lig
lupa lupa-liglapiz lapiz-lig

v.3.0
S T A M P A

fortalezas del proyecto

Íconos deben ser pensados para que se aprecien en distintas escalas,
ya sea en una mínima o máxima expresión tipográfica

El proyecto busca mejorar la experiencia del usuario al navegar por
los servicios web de la Escuela de Arquitectura y Diseño

Stampa está diseñada de modo que el desarrollador web tenga una
variedad de opciones en cuanto a tamaños y funciones para aplicar

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

repositorio de stampa |

grazie!

Idar Gonzalez | Juan Antonio Godoy | Gabriela Pérez | Catalina Reyes
stampa
eadpucv.github.io/stampa
PYXIS
eadpucv.github.io/pyxis

Lenguaje iconográfico Stampa: El desarrollo de un sistema de diseño complejo en la web y sus lenguajes

Recomendados

Recomendados

Más contenido relacionado

Similar a Lenguaje iconográfico Stampa: El desarrollo de un sistema de diseño complejo en la web y sus lenguajes

Similar a Lenguaje iconográfico Stampa: El desarrollo de un sistema de diseño complejo en la web y sus lenguajes (20)

Más de creyesnav

Más de creyesnav (9)

Último

Último (20)

Lenguaje iconográfico Stampa: El desarrollo de un sistema de diseño complejo en la web y sus lenguajes