La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

Sitio MADLAB: Documentación Título III

Título	Sitio MADLAB: Documentación Título III
Tipo de Proyecto	Proyecto de Titulación
Palabras Clave	madlab, sitio web, documentación, diseño web
Período	2013-2014
Asignatura	Taller de Diseño Gráfico Titulación 3
Del Curso	Taller de Diseño Gráfico Titulación 3,
Carreras	Diseñ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
Profesor	Sylvia Arriagada
URL	http://madlab.cl/

Título I | Título II | Título III | MADLAB.cl

Contexto

Organización

Objetivos

Primario

Diseño front del sitio MADLAB

Secundarios

Sitio web responsivo para móviles y pantallas grandes

Diseño de interacción

Usabilidad

Colaboración con Taller de Tercer Año de Diseño Gráfico

Como una manera de abrir posibilidades de diseño para el proyecto, se proponen reuniones con alumnos del Taller de Tercer Año, para que ellos,desde una perspectiva externa, traigan opciones de diseño para áreas del sitio que requieran una revisión. Con estas proposiciones puedo encontrar soluciones a problemáticas o detalles que podrían haber sido pasado por alto y que es necesario definir, ayudando así al diseño final.

Brief

El proyecto nace de la creación del MADLAB (Laboratorio de Modelo Asistido Digital) en la Escuela de Arquitectura y Diseño, y su necesidad de tener un lugar virtual, paralelo a los otros servicios de la Escuela, en donde:

Quede un registro gráfico y descriptivo de lo hecho en el Laboratorio
Se entregue información sobre lo que quiere lograr en el Laboratorio, de cómo trabajar y las máquinas dentro del Laboratorio
Se faciliten servicios a la Escuela y a la comunidad, dando comodidad al pedir las máquinas y facilitar el acceso al laboratorio.

Este sitio se desarrolla en la base de que sea simple, limpio, accesible y fácil de usar, por lo que está diseñado bajo la influencia del diseño flat.

Interfaces colaborativas

Las páginas tienen en común en que deben ser interactivas y amigables para los usuarios, pero son tres las que requieren de una revisión en su manera de mostrarse:

Proyectos
Personas
Reserva de máquinas
Perfil de usuario

La página de Proyectos requiere de una nueva manera de mostrar su contenido (proyectos de pregrado, titulación, posgrado, investigación académica y profesional) considerando todas las clasificaciones correspondientes y sus posibles maneras de orden dentro de la página.

Para la página de Personas, la idea es que se muestren todas las personas involucradas en el laboratorio, la relación entre ellos según sus proyectos, un link a su perfil de usuario dentro del sitio y un buscador de personas. Para ello, es necesaria la creación de una visualización interactiva de los encargados y distintos colaboradores (clasificados según el tipo de su último proyecto publicado).

En Reservar máquina debe estar el calendario de reservas de cada máquina (Router, Láser, REPRAP y Termoformadora), en conjunto con la ventana de reserva de máquinas, la cual recoge los datos de reserva (día, horas, máquina, usuarios responsables del trabajo (además del usuario que pide la hora), nombre del proyecto y tipo de proyecto).

El Perfil de usuario busca mostrar la información básica y académica de la persona (nombre, fecha de nacimiento, carrera relacionada, grado académico, su relación con el MADLAB y su sitio web), además de sus trabajos en el MADLAB y los proyectos que sigue.

La arquitectura de información, conceptos y diseño emocional utilizados en el sitio no pueden ser cambiados, sólo la manera de mostrarlos. Se les entregará una página tipo para que trabajen con ella como base. Toda información sobre el sitio puede encontrarse en la documentación del proyecto en la WikiCasiopea (se entregan los links). La maqueta navegable del estado actual del sitio se encuentra en el siguiente link, para que sea usada de base y referencia al hacer las nuevas visualizaciones.

Resultados de la actividad

Los alumnos exponiendo sus propuestas.

Cada uno de los alumnos, después de explicado el proyecto y la actividad, elige una de las páginas y realiza un rediseño de ésta. Las propuestas fueron las siguientes:

Proyectos
Proyectos
Reservar máquina
Reservar máquina
Personas
Personas
Personas
Personas
Personas
Personas
Personas
Personas
Personas
Perfil de usuario
Perfil de usuario
Perfil de usuario
Perfil de usuario
Perfil de usuario

Los alcances hechos por los alumnos fueron los siguientes:

