Título	Creación de Página Web para Portafolio
Tipo de Proyecto	Proyecto de Taller
Período	2011-2011
Asignatura	Taller de Diseño Gráfico 7ª Etapa,
Del Curso	4º DG 2011,
Alumno(s)	Jaime Pérez Moena
Profesor	Herbert 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.

Primer Bosquejo Página de Inicio
Galerías de Imágenes
Previsualización de una Imagen
Descripción de la Obra

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

Inicio
Estudio Pictórico
Estudio Pictórico - Imagen
Estudio Pictórico - Obra
Estudio Pictórico - Obra - Galería
Estudio Pictórico - Obra - Galería - Imagen
Perfil

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

Archivo:Primera Aproximación de Logo JPM 001.jpg

Primer Logotipo Ji

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.