Portafolio Mauro Villena

De Casiopea
TítuloPortafolio Mauro Villena
Tipo de ProyectoProyecto de Curso
Palabras Claveportafolio digital
Período2014-2014
AsignaturaConstrucción 4° DG 2014
Del CursoConstrucción 4º DG 2014
CarrerasDiseño Gráfico
Alumno(s)Mauro Villena
ProfesorKatherine Exss
URLhttp://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

Maurovillena1407201401.jpg

Grilla

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

Maurovillena1507201405.jpg

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)

Maurovillena1507201401.jpg

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.


Maurovillena1507201401.jpg


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.


Maurovillena1507201403.jpg

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)


Maurovillena1507201404.jpg

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.


Maurovillena1507201402.jpg

Diseño de interfaz

Páginas tipo

Inicio / Proyectos

Maurovillena21022014.jpg

Páginas interiores Proyecto

Maurovillena2102201402.jpg


Perfil

Maurovillena2102201401.jpg

Contacto

Maurovillena2102201403.jpg