Sinapsis
| Título | Synap |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | sitioweb |
| Período | 2020-2020 |
| Asignatura | Taller de Diseño de Interacción |
| Del Curso | Taller de Diseño de Interacción 2020 |
| Carreras | Diseño |
| Alumno(s) | Roberta Durán, Gabriela Zett, Catalina Velásquez, Javiera Galaz, Antonia Escudero |
| Profesor | Katherine Exss, Herbert Spencer |
| URL | https://antoescudero.github.io/sinapsis/index.html |
Proyecto SynApp
El nombre SynApp, es un concepto compuesto que nace a partir de dos palabras, por un lado, la palabra synapse que en español significa sinapsis y por otro la abreviatura app que alude al concepto de aplicación móvil. La palabra Synapse (Sinapsis) se refiere al acto de conexión neuronal que se ejecuta cuando las neuronas se relacionan e interactúan entre sí, transmitiendo o recibiendo impulsos nerviosos e información, lo que hace referencia a la conexión que existe entre un patrón u otro, donde dicha conexión es la que permite la formación de un sistema que posteriormente permitirá interacción con el usuario. En dicho sistema los patrones se cruzan y entrelazan a través de una constante interacción, la que el usuario percibe al momento de ingresar a este mundo. Cada patrón es importante, ya que cada uno cumple un rol fundamental, es decir, todos juntos forman un solo sistema de manera funcional.
Wireframes
Este sitio web está pensado cómo un repositorio de distintos patrones de interacción categorizados, con la intención de crear una base de datos disponible para el público y de ésta manera poder comparar las prácticas y experiencias con los patrones. En un principio, proponemos que el sitio permita la participación activa de la comunidad, es decir, que el usuario certificado pueda evaluar el contenido y aportar con un feedback acerca de los patrones. También, el usuario puede añadir patrones de interacción bajo un estándar. Así nos aseguramos que el sitio web mantenga información actualizada.
Escritorio
Móvil
Segunda versión 14.04.2020
Esta versión del proyecto nace a raíz de las correcciones realizadas en el taller, además busca proponer una navegación que más horizontal para que se aprovechen mejor las capas o niveles de navegación. Haciendo que la interfaz no sea solamente un marco o estructura, sino que sea el eje principal de interacción del sitio. También, esta nueva versión tiene la intención de filtrar la cantidad de información que recibe el usuario por la pantalla.
Synap nace bajo la inspiración de la red neuronal presente en los seres vivos, y cómo esta interrelación de estímulos transmiten la información adecuada para generan una experiencia en su plenitud.
En esta segunda versión del mapa de navegación surgen cambios debido a la propuesta de interfaz, donde de alguna forma se puede reducir las capas según la cantidad de información que maneje el sitio a través del scroll. Pudiendo así abarcar más capas dentro de un nivel, haciendo que así la experiencia de ingresar al sitio se dé en base a una lectura más paulatina y amable con el usuario.
Wireframes
Escritorio
- Error al crear miniatura: Archivo más grande que 25 MP
- Error al crear miniatura: Archivo más grande que 25 MP
Móvil
Tercera versión 16.04.2020
Wireframes
Escritorio
.png)
.png)
.png)
.png){kind=small}
.png){kind=small}
.png)
.png)
.png)
.png)
.png)
.png)
Móvil
.png)
.png)
.png)
.png){kind=small}
.png){kind=small}
.png)
.png){kind=small}
.png){kind=small}
.png){kind=small}
.png)
.png){kind=small}
.png)
.png)
Versión Final 05.04.2020
SINAPSIS: Relación funcional de contacto que existe entre las terminaciones de las células nerviosas o entre una neurona motora y un músculo. Éstas células permiten que la información que una neurona transmite sea filtrada e integrada y se caracterizan por ser una transmisión que va en una sola dirección.
De manera introductoria, SINAPSIS, se establece como la última palabra que da forma al proyecto, luego de haber cambiado a la par de las propuestas. Consideramos que agregar sufijos o prefijos y crear un nombre compuesto para erigir el proyecto no se condice con lo que exactamente quiere presentar, en este caso, una plataforma que permite a los usuarios indagar y participar de conceptos levantados desde la propia experiencia, donde la interrelación de éstos conforman el tejido de la interacción, por lo que cada uno de éstos puntos es vital para que éste sitio sea vigente en su información y propósito.
Arquitectura de información
Ya habiendo establecido todas las páginas e interacciones dentro del sitio, es posible re-organizar el contenido ya trabajado, integrar nuevos puntos y renovar las jerarquías de información con la nueva estructura que es visible mediante la interfaz. Éstos nuevos elementos se definen en visualizaciones de los flujos o relevancia del contenido presentados de manera gráfica, presentando acciones y contenidos para así lograr una mayor claridad sobre el mapa. Ésta nueva estructura, está compuesta por los siguientes niveles de información:
Nivel 1: Inicio
Éste nivel es el HOME, donde se presenta de manera introductoria y definida el contenido en el que luego se profundizará.
Nivel 2: Menú
Éste nivel corresponde al menú, en donde se presentan las categorías de información relacionadas al estudio, además de habilitarse la opción de menú, donde se puede acceder a Colaborar y Propósito, que finalmente se sitúan en el mismo eje para bajar información.
Nivel 3: Categorías
Éste nivel corresponde al acceso a 1 categoría de selección del usuario, desplegada desde su definición y patrones representativos.
Nivel 4: Patrones
Éste nivel corresponde a la bajada de información en relación al patrón de la categoría seleccionada, en donde se define qué es y cuál es el criterio que debe cumplir para los siguientes casos representativos en cuestión.
Nivel 5: Prácticas
Éste nivel corresponde a la última bajada de información, donde se accede al ejemplo seleccionado, bueno o malo, y se determinan los fundamentos del caso para adoptar este criterio, además de acceder a material que compruebe ésta interacción.
Diseño de Interfaz e Identidad de marca
El proceso de construcción identitaria del sitio fué ensayo y error, testeo y descarte. Si bien había una integrante del equipo encargada de levantar material destinada para ésto, las decisiones y ajustes fueron decisiones grupales. Ésta búsqueda parte de la importancia de la palabra que erige nuestro proyecto y el objetivo de hacerla visible a través de las distintas sensibilidades gráficas que alcanza la interfaz del sitio, para justamente hacer énfasis en el tejido de interacción que argumenta el contenido.
Proceso constructivo
Logo
Para el desarrollo del logo consideramos importante que la palabra esplendiera en sí y a través de eso se pudiera conectar con algún recurso simple que comunicara la conexión entre los distintos puntos. Para ello hubieron 3 pruebas para llegar al modelo final, en donde básicamente la evolución radicó en el recurso gráfico que presentara la conexión, en dónde un factor importante era que fuera sintético. Para la construcción de esto decidimos optar por una tipografía sin serif, en este caso la Roboto regular, ya que expresa de forma más precisa lo que se quiere comunicar.
Versión final
Para llegar a éste último modelo, fué crucial tener en cuenta la arquitectura misma de la palabra en su composición tipográfica en Roboto regular, ya que teniendo la primera idea de los puntos y lineas que se conectan entre sí, al darnos cuenta de los elementos propios de su estructura tipográfica no era necesario agregar mayor trabajo en aquel recurso visual, sino más bien, aprovechar ésto para juntarlo con la idea principal.
Arquitectura interna
De esta manera se puede visualizar mejor las equivalencias de peso visual de las lineas y puntos incorporados en relación a la tipografía utilizada, además de tener en consideración las distancias entre estos elementos y sus longitudes, en donde finalmente se respeta la caja de la palabra completa para la construcción total además de poner en énfasis la relación de carácteres comunes dentro de ella.
Tipografía
Para la selección tipográfica como primera consideración estimamos que debía cumplir con no agregar más de lo estrictamente necesario para su lectura, es decir, debía ser bastante concisa, pero debía ser factible en relación a su lecturabilidad, a pesar de que el sitio no es estrictamente de lectura extensa, así que debía ser sin serif. También debía contener una gama de variables amplia debido a todas las jerarquías que se establecen dentro de cada página, y de esta forma tener una compensación y composición visual amable con el usuario.
Primera opción
Como primera opción seleccionamos la tipografía Ronnia ya que de cierta forma cumplía con el criterio que habíamos previsto. Al momento de utilizarla en los wireframes, nos dimos cuenta que, si bien cumplía con los pesos visuales, la caja y el sin-serif, le daba demasiada dureza a la página, considerando además la paleta que habíamos seleccionado, otorgaba un aspecto demasiado impersonal y apagado.
Opción final
Debido a lo anterior mencionado, es que decidimos explorar distintos sitios que quizás pudieran cumplir con algunos aspectos parecidos en términos de paleta de color y cantidad de información visual para experimentar qué tipo de tipografía podía ser más adecuada para éste caso.
Hecho esto, la primera consideración era seleccionar una tipografía que fuera el "sentido contrario" a la paleta, ya que ésta es oscura, la tipografía debía tener el trabajo de ser un elemento de interfaz que otorgara cualidades blandas a cada página, pero sin caer en el "clasicismo" de una tipografía con serif. Para esto esque escogimos la tipografía Roboto Slab, ya que es la misma familia utilizada para desarrollar el logo, pero con la cualidad del Slab serif que permite llamar la atención del usuario, tener una caja más ancha, pero igual de legible, además de cumplir con las variables de peso visual que estimábamos.
Las definiciones de peso visual para las jerarquías de contenido fueron:
- Roboto Slab Regular para cuerpo de texto
- Roboto Slab Semibold para subtítulos
- Roboto Slab Bold para títulos
- Roboto Slab Thin para enlaces compartir y añadir patrón
Paleta de colores
Al igual que en el proceso del logo, la selección de la paleta de color fué un trabajo intenso y de mucho testeo y descarte. Muchas de las paletas que creíamos iban de acorde a lo que queríamos mostrar, en el momento de implementarlas en la interfaz no calzaban o comunicaban algo completamente fuera de foco.
De alguna de las paletas que teníamos, fuimos seleccionando colores que al probarlos nos hacían sentido en la construcción visual de la página y en base a eso ir agregando los otros bajo criterios de necesidad de mayor contraste o luz. De ésta forma se fueron determinando los roles de información que cumple cada color:
- #FFED4A, para texto (títulos, subtítulos y cuerpo de texto)
- #FBFEF9, para enlaces de acción (home, menú de hamburguesa, compartir, añadir patrón, más o menos información, siguiente), buscar e íconos.
- #8BCEE1, para fondo de enlaces de sub-categorías, casos ejemplares y botones.
- #0471A6, para fondos desplegables (home, menú de hamburguesa, categorías, prácticas) y secuencia de pantallas.
- #061826, para fondo general de la interfaz.
Iconografía
Consideramos que la utilización de íconos para comunicar las interacciones a las que se alude en el estudio, eran vitales para dar a entender de mejor manera el sentido y la forma en cómo se desarrolla cada caso. Para que ésta consideración fuera más acabada, decidimos que los íconos debían ser de nuestra autoría, para que éstos cumplieran con las normas gráficas que anteriormente presentamos, así como el trazo utilizado, la cantidad de información, el color, etc.
Desarrollo constructivo
Como es posible observar en la imagen de abajo, el proceso que conllevó afinar el trabajo pasó por distintas etapas, en un comienzo muy desde la abstracción, sin mayor información, más que el contorno (versión 1 y 2), luego se agrega mayor información y detalles con el fin de poder comunicar a quién se apela (versión 3 y 4), hasta llegar a las últimas 3 versiones en donde se mantienen los rasgos que son imprescindibles para comunicar el propósito del ícono, en éste caso un estado de ánimo/emoción, al que finalmente se hacen pequeños ajustes para llegar a la forma final.
Producto final
Iconos
La forma acabada de éstos íconos permiten que se entienda el sentido de ellos en relación a su contexto, como es el primer caso (de las caritas) que funcionan para poder evaluar la experiencia del usuario dentro del sitio, en éste caso para evaluar un ejemplo de un patrón. Y en segundo lugar los íconos que permiten realizar acciones dentro de la interfaz, para poder acceder a más contenido, compartir o buscar.
GIFs
Dentro del desarrollo iconográfico fué necesario considerar el formato GIF, ya que al hablar de interacciones dentro de un sitio, los formatos estáticos resultan poco comunicativos, por ende este tipo de formato nos da la libertad suficiente de que al haber desarrollado una linea gráfica de íconos, éstas también puedan ser utilizadas para comunicar eficientemente a qué hace alusión cada categoría de interacción.
Para poder ver la reproducción de los GIF, te sugerimos revisar a la sección previsualización.
Scuencia Gif - Cuenta Verificada
Secuencia Gif - Compartir
Secuencia Gif - Solicitar Permisos del usuario
Secuencia Gif - Contenido Recomendado
Secuencia Gif - Comparación de productos
Previsualización del sitio
En las siguientes imágenes se puede previsualizar lo que correspondería a las pantallas principales del flujo de navegación según la jerarquía de contenidos. De igual forma es necesario mencionar que considerando todos los elementos de normas gráficas, al enfrentarnos a la composición del espacio de la interfaz surge como propuesta la desproporción, esto a través del uso de los tamaños tipográficos y su peso visual, la distribución de las secciones de información dentro de la página entre otros. Para acceder a los prototipos en Figma y poder ver las interacciones, te sugerimos ingresar al link adjunto a cada caso.
Escritorio
Prototipo Figma - SINAPSIS Web
Móvil
Prototipo Figma - SINAPSIS Móvil
Desarrollo web
Es en este nivel donde se materializa todo el trabajo especificado anteriormente. Ya considerando los prototipos vistos, en este nivel nos encontramos con la dificultad de expresar el diseño mediante lenguaje de código, HTML para jerarquía de contenidos y CSS para estilos, respectivamente.
Se realizan 3 paginas del sitio, la página de Inicio, la de Categorías y la de Cuenta verificada, esta última consiste en el primer patrón de la categoría Usuario.
La navegación de las paginas puede llevarse a cabo con el menú desplegable, el logo del sitio como botón de Inicio, los "breadcrumbs" y algunos botones internos de cada página.
En la página de Inicio el botón interno sería un atajo hacia Categorías (Ir a categorías de interacción), en Categorías lo botones internos son cada nombre (Usuario, Comunidad, Seguridad, etc.) los cuales despliegan una pantalla con la lista de patrones y una descripción de la categoría seleccionada. Desde dicha lista de patrones se puede ingresar a la tercera página, Cuenta verificada.
Te invitamos a que revises el sitio haciendo click aquí.
Para ingresar al repositorio de Sinapsis este link.
