Portafolio Web : Idar
| Título | Proceso Portafolio Web: Idar González |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | portafolio, web, diseño gráfico, idar gonzález |
| 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) | Idar González |
| Profesor | Katherine 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.
El concepto fundamental del portafolio es Archivo:Mapas de navegación + Wireframes - Portafolio 1.pdf
Archivo:Idar - Mapas, Wireframes, Interfaz - Portafolio 2.pdf
Interfaz HOME
Interfaz LISTA PROYECTOS
Interfaz PROYECTOS
Interfaz ESTUDIOS
Interfaz LISTA ILUSTRACIÓN TRADICIONAL
Interfaz ILUSTRACIÓN TRADICIONAL
Interfaz LISTA ILUSTRACIÓN DIGITAL
Interfaz ILUSTRACIÓN DIGITAL
Interfaz LISTA CROQUIS
Interfaz CROQUIS
Interfaz ACERCA DE
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]
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
Interfaz HOME
Interfaz LISTA PROYECTOS
Interfaz DE UN PROYECTO
Interfaz ESTUDIOS
Interfaz ACERCA DE
Enlace
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.
Interfaz HOME
Interfaz DE UN PROYECTO
Interfaz LISTAS DE ILUSTRACIÓN
Interfaz ELEMENTO EN LIGHTBOX
Interfaz ACERCA DE
https://dl.dropboxusercontent.com/u/9815315/Portafolio%20digital/index.html
