ARPAUX

De Casiopea
ARPAUX - Proyecto sitio web


TítuloARPAUX - Proyecto sitio web
Tipo de ProyectoProyecto de Taller
Palabras Clavesitioweb
AsignaturaTaller de Diseño de Interacción 2020
Del CursoTaller de Diseño de Interacción 2020
CarrerasDiseño
Alumno(s)Cristina Herrero, Vicente Quezada Salfate, Josefa Zamora, Antonia López, Sebastián Perucci
ProfesorKatherine Exss, Herbert Spencer, Catalina Pérez

ARPAUX: El sitio web

En primer lugar, el origen del nombre del sitio web proviene de un acrónimo de "archivo, patrón y UX", ya que es en mayor parte el contenido de este sitio. Además, este tiene como objetivo recopilar, archivar, y exponer los diversos patrones, clasificados y ordenados en grupos, cada uno desplegando o abriendo otro sitio que describa al patrón en sí, y ejemplifique casos de buena y mala experiencia para el usuario, añadiendo incluso un ejemplo de partitura de interacción. Finalmente el sitio añade un espacio para que el usuario pueda comentar una crítica al sitio web.

Primera propuesta

Mapa de Navegación

Untitled (1).png

Wireframes

ARPAUXsitioweb.jpg  ARPAUXsitioweb01.jpg ARPAUXsitioweb02.jpg  ARPAUXsitioweb03.jpg  ARPAUXsitioweb04.jpg  ARPAUXsitioweb05.jpg  ARPAUXsitioweb06.jpg  ARPAUXsitioweb07.jpg ARPAUXsitioweb08.jpg




Segunda propuesta

Mapa de Navegación

Untitled.png

Wireframes

Tercera Propuesta

En esta tercera propuesta como ARPAUX hemos diseñado la interfaz con una jerarquía mejor establecida entre verticales y horizontales, demarcando títulos con una barra horizontal que cruza toda la pantalla, o con una barra vertical que cruza toda la pantalla. También se pensó en "las migas de pan" para ayudar al usuario con su navegación sin confundir los nombres de categorías y patrones con acciones propias de el sitio web.

Mapa de Navegación

ARPAUX 3.png

Wireframes

 Primera pantalla donde se muestra una barra horizontal que cruza toda la pantalla con el logo, su introducción y una bajada en scroll, llegando al listado de categorías también con un texto introductorio y las categorías como botones.Tiene una barra fija en la parte superior con un menú de tres puntos, un "ARPAUX" clickeable para volver al inicio, un buscador y una barra de comentarios desplegable Pantalla de la categoría "Participar en comunidad" con una barra vertical que cruza toda la pantalla con el título y la introducción de la categoría, y el listado de patrones dentro de esta categoría  Misma pantalla que la de al lado, con el menú desplegado Pantalla de el patrón "Comentar una publicación",con una barra vertical con su introducción y un botón para agregar un patrón, al costado el primer ejemplo o caso del patrón, con opción de evaluar en estrellas, también con la opción de cambiar hacia los lados y la opción de dejar un comentario Misma pantalla que la de al lado, con la pestaña de comentarios desplegada y el menú de filtrar los casos desplegado Página con el menú desplegado y la casilla para registrarse activa, ocultando el fondo con un tomo mas oscuroPágina de comentarios con casilla de texto y valoración del comentario, el comentario del cual se escribe y la pestaña de comentarios desplegada en su totalidad mostrando mas información sobre esto Página para colaborar, con una barra horizontal con el titulo y la introducción, seguido por las casillas para añadir contenido como nuevas categorías, nuevos patrones y nuevos casos

Versión Final

ARPAUX

Arpaux, es una plataforma digital o sitio web cuya finalidad es categorizar y exponer el funcionamiento de distintos tipos de patrones de interacción, definiendo las buenas y malas prácticas de éstos. Además, el usuario tiene la posibilidad de colaborar al registrarse en la plataforma con tal de poder comentar y evaluar el contenido del sitio, con el fin de que el sitio mejore constantemente.

 ARPAUX: El origen del nombre de este sitio web proviene de un acrónimo entre "archivo, patrón y UX"