Proyectos
- Dejar en evidencia las tipologías de proyectos de manera directa
Reservar máquinas
- En la eventualidad de que una de las máquinas esté averiada, buscar alguna forma de que los usuarios estén al tanto
Personas
- La visualización de las Personas debe ser lo principal del sitio
- La visualización debe tener una jerarquía de orden para mostrar a los colaboradores y encargados
- "Quiénes somos" debe ser una pestaña o un botón, que no interrumpa enseguida la visualización, pero debe quedar lo suficientemente visible para que no pase inadvertida
Perfil de usuario
- Reorganizar contenidos de manera que se destaquen más los datos del usuario, sus proyectos y sus proyectos favoritos, en ese orden correspondiente

Estos cambios fueron incluidos en la tercera versión del diseño de interfaz del sitio.

Diseño de Interacción

Identidad

Isotipo

El isotipo se refiere a la parte simbólica o icónica de las marcas. Hablamos de isotipo cuando reconocemos la marca sin necesidad de acompañarla de ningún texto. Etimológicamente “iso” significa “igual”, es decir, se intenta equiparar un icono a algún aspecto de la realidad. Isotipo sería únicamente un símbolo, y además éste sería entendible por sí mismo.

Quería que el isotipo fuese una especie de resumen del logotipo, mezclando ambos juegos tipográficos que construyen las letras de MADLAB. Es por esta razón que basándome en el cubo axiométrico de MAD y en las terminaciones de LAB construyo la siguiente imagen.

Diseño de interfaz

Tercera versión de diseño de interfaz

Se hace una tercera revisión del sitio web, en donde se agregan 2 páginas más: Diplomado y Blog, ajustando de esta manera el mapa de navegación y dejando en evidencia la necesidad del sitio de expandir la manera de entregar información a sus usuarios.

Interfaz
Home
Proyectos
Eventos
Blog
Proyecto
Galería de fotos
Publicar proyecto
Evento
Máquinas
Máquinas
Reservar máquina
Confirmación de reserva
Personas
Personas
Personas
Usuario
Formulario de usuario
Búsqueda
Contacto
Entrada de Blog
Diplomado

Cuarta versión de diseño de interfaz

Home
Contacto
Búsqueda
Proyectos
Proyecto
Galería de fotos
Publicar proyecto
Eventos
Evento
Máquinas, Normas de uso
Máquinas, Información de máquina
Máquinas, Proyectos realizados en la máquina
Reservar máquina
Confirmación de reserva
Personas
Personas
Personas
Usuario
Formulario de usuario
Noticias
Noticia
Diplomado

Quinta versión de diseño de interfaz

Home
Contacto
Búsqueda
Proyectos
Proyecto
Galería de fotos
Publicar proyecto
Eventos
Evento
Máquinas, Normas de uso
Máquinas, Protocolo
Máquinas, Información de máquina
Máquinas, Instrucciones de uso
Máquinas, Proyectos realizados en la máquina
Reservar máquina
Confirmación de reserva
Personas
Usuario
Formulario de usuario
Noticias
Noticia
Diplomado

Construcción

Normas gráficas

Introducción

MADLAB corresponde al Laboratorio de Modelo Asistido Digital, ubicado en la Escuela de Arquitectura y Diseño:

La identidad visual del MADLAB, nace a raíz de la creación de su sitio web, el cual responde a las siguientes necesidades:

Registrar, gráfica y descriptivamente, lo hecho en el Laboratorio
Informar sobre los objetivos del Laboratorio, cómo trabajar y las máquinas con las que se dispone
Facilitar servicios a la Escuela y a la comunidad, dando comodidad al pedir las máquinas y el acceso al laboratorio

Este sitio se desarrolla en la base de que sea simple, limpio, accesible y fácil de usar, por lo que está diseñado bajo la influencia del diseño flat.

Teniendo en cuenta estos conceptos, este manual de normas gráficas debe servir como guía inicial para la aplicación de la identidad visual del MADLAB en medios impresos y web.

^[1] ^[2]

Uso correcto del logotipo

Las maneras de usar el logotipo del MADLAB son dos: negro sobre fondo claro y blanco en fondo oscuro. La idea es que se elija el tono del logotipo de manera que haga contraste con el color de fondo.

Hay que tener en cuenta el espacio libre alrededor del logotipo para maximizar la efectividad visual. Nada debe invadir el espacio libre especificado.

El tamaño mínimo de impresión son 8 mm, y en formato digital, 20 px.

Uso incorrecto del logotipo

Las siguientes restricciones se aplican al uso del logo:

