Diferencia entre revisiones de «Portafolio Web / Paulina Buvinic»
Sin resumen de edición |
|||
(No se muestran 17 ediciones intermedias del mismo usuario) | |||
Línea 18: | Línea 18: | ||
===Mapa de Navegación=== | ===Mapa de Navegación=== | ||
[[Archivo:I Mapa de Navegación Portafolio.jpg|700px]] | [[Archivo:I Mapa de Navegación Portafolio.jpg|700px]] | ||
===Wireframe=== | ===Wireframe=== | ||
Línea 23: | Línea 24: | ||
<gallery> | <gallery> | ||
Image:WireFrame. 1 Home.png|Home "Paulina Buvinic / Diseño Gráfico" | Image:WireFrame. 1 Home.png|Home "Paulina Buvinic / Diseño Gráfico" | ||
Image:WireFrame. 2 Proyectos.png|Selección | Image:WireFrame. 2 Proyectos.png|Selección categoría "Proyectos" | ||
Image:WireFrame. 3 Proyecto.png|Contenido | Image:WireFrame. 3 Proyecto.png|Contenido subcategoría "Serie edición en cubos" | ||
Image:WireFrame. 4 Perfil.png|Página de Perfil, Información del autor | Image:WireFrame. 4 Perfil.png|Página de Perfil, Información del autor | ||
</gallery> | </gallery> | ||
===Diseño de Interfaz=== | ===Diseño de Interfaz=== | ||
====Propuesta I==== | |||
Se quiere trabajar bajo un diseño minimalista, en donde lo más importante sean las imágenes, ya que se considera lo relevante para un diseñador. | |||
Así, se sigue el ejemplo de una barra lateral fija, la cual sirva como menu navegador, para facilitarle al usuario la navegación dentro del sitio. | |||
<gallery> | <gallery> | ||
Image:D.I. 1 Home.png|Home "Paulina Buvinic / Diseño Gráfico" | Image:D.I. 1 Home.png|Home "Paulina Buvinic / Diseño Gráfico" | ||
Image:D.I. 2 Proyectos.png|Selección Categoría "Proyectos" | Image:D.I. 2 Proyectos.png|Selección Categoría "Proyectos" | ||
Image:D.I. 3 Proyecto.png|Contenido | Image:D.I. 3 Proyecto.png|Contenido sub-categoría "Serie edición en cubos" | ||
Image:D.I. 3 Proyecto Vista Superior.png|Ejemplo de scroll subcategoría | |||
Image:D.I. 3 Proyecto Vista Inferior.png|Ejemplo de scroll subcategoría | |||
Image:D.I. 4 Perfil.png|Página de Perfil, Información del autor | Image:D.I. 4 Perfil.png|Página de Perfil, Información del autor | ||
</gallery> | </gallery> | ||
====Propuesta II==== | |||
Se mantiene la proposición de la barra lateral, pero se cambia el sentido del scroll de los contenidos. De esta forma, se considera que se saca un mayor provecho en el uso de la barra lateral, ya que diagrama la página entera de forma horizontal, ya que los contenidos se entrelazan con ella debido a su transparencia. | |||
<gallery> | |||
Image:1. Home.png|Home "Paulina Buvinic / Diseño Gráfico" | |||
Image:2. Home (hover categoría).png|Hover categoría "Proyectos" | |||
Image:3. Categoría.png|Contenido categoría "Proyectos" | |||
Image:4. Categoría (hover item).png|Hover subcategoría "Cubos luminosos" | |||
Image:5. Proyecto.png|Contenido subcategoría "Cubos luminosos" | |||
Image:5. Proyecto scroll final.png|Subcategoría "Cubos luminosos" scroll final | |||
Image: 5. Proyecto scroll final (hover).png|Hover Subcategoría "Cubos luminosos" scroll final | |||
Image:6.About.png|Página de Perfil, Información del autor | |||
</gallery> | |||
===HTML y CSS=== | |||
Primer acercamiento: http://dl.dropbox.com/u/50990529/pbuvinic.html | |||
'''Propuesta Final:''' https://dl.dropboxusercontent.com/u/50990529/Portafolio/index.html | |||
===Sitios de referencia=== | |||
Debido a que es el primer acercamiento que se tiene con HTML, se buscaron distintos sitios que sirvieron de inspiración y de referencia para poder realizar el portafolio. | |||
http://www.heredesign.co.uk/ | |||
http://alexandermunk.com/index.php?/news/kontakt/ | |||
http://www.ignaciomacri.com/logos/heads.html |
Revisión actual - 03:56 26 abr 2013
Título | Portafolio Web |
---|---|
Tipo de Proyecto | Proyecto de Curso |
Período | 2013-2013 |
Asignatura | Taller de Diseño Gráfico 7ª Etapa, |
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) | Paulina Buvinic |
Profesor | Katherine Exss |
Creación de un Portafolio Web
Luego de haber estudiado y llevado a la práctica los conceptos teóricos de Arquitectura de Información y Wayfinding, se inicia un proyecto personal en donde se busca la realización de un Sitio Web con el fin de presentar el portafolio de cada alumno.
La selección de contenidos para el sitio nace de la idea de no tener que presentar la totalidad de los trabajos realizados, sino que se lleva a cabo una selección. Junto con esto, se busca destacar los proyectos en sí, utilizando fotografías de gran tamaño y poco texto explicativo, con el fin de no obligar al usuario a leer grandes fragmentos de texto, ya que la propia imagen puede llamar su atención.
Archivo:I Mapa de Navegación Portafolio.jpg
Wireframe
Diseño de Interfaz
Propuesta I
Se quiere trabajar bajo un diseño minimalista, en donde lo más importante sean las imágenes, ya que se considera lo relevante para un diseñador. Así, se sigue el ejemplo de una barra lateral fija, la cual sirva como menu navegador, para facilitarle al usuario la navegación dentro del sitio.
Propuesta II
Se mantiene la proposición de la barra lateral, pero se cambia el sentido del scroll de los contenidos. De esta forma, se considera que se saca un mayor provecho en el uso de la barra lateral, ya que diagrama la página entera de forma horizontal, ya que los contenidos se entrelazan con ella debido a su transparencia.
- 2. Home (hover categoría).png
Hover categoría "Proyectos"
- 3. Categoría.png
Contenido categoría "Proyectos"
- 4. Categoría (hover item).png
Hover subcategoría "Cubos luminosos"
HTML y CSS
Primer acercamiento: http://dl.dropbox.com/u/50990529/pbuvinic.html
Propuesta Final: https://dl.dropboxusercontent.com/u/50990529/Portafolio/index.html
Sitios de referencia
Debido a que es el primer acercamiento que se tiene con HTML, se buscaron distintos sitios que sirvieron de inspiración y de referencia para poder realizar el portafolio.