ARPAUX
Título | ARPAUX - Proyecto sitio web |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | sitioweb |
Asignatura | Taller de Diseño de Interacción 2020 |
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
Wireframes
Segunda propuesta
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.
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.
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.
- Logo
- Caracterizaciones Únicas
- 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:
- 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.
- Anaranjado: 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:
- Titulo Principal: Poppins, Bold, 85pts.
- Segundo Titulo: Poppins, Bold, 65pts.
- Subtitulos: Poppins, Semibold, 40pts.
- Cuerpo de Texto; Open Sans, Regular, 17pts.
Versión Móvil:
- Titulo Principal: Poppins, Bold, 60pts.
- Segundo Titulo: Poppins, Bold, 24pts.
- Subtitulos: Poppins, Bold, 24pts.
- Cuerpo de Texto: Open Sans, Regular, 12.5pts.