Plexus

De Casiopea
Plexus


TítuloPlexus
Tipo de ProyectoProyecto de Taller
Palabras Clavesitioweb
Período2020-2020
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2020
CarrerasDiseño, Diseño Gráfico, Diseño Industrial
Alumno(s)Catalina Jorquera Kruberg, Rocío Castillo, Valentina Blanco, Antonia Gallardo, Daniela Murillo, María Ignacia Santander Serrano
ProfesorKatherine Exss, Herbert Spencer

Plexus

TDI E5 PLEXUS 1.5.png


Plexus es un sitio web de especificación de patrones. Su nombre alude al concepto de “plexo braquial”, dicho de otra forma, las conexiones nerviosas del cerebro, las cuales tienen relación a la temática del sitio web en cuanto al funcionamiento de los patrones codependientes para formar una interfaz de manera sincronizada. De esta forma Plexus se refiere a que debido a que existe una gran cantidad de pahttps://www.mediawiki.org/trones para formar un sitio web, estos se ven enlazados con el objetivo de funcionalidad. En caso de que falle uno de sus patrones, se pierde dicho objetivo provocando de que la interfaz caiga en una mala práctica UX.


Mapa de navegación

Nos encontraremos con cinco distintas categorías las cuales contienen dentro de ellas subcategorias de patrónes identificando buenas y malas practicas a través de una serie de ejemplos. Dividimos el mapa en cuatro profundidades las cuales comienzan de los mas general a lo mas particular de un patrón.

El objetivo del sitio es dar a conocer los distintos patrones existentes y de la forma en que podemos dividirlo de acuerdo a sus relacines otro objetivo importante es el proceso de interacción que tiene el usuario con el sitio web de manera que este igual sea parte de Plexus pudiendo colaborar dentro del sitio.

TDI E5 PLEXUS 1.6.png

Wireframes

El concepto de wireframe viene desde la propuesta gráfica de un sitio web en proceso, de esta forma se presenta una estructura de éste seguido de una visualización proyectada en el aparato tecnológico. Su finalidad abarca en perfeccionar el funcionamiento y organización de patrones de interacción que existen en una interfaz para que de esta forma se pueda solucionar los problemas del sistema y organizar la ergonomía de patrones que se encarga de satisfacer la orientación y necesidad del usuario inscrito al sitio.

Plexus funciona en base a un sitio web con requisito de inscripción gratuita dirigido para un usuario que maneje contenidos relacionado con los patrones de interacción y para personas que deseen aprender acerca del tema. Tiene como finalidad informar al usuario acerca de ¿Qué es un patrón de interacción?, de esta forma aparecen las categorías de patrones en las que se ven agrupadas como parte de la información que brinda el sitio, junto con la definición de buenas y malas prácticas de patrones UX y sus respectivos ejemplos que van variando según el patrón especificado. Además, Plexus funciona según el concepto "wiki", donde el usuario tiene la posibilidad aportar con información para actualizar el sistema constantemente. Como opción secundaria para el usuario, existe la posibilidad de evaluar y comentar acerca de publicaciones de los casos de patrones publicados, de esta forma el sitio web se encarga de modificar ciertos datos y fallas que se encuentren en la información.


Sitio Web

 Plexusweb1.jpeg Plexusweb2.jpeg  Plexusweb3xd.jpeg  Plexusweb4.jpeg Plexusweb5.jpeg  Plexusweb6.jpeg
  1. Cargando sitio web.
  2. Inicio sesión.
  3. Inicio/Home.
  4. Menú.
  5. Categorías.
  6. Categoría preferencias de mensajería.
  7. Participación del usuario.

Teléfono Móvil

 Cargando.png  Plexusss.png  Menú.png Buscarplexus.png  Categoría gestión de cuenta.png  Definir preferencias de mensajería.png  Formulario de categoría.png Formulario de patrón.png Formulario de caso.png
  1. Cargando aplicación.
  2. Inicio sesión.
  3. Inicio/Home.
  4. Menú.
  5. Búsqueda.
  6. Categoría gestión de cuenta.
  7. Definir preferencias de mensajería.
  8. Formulario de categoría.
  9. Formulario de patrón.
  10. Formulario de caso.

Galería

Sitio web
Aplicación