No separar en logo en partes
No cambiar la inclinación de las letras del logo
No condensar ni expandir las dimensiones del logo
No desordenar ni cambiar el horizonte del logo.
No usar el logo delineado
No utilizar gradientes como relleno
No añadir efectos externos al logo
No rellenar con colores
No usar partes del logo para escribir otras cosas

Colores

El logo sólo será representado en los tonos blanco puro o negro puro.
Los grises son indispensables para construir los contrastes dentro del sitio, principalmente en la tipografía.
Los colores son los que dan el realce a las aplicaciones de la marca, pueden ser usados como fondos, para diferenciar textos o darle connotación a detalles. Éstos fueron elegidos de Flat UI Colors, una aplicación que disponibiliza la paleta de colores del framework Flat UI.

Tipografía

Utilizamos tipografías de Google Fonts, ya que son gratuitas y libres para el uso comercial, además de agilizar el uso del sitio web.

Para los títulos: Varela Round
Para subtítulos y texto en general: Source Sans Pro
Para los campos de relleno y código: Source Code Pro

Para la familia de la Source Sans y Code, se usan sólo sus versiones Regular, Regular italic, Light, Light italic, Ultra light, Ultra Light Italic.

Iconografía

Los íconos que usamos siguen la línea de ser libres para uso comercial, por lo que usamos FontAwesome. Éstos son íconos vectoriales escalables que pueden ser personalizados de la manera que se quiera a través de la cascada de estilo.

Dentro del sitio usamos sólo 72, pero, si se requiere, FontAwesome cuenta con más de 300 para elegir.

Colofón

Manual de Normas gráficas para MADLAB

Descargar zip Identidad visual MADLAB

Referencias

Interfaz de usuario

LESS

"LESS CSS es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritméticas, entre otras, para acelerar y enriquecer los estilos en un sitio web. LESS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos CSS completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de desarrollo, utilizar características avanzadas de estilos y para ahorrarte trabajo —de allí su nombre: less css (menos css)."^[3]

Más información y la documentación básica para aprender a usar este método en su página oficial: LESSCSS.org.

MADLAB UI

El uso de la tipografía, los símbolos, el color y otros gráficos estáticos y dinámicos se utilizan para transmitir hechos, conceptos y emociones. Esto constituye un diseño gráfico sistemático y orientado a la información que ayuda a la gente a entender información compleja. A partir de este razonamiento, desarrollo los elementos de la interfaz de usuario del sitio.

^[4]

Archivo:MADLAB-UI-Botones.png

Elementos complejos

Diseño Front-end

El diseño front-end es el encargado de transformar todos los bocetos del diseño, a ser concreto mediante código que no necesita de ser procesado del lado del servidor para ejecutarse. son los encargados de realizar el trabajo con las estructuras en HTML, CSS y agregar interacciones JavaScript.

Como diseñadores debemos ser capaces de comunicar nuestras ideas para interactuar con los usuarios en el lenguaje que es utilizado para llevar a cabo los proyectos que se nos presentan. El diseño front describe el punto de encuentro entre las personas que trabajan en la ingeniería informática tradicional y la interfaz de usuario (UI) de diseño.

El sitio puede ser visto en el siguiente link.

Para desarrollar la landing page y el sitio web, realicé varias pruebas, que se pueden ver en este Repositorio en GitHub.

Mapa de Divs

Las páginas web se organizan en jerarquías de cajas, que en código HTML son llamadas divs, éstas contienen la información que quiere ser mostrada. Para tener una percepción de cómo las páginas se ordenarán, se establecen mapas de divs, que muestran la constitución del código HTML de manera visual.

Este mapa de divs es el esqueleto base del sitio. A medida que se avanza con el código HTML y CSS, se pueden incluir nuevas clases y divs con el fin de ordenar las distintas jerarquías y ajustes de visibilidad dentro de cada resolución, pero esta base es la misma para todas las páginas.

Última versión de diseño de interfaz

En esta última versión, me enfoco en corregir errores y detalles, como grosores de líneas, colores mal utilizados y tipografías muy pequeñas o demasiado finas para la pantalla. Agrego, también, los textos facilitados por el staff del MADLAB dentro del sitio. Realizo los últimos cambios en las páginas de "Personas", "Diplomado", "Noticias" y el "Home". En los tres primeros, me decido finalmente por utilizar fotografías para los fondos, ya que así se le dará una variable única a éstos. Para "Personas" y "Diplomado", éstas estarán en el fondo de la página completa como una galería automática, pasando fotografías del trabajo en el Laboratorio y de los Diplomados realizados y por sobre éstas, se moverían las cajas informativas. Para "Noticias", irá una única imagen estática para cada noticia. El rediseño del "Home" fue más que nada una reorganización de los contenidos, potenciando los proyectos destacados y se agrega una caja para promocionar el diplomado vigente.

