Portafolio Web: Simón Sandoval

La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

Título	Portafolio Web
Tipo de Proyecto	Proyecto de Taller
Período	2013-2013
Asignatura	Diseño Gráfico,
Del Curso	4º DG 2013,
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)	Simón Sandoval
Profesor	Katherine Exss

Portafolio Web

A continuación se expone el proceso creativo de un Portafolio Web de carácter propio, es decir, en él se expone nuestro quehacer como diseñadores gráficos. Esto conlleva la realización de distintas etapas: [1] Argumento creativo del sitio, [2] Creación de Mapa de Navegación, [3] Diseño de Wireframes, [4] Diseño de Interfaz y [5] Codificación de Html y CSS.

1. Argumento creativo del sitio

El sitio nace desde la perspectiva de mostrar el trabajo realizado en dos áreas: la fotografía y el diseño gráfico, siendo estos los principales distritos del sitio. Junto con esto, se considera esencial la imagen y su tamaño e importancia dentro del sitio.

2. Creación de Mapa de Navegación

Archivo:Mapa de Navegación.jpg

Mapa de Navegación Sitio Web: Simón Sandoval

Archivo:Mapa de Navegación.pdf

3. Diseño de Wireframes

Estos corresponden a la capa objetiva del diseño, aquella que distribuye los espacios y diagrama los contenidos, previamente determinados por el mapa de navegación.

Primera Versión

(1)Home
(2)Home: Seleccionar menú
(3)About me
(4)Seleccionar Photography
(5)Photography
(6)Photography(elegir)
(7)Photography Color
(8)Lightbox Photography
(9)Seleccionar G.Design
(10)G.Design
(11)G.Design(elegir)
(12)G.Design Proyects
(13)G.Design(elegir)
(14)G.Design elegido

Versión Definitiva

(1)Home
2. Wireframe Acerca de mí.png

(2)Acerca de mí
3. Wireframe Fotografía.png

(3)Fotografía
3.1 Wireframe Fotografía Hover.png

(4)Fotografía: Hover
3.2 Wireframe Fotografía Interior 1.png

(5)Fotografía Interior
3.3 Wireframe Fotografía Interior 2.png

(6)Fotografía Sub-interior
4. Wireframe Diseño Gráfico.png

(7)Diseño Gráfico
4.1 Wireframe Diseño Gráfico Hover.png

(8)D.Gráfico: Hover
4.2 Wireframe Diseño Gráfico Interior 1.png

(9)D.Gráfico Interior
4.3 Wireframe Diseño Gráfico Interior 1.A.png

(9)D.Gráfico Sub-interior A
4.4 Wireframe Diseño Gráfico Interior 1.B.png

(9)D.Gráfico Sub-interior B

4. Diseño de Interfaz

Estos corresponden a la capa emocional del diseño, aquella que le otorga los estilos al sitio: en cuanto a tipografía, imágenes, uso de color y/o tonos, entre muchos otros.

Primera Versión

1. Diseño Home.png

(1)Home
1.1 Diseño Home elegir.png

(2)Home, seleccionar menú
2. Diseño About me.png

(3)About me
3.2 Diseño Photography elegir.png

(4)Photography(seleccionar)
3. Diseño Photography.png

(5)Photography
3.1 Diseño Photography(posarse).png

(6)Photography(elegir)
3.3 Diseño Photography Gris.png

(7)Photography Gray
3.4 Diseño Photography Color.png

(8)Photography Color
3.5 Diseño Photography Color posarse.png

(9)P. Color(elegir)
3.6 Diseño Photography Color elegir.png

(10)Lightbox P. Color
4. Diseño Graphic Design elegir.png

(11)G.Design(seleccionar)
4. Diseño Graphic Design.png

(12)G.Design
4. Diseño Graphic Design posarse.png

(13)G.Design(elegir)
4.1 Diseño Graphic Design Draws.png

(14)G.Design Draws
4.2 Diseño Graphic Design Investigation.png

(15)G.Design Investigation
4.3 Diseño Graphic Design Proyect.png

(16)G.Design Proyects
4.4 Diseño Graphic Design Proyect posarse.png

(17)G.Design Proyects(elegir)
4.5 Diseño Graphic Design Proyect elegir.png

(18)G.Design Proyects elegido

Archivo:Presentación Diseño Portafolio Digital.pdf

Versión Definitiva

(1)Home
2. Acerca de mí.png

(2)Acerca de mí
3. Fotografía.png

(3)Fotografía
3.1 Fotografía Hover.png

(4)Fotografía: Hover
3.2 Fotografía Interior 1.png

(5)Fotografía Interior
3.3 Fotografía Interior 2.png

(6)Fotografía Sub-interior
4. Diseño Gráfico.png

(7)D. Gráfico
4.1 Diseño Gráfico Hover.png

(8)D. Gráfico: Hover
4.2 Diseño Gráfico Interior 1.png

(9)D. Gráfico Interior
4.3 Diseño Gráfico Interior 1.A.png

(10)D. Gráfico Sub-interior A
4.4 Diseño Gráfico Interior 1.B.png

(11)D. Gráfico Sub-interior B

5. Codificación de Html y CSS

Luego de finalizada la etapa de Diseño, se deben plasmar todas las pantallas en la web a través de dos plataformas: Html, en el cual se encuentra todo el contenido del sitio (diseñado) y el CSS, que contiene el diseño de ese contenido, es decir, estilos tipográficos, de imagen, botones, entre otros.

Link: https://dl.dropboxusercontent.com/u/37092362/Proyecto%20Portafolio/simonsandoval.html