Jaime Pérez Moena: Creación de Página Web para Portafolio

De Casiopea

Volver a Proyectos de Cuarto Año



TítuloCreación de Página Web para Portafolio
Tipo de ProyectoProyecto de Taller
Período2011-2011
AsignaturaTaller de Diseño Gráfico 7ª Etapa
Del Curso4º DG 2011
Alumno(s)Jaime Pérez Moena
ProfesorHerbert Spencer


Concepción del espacio de la página desde Wireframes

El proyecto a realizar corresponde a la creación de un portafolio personal en un sitio web, con los trabajos realizados hasta el momento. Para ello, se trabaja en una primera idea dada por el estudio anterior realizado que da pie a una estructura en wireframes.

El pensamiento de la página desde el papel

A partir del estudio realizado anteriormente, La configuración del Espacio desde la Reiteración, gano una estructura dada y aplicada a los primeros esquemas de wireframes. Así, desde el dibujo, realizo los primeros esquemas en papel de cómo sería la estructura y organización de mi sitio web, en donde queda un marco blanco superior e inferior, y en el segmento central se ubica el contenido de la página.

El contenido organizado a partir de Mapas de Navegación

Una vez realizada esta primera instancia de reflexión desde el papel y el lápiz, me doy una estructura para relacionar y organizar los contenidos que mostrará el sitio web.

Link para visualizar el Mapa.

Primeros Prototipos de Páginas Tipo en Wireframes

En los Wireframes se puede ver que existe un menú permanente en el sitio, que siempre aparece sea cual sea el contenido que se esté viendo. Así también lo hacen en la parte superior los iconos de redes sociales y de la página de inicio, y en la parte inferior la barra destinada a "contacto".

--Jaime Perez Moena 21:14 30 mar 2011 (CLST)

Cambio en la Estructura del Wireframe, Segunda Aproximación

En la búsqueda de dar un nuevo orden y reorganizar la estructura del sitio web para el portafolio, aparece esta segunda etapa. Se busca diseñar el png pensando en la lectura, en la calidad gráfica y tipográfica para que el contenido aparezca de una manera clara y limpia.

El Reparo desde la estructura anterior

Si bien se mantiene el menú como contenido fijo a la izquierda, en una segunda instancia, se repara en las siguientes correcciones:

  • Se simplifican los títulos, volviéndolos una etiqueta al aparecer en sólo una palabra.
  • El contenido orgánico ocupa una superficie mayor en la página, respecto a los wireframes anteriores.
  • Se piensa la grilla en base a límites de proporciones (el segmento del menú va desde el 10% al 20% del ancho de los 1024 píxeles).
  • El máximo número de imágenes que se puede ver simultáneamente se reduce a cuatro.
  • Ver Concepción de la Idea del nuevo Mapa de Navegación

Wireframe de Alta Intensidad

Se trabaja en una imagen icónica para fortalecer la identidad del sitio. Utilizando los colores negro y el rojo #DE4317, la imagen intenta establecer un juego para que aparezca la letra "i" desde el negro y la "j" desde el blanco que dejan las dos formas cromáticas. De ahí, se define una leve paleta de colores para utilizar, cuidando la intensidad y calidad gráfica del contenido que se pretende presentar y el fondo del sitio web.

Sumado a esto, cada contenido dentro del modelo del portafolio digital busca tener su propio carácter.

--Jaime Perez Moena 22:22 3 abr 2011 (CLST)

Primera Aproximación del Portafolio desde el Código

Wireframes

Capturas de Pantalla

Enlaces

--Jaime Perez Moena 00:37 11 abr 2011 (CLST)

Portafolio

Enlaces al Portafolio


--Jaime Perez Moena 02:55 14 abr 2011 (CLST)