Título	Propuesta de Diseño de portada para sitio ead
Tipo de Proyecto	Proyecto de Taller
Período	2012-
Asignatura	Construcción de Diseño Gráfico 4,
Del Curso	Taller de Construcción DG 4 - 2012,
Alumno(s)	Samira Bajbuj
Profesor	Herbert Spencer
URL	https://github.com/samirabajbuj/Propuesta-de-sitio-para-ead

Propuesta de Diseño de portada para sitio ead

Abstract

El material de estudio y trabajo durante este taller fue el diseño de interfaces y diseño web. En primera instancia estudiamos el diseño de interfaces en instancias cotidianas, para luego llevarlo al ámbito digital. Se definió como proyecto trabajar una propuesta personal de portada para el sitio web de la e[ad].

Antecedentes

Re-diseño de una interfaz casera

El estudio de una interfaz cotidiana y casera nos permitió adentrarnos al estudio del diseño de interfaces desde lo más básico.En esta tarea se logró identificar los problemas y determinar posibles soluciones para re-diseñarla de manera óptima.

Re-diseño de una interfaz del hogar

Gui Pack

Se diseñó como primer acercamiento al proyecto un conjunto de interfaces, se definen cuáles son los elementos de interfaz en HTML. Primera propuesta de diseño de un "Gui Pack" como archivo fuente de diseño.

Primera propuesta; Gui Pack

En esta primera propuesta la idea era diseñar elementos sobrios y elegantes, se mantiene esencialmente la norma gráfica del sitio actual en cuánto al uso del color rojo, blanco y gris, variando si en sus tonalidades dándole un aire más claro a la portada del sitio.

Caso de Estudio "The Goldilocks Approch"

Para comprender de mejor manera cómo se trabaja la estructura de la página, esencialmente sobre grilla, resoluciones y "responsive web design", se realizó un estudio sobre "The Goldilocks Approch".

The Goldilocks Approach

Proyecto Diseño de Portada sitio ead

Diseño fuente en Fireworks

Se diseñan propuestas de diseño para la portada en Fireworks, definiendo elementos de la página como: Grilla, Colores, Menú de navegación, etc..

En esta propuesta trabajé sobre la base del diseño de algunas interfaces, principalmente en menú de navegación, y en la definición de relaciones y estructura, utilizando una grilla de 16 columnas como base.

Propuesta gráfica

Códigos HTML y Cascadas de estilo

Según lenguaje gráfico anterior, se trabajan nuevas modificaciones y nos adentramos al lenguaje HTML. Definimos código HTML y trabajamos con cascadas de estilo, basado en los estilos que hemos propuesto anteriormente.

Primeras Visualizaciones

Se define primera idea de la cabecera del sitio, además de tres bloques de contenido noticias.

Se define primera idea sobre la estructura del menú de navegación.

Los colores se mantienen bajo las mismas tonalidades trabajadas en el archivo fuente. El blanco se potencia como color de fondo para dar sobriedad y claridad al lenguaje gráfico de la página.

Se definen contrastes de colores para potenciar el blanco central de la página.

Potenciar en menú de navegación como elemento "columna" de la navegación por el sitio. Los estilos se van afinando aún mas, por ejemplo, se definen tipografías.

Proyecto Final

Original alojado en GitHub (*optimizado para Google Chrome)

Grilla Base

Definición de una grilla base de 28 columnas, la cuál determina las proporciones para la estructuración de la portada del sitio. El ancho de columna es 25px y gutter de columna 12,5px. La creación de esta grilla personal de 28 columnas está basada en la elección de esta medida mínima para medir y estructurar los elementos en la página

La grilla se utiliza para definir medidas, que serán utilizadas en las distintas etiquetas para estructurar contenidos.

El principal objetivo de la definición de esta medida, es determinar las estructuras principales del contenido del sitio (Noticias y Agenda). Por ejemplo, en los bloques de contenido de las noticias (.contenido-noticias) se definen las medidas según las proporciones de la grilla, estableciendo un ancho de 9 columnas, es decir, 325 px.

Mapa de Divs

Archivo:Mapadvis.png

Elementos base

Una de las principales decisiones en el lenguaje del sitio, fue la implementación de un menú secundario en la parte superior de la página, el cuál contiene los vínculos hacia los contenidos del sitio que, en la versión actual, se encuentran a simple vista, esto simplifica la portada como primera instancia de encuentro con el sitio y potencia las áreas de Noticias y Agenda como elementos principales de la portada. Los elementos del menú secundario requieren, a mi modo de ver, de una intención de búsqueda, y por lo tanto sólo se presentan como links en la portada del sitio. Sin embargo también se incluyen "Noticias" y "Agenda" en este menú, por no encontrarse en el menú principal y con el motivo de encontrar el total de noticias y actividades, ya que en el contenido sólo aparecen las más actualizadas.