Portafolio Monserrat Torres

De Casiopea




TítuloPortafolio Monserrat Torres
Del CursoConstrucción 4º DG 2016
CarrerasDiseño, Diseño Gráfico, Formación y Oficio, Interacción y Servicios
Alumno(s)Monserrat Torres
ProfesorHerbert Spencer, Katherine Exss, Carlos Chávez
URLhttps://monsetorres.github.io/Portafolio/

DESCRIPCIÓN DEL PROYECTO

Durante este taller se realizara un proyecto de creación digital, en el cual cada alumno debe pensar, diseñar y crear su propio portafolio web, en cual cada uno determinara qué y como mostraran sus trabajos realizados durante todos estos años, ya sea en lo académico o extracurricular.

EXAMPLE CSS

En método de introducción al HTML y CSS, se dio la oportunidad de trabajar con una plantilla de CSS existente, para poder comprender de mejor manera como era la estructura del código junto con su funcionamiento. Después de varias pruebas, opte por utilizar mi primer código para ver como funcionaba.

https://monsetorres.github.io/example/

MAPA DE NAVEGACIÓN

Estos mapas proporcionan una representación esquemática de la estructura del hipertexto de un sitio web, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos. Pero antes de llevar a cabo esta metodología es necesario reconocer o identificar cuales son los conceptos que se desean mostrar en los portafolios.


  • Versiones

250px 400px 400px


  • Versión Final

Archivo:Mapa de navegación4MTM.jpg

EXPLORACIÓN

Proceso en el cual se busca diversos sitio web, de los cuales pudiesen llegar a servir para orientar mi portafolio.

CONTENIDO

Palabras Claves

1) Home

  • Nombre y Apellido: Monserrat Torres M
  • Menú: Home, proyectos, investigaciones, formación
  • Imagen
  • Footer: Mail y número de contacto

2) Inicio de proyectos e investigaciones

  • Galería de imágenes
  • Pie de imagen: Nombre y año

3) Proyectos

  • Titulo
  • Imagen: Alargada, del ancho total
  • Descripción: Texto breve en donde explique qué es y en que consiste el proyecto
  • Ficha de Datos: Año, duración, cantidad de objetos construidos, autor(es) y nombre de los fondos que auspiciaron su construcción
  • Materiales: Listado de los materiales que se usaron
  • Construcción: Explicación breve de los pasos necesarios para llevar acabo el proyecto junto con algunas imágenes

5) Investigación

  • Titulo
  • Descripción: Texto explicativo breve
  • Ficha de Datos: Año, duración, producto final

5) Formación

  • Titulo
  • Imágenes: Galería de imágenes en miniatura y una grande


Desarrollo

1. Inicio

  • Monserrat Torres
  • Diseñadora Gráfica


2. Menú

  • Inicio
  • Proyectos (Señaletica/Crepare/Omega Cubix)
  • Investigaciones (Rasgo Abstracto/Objeto Efímero/Elementos Portadores)
  • Formación


3. Contacto

  • Teléfono: +569 77533100
  • Mail: monsetorres@gmail.com
  • Dirección: V Región Chile.


4. Proyectos

  • Señaletica - 2014
  • Crepare -2016
  • Omega Cubix - 2016


