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

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

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

Personas

Archivo Histórico

Travesías

personas.ead.pucv.cl

wiki.ead.pucv.cl

Casiopea

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

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.

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 ?

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

certificado de profesionalidad programaciÓn con lenguajes...

dosier exposicion p/e stampa

estudio iconográfico y acercamiento iconológico a las

anÁlisis iconogrÁfico del portal del convento de san

usfi | unione stampa filatelica italiana

stampa impresión digital & serigrafia (catalogo)

autismo in viaggio ta 12-stampa - pisa international...

lenguajes de programación · 2012. 10. 7. · niveles de...

estudio iconogrÁfico do pÓrtico oeste da igrexa de …

propuesta para un análisis iconográfico de petroglifos: la...

anÁlisis iconogrÁfico preliminar de fragmentos de …

manual iconográfico

análisis iconográfico u3

informe histórico iconográfico xul solar

una mano tesa stampa

69 propuesta para un mÉtodo de estudio iconogrÁfico

análisis iconográfico

catalistino ek - 2020 spagna -stampa

rassegna stampa 2010 formato pdf

22. estudio iconográfico del jabalí como animal simbólico...