Segunda Propuesta Plexus

Sitio web

Página de carga.jpg Página inicio sesión.jpg  Página home.jpg  Categorias.jpg Preferencia de mensajeria.jpg  Participar.jpg
  1. Página de carga.
  2. Página inicio de sesión.
  3. Página Home.
  4. Categorías.
  5. Preferencia de mensajería
  6. Participar.


[visualización de pantalla]

Teléfono Móvil

Cargando.png Inicio sesión.png  Inicioplexusmo.png  Menú (1).png Buscar (1).png  Categoría gestión de cuenta (1).png  Definir preferencias de mensajería (2).png  Formulario de categoría (2).png Formulario de patrón (1).png Formulario de caso (1).png


  1. Cargando aplicación.
  2. Inicio sesión.
  3. Inicio/Home.
  4. Menú.
  5. Búscar.
  6. Categoría gestión de cuenta.
  7. Definir preferencias de mensajería.
  8. Formulario de categoría.
  9. Formulario de patrón.
  10. Formulario de caso.


[Visualización de pantalla]

Galería

Sitio web
Aplicación



Tercera Propuesta Plexus

Mapa de Navegación

Mapa navegacion 3 plexus.jpeg

Sitio web

Plexusweb1.jpeg Plexusweb prop3-2.jpeg  Plexusweb prop3-3.jpeg  Plexusweb prop3-4.jpeg Plexusweb prop3-5.jpeg  Plexusweb prop3-6.jpeg  Plexusweb prop3-7.jpeg  Plexusweb prop3-8.jpeg  Plexusweb prop3-9.jpeg
  1. Página de carga.
  2. Página Home.
  3. Salto Rápido.
  4. Categorías.
  5. Preferencia de mensajería
  6. Participar.
  7. Añadir Patrón.
  8. Añadir Categoría.
  9. Añadir Caso Patrón.


[visualización de pantalla]

Teléfono Móvil

Cargando.png Plexusapp3-2.jpeg  Plexusapp3-3.jpeg  Plexusapp3-4.jpeg Plexusapp3-5.jpeg  Plexusapp3-7.jpeg  Plexusapp3-6.jpeg  Plexusapp3-8.jpeg Plexusapp3-9.jpeg Plexusapp3-10.jpeg Plexusapp3-11.jpeg


  1. Cargando aplicación.
  2. Inicio sesión.
  3. Inicio/Home.
  4. Menú.
  5. Buscar.
  6. Categoría gestión de cuenta.
  7. Definir preferencias de mensajería.
  8. Participar.
  9. Formulario de categoría.
  10. Formulario de patrón.
  11. Formulario de caso.


[Visualización de pantalla]


Galería

Sitio web
Aplicación


Propuesta Final Plexus

Abstract

Plexus es un sitio web de especificación de patrones creado a partir de una investigación previa sobre los patrones de interacción, llevada a cabo por el Taller de Diseño de Interacción de la E[ad] PUCV. Esta aplicación va dirigida hacia diseñadores o usuarios que gusten leer sobre de diseños de UX.

Su nombre alude al concepto de “plexo braquial”, conexiones nerviosas del cerebro, las cuales tienen relación con el sitio web en cuanto al funcionamiento de los patrones, estos codependen para formar una interfaz de manera sincronizada. La gran cantidad de patrones que existen para formar un sitio web genera que estos se vean enlazados con la funcionalidad, este es su objetivo. En caso de que uno de los patrones falle, se pierde dicho objetivo provocando que la interfaz caiga en una mala práctica UX.

Un patrón de diseño de interacción (IxD) es una solución general y repetible para un problema de uso común en el diseño de interfaz o diseño de interacción. Estos ayudan al diseñador o a la aplicación a comunicarse mejor con el usuario. Dentro de este mundo de patrones existen distintas categorías; patrones que suelen repetirse en distintos servicios para cumplir una acción. Sin embargo, un patrón puede tener múltiples formas de ser ejecutado en el sitio, por lo tanto se califica dependiendo de cómo afecte en la interfaz y en el flujo de este.

Diseño de interfaz

