Diseño Visual Sitio ead
| Título | [[Título::Diseño Visual Sitio e[ad]]] |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | diseño gráfico, diseño visual, web, sitio, interfaz, grilla, diagramación |
| Período | 2012-2012 |
| Asignatura | Construcción de Diseño Gráfico 4, |
| Del Curso | Taller de Construcción DG 4 - 2012, |
| 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) | Daniela Pardo |
| Profesor | Herbert Spencer |
| URL | https://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.
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.
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.
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.
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.
Capturas de Pantalla
Tanto la Documentación como el diseño del Sitio, se pueden ver en [Github]
Portada
Pantalla de 1024x728px
Escuela
Pantalla de 1024x728px
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.
