BiXPat

De Casiopea
BiXPat


TítuloBiXPat
Tipo de ProyectoProyecto de Taller
Palabras Clavesitioweb
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)Constanza Cabrera, María Inés González Guardia, Constanza Villarroel, Amalia Casanova
ProfesorKatherine Exss, Herbert Spencer

BiXPat

BiXPat (Biblioteca de Interacción y Patrones) es una plataforma digital que alberga una colección de patrones de interacción. Donde se entrega la definición de cada patrón, y se exponen las buenas y malas prácticas que se pueden encontrar en distintos servicios y experiencias digitales; ya sea en páginas web, aplicaciones, programas o servicios multiplataformas.

En esta bliblioteca el usuario podrá calificar cada ejemplo de uso de un patrón, comentar y colaborar a la comunidad BiXPat. Para poder contribuir, se requiere estar registrado, y para subir un ejemplo deberá rellenar un breve formulario. De esta manera se respaldará y verificará la información que quiera subir.

Así, BiXPat es un sitio abierto a la comunidad de profesionales de las áreas de diseño, marketing e informática.

Primera propuesta

Como un primer acercamiento a la estructura de una página web se explora la idea de una barra de navegación. Si bien, se trata de organizar una arquitectura, el diálogo con el usuario pasa a ser un elemento secundario; que en las propuestas siguientes, debe tomar mayor protagonismo.

Mapa de navegación

Bixpatmapa.png

Wireframe

Escritorio

Teléfono móvil

 Wireframe phone 1.jpg Wireframe phone 2.2.jpg Wireframe phone 3.3.jpg Wireframe phone 4.4.jpg Wireframe phone 5.5.jpg Wireframe phone 6.6.jpg Wireframe phone 7.7.jpg Wireframe phone 8.jpg

Segunda propuesta

Esta segunda propuesta tarda de expandir el campo de visión del usuario, tratando de mostrar más cosas en la página de inicio. El despliegue de la barra de navegación se reemplaza por un carrusel, en donde cada patrón de interacción tendrá una pequeña descripción. También se suma la idea de registro de usuarios, para poder compartir opiniones, valorar los ejemplos y sumar más contenido al sitio.

Mapa de navegación

BiXPatMN2.jpg

Wireframe

Escritorio

Teléfono móvil

 BiXPat phonewireframe2.1.jpg BiXPat phonewireframe2.2.jpg BiXPat phonewireframe2.3.jpg BiXPat phonewireframe2.4.jpg BiXPat phonewireframe2.5.jpg

Tercera propuesta

El carrusel de la barra de navegación es descartado para poder seguir con la línea de la página, es decir, poder mostrar lo más posible, sin tener nada “oculto”. Se le añaden “llamados a la acción “, el texto no sólo es informativo, si no, te lleva a partes de la página u otras páginas donde se encontraría más información. El diálogo con el usuario es pasivo, trata de hablarle al lector de manera tímida y sencilla.

Mapa de navegación

BiXPatMPN3.png

Wireframe

Escritorio


BixPat logo.png

Versión final

BiXPat (Biblioteca de Interacción y Patrones) es una plataforma digital que alberga una colección de patrones de interacción. Donde se entrega la definición de cada patrón, y se exponen las buenas y malas prácticas que se pueden encontrar en distintos servicios y experiencias digitales; ya sea en páginas web, aplicaciones, programas o servicios multiplataformas.

En esta bliblioteca el usuario podrá calificar cada ejemplo de uso de un patrón, comentar y colaborar a la comunidad BiXPat. Para poder contribuir, se requiere estar registrado, y para subir un ejemplo deberá rellenar un breve formulario. De esta manera se respaldará y verificará la información que quiera subir.

Así, BiXPat es un sitio abierto a la comunidad de profesionales de las áreas de diseño, marketing e informática.

Arquitectura de información

En la etapa final del sitio, se reestructura la jerarquía de contenidos, quitando aquellos menos importantes que se habían propuesto anteriormente. Por otro lado, la interfaz prioriza la visualización y acceso a los patrones de interacción desde cualquier nivel en que se encuentre el usuario. Se define que el contenido principal del sitio es la página de patrón, donde el usuario podrá interactuar calificando y comentando. Además, podrá colaborar agregando más ejemplos a través de un formulario. Al ser una biblioteca, se considera que se mostrarán tanto buenos como malos usos de patrones.

En el primer nivel, se tiene acceso a la barra superior que contiene el menú principal de categorías principales de patrones y los sub-menús de utilidad para usuarios (Inicio de sesión/Registro y formulario de colaboración). Además, con la intención de enfatizar el contenido principal de la página, se muestra la lista completa de patrones ordenados por categorías. Luego el footer, contiene información secundaria sobre el sitio y otros posibles links de interés para el usuario.

