ARPAUX

ARPAUX - Proyecto sitio web

Título	ARPAUX - Proyecto sitio web
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
Alumno(s)	Cristina Herrero, Vicente Quezada Salfate, Josefa Zamora, Antonia López, Sebastián Perucci
Profesor	Katherine 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

Wireframes

Segunda propuesta

Mapa de Navegación

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

Wireframes

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

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.

• 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.

• 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.

• 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.

• Proceso evolutivo

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.

• Móvil

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.