Portafolio Mauro Villena

Título	Portafolio Mauro Villena
Tipo de Proyecto	Proyecto de Curso
Palabras Clave	portafolio digital
Período	2014-2014
Asignatura	Construcción 4° DG 2014
Del Curso	Construcción 4º DG 2014
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)	Mauro Villena
Profesor	Katherine Exss
URL	http://dl.dropboxusercontent.com/u/86315181/HTML/index.html

Contenidos portafolio digital

• Proyectos
  • Editorial
    • Colección Travesías
  • Branding
    • Mauro Villano Tattoo
  • Visualización de datos
    • Infografía
      • Teoría del color
      • Acceso a la educación
      • Desastre de Freirina
      • Roles familiares
  • Académico
    • Ensayo: "Diseño de información y visualización de datos, necesidades metodológicas para el Diseño Gráfico actual"
  • Ilustración
    • Serie Costa Ilustrada
  • Fotografía
  • Web
• Perfil
• Contacto

Mapa de Navegación

Grilla

El sitio se estructura en base a una grilla de doce columnas equidistantes que se ajustan al ancho de su contenedor.

Wireframes

Inicio

El primer momento del sitio consta de tres elementos:

• Header: Categorías generales.
• Sidebar: Categorías de proyecto. (Utiliza un ancho de dos columnas de la grilla)
• Galería: Muestra los proyectos más recientes, sin considerar a qué categoría corresponden. (Utiliza las restantes diez columnas de la grilla, donde cada imagen tiene el ancho de cinco de estas)

Proyectos

Cada proyecto se muestra como una imagen que ocupa un ancho de cinco columnas de la grilla. Esta imagen a su vez contiene un título, el cual al posar el cursor sobre la imagen se amplía mostrando un pequeño abstract del proyecto, o un fragmento del contenido interior. Una vez se selecciona alguna categoría de proyecto, el sitio muestra sólo las imágenes pertenecientes a tal categoría, manteniendo el sidebar y el header.

Páginas interiores

Al seleccionar un proyecto, la información de este se amplía y se apoya con imágenes mostradas a través de un slideshow (de ancho diez columnas) y notas al pie que explican el proyecto. Se mantienen el header y el sidebar.

Perfil

En esta sección, el sidebar de categorías de proyecto es reemplazado por un avatar y dos botones de redes sociales, que corresponden a LinkedIn y Twitter, todo esto centrado en el espacio de ancho dos columnas, y reducido a un 80% de estas.

El header se mantiene.

Aparecen dos columnas de texto, la primera muestra una presentación personal en prosa, y la segunda un listado con habilidades profesionales en una lista desordenada. (Cada columna tiene un ancho de cinco columnas de la grilla)

Contacto

Se mantienen el header, el avatar y los botones de redes sociales. La primera columna de texto es reemplazada por un formulario de contacto vía email, y un texto explicativo. La segunda columna de texto desaparece.

Diseño de interfaz

Páginas tipo

Inicio / Proyectos

Páginas interiores Proyecto

Perfil

Contacto