Arquitectura de Información

Organizando la Arquitectura del sitio, es posible reconocer cuatro niveles relevantes en el proceso de interacción del usuario con la plataforma, definiendo, de lo mas general, hasta las particularidades de interacción.

  • Nivel 1: Home

En este nivel se encuentra el principio de la página junto con toda la información relevante de esta misma.

  • Nivel 2: Categorías, Patrones

Aquí se encuentra una información mas especifica para cada categoría, y así mismo para cada patrón. En el, el usuario identifica la diferencia entre ellos y le es posible reconocerlos en sus propias experiencias.

  • Nivel 3: Ejemplos

El nivel 3 se encuentran los ejemplos de casos reales, subidos por otros usuarios, catalogándolos como malos o buenos dependiendo de la experiencia. Ademas, se encuentran las reacciones del publico y sus comentarios.

  • Nivel 4: Interacción del Usuario

En este nivel, se encuentran todas la participaciones que el usuario puede hacer en la pagina, ya sea, registrarse, comentar, reaccionar o colaborar. Estas opciones se reconocen como Interacción del usuario.

Mapa de Navegación

Mapa de Interacción 4 Version Final.png

Identidad de Marca

Para el Diseño de la Interfaz se definen características únicas, las cuales definen una linea constructiva para la plataforma. Cada una importante en si misma y en conjunto, creando un sitio intuitivo, amigable y funcional.

  • Paleta de colores

Para de definición de la paleta de colores se utilizan diferentes versiones de Morado y Anaranjado para los fondos resaltando las particularidades de cada color para la finalidad que deseamos en el sitio. Para neutralizar el exceso de luz de los colores de fondo, utilizamos blanco y negro para los títulos y cuerpos de textos. Según la psicología del color en el Diseño Web, los colores utilizados transmiten lo siguiente:

  1. Morado: El morado se asocia con la realeza. Puede usarse para transmitir creatividad, imaginación, autoridad, sofisticación, poder, riqueza, prosperidad, misterio, sabiduría y respeto.
  2. Naranja: El naranja es un color energético y lleno de vida, asociado con la diversión, felicidad, energía, calor, ambición, emoción y entusiasmo. También puede comunicar cautela.

Frame 9.png

  • Tipografías

La elección de tipografías se basa en dos principales, las cuales, permiten una factible legibilidad en ambas versiones

Versión Web:

    1. Titulo Principal: Poppins, Bold, 85pts.
    2. Segundo Titulo: Poppins, Bold, 65pts.
    3. Subtitulos: Poppins, Semibold, 40pts.
    4. Cuerpo de Texto; Open Sans, Regular, 17pts.

Versión Móvil:

    1. Titulo Principal: Poppins, Bold, 60pts.
    2. Segundo Titulo: Poppins, Bold, 24pts.
    3. Subtitulos: Poppins, Bold, 24pts.
    4. Cuerpo de Texto: Open Sans, Regular, 12.5pts.

Comparación Tipografías Versión WebComparación Tipografías Versión Móvil

  • Caracterizaciones Únicas

Creamos una linea de características únicas que representan a la pagina y la diferencian de otras, las cuales, le permiten al usuario crear un icono representativo de la plataforma.

  1. Marca de Agua

Se define una marca de agua para la pagina principal, proporcionándole un estilo mas sofisticado a la linea constructiva del sitio.

  1. Columnas de opciones.

Las columnas de opciones se modifican en el extremo superior, permitiendo que se comprenda su despliegue, ademas, la su propuesta de color le otorga un efecto degradado entre los colores principales. Este efecto estiliza la visual del sitio.

Marca de Agua Degradado de color Despliegue de Menú
  • Logo

