Diferencia entre revisiones de «ARPAUX»

De Casiopea
Línea 99: Línea 99:
*#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 (1).png|Comparación Tipografías Versión Web]][[Archivo:Tipo celulka (1).png|Comparación Tipografías Versión Móvil]]
[[Archivo:Tipo web (1).png|Comparación Tipografías Versión Web]][[Archivo:Tipo celulka (2).png|Comparación Tipografías Versión Móvil]]


===Wireframes===
===Wireframes===

Revisión del 01:36 5 may 2020

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.

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

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

Wireframes