Diferencia entre revisiones de «Sitio MADLAB: Documentación Título II»

De Casiopea
Línea 306: Línea 306:
==Referencias==
==Referencias==
<references/>
<references/>
==Bibliografía y Linkografía==
==Programas usados==


==Colofón==
==Colofón==

Revisión del 00:45 9 dic 2013

Sitio MADLAB: Documentación Título II
TítuloSitio MADLAB: Documentación Título II
Tipo de ProyectoProyecto de Titulación
Palabras Clavemadlab, sitio web, documentación, diseño web
Período2013-2013
Del CursoTaller de Diseño Gráfico Titulación 2,
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Caterina Da Silva
ProfesorHerbert Spencer, Sylvia Arriagada
URLhttp://wiki.ead.pucv.cl/index.php/MADLAB

Gestión

"Gantter es un servicio web gratuito con el que podremos realizar la planificación de nuestros proyectos y generar un diagrama de Gantt."

Utilizando esta aplicación, realizo un diagrama de Gantt para organizar las correspondientes tareas a cumplir este trimestre.

Archivo:SitioMADLAB2-Gestión-Carta Gantt-02.png

Contexto

Objetivos del Proyecto

Objetivo principal

  • Diseño del sitio web del MADLAB.

Objetivos secundarios

  • Sitio responsivo para iMac
  • Refinación del logo

Arquitectura de la Información

Mapa de navegación

Basándome en el vocabulario visual de Jesse James Garret, actualizo el mapa de navegación según lo estudiado este trimestre.

El mapa actual muestra una mejora en la jerarquía y limpieza sobre la información, se establece una mejor interrelación entre las páginas dentro del sitio.

Archivo:MADLAB-ArqdelaInfo-MapaNavegación2-01.png

NOTAS

  • A. Si está el usuario en sesión, la función “Cerrar sesión” está disponible.
  • B. Si el usuario no está en sesión, no mostrar.
  • C. Si el usuario está en sesión, poner “Preferencias”. Si no, poner “Iniciar sesión” y “Registrarse”.
  • D. Si el usuario está en sesión, dirigir a página “Publicar proyecto”/ “Reservar máquina”. Si no, redirigir a “Iniciar sesión”.
  • E. Sólo si el usuario está en sesión.
  • F. Sólo si el usuario está en sesión y es “Admin”.
  • G. Mostrar links a Proyectos según los criterios de búsqueda.
  • H. Mostrar links a Proyectos, Perfiles de usuario y Eventos que contengan el criterio de búsqueda.
  • I. Mostrar links a Eventos según antigüedad ascendente.
  • J. Al hacer click en una sección del Calendario.


Mapa de clases

Actualización del mapa de clases a los estudios actuales, basándome en el nuevo mapa de la arquitectura de la información.

MADLAB-ArqdelaInfo-MapaClases-02.png

Diseño de interacción

Se cruzan la siguientes referencias:

A partir de ellas se da la pauta poética para encontrar el vacío y el puente para el logo: cómo, dentro de un marco de referencia, se da un espacio a la interrupción. De esta manera, se sugieren dos variantes: una versión armada ilógicamente, y otra, de manera sincopada.

Con la ayuda de una herramienta de dibujo isométrico, me doy cuenta que puedo agregarle la tercera dimensión al logo, dándole un lenguaje más conciso para el juego que se quiere crear para la sigla MAD. Luego de varias pruebas y cambios, se resuelve el siguiente logo.

MADLAB-logofinal.png

Para MAD, decidí tomar los conceptos de vóxel y el trabajo de la máquina REPRAP, la cual es aditiva de material. Por esta razón, la tipografía en píxel creada a partir de la DinPRO, y la extrusión en 3D simulada en un hexágono. Creando así las tres letras, considerando el espacio tridimensional de las letras, uniendo los hexágonos por cualquiera de sus 6 caras simuladas.

Para LAB, se modifica la DinPRO para que tome el concepto de la Láser CNC calando una superficie.

Archivo:MADLAB-logofinal-documentación03.png En la imagen: Superposición de los tipos modificados sobre DINPro Medium.

Galería de pruebas

Todas las variables creadas antes de llegar al logo finalizado.

Landing Page

A raíz de la Inauguración del MADLAB, es necesaria la creación de una Landing page para el dominio madlab.cl.

Propuesta