El primer isotipo es la unión de círculos con lineas blancas, demostrando la arquitectura de la pagina a través de los diferentes tamaños de los círculos (Inicio-Categoría-Patrón-Caso) y la unión en uno solo (el sitio) con a las lineas. Tras esto, llegamos a la creación del personaje, que es construido a partir del isotipo anterior, al cuál se le modifican sus partes para asemejar el cuerpo humano y tener una apariencia más acogedora. Frame 15.jpg Frame 15 (1).jpg

  • Proceso evolutivo

Frame 16.jpg

Wireframes

  • Sitio web

El flujo comienza en la pantalla inicial con su logo y descripción, luego con scroll se llega a la lista de categorías tras una introducción al tema, en la siguiente pantalla, al seleccionar la categoría “ Participar en comunidad”, aparece su titulo y descripción, al costado esta la lista de patrones que contiene la categoría, después al seleccionar el patrón “comentar una publicación”, en la tercera pantalla esta el nombre del patrón, su introducción y la lista de casos y ejemplos del patrón, la cual crece con la participación de usuarios, diseñadores, informáticos e interesados en el tema, se selecciona el caso 1, "comentar una publicación de facebook, se ve su nombre, información del sitio, valoración del caso e introducción, seguido por las capturas de pantalla, acompañados por un breve texto explicativo. Luego en la quinta pantalla esta la pagina de “colaborar” donde el usuario puede agregar tanto una categoría, un patrón o un caso al completar el formulario. En el siguiente wireframe esta la misma pagina de colaborar con el menú desplegado, son una sucesión de pantallas donde se muestran como aparece cada ítem dentro del menú, cubriendo el resto de la página, priorizando la vista del menú si se ha clickeado alguna de sus opciones.


Pantalla inicial, donde se muestra el logo y nombre "ARPA UX", en scroll hacia abajo se encuentra el titulo de categorías, con su introducción, seguido por el listado de categorías, con los nombres ubicados en la sección vertical que cruza la pantalla, y sus introducciones y su icono en el rectángulo que le corresponde a cada categoría, cada una con un botón que lleva la categoría y el listado de patrones.
Pantalla de la categoría "Participar en comunidad", donde se muestra el titulo con su introducción, y el listado de patrones, con los nombres de estos ubicados en la franja vertical que cruza la pantalla, y su información y boton en el rectángulo correspondiente, llevando este botón a la lista de casos del patrón.
Pantalla del patrón "Comentar una publicación", donde se ve el titulo, su introducción, y la lista de casos, cada uno con su nombre, numero de caso, valoración y breve descripción, junto con el botón para acceder a este.
Pantalla donde se presenta el caso, su nombre, numero de caso, valoración general(en estrellas), la descripción y las capturas de pantalla, acompañadas por un texto explicativo breve, seguido por los comentarios en scroll hacia abajo.
Pantalla de "colaborar", donde se le permite al usuario agregar una categoría nueva, un patrón nuevo, o un caso nuevo, cada uno por separado, siendo necesario identificar su rama mayor en cada proceso, por ejemplo si vas a agregar un caso, debes identificar a que categoría pertenece y a que patrón pertenece, sin necesidad de agregar cualquiera de estos dos últimos.
Pantalla de "Colaborar", con el menú desplegado.


 6arpauxspc.jpg  7arpauxspc.jpg  8arpauxspc.jpg9arpauxspc.jpg 10arpauxspc.jpg







  • Móvil

1panarcel.png 2panarcel.png 3panarcel.png 4panarcel.png 5panarcel.png Frame 18.jpg

Propuesta en HTML y CSS

La propuesta como primer acercamiento es llevada a un lenguaje de código, HTML para la segmentación del contenido y CSS para la cascada de estilos. Se realiza una pagina de Inicio en donde introduce el sitio web y por medio de scroll da acceso a las Categorias de patrones. Para poder ver la propuesta como sitio web haga click aqui.