5. Señaletica

  • Título: Señaletica de emergencia para el Cerro la Merced
  • Descripción: Construcción de un sistema de información vecinal, basado en paneles gráficos ubicados en 15 postes de la vía pública dentro del sector incendiado del Cerro Merced, siendo de carácter provisorio. Cuya finalidad era facilitar la información de las direcciones dentro del barrio y la señalización de las calles, además de tener incorporado un mapa de ubicación y listas vecinales
  • Datos (2014 - 5 Meses - Elaboración colectiva - Taller de 2°año - Ideas y manos para Valparaíso - 15 señaléticas)
    • Materiales( Matrices recicladas de impresión offset, Adhesivos de colores, Pintura blanca y negra, Implementos de impresión serigráfica, Elementos de fijación
  • Construcción:
    • Catastro: Recopilación de datos vecinales, nombre de calles junto con la numeración y cantidad de postes existentes en el sector afectado por el incendio.
    • Arquitectura de la información: Identificación y estructuración de los distintos niveles de información relevantes para las familias damnificadas dentro de las dimensiones establecidas.
    • Diseño de soporte: Proceso constructivo de los prototipos en blanco y negro del panel, elección tipográfica y rediseño del mapa correspondiente al sector.
    • Verificación en terreno: Implementación de las maquetas escogidas en el terreno, buscando la validación del Cerro Merced.
    • Rediseño: Replanteamiento del diseño e incorporación de un carácter cromático relacionado con el rasgo característico propio del lugar.
    • Producción de matrices: Fabricación e impresión láser de matrices necesarias para la producción, identificación de las combinaciones de colores y limpieza de las matrices recicladas del soporte.
    • Producción definitiva: Impresión serigráfica, doblado y perforación del soporte, incorporación de los adhesivos de colores sobre el soporte.
    • Montaje: Traslado y ubicación de las 15 señaléticas en los postes escogidos para dar paso a la fijación definitiva de estos.


6. Crepare

  • Título: Crepare
  • Descripción: Construcción de un cuerpo que revela o hace aparecer mediante la interacción dada por la distancia entre el objeto e individuo, la cual es recepcionada por un sensor de movimiento. Cuerpo constituido por 3 volúmenes diferentes que al momento de su apertura van apareciendo paulatinamente los focos lumínicos de cada uno junto con su intervención de color rojo que representan las distintas sombras identificadas como nitida, fragmentada y difusa.
  • Datos (2016 - 1.5 Meses - Elaboración colectiva - Taller de 4°año - 01 cuerpo)
    • Materiales (Arduino, Cables Dupont, Motor, Cartón dúplex delgado, Hilo blanco, TNT blanca, Pintura roja)
  • Construcción:
    • Interpretación individual: Indagación individual de la transformación del aparecer por medio de la observación, junto con la construcción de maquetas que lo represente.
    • Diseño colectivo: Convergencia de las diversas observaciones para la construcción de un cuerpo, donde existieron distintas versiones de una misma idea principal.
    • Sistema eléctrico: Confección de las conecciones eléctricas utilizando el arduino, cables dupont y el motor. Además de la incorporación y modificación del software para definir la apertura del cuerpo.
    • Rediseño: Definición y distribución de los 3 volúmenes que conforman el cuerpo junto con la unión e intervención de estos y la definición constructiva de la polea con piezas impresas en 3D.
    • Montaje en el espacio GYMKANA: Participación expositiva realizada en Casaplan ubicada en Brasil 1490, Región de Valparaíso.


7. Omega Cubix

  • Título: Omega Cubix
  • Descripción: Diseño de un objeto interactivo capaz de calibrar 3 dimensiones características de una obra abstracta de Piet Mondrian, donde a través del juego de las variaciones se logra crear nuevas obras sin perder la esencia de la pintura escogida. Construcción del sistema eléctrico, programación de la interfaz en donde se relaciona el accionar de la mano con la dimensión escogida y cuerpo del control.
  • Datos (2016 - 1.5 Meses - Elaboración colectiva - Taller de 4°año - 01 cuerpo)
    • Materiales (Arduino, Cables Dupont, Potenciómetro lineal, Potenciómetro giratorio, Joystick, MDF de 3mm, Pintura roja, azul y amarillo)
  • Construcción:
    • Análisis pictórico: Elección de la obra "Rojo, Amarillo y Azul"', del año 1930 de Piet Mondrian, identificación de las dimensiones, las cuales son: traslación del color, traslación de un eje y longitud.
    • Diseño de prototipos: Construcción de diferentes prototipos en busca de la apropiación del objeto con respecto a la manipulación con ambas manos.
    • Diseño de interfaz: Inicio de la programación de las tres dimensiones, utilizando el software llamado Processing.
    • Sistema eléctrico: Creación esquemática del circuito electrónico utilizando el software Fritzing, diseño del shield junto con su perforación y soldadura.
    • Rediseño: Modificación de las dimensiones, impresión laser definitiva del cuerpo e incorporación del color y la fabricación e impresión 3D de las piezas definitivas que actúan como soporte para los sensores.
    • Exposición: Instancia expositiva del proyecto, en el cual se requirió de un lienzo expositivo, un pantalla y de una superficie para sostener el control.


8. Rasgo Abstracto

  • Título: Búsqueda de la intervención gráfica
  • Descripción: Evolución de la apropiación de diferentes técnicas gráficas, las cuales buscan representar de mejor manera el rasgo gráfico de los distintos elementos elegidos dentro de este proceso de observación, croquis e investigación.
    • Proceso de abstracción gráfica: Comprensión del espacio negativo y el espacio positivo dentro del lienzo, junto con la tensión que se genera en el espacio, por medio de elementos cotidianos.
    • Lo gráfico en obras de Ciudad Abierta: Elección de 3 obras para luego registrar y llegar a la abstracción de cada una de ellas según su rasgo característico.
    • La apropiación del papel: Experimentación con el pop up, rescatando aquellas que reiteran la sutileza lumínica y las que eran geométricamente focalizadas.
  • Datos (2015 - 3 Meses - Elaboración individual - Taller de 3°año)


9. Objeto Efímero

  • Título: Transformación gráfica de las cajetillas de cigarro
  • Descripción: Recopilación de una ardua investigación sobre un objeto, diseñado en base a una permanencia efímera dentro de la sociedad, también llamado Ephemerl Design, que en cierta manera es de relevancia para un grupo de personas, llegando a tal punto de coleccionarlo. El objeto escogido corresponde al envase del cigarro, donde se decidió abarcar las cajetillas de los cigarrillos fábricas y distribuidas en Chile, dentro de dos intervalos de tiempo, el primero abarca desde el año 1860 hasta 1940, y el segundo del 2000 hasta la actualidad, 2015. Se optó por este objeto debido a que existe un evidente cambio gráfico en la composición del diseño del envase, donde se pone en duda si corresponde a la evolución o pérdida del diseño, dirigiendo el motivo de la investigación al estudio de las diferentes variantes que influyeron, dentro de las cuales, se resalta el proceso de creación e impresión, la finalidad del envase y la catalogación de la colección adquirida junto con su correspondiente análisis.
  • Datos (2015 - 3 Meses - Elaboración individual - Taller de 3°año)


10. Elementos portadores

  • Título: Apropiación de los portadores de la imagen
  • Descripción: Esta edición contiene la experiencia vivida durante el Taller de Plástica Contemporánea, la cual abarca la búsqueda de la apropiación de los portadores de imágenes, comenzando con una investigación por medio de fuentes relacionadas, ya sea documentales vistos en el taller o indagación propia, para dar paso a la construcción de distintos trabajos que permitieron analizar la magnitud e importancia de la imagen en nuestra realidad, utilizando como base el método de aprender haciendo ya que nos invita a volver a no saber.
  • Datos (2015 - 3 Meses - Elaboración individual - Taller de 3°año)


11. Formación

  • Título: Talleres Cursados
  • Subtítulo: Sistemas de impresión
    • Xilografía
    • Punta Seca

WIREFRAMES

Son los bocetos donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de un sitio web, en los cuales se define la posición del contenido mediante bloques. Existen diversas herramientas para crear wireframes, pero el que se uso para este proyecto fue; Justinmind.


  • Primera Versión

DISEÑO DE INTERFAZ

  • Primer acercamiento
DATOS
> Tipografía: Cityblueprint(Títulos y subtítulos) y Opens Sans(Texto)
> Columnas: 8 de 92 px de ancho, y 9 separadores de 32px de ancho
> Color: #8CE8C7(Selector), black(Texto) y #FBFCFC (Fondo)


  • Segundo acercamiento


  • Final

DIAGRAMACIÓN CON BLOQUES DE DIV

  • 1° versión


DESARROLLO CONSTRUCTIVO

Se opto por diseñar todo el portafolio web basado en escala de grises, en donde solo el color[1] aparecería al momento de realizar una acción[2], y este corresponde al color #1BCDBB. La foto principal del proyecto o investigación estarían también en colores. Se decidió trabajar el sitio web en Español con la tipografía Dosis para los títulos y subtitulo, y para el texto la tipografía Opens Sans[3].

Inicio

Después de varias versiones de inicio opte por ocupar como fondo un croquis en acuarela realizado por mi durante el Taller de 2°año. En donde este permanecería fijo y el contenido fuera moviéndose por medio del scroll vertical.

En la parte superior se encuentra el menú horizontal centrado [4], para luego continuar con el centro de atención que correspondería a mi nombre y oficio, finalizo con un listado de contacto; para el cual utilizo de iconos[5] y texto.

Inicio de Proyectos

Esta página contiene las imágenes de los proyectos, junto con su respectivo nombre y años de creación. Estas al momento de estar inactivas están en escalas de grises pero al momento de deslizar el mouse sobre ellas estas comienzan paulatinamente a cambiar por colores junto con el texto que lo acompaña.[6]

Proyectos

Contiene el título, una imagen grande y a color con un efecto visual dada por el scroll, para continuar una lectura breve de la descripción del proyecto, después viene un listado de los datos más relevantes junto con una imagen o vídeo dependiendo del proyecto, para terminar al listado de los pasos constructivos, dentro de los cuales cada paso tiene una breve descripción y un galería de tres imágenes.

Para crear el efecto de la imagen utilice la propiedad background-attachment:fixed. Esta controla si la imagen de fondo se mueve o permanece fija cuando se hace scroll en la ventana del navegador [7].

El listado de datos, se realizo el mismo mecanismo para construir el listado de contacto, pero los pasos constructivos se utilizo el código recogido de un sitio[8], al cual se fue modificando, ya sea cambiando, eliminando o incorporando elementos según estimaba conveniente para mostrar el contenido escogido.

Investigaciones

En este caso se utilizan los mismo elementos para mostrar el contenido, solo que aquí se utilizo tan solo de una visualización de lo realizado por medio de issuu, que permite ver las ediciones digitales.

Formación

El elemento nuevo que aparece aquí corresponde a la galería que permite ver más grande la imagen seleccionada, cuya galería se encuentra dentro de un listado/acordeón. Esto se pudo llevar a cabo por medio de la visualización de un video explicativo[9]

REFERENCIAS