Diferencia entre revisiones de «Portafolio: Karol Barrera»

De Casiopea
Sin resumen de edición
 
(No se muestran 39 ediciones intermedias de otro usuario)
Línea 2: Línea 2:
|Título=Portafolio: Karol Barrera
|Título=Portafolio: Karol Barrera
|Tipo de Proyecto=Proyecto de Curso
|Tipo de Proyecto=Proyecto de Curso
|Palabras Clave=portafolio web
|Palabras Clave=portafolio, web
|Año de Inicio=2014
|Año de Inicio=2014
|Año de Término=2014
|Año de Término=2014
Línea 8: Línea 8:
|Asignaturas Relacionadas=Construcción de Diseño Gráfico 4,
|Asignaturas Relacionadas=Construcción de Diseño Gráfico 4,
|Cursos Relacionados=Construcción 4º DG 2014
|Cursos Relacionados=Construcción 4º DG 2014
|Profesor=Katherine Exss,  
|Profesor=Katherine Exss,
|Alumnos=Karol Barrera,
|Alumnos=Karol Barrera,
|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.


El portafolio debe retratar lo que yo soy, entonces para saber como quiero que sea, debo antes preguntarme ¿cómo quiero que me vean? y junto a eso ¿que debo mostrar?


=Primer encargo=
==Mapa de contenidos==
==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
[[Archivo:Mapa de navegacion-04.jpg|300px]]
[[Archivo:Mapa de navegacion-04.jpg|300px]]


==Wireframes==
==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.
<gallery>
<gallery>
Image:Página de inicio-01.jpg|Home
Image:Página de inicio-01.jpg|Home
Línea 28: Línea 43:


=Segundo encargo=
=Segundo encargo=
==Mapa de contenidos==
===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.
[[Archivo:Mapa de contenidos Karol.jpg|900px]]
[[Archivo:Mapa de contenidos Karol.jpg|900px]]
=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.
[[Archivo:ComportamientoHOME-02.jpg|thumb|300 px|center]]
===Í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.
<gallery>
Image:Gelicon.png|ícono sección dibujos
Image:Gubiaicon.png|ícono sección grabados
Image:Fotografiaicon.png|ícono sección fotografía
Image:Lapizcoloricon.png|ícono sección lápices de colores
Image:Lanaicon.png|ícono sección mandalas tejidos
Image:Pincelicon.png|ícono sección óleo
</gallery>
===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           
[[Archivo:Colorespagina.jpg|thumb|600 px|center]]
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:'''
<nowiki><h1 class="manuscrita">KAROL</h1></nowiki>
'''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;
}
[[Archivo:Tipografiapag.jpg|300px]]
[[Archivo:Open-Sans1.png|300px]]
===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)
[[Archivo:PORTAFOLIOKAROL-01.jpg|thumb|300 px|center]]

Revisión actual - 11:00 26 ago 2014

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"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
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