lenguaje iconográfico stampa: el desarrollo de un sistema de diseño complejo en la web y sus...

Lenguaje iconográfico StampaEl 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

d i s e ñ o ató m i co

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.

Interdependiente2.

Simultáneo3.

Colaborativo

S I S T E M A

s e r v i c i o s w e b d e l a o r g a n i zac i ó n



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

INTRODUCCIÓN | OBSERVACIÓN Y EVALUACIÓN DE PROBLEMÁTICA | PYXIS FRAMEWORK | STAMPA

s i t uac i ó n d i g i ta l act ua l


e[ad]


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

e[ad]Archivo Histórico

Travesíashttp://www.ead.pucv.cl/mundo/archivo/

travesias.ead.pucv.cl


Casiopea

e[ad]Archivo Histórico

Travesías

wiki.ead.pucv.cl

http://www.ead.pucv.cl/mundo/archivo/



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




p r o b l e m át i c as y r e q u e r i m i e n to s


1E 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.


2I 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.


3A 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.


4C 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


e x p e ctat i va d e d i s e ñ o

e co s i st e m a d i g i ta l


USUARIOS NECESIDADES SOPORTES LENGUAJE


1U 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


2N 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.


3S 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.


4L 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

Pyxis Framework


¿ q u é e s p y x i s f r a m e wo r k ?Una matriz de declaraciones gráf icas y estructurales

en etapa de desarrol lo, que del imita la gráf ica de las

plataformas pertenecientes a la organización e[ad].


PyxisEs 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

¿ q u é e s p y x i s ?


FrameworkEn 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

¿ q u é e s u n f r a m e wo r k ?


e j e m p lo s d e f r a m e wo r k s

Bootstrap Foundation

Material Google Skeleton


p ot e n c i a l i da d y p r oy e cc i o n e s


Parametrizar los estilos gráficos bajo una estructura de uso, permite

entender la totalidad de los estilos de una forma conceptual.

1P 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.

2A C C E S I B I L I D A D


3S 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.


co m p o n e n t e s


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


elementos estructurales

GRILL A

1 2 3 4 5 6 7 8 9 10 1 1 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


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


elementos interactivos

BOTONESFORMUL ARIOSJAVASCRIPT

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.


3E 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


¿ q u é e s sta m pa ?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ó m o s u r g e sta m pa ?


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

p r o b l e m át i c as


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

Escaso uso de íconos Falta de unidad gráfica


¿ cuá l e s e l p r o c e s o d e d i s e ñ o ?


1

2

3

4

DISEÑAR

COMPRIMIR

TRANSCRIBIR

VERIFICAR


1D I S E Ñ A R

proceso del bosquejo de íconos |


1D I S E Ñ A R

vectorización de los dibujos |


1D I S E Ñ A R

aplicación de la grilla a los dibujos vectoriales |


2C O M P R I M I R

aplicación web icomoon |


3TRANSCRIBIR


4V E R I F I C A R


co n st r u cc i ó n d e u n l e n g ua j e


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


esculturas de girola y cuadro pintado por alberto cruz |


v.2.1S T A M P A

stampa v.2.1: set de 123 íconos |


co n st r u cc i ó ng r á f i c a

v.2.1S T A M P A

REMATE RECTO

BORDES EXTERNOSREDONDEADOS

BORDES INTERNOSRECTOS


v.2.1S T A M P A

aviso aviso-l

lapiz lapiz-l

va r i a b l e s l i n e a l e s

mapa-agregar mapa-agregar-l


v.2.1S T A M P A

flecha

flecha-der flecha-arriba flecha-izq flecha-abajo

9 0 º 18 0 º 270 º

va r i a b l e s d i r e cc i o n a l e s


v.2.1S T A M P A

| PESO VISUAL

p r o b l e m át i c as

| ABSTRACCIÓN


v.3.0S T A M P A

stampa v.3.0: set de 92 íconos |


p e s o v i s ua l

v.3.0S T A M P A

ÍCONOS SE VUELVEN LINEALES

estorninos estorninos

alarma alarma


a b st r acc i ó n


v.3.0S T A M P A

Regular Ligera

calendario calendario-lig


v.3.0S T A M P A

va r i a b l e s d e p e s o

casiopea casiopea-lig

lupa lupa-liglapiz lapiz-lig


v.3.0S T A M P A


f o rta l e zas d e l p r oy e cto


Í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

stampaeadpucv.github.io/stampa

PYXISeadpucv.github.io/pyxis

lenguaje iconográfico stampa: el desarrollo de un sistema de diseño complejo en la web y sus...

Design