Básicamente, se requería de una página que tuviera links a:

  • Proyecto en la WikiCasiopea
  • Correo de contacto
  • Sitio de la Escuela

Y me dí la libertad de agregar un link a la página de Desarrollo del sitio en la WikiCasiopea.

Diseño de Interfaz

Buscando crear contraste e intriga con respecto al sitio, me inclino por un fondo negro con letras blancas. El fondo tiene una grilla isométrica que trae tridimensionalidad a la pantalla.

Screenshots de la Landing Page

A medida que voy construyendo el sitio, creo que el contraste del fondo negro es demasiado fuerte y no genera nada nuevo al usuario, por lo que me guío por los colores tradicionales de la escuela (blanco, negro, gris y rojo ciruela). De esta manera, se genera un enlace visual con la Escuela. A su vez, cambio el fondo por una grilla que tiende al rojo, que hace más sutil el contraste con el blanco del logo, dando una impresión de estar apareciendo.

Diseño emocional

Para hacer la página, utilizo los siguientes recursos:

graphy
  • Tipografía: utilizo la fuente Roboto desde FontSquirrel.
MADLAB-Propuesta-Landing page-Roboto1.png
MADLAB-Propuesta-Landing page-Roboto2.png

Sitio MADLAB

Prototipado

Habiendo sentado las bases conceptuales del sitio, comienzo a darle estructura visual. De esta manera, se va generando necesidad de contenido y diferentes maneras de orden a la información. Asimismo, surge la necesidad de darle movilidad, comodidad y simpleza al sitio. Para ello, recurro al Flat Design, el cual trabaja con formas simples y geométricas para dar realce al contenido y la interacción del usuario con el sitio.

Wireframes de Baja intensidad, Segunda versión

Wireframes de Alta intensidad

Los wireframes de alta intensidad completan los detalles que faltan en sus predecesores más simples. Definen la ponderación y la jerarquía visual de la página, su forma y sus elementos de interacción, incluyen etiquetas y texto informativo. Se pueden utilizar en secuencia para mostrar cómo una tarea específica puede llevarse a cabo en una secuencia de pantallas. Siempre deben aspirar a definir los detalles del producto y de interacción, deben proporcionar una visualización bastante clara de una aplicación o sitio para permitir a los desarrolladores comenzar su trabajo.


Diseño de Interfaz

Teniendo ya una visión general del sitio con los wireframes anteriores, doy paso a crear maquetas de cada página del sitio en Illustrator.

Primera versión

Siguiendo lo realizado en los wireframes de alta intensidad, les agrego color y corrijo errores de medidas y espacios blancos, enfocándome en las páginas que requieren de más trabajo y pensamiento jerárquico.

Sidebar: Asimismo, diseño la interacción con la sidebar en su máxima expresión, donde se puede realizar la búsqueda avanzada de proyectos dentro del sitio. Cada opción es un conjunto de categorías que permiten la diferenciación de los proyectos. De esta manera, buscar un tipo de proyecto en específico se vuelve más fácil para el usuario.

Segunda versión

Con una idea visual más clara del sitio, surgen nuevas maneras de presentar los contenidos de manera más interactiva y visual al usuario. Buscando apelar a su lado emocional, la página debe resultar lo suficientemente atractiva para que los usuarios quieran volver a ella, potenciando al contenido del sitio.

Sidebar:

Diseño emocional del sitio

"Las cosas atractivas funcionan mejor" nos dice Donald Norman[1]. Es por esta razón que la página debe ser interactiva e innovadora para el usuario. Que el juego, sin interrumpir u opacar el mensaje, llame al usuario a ser partícipe de él.

Grilla

Para hacer un sitio responsivo, que se adapta a toda pantalla, se necesita de una grilla líquida. Unsemantic es un framework de grilla líquida basada completamente en porcentajes, y es soportada por los navegadores más usados: Chrome, Firefox, Internet Explorer (7+), Opera y Safari.

Archivo:MADLAB-Diseñoemocional-grilla.png

Tipografía

Una manera de agilizar el uso del sitio, es usar web fonts. Éstas permiten a los diseñadores web utilizar fuentes que no están instaladas en el computador del usuario, siendo Google Fonts uno de los servicios más usados.

Para el sitio MADLAB utilizo la siguiente colección.



Textura

