Sitio MADLAB: Documentación Título I
| Título | Sitio MADLAB: Documentación Título I |
|---|---|
| Tipo de Proyecto | Proyecto de Titulación |
| Palabras Clave | madlab, sitio web, documentación, diseño web |
| Período | 2013-2013 |
| Del Curso | Taller de Diseño Gráfico Titulación 1, |
| 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://wiki.ead.pucv.cl/index.php/MADLAB |
Título I | Título II | Título III | MADLAB.cl
Etapa 1: Exploración
Gestión: Carta Gantt
La Carta Gantt consiste en elaborar un cronograma donde se fijan tareas, metas y objetivos a cumplir de acuerdo a tiempos establecidos por el equipo de trabajo.
Para un comienzo del proyecto, se hizo una carta Gantt en la cual se trazaron procedimientos genéricos, pero luego de la investigación teórica, me doy cuenta de que algunas de estos pasos no son necesarios, por lo que se vuelve a la carta Gantt y se traza una más definida. Puede verse esta nueva versión aquí.
Marzo
Abril
Mayo
Investigación teórica: FAB LAB
¿Qué es un Fab Lab?
Un Fab lab (acrónimo del inglés Fabrication Laboratory) es un espacio de producción de objetos físicos a escala personal o local que agrupa máquinas controladas por ordenadores. Su particularidad reside en su tamaño y en su fuerte vinculación con la sociedad. O dicho de otra manera: es un taller para la fabricación digital.
Historia
En 1952, investigadores en el Instituto de Tecnología de Massachusetts (MIT) conectaron por primera vez un computador digital a una máquina fresadora, creando la primera máquina-herramienta de control numérico. La precisión que ésta permitía, hizo que se pudiesen crear componentes para naves espaciales, reduciendo el riesgo que antes había cuando lo hacía un operador.
El año 2000, el Center for Bits an Atoms (CBA) del MIT, encabezado por el profesor Dr. Neil Gershenfeld, inicia un estudio sobre las capacidades computacionales que son inherentes a los sistemas físicos, creando el primer laboratorio para la fabricación digital, también conocido como "Fab Lab" (Laboratorio de Fabricación).
Como programa educativo interdisciplinario, el CBA ha apoyado la puesta en marcha en el exterior de un pequeño número de Fab Labs similares, para poder hacer más investigaciones sobre los efectos y las posibilidades de hacer accesibles las capacidades computacionales de de la capa física.
El concepto Fab Lab rápidamente se hizo popular entre los usuarios de fuera del ámbito de la investigación, y una red internacional de Fab Labs similares nació y se mantiene activa en las áreas de investigación, educación y la aplicación de la fabricación digital personal. Estos Fab Labs cooperan con las comunidades locales, universidades y gobiernos.
Al inicio de 2011, la red internacional Fab Lab consistía en unos 50 Fab Labs en 16 paises, posible gracias a cientos de personas (a sueldo o voluntarias). Estos Fab Labs utilizan las mismas herramientas y procesos y una infraestructura internacional para cooperar en el diseño y fabricación digitales.
Condiciones para Certificación de Fab Lab
Un Fab Lab tiene que:
- Ser gratis y abierto al público, aunque los costes directos como los materiales usados pueden ser cobrados
- Debe ajustarse al Fab Charter, y éste debe estar escrito en el laboratorio y en la página web
- Debe disponer de un conjunto común de herramientas y procesos (y puede que incluso más)
- Contribuir a y/o cooperar con otros Fab Labs y participar en o liderar iniciativas de la red
Un Fab Lab con una clasificación AAAA cumple con todas estas características y es de alto nivel. Si no se ajusta con alguna de estas cuatro, inferiores valoraciones (B o C) pueden aplicarse, siendo la más baja CCCC. La Asociación incentiva a estos Fab Labs a desarrollarse en la dirección de AAAA.
Hay que tener en cuenta que aparte de estas características básicas y, más o menos, comunes, cada Fab Lab tiene su propia identidad. Atraen sus propias categorías de usuarios y ofrecen sus propios rangos de servicios. Pueden trabajar para los jóvenes, el desarrollo social y comunitario, como parte de la programación escolar, centrados en la arquitectura, ligados a la industria local creativa, entre otros proyectos.
Fab Charter
- Misión: Los fab labs son una red global de laboratorios locales, que posibilitan la invención, haciendo accesibles a los individuos las herramientas de fabricación digital.
- Acceso: Puedes usar el fab lab para hacer casi cualquier cosa [que no haga daño a nadie]; debes aprender a hacerlo por ti mismo, y debes compartir el uso del laboratorio con otros usos y con otros usuarios.
- Responsabilidad: Eres responsable de:
- Seguridad: Saber cómo trabajar sin hacer daño a otras personas ni a las máquinas.
- Limpieza: Dejar el fab lab más limpio que como lo encontraste.
- Funcionamiento del laboratorio: Ayudar en el mantenimiento, reparación e información sobre herramientas, materiales e incidentes.
- Disponibilidad: Los diseños y los procesos que se desarrollan en los fab lab deben quedar accesibles para el uso individual aunque su propiedad intelectual puede ser protegida según la elección de cada cual.
- Negocio: Las actividades comerciales pueden ser incubadas en los fab labs pero no tienen que entrar en conflicto con el acceso abierto; deberían crecer más allá de los laboratorios, más que dentro de ellos; y se espera que beneficien a los inventores, los laboratorios y las redes que contribuyan a su éxito.
Field trip: Visita a FabLabs en Santiago
Desde el comienzo del proyecto se estableció la posibilidad de visitar a los FabLabs existentes en Santiago, por lo que contacté a los tres FabLabs establecidos: Design Lab UAI, Fab Lab UCh y Lab FADEU, para realizarles una visita el lunes 13 de Mayo. Este fue el recorrido.
Esta visita tenía como propósito establecer contactos y una red de apoyo entre los emergentes laboratorios de fabricación que se están formando en Chile. A partir de esto, se ha podido difundir actividades que interesan e involucran a estas cuatro entidades que tienen el mismo objetivo.
Fab Lab UAI
Fab Lab UAI
Fab Lab UCh
Lab FADEU UC
Estado del arte
El Estado del arte describe las investigaciones más recientes y actuales que sobre un tema en específico se han realizado. En inglés el State of de Art, se refiere a el conocimiento o tecnología de punta o vanguardia.
Para comenzar a plantear la Arquitectura de Información de un sitio, deben analizarse plataformas web que se hayan hecho antes con el mismo objetivo. Basándome en los sitios de los fab labs existentes alrededor del mundo y tomando en cuenta sus distintas calificaciones de conformidad e idiomas en el que están en la web, hago una selección y análisis de contenidos.
Digital Fab Lab UChile
Sitio de Wordpress. Las noticias en su portada son sobre su Fab Lab. Textos descriptivos y en inglés en cada página. Casi no hay imágenes, sólo algunas fotos en sus noticias y proyectos.
Fab Lab UAI
No tiene un sitio propio para el fab lab, es una sección dentro del sitio del Design Lab de la Universidad. Destacan las noticias de la Universidad que tengan relación con los fab labs. El sitio le da mucha importancia a las imágenes, teniendo un gran espacio para ellas y muchas por página. No tiene texto en todas las páginas, y el que hay es poco.
Lab FADEU UC
Sitio en Wordpress. Sitio algo caótico, debido a que no tiene menú, por lo que es difícil llegar a los contenidos. Se basa en un sistema de tags. Texto descriptivo en las secciones "Laboratorio" y "Normas del Laboratorio"; en el resto, poco texto. Casi no hay presencia de imágenes, a excepción de la sección "Actividades", donde se colocan fotos de los trabajos hecho en el Lab. En la sección "Normas del Laboratorio" se puede descargar un folleto con todas las normas.
Fab Lab Santiago
Le da importancia a las noticias relacionadas a los fab labs en general. Tiene todas las páginas con contenido descriptivo. Pocas imágenes, pero las que tiene son de acompañamiento al texto e infográficas. Tiene una wiki en desarrollo. A pesar de que este Fab Lab aún no está habilitado, tiene presencia en la web.
Fab Lab Lima (Perú)
Links a redes sociales (facebook, twitter, youtube y flickr) y con opción de suscripción a un newsletter. Noticias sobre el fab lab en su portada. Todas sus publicaciones tienen la opción de dejar comentarios. Poco contenido descriptivo, se le da mayor énfasis a las noticias. Tampoco existe un registro de lo hecho en el fab lab ni imágenes que acompañen a los textos.
Fab Lab Colombia
Sitio en Indexhibit. Se le da gran importancia a las imágenes, que están presentes en todo el sitio en grandes tamaños; quedando bastante relegado el texto, el cual es bastante escaso. Tienen una página específica donde explican (a través de imágenes) el proceso de fabricación de un objeto en el Fab Lab. Sus páginas de "Proyectos", "Workshops" y "Noticias", no existen ya que éstos funcionan a base de un sistema de tags, y se van agregando bajo estos títulos. También tienen presencia en las redes sociales Facebook, Twitter y Flickr.
Fab Lab Brasil
Sitio en Wordpress, escrito completamente en portugués. Conexión a Facebook y un Newsletter, en sus entradas tienen la opción de compartir vía Twitter, Facebook, Tumblr, Pinterest e e-mail, la opción de 'like' de Wordpress. En su portada, noticias relacionadas a su fab lab. No hay presencia de fotografías, a excepción de las noticias. Los textos son descriptivos.
Fab Lab DC (USA)
Sitio en Wordpress. Noticias sobre el fab lab en la portada, y conexión a Twitter y Facebook. En todas sus páginas, opción a comentarios y un botón de donaciones. Casi no hay imágenes y los textos no están completamente desarrollados.
Fab Lab San Diego (USA)(*)
Sitio en Wordpress. En la portada inmediatamente invita a participar en el Fab Lab, y links hacia los programas para niños, workshops para adultos y los eventos futuros. Tienen twitter, facebook y newsletter. En todas las páginas dan la opción de suscribirse al Newsletter y a unirse en Facebook. Mucho uso de imágenes y fotografías, además de textos descriptivos en todas sus páginas. Para mostrar los fab labs en el resto del mundo, utilizan un GoogleMaps además de una lista con todas las direcciones de los sitios. En "Contacto" tienen también la opción de mandar un mensaje desde la página. Es un sitio muy grande y complejo.
Fab Lab Florida (USA)(*)
Al parecer, está optimizado para móvil, ya que es una sola columna estrecha. Sitio muy complejo para tan poco contenido. Tiene un buen sistema de reserva de horas para las máquinas. No hay fotos, poco texto, no hay conexión a redes sociales.
Vancouver Fab Lab (Canadá)
Sitio en Wordpress. En el inicio tiene las noticias sobre el fab lab y los últimos proyectos desarrollados en él. Muy simple, poco texto y poco uso de imágenes.
Fab Lab Coimbra (Portugal)
Sitio en portugués. En la portada hay un artículo del presidente de dirección hablando sobre "Inspiración versus Innovación". Es un sitio en construcción, le hace falta contenido en varias páginas. Casi no hay uso de imágenes, sólo cuando hablan de las máquinas tienen algunas fotografías. Sitio complejo y extrañamente desarrollado, no tiene mucha lógica de orden.
Fab Lab León (España)
Rico en contenido y en texto, uso de imágenes pequeñas. Cuenta con un glosario de términos y una extensa lista de sitios de interés y aprendizaje. Cuenta también con mapas de ubicación en GoogleMaps y una vía de contacto directa desde el sitio.
Fab Lab Barcelona (España)(*)
Sitio en Wordpress. El idioma es dual, ya que en algunos casos usan el inglés y en otros, el español. En la portada tiene noticias sobre los workshops que se han hecho y que se harán proximamente, proyectos, noticias relacionadas a los fab labs en el mundo y a lo que concierne al fab lab. Cuentan con una aplicación móvil. Mucho uso de imágenes de calidad y de textos descriptivos en todas sus páginas. En su página "Servicios" tienen un formulario de envío de proyectos directo de la página. Dentro de esta misma sección, tienen un sistema provisto por [SimplyBook.me] para reservar horas en las distintas máquinas. En la página "Fab Lab Pro" se encuentra un pdf en línea de una presentación con todas las características del Fab Lab BCN. Como el sitio funciona mediante un sistema de tags, al poner la página "Proyectos" ésta muestra todas las noticias con esa etiqueta. Lo mismo sucede al cliquear "Prensa", "Workshops" y "How to". Cuenta con una wiki propia. En la página "Contacto" tiene un GoogleMaps con su ubicación. Los proyectos que se muestran en la página "Fab Design" están subidos como folletos diseñados a Isuu.
Fab Lab Valencia (España)
En la portada tienen varias noticias destacadas en un carrusel junto a un apartado de "¿Qué es un Fab Lab?", luego tres columnas de "Proyectos", "Noticias" y una tercera compuesta de "Eventos", "Categorías", "Recursos" y un video titulado "El futuro de la fabricación", como footer tienen el "Fab Charter" y "Agenda", y el acceso a sus redes sociales Twitter, Facebook, Vimeo y su Newsletter. El mapa puede resultar algo complejo, pero el sitio se da varias vueltas sobre sí mismo.
Fab Lab Amsterdam (Holanda)(*)
Destaca la simpleza del sitio desde un comienzo, ya que en su portada sólo se muestran los menúes quedando en el fondo una presentación de fotografías de proyectos hechos en el fab lab, dejando en claro que las fotografías son bastante importantes dentro del sitio. El sitio está en inglés. Tiene su registro propio. Presencia de videos cuando no hay imágenes para acompañar los textos en cada página. En la página de "Proyectos" tienen un buscador para encontrar proyectos similares. Muchos sitios útiles y reserva de horas de la máquina mediante registro en el sitio, pero dentro de todo, se baten con lo necesario.
Digital Fab Lab UChile
Fab Lab UAI
Lab FADEU UC
Fab Lab Santiago
Fab Lab Lima (Perú)
Fab Lab Colombia
Fab Lab Brasil
Fab Lab DC (USA)
Fab Lab San Diego (USA)
Fab Lab Florida (USA)
Vancouver Fab Lab (Canadá)
Fab Lab Coimbra (Portugal)
Fab Lab León (España)
Fab Lab Barcelona (España)
Fab Lab Valencia (España)
Fab Lab Amsterdam (Holanda)
Objetivos del Proyecto
Objetivos Generales
El proyecto nace de la creación del MADLAB (Laboratorio de Modelo Asistido Digital) y su necesidad de tener un lugar virtual donde:
- Quede un registro gráfico y descriptivo de lo hecho en el Laboratorio
- Se entregue información sobre lo que quiere lograr, cómo trabajar y las máquinas dentro del Laboratorio
- Se facilitan servicios a la Escuela y a la comunidad, entregando comodidad al pedir las máquinas y dando facilidad al acceso al laboratorio.
Objetivos específicos
A partir del estado del arte hecho anteriormente y de los objetivos generales puedo concluir algunas necesidades específicas que requiere el sitio:
- Sitio responsivo
- Textos descriptivos
- Importancia a las imágenes
- Buen registro fotográfico
- Informar sobre las máquinas: especificaciones y formas de uso correcto
- Contener el Fab Charter
- Debe tener un lugar donde se puedan ver los proyectos desarrollados
- Explicación de cómo trabajar en el MADLAB
- Noticias sobre proyectos, workshops, talleres y otras cosas relacionadas al MADLAB
- Sistema de reserva de horas para cada máquina
- Contacto
- Quiénes están a cargo del MADLAB
Otras necesidades
Estas son algunas de las falencias que creo que el MADLAB requiere aparte del sitio web, que podrían o no ser incluídas dentro del Proyecto.
- Logo propio
- Generar espacios físicos que den la facilidad de registro fotográfico
- Creación de señalética con información necesaria para el uso del MADLAB
- Sitio bilingüe
Etapa 2: Prototipado
Contextualización
Modelo de organización de adláteres dentro de la Escuela
Se me pide crear un modelo de cómo se organizan las partes de la Escuela, que no son de Educación, sino que apoyan indirectamente a ésta, aportando de otras maneras, y de cómo éstas se organizan.
Archivo:CDS-MADLAB-Modelodeorganización.png
De esta manera, me doy cuenta de que ninguna de ellas tiene un sitio web propio. Todas están insertas dentro del sitio de la Escuela, o bien, sólo son mencionadas en éste.
Modelo de jerarquía en sitios de la Escuela
Para comprender mejor cómo funcionan los sitios de la Escuela, se me plantea realizar un modelo de las jerarquías que reinan en éstos. De esta manera surge el siguiente planteamiento:
Todos los sitios de la Escuela, heredan de alguna manera el .pucv.cl, lo que sugiere que todas "nacen" del sitio de la PUCV, imponiéndose ésta como la primera, a pesar de la casi nula relación que existe entre ella y nuestros sitios. De ella, sale el sitio de la Escuela, de la cual cinco sitios heredan el apellido ".ead.pucv.cl": Proyectos; Travesías; WikiCasiopea; Amereida, a pesar de que ésta se cambió el dominio a "amereida.cl"; y Personas, de la cual todas las anteriores, incluyendo el sitio de la Escuela, dependen de su administración de usuarios.
Asímismo, surgen tres estructuras internas de la Escuela que tienen su página en el sitio de la Escuela y dentro de la Wiki, pero creo que requieren de un sitio propio: el Archivo José Vial Armstrong, la Biblioteca con§tel y el Taller de Investigaciones Gráficas.
Archivo:CDS-MADLAB-Modelodejerarquía.png
Arquitectura de la Información
Card Sorting
El card sorting nos permite crear categorías organizadas y denominadas que se aproximen a la manera de pensar del usuario, es decir, su modelo mental.
Conceptos
Para comenzar a bosquejar el orden dentro del sitio, hago una lista de conceptos desde las necesidades del sitio y los otros sitios revisados en el benchmark.
- MADLAB
- Quiénes somos
- Qué hacemos
- Fab Lab Network
- Noticias
- Galería de proyectos
- Máquinas
- Partners
- Proyectos
- Fab Charter
- Especificaciones de las máquinas
- Forma de uso correcto de las máquinas
- Tutoriales
- Reserva de horas
- FAQs
- Contacto
- Enlaces útiles
- Escuela
Orden
El propósito para el sitio es que sea simple, limpio, accesible y fácil de usar. A partir de esta premisa, se trabajan los conceptos.
Primera versión
Segunda versión
Tercera versión
En la primera versión, se ordenan de los conceptos de la lista bajo uno mayor que los contenga. En la segunda, ordeno todo bajo el concepto del MADLAB, para luego desarticularlo en cinco partes: en quiénes son, lo que hacen, las máquinas, los partners y otros contenidos. Con este avance, en la tercera versión, nombro de distinta manera estas divisiones: Personas, Máquinas, Proyectos, Partners y Más, además de reordenar algunos conceptos bajo éstos.
Mapa de Contenidos
Un mapa de contenidos especifica todos los contenidos que se quieren incluir en un sitio web, organizados y definidos con detalle. Ayuda a una mejor compresión y visualización del contenido, mostrando las secciones, los documentos y sus relaciones.
El mapa de contenidos no es necesariamente cada página que contiene el sitio, sino cómo los contenidos de éste se relacionan entre sí. Bajo este parámetro tomo el último Card Sorting y lo reordeno para comenzar a crear las secciones del sitio.
Los mapas de navegación proporcionan una representación esquemática de la estructura del sitio, indicando los principales conceptos incluídos en el espacio de la información y las interrelaciones que existen entre ellos
Lenguaje de Modelado Unificado (UML)
El UML es un lenguaje gráfico para visualizar, especificar y documentar cada una de las partes que comprende el desarrollo de software. Para poder representar correctamente un sistema, UML ofrece una amplia variedad de diagramas para visualizar el sistema desde varias perspectivas.
Un diagrama es la representación gráfica de un conjunto de elementos con sus relaciones. En concreto, un diagrama ofrece una vista del sistema a modelar. Para poder representar correctamente un sistema, UML ofrece una amplia variedad de diagramas para visualizar el sistema desde varias perspectivas. UML incluye los siguientes diagramas:
- Diagrama de casos de uso
- Diagrama de clases
- Diagrama de objetos
- Diagrama de secuencia
- Diagrama de colaboración
- Diagrama de estados
- Diagrama de actividades
- Diagrama de componentes
- Diagrama de despliegue
En este documento, se describe de forma más completa sobre qué es el UML y distintos caso de uso. Para este proyecto, me valgo de dos elementos que utilizan éste lenguaje: el Diagrama de Casos de Uso y el Diagrama de Clases.
Diagrama de Casos de Uso
El diagrama de casos de uso representa la forma en como un Cliente (Actor) opera con el sistema en desarrollo, además de la forma, tipo y orden en como los elementos interactuan (operaciones o casos de uso). Se define un caso de uso como cada interacción supuesta con el sistema a desarrollar, donde se representan los requisitos funcionales. Es decir, se está diciendo lo que tiene que hacer un sistema y cómo.
De acuerdo a este tutorial de cómo hacer Diagramas de Casos de Uso, realizo uno de acuerdo a las personas y a las acciones que realizan en el MADLAB.
Primero, realizo un esquema especificando los usuarios del MAD LAB y las acciones que podrán realizar en el sitio de éste.
Para luego, realizar el diagrama de casos de uso.
Diagrama de Clases
Muestra un conjunto de clases, interfaces y sus relaciones. Incluye información como la relación entre un objeto y otro, la herencia de propiedades de otro objeto, conjuntos de operaciones/propiedades que son implementadas para una interfaz gráfica.
Personas y escenarios
Para comenzar con el diseño de contenidos, primero se tiene que tener claro para quiénes se está diseñando, cuáles son sus realidades y necesidades. Los personajes y la creación de escenarios son técnicas que facilitan ponerse en el lugar del usuario y diseñar la web adecuadamente para este.
Según el libro About Face de Alan Cooper pueden existir hasta 6 tipos de personajes dentro de todo proyecto: primarias, secundarias, suplementarias, clientes, a las que se le da servicio (served) y negativas. Aquí hago uso de algunos de estos personajes para ejemplificar el uso del sitio.
Persona primaria: Camila Donoso
Las personas primarias representan el objetivo principal para el diseño de una interfaz.
Persona
Camila tiene 22 años y está en su segundo trimestre de título de Diseño Industrial en la Escuela. Durante todo su tiempo en la Escuela ha tenido que utilizar la WikiCasiopea para el registro de sus proyectos y encargos, pero no la usa con frecuencia y sólo limitadamente. Para distintos trabajos ha usado las máquinas del MADLAB, habiéndose acostumbrado a su utilización adecuada sin mayores dificultades.
Escenario
Estando a mediados de este trimestre, Camila comienza a maquetear su proyecto, por lo que el uso de las máquinas se vuelve habitual y requiere su uso al menos un día a la semana del Router CNC, para esto accede al sitio del MADLAB y hace reserva del Router un día que le acomoda y está libre. Ese día, realiza el registro fotográfico obligatorio durante y después del proceso. Luego, crea una página en la Wiki donde sube el archivo que mandó a cortar, una breve explicación de cómo realizó el trabajo y algunas fotos que muestran su trabajo. A medida que va avanzando su propuesta va sumando nuevas fotos y detalles de éste.
Persona secundaria: Claudio Fernández
Un personaje secundario está en su mayoría satisfecho con la interfaz del personaje principal, pero tiene necesidades específicas adicionales que se pueden acomodar sin alterar la capacidad del producto para servir a la persona primaria.
Persona
Claudio es Ingeniero Civil Estructural, se recibió hace algún tiempo y pronto cumplirá 34 años. Trabaja como asesor de proyectos de una Inmobiliaria en Valparaíso y tiene siempre que presentar maquetas de estructuras. Hace poco supo de los fab labs y lo que se podía crear en ellos, entre ellos maquetas de mejor calidad y estética, buscó alguno que estuviese en Valparaíso y llegó al Sitio del MADLAB.
Escenario
Al llegar al sitio, quiere ver las cosas que se han desarrollado dentro del MADLAB y le interesa ponerse en contacto con los encargados de éste para saber cómo puede hacer para poder usar las máquinas.
Served persona (a las que se le da servicio): Sylvia Arriagada
No son usuarios del producto en absoluto, sin embargo, están directamente afectados por el uso del producto.
Persona
Sylvia es profesora de Tercer Año de Diseño Gráfico, y, desde que se iniciaron las actividades del MADLAB ha instado a sus alumnos al uso de sus máquinas.
Escenario
Luego, al meterse al sitio, puede hacer una corrección de los trabajos de sus alumnos, y ver proyectos anteriores que pueden ayudar a la construcción de los trabajos que están haciendo sus alumnos.
Viaje de usuarios
El viaje de los usuarios es un método para conceptualizar y estructurar el contenido y la funcionalidad de un sitio web. Estos viajes nos permiten alejarnos de pensar acerca de la estructura en términos de jerarquías o una acumulación técnica. Responder a las necesidades del usuario es el propósito final de nuestros viajes a través de la estructura y el punto de partida de nuestra reflexión sobre el propio viaje.
Para saber a qué servicios recurrirán los usuarios y de qué manera, para así tener en consideración su viaje a través del sitio al desarrollarlo, decido hacer una partitura de los viajes de usuario que establecimos más arriba. De esta manera establezco el mapa de navegación de una manera distinta:
De esta manera, se me hace más fácil representar los viajes de las personas a través de capas, partiendo desde la página de inicio o "Home". Las opciones "Máquinas", "Proyectos" y "Personas" van con marco rojo ya que son opciones directas del menú primario, y están enmarcadas en conjunto a otra, ya que ambas pertenecen a la misma familia, pero la otra opción también se encuentra directa en la página de inicio.
Persona primaria
Persona secundaria
Persona servida
Partitura de interacción
Propone un sistema de notación gráfica para formalizar los flujos de interacción en una plataforma o servicio digital. Éste permite coreografiar y orquestar cuidadamente el díagolo en continuidad entre la persona y el servicio.
Para complementar la información de cómo los usuarios se relacionan con el sitio, se me da la idea de crear Partituras de Interacción, en base a un modelo establecido en esa página.
Persona primaria
Persona secundaria
Persona servida
Etapa 3: Diseño de Interacción
Diseño de Logotipo
Brief
Existen dos tipos de máquinas CAM existentes hoy: las aditivas como la REPRAP que van depositando material que prácticamente no generan residuos, principalmente usadas en la impresión de volúmenes 3D y las sustractivas que sería la operación de sacara material para perfilar piezas como lo hace la Láser. Esa dualidad es la que le puede dar un carácter de identidad reconocible por otros labs o gente que se vincule de otras maneras al taller. A eso, también sumarle la de relacionar los mundos Físico y Digital, que es la labor primordial desde cierto punto de vista la comprensión del flujo de trabajo CAD/CAD.
Se deben incorporar: el concepto de Vóxel, tipografías Pixel/Bitmap, el plano tridimensional y los trabajos aditivos y sustractivos que realizan las máquinas del taller. Algunos videos del funcionamiento de la Router CNC, REPRAP y la Láser CNC.
Construcción
Mediante un programa llamado Qubicle Constructor Basic Edition realizo la construcción del logo en 3D, para poder tener una visión de éste en varias perspectivas, para elegir la mejor y trazarla en Illustrator.
A pesar de que se toma la decisión, luego de una corrección, de no seguir trabajando con este programa; me quedo con la idea de que el logo sea animado, que se note la construcción digital previa en una animación GIF que culmine en el logo terminado.
1
2
3 _ En movimiento
Propuesta formal: Primer Avance
Para la primera propuesta, hago en Illustrator una maqueta vectorial del último sketch. Aún no se construye la tipografía, por lo que uso la DinPRO, que es en la que me basaré para realizar el logo. Es más que nada para tener una base en la cual trabajar y guiarme.
Propuesta formal: Segundo Avance
Tomo la tipografía DinPRO y la intervengo para que siga los parámetros de lo visto en el brief y lo conversado en las correcciones: tipografía píxel, concepto de vóxel y las características de cómo trabajan las máquinas.
MAD Para "MAD", decidí tomar los conceptos de vóxel y el trabajo de la máquina REPRAP, la cual es aditiva. Por esta razón, la tipografía en píxel creada a partir de la DinPRO, y luego, la extrusión en 3D.
Tipografía:
3D:
A pesar de este avance, no está terminado, ya que en una corrección salió la idea de "cortar" la tipografía, para darle aún más valor tridimensional a la construcción del logo.
LAB Para la parte de "LAB", no es tan largo el proceso, ya que es tan solo modificar la DinPRO para que tome el concepto de la Láser CNC calando una superficie (como se puede ver en el video de referencia). (Esta parte tendrá más gracia cuando esté en movimiento.)
En la imagen se ven las variantes de edición de la tipografía, siendo la última la elegida, y atrás la maqueta extruída y la versión final con la tipografía nueva.
MAD LAB: Versión final del segundo avance.
Prototipado
Los wireframes son una guía visual que representa la estructura de un sitio web. Esquematizan el diseño de página y el orden del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo éstos funcionan en conjunto. Usualmente, estos esquemas carecen de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.
Wireframes de Baja Intensidad
Caracterizado por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Estos wireframes ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido.9 Contenido de prueba, texto de relleno en latín (lorem ipsum), muestra o contenido simbólico son utilizados para representar datos cuando el contenido real no está disponible.
Para hacer este primer acercamiento visual al sitio web, utilizo UXPin, una herramienta de prototipado web para ser usado en el navegador. Basándome en lo estudiado previamente en el mapa de contenidos, de navegación, casos de uso y diagrama de clases, creo wireframes para cada una de las páginas del sitio.
Home
PortalNoticias
Noticia
Galería de Proyectos
Proyecto
Formulario
Sobre las máquinas
Reserva de Horas
Personas
FAQ
Tutoriales
Tutorial
Enlaces de utilidad
Contacto
Adláteres
Linkografía
- Carta Gantt
- FabLab
- Estado del Arte
- Card sorting
- Lenguaje de Modelado Unificado (UML)
- [http://www.disca.upv.es/enheror/pdf/ActaUML.PDF El Lenguaje
Unificado de Modelado (UML)]
- Viaje de usuarios
- Partituras de interacción
Bibliografía
- FabLab
- Personas y Escenarios
Colofón
La construcción del sitio web para MADLAB es el proyecto de titulación de la alumna Caterina Da Silva Arriagada. 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; y el encargado del MADLAB, Pedro Garretón.
La presente edición fue realizada en mayo 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 periodo de Titulación 1.
Su formato es de 19x22cms. El papel para la portada es Hilado 180 con una cobertura plástica, y fue impreso en una HP Designjet 110plus, y el interior, Hilado 6, impreso en una Xerox 6360.
La familia tipográfica utilizada es DINPro (Light, Regular, Medium, Bold y Black).
Los colores usados fueron: color C:75 M:15, Y:73, K:1. color C:70 M:0, Y:72, K:0 color C:51 M:0, Y:47, K:0
Los íconos usados para este proyecto son de FastIcon.com.
Los ejemplares fueron impresos el 28 de Mayo del 2013 en la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.
