BiXPat
| Título | BiXPat |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | sitioweb |
| Asignatura | Taller de Diseño de Interacción |
| Del Curso | Taller de Diseño de Interacción 2020 |
| Carreras | Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Constanza Cabrera, María Inés González Guardia, Constanza Villarroel, Amalia Casanova |
| Profesor | Katherine 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.
Wireframe
Escritorio
Página de inicio. Muestra de qué trata el sitio y quienes lo realizan.
Zoom: Mouse sobre "Patrones" genera el despliegue de categorías.
Click en categoría "Administrar cuenta". Muestra la descripción de ella y genera un despliegue tipo acordeón mostrando las subcategorías.
Click en patrón "Cuenta verificada". Muestra la descripción del patrón, los criterios de evaluación y la página se subdivide en prácticas buenas, malas y neutrales. Al final de la página muestra comentarios de usuarios.
Click en "Colaborar". Muestra un formulario donde el usuario ingresa sus datos y puede comentar y adjuntar archivos.
Teléfono móvil
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.
Wireframe
Escritorio
Inicio BiXPat
Inicio BiXPat + slide
Ejemplo de patrón
Ejemplo patrón + despliegue de imágenes
Sección colabora con nosotros
Sección colabora con nosotros (como se muestra sin estar registrado)
Iniciar sesión o registrarse
Teléfono móvil
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.
Wireframe
Escritorio
Inicio BiXPat
Busqueda de patrones dentro de una categoría
Patrón "Cuenta Verificada"
Selección de imágenes dentro de un ejemplo de un patrón
Formulario antes de iniciar sesión o registrarse
Iniciar sesión
Registrarse
Formulario.
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.
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.
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.
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.
Isologo
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.
Í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.
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í