Para la textura del sitio, vuelvo a utilizar graphy, y ahora incluyo woods para el header y el footer. Ambos son de Subtle Patterns.

Color

Los grises son indispensables para contruir los contrastes dentro del sitio, principalmente en la tipografía, ya que el realce se le da con los colores. Éstos fueron elegidos de Flat UI Colors, una aplicación que disponibiliza la paleta de colores del framework Flat UI.

Los grises consisten en:

  • Clouds (#ecf0f1)
  • Silver (#bdc3c7)
  • Concrete (#95a5a6)
  • Grr-ey (#333333)

Cada color representa un tipo de proyecto:

  • Sunflower (#f1c40f): Proyectos de post-grado
  • Turquoise (#1abc9c): Proyectos de pre-grado
  • Belize Hole (#2980b9): Investigación académica
  • Amethist (#9b59b6): Proyectos profesionales

Íconos

Dripicons es una tipografía de íconos vectorizados gratuita, creada en Fontastic. Ésta permite el uso de íconos sin depender de muchas imágenes o el uso de sprites.

Usabilidad

"Las pruebas de usabilidad consisten en seleccionar a un grupo de usuarios de una aplicación y solicitarles que lleven a cabo las tareas para las cuales fue diseñada, en tanto el equipo de diseño, desarrollo y otros involucrados toman nota de la interacción, particularmente de los errores y dificultades con las que se encuentren los usuarios.'

La meta de estas pruebas y análisis es identificar y rectificar las deficiencias de usabilidad y errores existentes. Se intenta asegurar que el sitio sea fácil de aprender y de usar, su uso sea satisfactorio, que provea utilidad y funcionalidad y cumpla las tareas para las cuales fue diseñado.

Pruebas de Usuario

"Las pruebas de usuario son un test que entrega una medida empírica de la usabilidad de una herramienta, sitio o aplicación, tomada a partir de la observación sistemática de usuarios llevando a cabo tareas reales, las cuales se enfocan en medir la manera en que el usuario se relaciona con las interfaces ofrecidas por el sitio web en estudio y en su capacidad para cumplir con las metas que haya tenido al momento de visitarlo."

Evaluación Heurística

La evaluación heurística es un análisis de experto en el cual se hace una inspección minuciosa a interfaces o sistemas con el fin de determinar si cada uno de sus elementos se adhieren o no a los principios de usabilidad, diseño o arquitectura de informaición comúnmente aceptados en sus respectivas disciplinas.


Análisis de Datos

Cambios según resultados

Adláteres

Referencias

  1. Podemos leer más sobre diseño emocional en el siguiente ensayo:"Diseño_Emocional:_Metodologías_y_herramientas_para_cuantificar_emociones" y algunos ejemplos en el siguiente artículo

Bibliografía y Linkografía

Programas usados

Colofón

La construcción del sitio web para MADLAB es el proyecto de titulación de la alumna Caterina Da Silva Arriagada, bajo la guía de la profesora Sylvia Arriagada Cordero. En el desarrollo de esta plataforma cooperaron los profesores de Diseño Gráfico Herbert Spencer y Katherine Exss; Jaime Pérez Moena, ayudante del taller de Tercer Año de Diseño Gráfico; Joaquín Martel, egresado de Diseño Gráfico el año 2012; y el encargado del MADLAB, Pedro Garretón.

La presente edición fue realizada en diciembre del 2013 en Adobe InDesign CS6 y Adobe Illustrator CS6 para Mac OS X. Consta de un ejemplar correspondiente al registro entre las fechas comprendidas entre Marzo y Mayo del 2013 para el período de Titulación 1, y Septiembre y Diciembre del 2013 para el período de Titulación 2.

Su formato es de 15 x 21,6 cms. El papel para la portada es Hilado 180 con una cobertura plástica, y fue impreso en una HP Designjet 110plus, y el interior, compuesto por Prestige blanco terrazo de 90 grs y papel Kraft opaco de ## grs, fue impreso en una Epson XP-201.

Las familias tipográficas utilizadas fueron Source Sans Pro, Source Code Pro y Varela Round, todas disponibles en Google Fonts.

Los colores usados fueron:

  • color C:75 M:15, Y:73, K:1.

Los [íconos] usados para este proyecto son de [sitio.com].

Los ejemplares fueron impresos el 12 de Diciembre del 2013 en la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.