A raíz del nombre que se le asignó al sitio web se crea el primer logo que hace referencia a las conexiones nerviosas, y a la interacción entre usuario y página web. Para crear este logo se utilizó una grilla, y utilizando las diagonales de la X en plexus y las verticales en la "l" y la "u". Este consta de una serie de varios trazos y puntos que se unen entre ellos en una dirección. La segunda propuesta se simplifica dejando el logo más limpio en relación a las conexiones entre los trazos y los puntos específicos que se enlazan formando una X que sería este logo. Logosplexus.png La página web se basa en construir un sitio amigable de modo que sea sencillo navegar para cualquier tipo de público que se interese en adentrarse sobre los patrones de interacción y para diseñadores que necesiten de este medio para informarse sobre ello, creando también una opción para poder registrarse en ella y colaborar con la plataforma.

Paleta de colores

Se utilizaron colores sobrios, y como tono de contraste un azul oscuro.

Coloresplexus.png

Fuente

Como tipografía seleccionamos una Sans serif, San Francisco Pro, la jerarquía de los textos se evidencia por el tamaño de la fuente.

Fuenteplexus.png

Iconos

A partir de la paleta de colores, se realizaron y utilizaron tres tipos de iconos, para cada categoría de patrón, para el momento de participación del usuario, y representaciones gráficas de servicios o plataformas digitales. Iconosplexus.png

La estructura y codificación de la página se lleva mediante la utilización de Html y CSS. Se utilizó Visual Studio Code como el programa para editar los códigos de la página y formar la arquitectura de ella, con el que se fue guiando la estructura del sitio web. Toda esta construcción fue pasada por el software de GitHub, que fue utilizado como “nube de información” entre el programa y el sitio web, y así tener un historial de ejecución del sitio.

La página de Plexus se divide en 3 ventanas, la primera que es un inicio donde se introduce al tema del sitio web, de este se enlaza a una segunda división que es de las categorías de los patrones de interacción que se hallan en el sitio, estos son clasificados en 5 categorías distintas. Así, además, dar a entender al usuario una clasificación del patrón, ayudará a facilitar el flujo de la navegación. En esta misma ventana se puede acceder a los patrones, donde se encuentran las definiciones de estos y también distintos ejemplos, que son separados en buenas y malas prácticas del patrón, que va según la interacción que se crea con el usuario. Como última división de la página se encuentra la participación, que es donde el usuario colabora con la página, mediante formularios que puede rellenar para crear un nuevo patrón, o a través de comentarios a nuestro sitio web. Para realizar este último es necesario la creación de una cuenta en la plataforma, de esta manera se obtiene registro de quienes colaboran con ella. La colaboración pasa por el criterio de los creadores del sitio para que esta sea aceptada y publicada en la plataforma.

Mapa de Navegación

Mapaplexus.png

[Archivo Figma]

Wireframes celular

 Cargandoplexus.jpg Cargandoinicio.jpg Cargandoiniciar sesión.jpg Menuplexus.jpg Buscarplexus.jpg Categoría gestión de cuenta (3).jpg Definir preferencias de mensajería.jpg Ejemploplexus.png Participar (1).jpg Formulario de caso.jpg Formulario de patrón.jpg Formulario de categoría.jpg

[Archivo Figma] [Visualización de pantalla]

  1. Página de carga.
  2. Página Home.
  3. Iniciar Sesión.
  4. Menu.
  5. Búsqueda
  6. Categorías gestión de cuenta
  7. Definir preferencias de mensajería.
  8. Ejemplos .
  9. Participar.
  10. Formulario de caso.
  11. Formulario de patrón .
  12. Categoría.

Wireframes computador

 Página de carga (1).jpg Página home (1).jpg Salto Rápido.jpg Categorias (1).jpg Preferencia de mensajeria (2).jpg Ejemplo buena practica.png Ejemplo mala practica.png Participar (2).jpg Añadir Caso Patrón.jpg Añadir Patrón.jpg Añadir Categoría.jpg

[Archivos Figma] [Visualización de pantalla]


  1. Página de carga.
  2. Página Home.
  3. Salto Rápido.
  4. Categorías.
  5. Preferencia de mensajería
  6. Ejemplo de Buenas prácticas
  7. Ejemplo de Malas prácticas.
  8. Participar.
  9. Añadir caso de patrón.
  10. Añadir patrón .
  11. Añadir categoría.

Página web