Título	Portafolio: Karol Barrera
Tipo de Proyecto	Proyecto de Curso
Palabras Clave	portafolio, web
Período	2014-2014
Asignatura	Construcción de Diseño Gráfico 4,
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)	Karol Barrera
Profesor	Katherine Exss
URL	https://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:

Sobre mí
Trabajos:

Fotografía análoga
Mandalas tejidos
Grabados
Óleo sbre lienzo
Lápices de colores
Dibujos

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.

Página de inicio-01.jpg

Home
Menú
Selección

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.

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.

Í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.

ícono sección dibujos
ícono sección grabados
ícono sección fotografía
ícono sección lápices de colores
ícono sección mandalas tejidos
ícono sección óleo

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

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; }

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)

Portafolio: Karol Barrera