Diferencia entre revisiones de «ARPAUX»
Línea 94: | Línea 94: | ||
*#Subtitulos: Poppins, Bold, 24pts. | *#Subtitulos: Poppins, Bold, 24pts. | ||
*#Cuerpo de Texto: Open Sans, Regular, 12.5pts. | *#Cuerpo de Texto: Open Sans, Regular, 12.5pts. | ||
[[Archivo:Tipo web ( | [[Archivo:Tipo web (2).png|Comparación Tipografías Versión Web]][[Archivo:Tipo celulka (3).png|Comparación Tipografías Versión Móvil]] | ||
*'''Caracterizaciones Únicas''' | *'''Caracterizaciones Únicas''' |
Revisión del 02:07 5 may 2020
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.
- 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.
- 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.
- 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.
- 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