Karen Carrera: Portafolio
| Título | Portafolio |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Período | 2011-2011 |
| Del Curso | 4º DG 2011, |
| 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) | Karen Carrera |
| Profesor | Herbert Spencer |
| URL | http://dl.dropbox.com/u/8099312/Portafolio/14.04/index.html |
Propuestas de wireframes
El proyecto nace de la idea del desarrollo de un Sitio Web, el cual será un Portafolio personal, donde cada uno tiene espacio para exponer sus trabajos e investigaciones correspondientes a su área. Se inicia el proyecto, con la creación un Mapa de navegación y Wireframes, como primera aproximación al desarrollo del Portafolio web.
El mapa de navegación, se desarrolla en base las consideraciones principales a mostrar, para luego establecer un menú que desarrolla la visualización de contenidos.
Menú:
- Sobre mi: CV y Links. En el cv se muestra; información personal, educación, experiencia académica y concursos. En Links se muestran aquellas direcciones en las que estoy involucradas.
- Portafolio: Diseño gráfico, Dibujos/Reproducciones y Fotografía. En Diseño gráfico se muestran proyectos de Imagen corporativa, Afiches, Infografías, Ediciones, Tarjetas de presentación y Trabajos en papel. Luego en Dibujos/Reproducciones se muestran trabajos sobre William Tunner, Marc Chagall, Leonardo Da Vinci y otros.
- Estudios: Muestra la metodología de estudio en diferentes proyectos académicos.
Estáticos:
- Inicio
- Búsqueda
- Contacto
- Redes Sociales: Twitter, Flickr, Facebook.
Wireframes
El análisis estructural de las grafías de la Cantera, son un punto de partida para la toma de decisiones respecto a los espacios dentro de la pantalla
Para ello, tomo el Primer Caso de mi análisis estructural del dibujo, y llego a una simplificación respecto a una estructura válida para ser utilizada en el Sitio Web.
- Kcarrera Simplificación.jpg
Navegación del Portafolio
Inicio
Inicio > Sobre mi > CV
Inicio > Sobre mi > Links
Inicio > Portafolio > Diseño gráfico > Imagen corporativa
Inicio > Estudios
Definición de Wireframes, primeros códigos
Respecto al Mapa de Navegación, se tiende a simplificar filtrando conceptos y tratando de clarificar la jerarquía.
Se realiza un Mapa en Cmap, donde se definen tres niveles, allí cada uno tiene un color; el primer nivel es celeste, y son los conceptos que siempre serán visibles dentro del sitio web. El segundo nivel son los verdes, y éstos serán visibles en una barra lateral superior, cuando específicamente se vaya a "Sobre mi" o "Portafolio". El tercer nivel, son los conceptos en naranja, y éstos estarán en una columna, los cuales administrarán las imágenes dentro de "Portafolio".
Wireframes
Utilización Módulo de Flickr, para la visualización de Fotografías.
Inicio
Inicio> Sobre mi> CV
Inicio> Sobre mi> Links
Inicio> Portafolio> Diseño Gráfico> Imagen coporativa
Inicio> Portafolio> Plástica> Reproducciones
Inicio> Portafolio> Fotografía> Digital
Inicio> Portafolio> Investigación
Visualizaciones
Chrome - Inicio
Chrome - Fotografía (módulo flickr)
Internet Explore - Inicio
Multitouch, Flash Player
Nuevos Wireframes
Wireframe 01
Wireframe 02
Wireframes 03
Finales
Luego de un replanteamiento respecto a la estructura sostenida en éste tiempo, llego a un simplificación en los conceptos de navegación en el portafolio.
