Portafolio: Karol Barrera

De Casiopea


TítuloPortafolio: Karol Barrera
Tipo de ProyectoProyecto de Curso
Palabras Claveportafolio, web
Período2014-2014
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoConstrucción 4º DG 2014
CarrerasDiseño Gráfico
Alumno(s)Karol Barrera
ProfesorKatherine Exss
URLhttps://dl.dropboxusercontent.com/u/87184774/index.html

Contenido

El portafolio debe retratar lo que yo soy, a través de lo que he hecho, entonces para saber como quiero que sea, debo antes preguntarme ¿cómo quiero que me vean? y junto a eso ¿que debo mostrar? Es por esto que decidí que quería mostrar un estilo mucho más cercano e informal y por lo tanto el diseño de interfaz está pensado para cumplir estas expectativas.


Mapa de contenidos

Primer mapa

Está compuesto por:

  1. Sobre mí
  2. Trabajos:
  • Fotografía análoga
  • Mandalas tejidos
  • Grabados
  • Óleo sbre lienzo
  • Lápices de colores
  • Dibujos

Mapa de navegacion-04.jpg

Wireframes

La idea principal del portafolio es darle un protagonismo a la página de inicio, en la cual se podrán acceder a todas las secciones.

Segundo encargo

Segundo mapa

En la home se tiene dos opciones; leer una pequeña reseña sobre mí, o acceder directamente a los trabajos que he realizado. Cada sección (Grabado, Lápices de colores, Dibujos, Oleo sobre lienzo, Fotografía análoga, y Mandalas tejidos) cuenta con una descripción introductoria y una galería de imágenes, las cuales se pueden agrandar al hacerle un click.

Todo el contenido expuesto en el sitio tiene la misma jerarquía, y es por esto que se puede acceder de la home directamente a cualquiera de ellos, a excepción del contacto que irá en el footer.

Mapa de contenidos Karol.jpg

Diseño de interfaz

Home

Como el contenido de la página se trata sólo de técnicas realizadas a mano, el diseño de interfaz debía estar muy ligado a este concepto, es por esto que decidí ponerle como imagen de fondo un papel tipo craf, ya que yo dibujo en croqueras de éste color, por lo tanto sentía que pertenecía más a mi estilo, y sería como si el sitio web estuviese dibujado por mi.

Es así como en la página de inicio se muestra una ilustración, para reemplazar la fotografía. Ésta ilustración contiene mis características más significativas, que son a mi parecer el pelo, los lentes y las cejas. Con sólo dibujar estos tres elementos se puede tener una idea de mí.

El contenido "sobre mí" quise que estuviera oculta, y no fuese una obligación para el usuario tener que leerla, sino una opción para quienes realmente estuviesen interesados. El mejor complemento para este texto es mi nombre y la ilustración, es por esto que debe ir al comienzo.

ComportamientoHOME-02.jpg

Íconos menú

Los íconos del menú simbolizan cada sección a través de la herramienta que se utilizó para crearlos. Fueron todos dibujados a mano y luego vectorizados en illustrator.

Colores

Para diferenciar cada sección de la página, se mantiene la misma imagen de fondo, pero con distintos colores, y distinta opacidad. Para esto se escribieron en CSS utilizando el codigo rgba, donde a es la opacidad (desde .1 a .9)


    Dibujos  Fotografia   Grabados  Lapices   Mandalas  óleo            
Colorespagina.jpg

RGBA:

  • Dibujos(30,30,30,.4)
  • Fotografía(229,207,74,.3)
  • Grabados(81,48,107,.3)
  • Lápices(39,60,103,.6)
  • Mandalas(175,109,49,.3)
  • Óleo(32,147,28,.3)


Tipografía

Se utilizaron dos tipografías, Amatic SC Regular para títulos, y Open Sans para textos y bajadas.

Open Sans es una tipografía que se encuentra en google fonts, por lo tanto sólo basta llamarla desde el html y definirla en CSS, sin embargo Amatic es una tipografía especial tipo manuscrita que debí bajar, por lo tanto cree una clase en el html para los títulos y la definí en CSS de esta manera:

HTML: <h1 class="manuscrita">KAROL</h1>

CSS: @font-face{ font-family: fuente_1; font-style: normal; font-weight: normal; src:url(AmaticSC-Regular.ttf); }

h1.manuscrita{ font-family: fuente_1; font-size: 150px; display: inline-block; }

Tipografiapag.jpg Open-Sans1.png

Vista página completa

maqueta interfaz

El sitio web se compone de distintas secciones, sin embargo éstas no enlazan hacia otras páginas, sino que a través de un ancla en donde el contenido se ve deslpegado en una gran extensión hacia abajo (a través del scroll)

PORTAFOLIOKAROL-01.jpg