Home
Contacto
Búsqueda en blanco
Búsqueda realizada
Proyectos
Proyecto
Galería de fotos
Publicar proyecto
Eventos
Evento
Máquinas, Normas de uso
Máquinas, Protocolo
Máquinas, Información de máquina
Máquinas, Instrucciones de uso
Máquinas, Proyectos realizados en la máquina
Reservar máquina
Confirmación de reserva
Personas
Usuario
Formulario de usuario
Noticias
Noticia
Diplomado

Adláteres

Referencias

↑ http://designshack.net/articles/graphics/how-to-build-a-brand-bible-visual-style-guide/
↑ http://www.brandemia.org/hablemos-con-propiedad-logotipo-isotipo-imagotipo-isologo-imagen-corporativa-identidad
↑ Más información sobre LESS con ejemplos incluidos en el siguiente artículo.
↑ http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html

Programas utilizados

Sublime Text

Sublime Text es un editor de texto y editor de código fuente creado en Python desarrollado originalmente como una extensión de Vim. Se distribuye de forma gratuita, sin embargo no es software libre o de código abierto, se puede obtener una licencia para su uso ilimitado, pero el no disponer de ésta no genera ninguna limitación más allá de una alerta cada cierto tiempo.

Crunch

Crunch es una aplicación gratuita de Adobe AIR que facilita la compilación de hojas LESS y sin la necesidad de usar líneas de comandos, a través de una interfaz fácil de usar. Una vez que se guarda un archivo, la versión de CSS se crea automáticamente, lo cual es muy útil para cualquier persona dispuesta a desarrollar en LESS, pero no quiere depender de JavaScript en el lado del cliente.

Referencias de código

Colofón

El diseño del sitio web 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 Segundo Año de Diseño Gráfico; Joaquín Martel, diseñador gráfico; el staff del MADLAB: Pedro Garretón, Danisa Peric y Juan Carlos Jeldes; los compañeros de titulación: Camila Valenzuela Rojo, Carlos Chávez y Daniela Pardo; el Taller de Tercer Año de Diseño Gráfico 2014; los usuarios de prueba: Felipe Jiménez, Juan José Peters, Manuel Toledo y Viviana Acevedo; y los analistas expertos: las diseñadoras gráficas, Paulina Buvinic y Nicole Arce, y los ingenieros informáticos, Cristian Olivares y Pablo Carrasco.

Consta de cuatro ejemplares correspondiente al registro entre las fechas comprendidas entre Marzo y Mayo del 2013 para el período de Titulación I, de Septiembre a Diciembre del 2013 para el período de Titulación II, y de Marzo a Junio para Título III.

El formato es de 16,5 x 22,5 cms. El papel para la portada es Hilado 180 con una cobertura plástica, y fue impreso en una impresora carro ancho HP DesignJet 90, y el interior, compuesto por Blanco Nórdico de 220 grs., Hilado 6 de 106 grs. y Diamante translúcido de 90 grs., fueron impresos en una impresora multifuncional Epson XP-201. El empaste de los ejemplares fue realizado por Adolfo Espinoza, encargado de Ediciones y del Archivo José Vial Armstrong.

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

Los colores especiales usados fueron:

Turquesa: C:72, M:0, Y:51, K:0
Verde: C:76, M:0, Y:73, K:0
Morado: C:51, M:72, Y:0, K:0
Azul brillante: C:80, M:40, Y:10, K:1
Azul marino: C:82, M:61, Y:41, K:34
Amarillo: C:8, M:23, Y:92, K:1
Naranja: C:12, M:76, Y:100, K:3
Rojo: C:17, M:82, Y:18, K:6
Gris claro: C:10 M:5, Y:7, K:0
Gris intermedio: C:31 M:20, Y:20, K:2
Gris oscuro: C:51 M:35, Y:37, K:16
Negro claro: C:69 M:60, Y:56, K:66

Esta edición fue impresa el 19 de Junio del 2014 en la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.

[1] ttp://designshack.net/articles/graphics/how-to-build-a-brand-bible-visual-style-guide/

[2] ttp://www.brandemia.org/hablemos-con-propiedad-logotipo-isotipo-imagotipo-isologo-imagen-corporativa-identidad

[3] Más información sobre LESS con ejemplos incluidos en el siguiente artículo.

[4] ttp://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html

[1]

[2]

[3]

[4]