Diferencia entre revisiones de «Grupo A: Mantos de Gea»
| Línea 275: | Línea 275: | ||
Debido a esto, se trabaja en función de las resoluciones de pantallas en vez de los diferentes navegadores (Chrome y Explorer). | Debido a esto, se trabaja en función de las resoluciones de pantallas en vez de los diferentes navegadores (Chrome y Explorer). | ||
A continuación se presentan los enlaces para visualizar las pantallas en sus tamaños reales. | A continuación se presentan los enlaces para visualizar las pantallas en sus tamaños reales. | ||
Revisión del 13:46 30 ago 2013
| Título | Grupo A: Mantos de Gea |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | responsive design, single page website, mantos de gea |
| Período | 2013-2013 |
| Del Curso | Gráfica Digital 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) | Caterina Da Silva, Paulina Buvinic |
| Profesor | Katherine Exss |
| URL | http://wiki.ead.pucv.cl/index.php/Mantos de Gea |
Introducción
Con motivo del estudio del Responsive Web Design, se trabaja en la creación de un sitio web que presente la lectura para uno de los seis textos fundamentales de la e[ad] que responda ante los distintos soportes (móvil, tablet y computador). Para ello se deberán tener en cuenta todos los elementos que conforman a cada texto, ya sea títulos, subtítulos, párrafos, imágenes, bajadas de imagen. Junto con esto, cada sitio deberá presentar un elemento de navegación, en el cual se vincule el texto elegido junto con los otros textos fundamentales.
Acerca del texto
El texto Mantos de Gea, perteneciente a la Biblioteca Constel, presenta las observaciones de Claudio Girola y Godofredo Iommi ante los fundamentos de la teoría gráfica. Dichas observaciones nacen en los talleres dirigidos entre los años 1981 hasta 1983 en manos de los autores.
Actualmente, podremos encontrar el texto documentado en dos soportes diferentes: digital (wiki y pdf) e impreso (libro). Junto con ello, se podrá acceder a las fotografías capturadas en el taller a través del Archivo Histórico José Vial en Flickr. En ambos soportes, el relato estará acompañado de imágenes y notas correspondientes a las citas presentes en él. Aún así, para el soporte digital se agregará una ficha técnica.
Respecto a las imágenes, el relato se compone de 4 fotografías en blanco y negro, 6 dibujos fotográficos, y 5 dibujos a color. Debido a que la documentación digital se basa en el formato impreso del relato, siendo las imágenes capturas de cada página, cada ilustración fotográfica es colocada de a dos seguida por un dibujo a color.
1. Fotografía
2. Dibujo a tinta
3. Fotografía
4. Dibujo a tinta
5. Dibujos fotográficos
6. Dibujo a tinta
7. Dibujos fotográficos
8. Dibujo a tinta
9. Dibujos fotográficos
10. Dibujo a tinta
Construcción
Definición de pantallas
Para comenzar a trabajar en propuestas de visualización, primero que todo se definen las resoluciones en las cuales se trabajará, es decir, los puntos de quiebre del sitio.
Se establecen cuatro pantallas mínimas:
- Móvil: 320px x 480 px
- Tablet: 768px x 1024px
- Notebook: 1280px x 800px
- Computador de Escritorio: 1920px x 1080px
Propuestas de Maqueta
Se realizan cuatro propuestas de sitio bajo las condiciones establecidas previamente. Las dos primeras se rigen en la diagramación del texto expuesta en el formato impreso. Las otras dos, son propuestas en las que se toma partido por la disposición de las imágenes de acuerdo al texto y la subtitulación de éste.
Propuesta I
Para esta posibilidad de sitio, se decide apegarse a cómo se muestra el texto en el formato digital (Wiki). Para todas las pantallas se verá un menú, que en un comienzo se mostraría en el inferior de la pantalla, para luego quedarse fijo en la parte superior. Éste contendría tres botones, uno para subir al inicio, otro con anclas al texto y otro con los enlaces a los otros textos. Todas las imágenes respetarían el ancho del texto, marcándose un margen claramente.
Móvil
Tablet
Notebook y Computador
Propuesta II
Esta manera de mostrar el texto se divide en dos partes, ya que se decide que serán dos formas distintas de abarcar el sitio a través de las ilustraciones.
Móvil y tablet: Para estos dispositivos se mantiene la propuesta anterior, a diferencia que las imágenes toman mayor importancia ya que irían de borde a borde, mientras que el texto tendría su espacio y su margen de blanco.
Notebook y computador de escritorio: La idea principal es que las imágenes sean el fondo del sitio, por lo que al ir avanzando a través del texto se vayan cambiando las fotografías y dibujos. Para que la lectura del texto sea más clara, al hacer hover por sobre el párrafo, éste se vuelve más consistente para su lectura y así no interferir con la visión de la imagen de fondo. Para las notas de las imágenes, éstas tendrán su lugar pero se desvanecerán al hacer hover en el párrafo.
Móvil y Tablet
Notebook y Computador
Propuesta III
Esta opción, al igual que la anterior, se divide en dos partes, pero esta vez, dándole importancia al texto y buscando minimizar la cantidad de elementos que se entregan en pantalla para no interrumpir la lectura. Se comienza a tomar partido por el texto y a buscar palabras clave que guíen la lectura.
Móvil y tablet: Siguiendo la línea minimalista, se deja todo lo que pueda interrumpir la lectura para el final, las fotos y la ficha. Se elimina también el menú, ya que, debido al poco contenido de los que se quiere mostrar, se le puede dar otra ubicación a sus partes. Sólo se mantiene un botón que se mueve con la pantalla para subir a la portada del sitio. Los tags irán en la portada, mientras que los links a los otros textos, en el footer.
Notebook y computador de escritorio: En pantallas más grandes se decide abarcar el espacio por medio de la disposición del texto, dándole mayor movilidad sin interrumpir la lectura. Al igual que el soporte anterior, fotos y ficha al final.
Móvil y Tablet
Notebook y Computador
Propuesta IV
En esta opción se decide volver al menú de las primeras opciones. Se busca que las fotografías sean una parte importante del sitio, por esta razón se disponen de manera ponderante en esta disposición. Debido a esto, en el soporte de mayor tamaño, para abarcar el espacio que nos entregan estos dispositivos, el menú se mantiene a un costado para guiar la lectura a través de los tags.
Móvil
Tablet
Notebook y Computador
Grilla Adaptable
Sin importar el prototipo que sea escogido para desarrollar, se determina una grilla considerando los distintos puntos de quiebres. Para ello, se trabajará utilizando una grilla adaptable en base a las propuestas del sitio Frameless. Para ello, se construye en torno a columnas de 80 pixeles de ancho, considerando un espacio entremedio de 20 pixeles.
.jpg)
Primera Versión
Wireframes de baja intensidad
Luego de seleccionar y fusionar algunas de nuestras propuestas, se decide a hacer los wireframes de baja intensidad para tener una idea de lo que se busca lograr antes de decidir la capa visual del sitio. Para ello se toma partido por las propuestas III y IV, en la cuales se toma partido al crear un índice a base de tags que ofrezca un cambio en la navegación de la lectura.
Móvil
Tablet
Notebook
Computador de escritorio
Así mismo, en base a la grilla anteriormente establecida, se determinan medidas en torno a la diagramación y a los tamaños tipográficos. Junto con ello, se emplean colores con el fin de estudiar el comportamiento de los distintos elementos. Ver imagen en alta resolución
Maqueta
Ya teniendo el esqueleto de lo que queremos que se vea en las pantallas, desarrollamos los wireframes en su máxima expresión, con las fotos, colores y tipografías que irán en él.
Móvil
Tablet
Notebook
Computador de escritorio
Segunda Versión
Wireframes de baja intensidad
Móvil
Tablet
Notebook
Computador de escritorio
Se vuelve a realizar el mismo ejercicio anterior utilizando colores para definir cada tipo de elemento. De esta manera se observa con mayor facilidad los distintos movimientos en cada punto de quiebre. Así mismo, debido a la nueva estructuración de los contenidos, se determinan nuevas medidas respecto a los elementos.Ver imagen en alta resolución
Maqueta
- GD-03-A-MantosdeGea-Maqueta2-movil Móvil.png
Móvil
Tablet
Notebook
Computador de escritorio
Prototipado
Tipografía
Elegimos dos tipografías para realizar este diseño, ambas son de libres para uso comercial.
Franchise
Para los títulos elegimos la Franchise, una tipografía de palo seco gruesa, que se comporta bien en pantalla.
Linux Libertine
Para los párrafos elegimos la Linux Libertine, una tipografía serif clásica, adaptada para la lectura en pantalla.
Tiene una variedad de seis pesos: Regular, Bold, Bold Italic, Italic, Display y Display Italic.
En ella destaca la lecturabilidad que ésta entrega en pantallas, ya que está calibrada en todas las variables que se encuentren en el lenguaje, como podemos ver en el siguiente link.
Cascada tipográfica
Con estas tipografías abarcamos toda la gama de posibilidades tipográficas que ofrece este texto y las necesidades de nuestro sitio, las cuales están expuestas en el documento a continuación, para tener una referencia clara de cómo usaremos estas tipografías al comenzar a escribirlo en el código.
Paleta de colores
Con la herramienta para crear paletas de colores del sitio Colour Lovers, creamos una Paleta de colores para nuestro sitio.
Estos colores serán usados en:
- fondos
- color de realce
- menúes y barras de navegación
- cambios por hover
- títulos de sección
Estos colores se eligen en base a lo leído en el texto, ya que hablan de la "la observación de las aguas, de los suelos y (...) del fuego". Por lo que trajimos un azulado para las aguas, grises para los suelos y el realce en el tono magenta, para el fuego.
- Blanco: #F7F7F2
- Gris: #D9D9D9
- Rosado: #F67280
- Azul: #636C7A
- Negro: #211819
Fondo texturado
Todos los colores son tratados de manera lisa, pero para que el fondo no fuese tan duro para la vista, decidimos usar la aplicación web Noise Texture Generator, la cual nos permite crear un fondo texturado a partir de un color que uno le disponga.
Valores del fondo realizado en Noise Texture Generator
Fondo realizado con el color #F7F7F2
_Mantos_de_Gea.png)
Mapa de Divs Tentativo
-01.png)
Diseño de Interfaz
Se trabaja sobre las maquetas realizadas implementando los criterios determinados (medidas, tipografías, estilos y paleta de colores) llevando a cabo el diseño de interfaz final del sitio en todos sus soportes.
A continuación se presenta el diseño realizado sin incluir los elementos de interacción. Es decir, no se muestran los cambios en los elementos de enlaces, de hover, ni de navegación; mostrando la página sin scroll alguno. Ver imagen en alta resolución
Comparando los distintos componentes estructurales del sitio, se mantienen ciertos patrones entre los tamaños. Por ejemplo, para el caso del footer se diseñan dos estructuras distintas, considerando una para computador y notebook, y otra para tablet y móviles. Aún así, al seleccionar una enlace externo, ambos casos reaccionan igual, cambiando el color de su botón de la misma forma.
Por otro lado, existirá una mayor diferencia en los contenidos mostrados en la parte superior del sitio (o "portada"). No solo existirá una diferencia en que para los soportes mayores el texto se ubica a la izquierda de la pantalla, sino que se incluye la información de la ficha técnica por debajo del título. Junto con esto, existirá una diferencia en el soporte para tablet. Debido a su tamaño vertical, se la imagen de fondo no abarcará toda la pantalla, por ende, el menú de navegación es visualizado desde el comienzo. Debido a esto, los contenidos de Notas, + Info, y + Relatos no son mostrados junto a los otros vínculos en la parte superior.
Finalmente, los elementos de mayor cambio existentes en el diseño estarán en manos del menú de navegación, cambiando tanto en ubicación y forma de despliegue.
Cabe destacar que para los soportes mayores (computador de escritorio y notebook) las imágenes se comportarán de distinta manera debido a que se hace uso del hover. Así, recién al posar el cursor sobre la imagen se revelará su información (pie de imagen).
A continuación se presenta cada diseño en forma individual, incluyendo las distintas navegaciones. Para ello se utiliza una línea punteada para marcar el segmento de cada pantalla.
- Diseño Interfaz Completo iMac MDG GrupoA.png
Computador de escritorio
- Diseño Interfaz Completo Notebook MDG GrupoA.png
Notebook
- Diseño Interfaz Completo Tablet MDG GrupoA.png
Tablet
- Diseño Interfaz Completo Móvil MDG GrupoA.png
Móvil
HTML//CSS
Códigos Prehechos
Simple Fading CSS Slideshow
Absolute Floating Menu
Mapa de Divs Definitivo
Diseño Final
Finalmente, existirán leves cambios respecto al diseño de interfaz, con el fin de aprovechar el tamaño de pantalla por completo, y así entregar una mejor experiencia de lectura en cualquier dispositivo. Archivo:Comparación-Final-Header-y-Footer (Mantos de Gea, G.A.).png
Archivo:Comparación-Final-Navegación Mantos de Gea (G.A.).png
Debido a esto, se trabaja en función de las resoluciones de pantallas en vez de los diferentes navegadores (Chrome y Explorer). A continuación se presentan los enlaces para visualizar las pantallas en sus tamaños reales.
Móvil | Tablet | Notebook | Computador de escritorio
_MDG.png){kind=link}
.png){kind=link}
.png){kind=link}
