Diseño Visual Sitio ead

De Casiopea


Título[[Título::Diseño Visual Sitio e[ad]]]
Tipo de ProyectoProyecto de Taller
Palabras Clavediseño gráfico, diseño visual, web, sitio, interfaz, grilla, diagramación
Período2012-2012
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoTaller de Construcción DG 4 - 2012
CarrerasDiseño Gráfico
Alumno(s)Daniela Pardo
ProfesorHerbert Spencer
URLhttps://github.com/DanielaPardoT/EGGL-ead/tree/patch-1


Introducción

Para el taller de construcción de 4 año de Diseño Gráfico, se propuso el proyecto de rediseñar el sitio web de la Escuela. Junto con el rediseño, hay que crear un framework de los elementos utilizados al crear el sitio, una documentación que ayudaría en el trabajo del código para terceros. Para la documentación se toma un archivo base, el cual hay que modificarlo según los elementos usados en el sitio.

Diseño de Interfaz

Lo más fundamental de un sitio, a la hora de crear una experiencia, son las interfaces, que proponen un lenguaje gráfico indispensable. Las interfaces idealmente diseñan la experiencia cognitiva y la hace fluir.

GUI Set-02-01.png

La construcción de interfaces en el sitio requiere de enfocarse en los detalles, definir y relacionar propiedades, los colores, etc. La apariencia definirá la acción del elemento.

Interfaces.jpg

Patrones de Interacción

Los Patrones de Interacción es un lenguaje de patrones y tipologías, los cuales poseen el fin de solucionar problemas de usabilidad con respecto a la construcción de un sitio web. Los patrones dejan por escrito cómo se deben utilizar los elementos, haciendo una biblioteca de códigos.

Grilla

La actual grilla del Sitio e[ad] utiliza 3 columnas principalmente, siendo la tercera, menos ancha y con un intercolumnado menor.

Grillaead.png

Tratando de mantener las tres columnas se crea una visualización del nuevo diseño del sitio web. Inicialmente se piensa en una grilla de 15 columnas, con una proporción de 6:6:3, pero la diferencia de anchos es muy notoria, y lo ideal es que sea un distingo discreto. La barra lateral se cambia desde la derecha hasta la izquierda, ya que gracias al menú de acordeón, la información visible no distrae de la columna de noticias.

Sitioeaddisvisual-1.png Sitioeaddisvisual-2.png

La Grilla se divide en 16 columnas de 43px cada una y una intercolumna de 18,13px que resulta en un ancho de 960px. El principal objetivo que debe cumplir la estructura, es la división en tres secciones, de manera que una de ellas fuera de menor ancho para ser utilizada como una barra lateral y con este número de columnas es posible además de otras combinaciones. Los bloques son utilizados para crear contenedores para así evitar el conflicto de columna dentro de columna.

Grilla.png

Capturas de Pantalla

Tanto la Documentación como el diseño del Sitio, se pueden ver en [Github]

Portada

Pantalla de 1024x728px Pantalla-portada.png

Escuela

Pantalla de 1024x728px Pantalla-escuela.png

Documentación

Tanto la Documentación como el diseño del Sitio, se pueden ver en [Github] En la documentación se presenta el diseño general del Sitio e[ad]. Es una guía de referencia para la creación de sitios pertenecientes a la Escuela de Diseño y Arquitectura de la PUCV. Se exponen todos los elementos necesarios para formar la experiencia, el carácter y la apariencia del sitio. Se indican las especificaciones y los códigos pertenecientes a los elementos para permitir su fácil y eficaz utilización.

Tipografía

El sitio utiliza las siguientes tipografías: Colaborate y Cardo. Y los íconos de la tipografía Modern Pictograms.

La tipografía Colaborate tiene una amplia familia, lo que permite la posibilidad de utilizar distintos pesos en la misma tipografía y, por ende, crear distintas jerarquías. La familia es: Thin, Light, Regular, Medium y Bold. Cardo es una tipografía con serif utilizada en los poemas, para marcar una diferencia entre texto y poema, palo seco y serif. Tiene un contraste nivelado de sus negros y blancos.

Tipografia.png