Portafolio Web : Idar

De Casiopea



TítuloProceso Portafolio Web: Idar González
Tipo de ProyectoProyecto de Taller
Palabras Claveportafolio, web, diseño gráfico, idar gonzález
Período2013-2013
AsignaturaTaller de Diseño Gráfico 7ª Etapa
Del Curso4º DG 2013
CarrerasDiseño Gráfico
Alumno(s)Idar González
ProfesorKatherine Exss


a. Fundamento creativo del sitio

Una nueva etapa del taller consiste en pensar y diseñar un portafolio digital, donde cada uno es libre de definir la línea visual y de contenidos que cada portafolio tendrá. A continuación se disponen el desarrollo del portafolio.


b. Mapa de navegación + Wireframes de Portafolio Digital

El concepto fundamental del portafolio es Archivo:Mapas de navegación + Wireframes - Portafolio 1.pdf


c. Navegación + Wireframes + Interfaz I

Archivo:Idar - Mapas, Wireframes, Interfaz - Portafolio 2.pdf

Introducción a HTML

Se deja de lado el diseño en FireWorks ya teniendo establecido el contenido, el concepto y el diseño visual. Se comienza a indagar en cómo se construye un sitio con diversas ayudas y tutoriales:


Tutorial CodeCademy: [1]

Etiquetas HTML: [2]

Nuevas etiquetas HMTL5: [3]

Efectos Hover: [4]

Efectos CSS: [5]

[6]

Los archivos HTML y CSS, junto con imágenes, y elementos como el favicon e íconos de redes sociales, están alojados en la carpeta pública de Dropbox. Así funcionar como un servidor, similar a un sitio web normal pero sin pagar dominio.


d. Interfaz 2

Archivo:Interfaz 2.pdf Se cambia la interfaz, los colores son re-pensados para dar un mayor énfasis en la navegación. También se incorpora la visualización de elemtos a través de Lightbox. Todos estos cambios vienen tras encontrar nuevas herramientas encontradas y ver la flexibilidad de diseño


Enlace

[7]


e. Portafolio Digital

Elmentos Javascript son refinados, como Carousel Wowslider en el home: [8], se re-ajustan los tamaños de las miniaturas porque el sitio parecía contener sólo banners y no elementos cliqueables. El menú lateral finalmente pasa a ser un menú despegable, como en las propuestas iniciales.

Exisitía un margen entre la franja donde está ubicado el nombre/home. Ese margen se saca. El footer ubicado al costado con los contactos está anclado al "bottom", por lo que estará relativo al tamaño de la pantalla.

Se ajustan detalles tipográficos, como márgenes y tamaños. Se "limpian" códigos de Html y se ajustan los DIV. Además se piensa cada elemento en ser rápido de descargar, es decir se disminuyen los dpi y el fondo es ajustado de 400x400 a 100x100 y con transparencia a un gris de fondo.

https://dl.dropboxusercontent.com/u/9815315/Portafolio%20digital/index.html