El segundo nivel de navegación, corresponde al contenido de cada patrón, donde se puede obtener la información básica, como la descripción del patrón, los criterios de evaluación y los ejemplos de uso dispuestos en una lista vertical. En ella se puede compartir y calificar cada ejemplo, y acceder a los comentarios sobre el patrón. En este nivel se intenta incentivar al usuario a colaborar y entregar sus opiniones.

En el tercer nivel se encuentra la galería de imágenes de cada ejemplo, que se muestran a modo de slideshow en un pop-up de pantalla completa. Funciona como un complemento para entender mejor cada ejemplo con una secuencia de imágenes que destacan la interacción del usuario.

Mapa de Navegación

BiXPat MN Final ciclo.png

Diseño de interfaz e identidad de marca

A partir del nombre del sitio, se tomó como guía el concepto de biblioteca para tomar las decisiones visuales y de identidad de marca. Así entonces, se establece que una biblioteca es un espacio donde todo está ordenado, clasificado y donde cada cosa está en su lugar. En ella, prima la forma del rectángulo, ya sea en libros, repisas, pasillos, escaleras, etc. Por lo que a partir de estos dos conceptos se comienzan a tomar las primeras decisiones relacionadas a la tipografía y paleta de colores.

Tipografía

Se establece que la tipografía debe tener un aspecto más cuadrado o rectangular que redondeado, que a la vez facilite la lectura, ya que el usuario se enfrentará a mucha información a lo largo de la navegación.

Para los títulos se utiliza "Exo 2" en estilos, Regular, Medium, Light y Light Italic, en tamaños 36, 30, 24, 20 y 16. Para los párrafos se usa Maven Pro en estilos Regular y Medium en tamaños 22, 20, 18, 16 y 13, de acuerdo a los requerimientos de distintas secciones del sitio. La combinación de ambas tipografías ayudan al look and feel que se quiere generar en el sitio.

Tipografiabixpat.png


Paleta de colores

Tomando el concepto de biblioteca, comenzamos proponiendo una paleta de colores tierra y pasteles, pero para el contexto del sitio no funcionaron bien y se decidió por una paleta que navegara por la gama de grises claros, donde el contraste se genera por un gris oscuro y un tono que destacará a lo largo de la navegación.

Paletabixpat2.png

Las variedades de grises claros se utilizan principalmente para separar secciones de las páginas, el gris oscuro se utiliza para destacar ciertos contenidos importantes al igual que el verde.


Logo icono frente.png

Una vez definidas las tipografías y paleta de colores, se comienza a trabajar en el logo, y se decide incluir dentro de este una referencia a la interacciones que se pueden dar navegando en el sitio. Además se decide por un estilo isométrico, ya que este implica un orden visual coincidente con nuestros conceptos base de lo ordenado y rectangular. El isologo se compone de un ícono de interacción y la separación de las siglas BiX y Pat, usando los colores fuertes de la paleta definida anteriormente.

Logosbixpat.png

Íconos

Se decide no utilizar íconos monocromáticos, ni solo trazos. Para generar un mayor contraste dentro del sitio, se opta por íconos con ángulos rectos y terminaciones redondeadas, con el mismo equilibrio que poseen las tipografías seleccionadas. Por otro lado, se usan trazos gruesos y rellenos incompletos en las formas.

Categorias bixpat.png
Iconosbixpat.png

Wireframes

Sitio web de escritorio

Sitio web móvil


Propuesta en HTML y CSS

La presentación de la propuesta se divide en 3 pantallas; siendo la página de inicio, un patrón de interacción (cupones) con 10 ejemplos y el formulario de colaboración de la página.

Las interacciones elegidas a mostrar en la página de inicio son: el despliegue de la barra de navegación de las categorías de patrones de interacción, la vinculación de el patrón de "Cupones" en la categoría "Procesos de compra" en la barra de navegación y en el desarrollo inferior, además de la vinculación de la página de colaboración.

Las "migajas de pan" llevarían desde cada uno de los sitios al inicio. Al presionar la categoría del patrón en la migaja de pan, ésta debería llevar a la sección de "Revisa nuestros patrones" situada en la página de inicio.

En la página de colaboración se muestra el formulario con todas las acciones posibles que puede hacer el usuario al momento de ingresar un nuevo ejemplo de patrón de interacción. El usuario sólo puede aportar nuevos ejemplos de los patrones ya existentes. Además, en la página de cada patrón puede comentar y valorar en base a la experiencia.

Por último en el footer se encuentra toda la información de quienes estamos detrás de la página, además de tener vinculado sitios como el de la universidad, la escuela, invitar a colaborar en la página, poder conocer más sobre qué son los patrones de interacción, y tener un contacto directo con la gente del sitio.

Para poder ver directamente la propuesta como sitio web haga click aquí y para ver el repositorio de Github haga click aquí