Construcción 2014
El portafolio digital tiene como por objeto representar y promocionar las cualidades y capacidades de un diseñador, por ello debe mostrar de la mejor manera los trabajos realizados por este.
Propuesta I
El portafolio digital se constituirá en base a tres aspectos de diseño realizados por Chris. Fattori. los cuales son:
- Edición Editorial: Esta sección se dedica al diseño de cuerpos gráficos cuyo fin es que sean impresos.
- Edición Digital: Aquí se trata de trabajos elaborados exclusivamente para medios digitales o con programas digitales.
- Ilustración: Sección en la cual se muestran trabajos dedicados al dibujos o trabajos vinculados con esta expresión gráfica.
En base a esto se ha realizado el siguiente mapa de navegación:
Archivos
EDITORIAL
- Láminas: Línea de Tiempo - Cronograma - Objetual
- Cuadernos:Pascua en NY - Ida donde Larrea - La voz Latina
- Comics:Fredi -Le Plague
DIGITAL
- Icono:Icone
- Infografía:60 años e[ad]
- Logos:T.e.o.c. - Matías Francino - Sumpall
ILUSTRACIÓN
- Tradicional:Presentación
- Digital:Tiberius - Ismael - Corpo Odioso
- Carátulas:Hijos del Desastre - Metastasis - Pesadilla
Wireframes
En base al mapa de navegación anterior se realizan los primeros wireframes del portafolio digital. La home se compone de tres secciones:
- Head: Esta sección se ilustra con una imagen de fondo, un logo y un botón de la sección de autor.
- Body: En esta sección se encuentra el menú, el cual lleva los títulos Editorial, Digital e Ilustración, todos ellos ilustrados con una imagen que muestra un detalle de los temas mencionados.
- Footer: Aquí se mencionaría permanentemente el correo de contacto.
HOME
Las secciones de los trabajos se presentan visualizadas en imágenes.
Las imágenes cambiarían automáticamente
Se despliega un menú que profundiza cada sección
Al ingresar a una sección del sitio se presentarán los títulos de forma similar al home, con una imagen que anticipa lo que se verá.
Al hacer click en un trabajo la pagina muestra una sección de texto al lado izquierdo que expida de qué trata el trabajo realizado, ilustrado con una serie de 5 imágenes, las cuales se pueden apreciar de mejor manera clickeándolas desplegando un visualizador.
presentación de archivos dentro de una sección
La imagen posee una sección que la describe
Scroll para leer en caso de haber mas texto
Visualizador para agrandar la imagen
El mapa del sitio se reestructura componiéndose de todas las secciones vistas anteriormente. Comprende además otras secciones no contempladas en la proposición previa.
Diseño Visual
Luego de la corrección en el mapa del sitio, y tomando en cuenta los wireframes realizados, se procede entonces a realizar el diseño visual del portafolio. En esta sección se corrige la propuesta de wireframes.
Colores
La paleta de colores se compone de una limitada selección: Negro-Gris Blanco.
Tipografía
La tipografía se compone de una selección más variada, jugando un rol mas importante.
Títulos principal: Kunster Sclip - regular - 45px - negro
menú: Myriad Pro - Mayúsculas - Light Condensed - 20px - blanco
sección menú: Myriad Pro - Light Condensed - 20px - blanco
cabecera: Kunster Sclip - regular - 45px - negro
texto presentación: Baskerville Old Face - regular - bold - italic -18px -negro
título: Baskerville Old Face - Mayúsculas - regular - 24px -negro
subtítulo: Baskerville Old Face - regular - 24px -negro
texto: Baskerville Old Face - regular - 14px -negro
pie de foto: Baskerville Old Face - Italic - regular - 12px -blanco
contacto: Myriad Pro - regular - 15px - blanco
Maquetas visuales
Home
Despliegue menú
Autores
Secciones
Trabajo
Visualización
Propuesta II
Nuevamente se reorganiza el mapa de navegación, enfocándose aun más en nuestras habilidades, lo cual es la ilustración y el dibujo. También como diferencia es la de presentarnos como primera opción.
Wireframes
El sitio se organiza a cambio por uno que sea más fácil de hacer para diseño responsive, por lo cual, de todas formas se exponen todas las secciones en la home, pero el formato de las imágenes cambia.
También se reducen la cantidad de wireframes para facilitar la navegación y el proceso de código.
Se hacen dos distinciones dentro de las secciones:
Ilustración y Digital: estas solo poseen una galería de imágenes, en camnbio dentro de la sección Editorial cada sección posee varias galerías, una por cada trabajo, pues el fundamento de cada obra es más extenso que en las otras secciones.
home: presenta todas las secciones.
sección editorial, posee varias galerias por cada obra.
sección ilustración y digital, posee solo una galería de imágenes de los trabajos.
.png)
Tipografía
La tipografía cambia por una más moderna y sobria, eligiendo para el sitio la DINPro light.
- ALTAS: para los títulos. 30px y 17px. color gris (#666) y blanco.
- Bajas: Texto presentación y contenido. 17px, color gris (#666) y blanco.
Maquetas visuales
Home
Dentro de sección Editorial
Dentro de sección Ilustración
Dentro de sección Logos
.png)
