Proyecto de sitio responsive: "De la Útopía al Espejismo"

Título	Proyecto de sitio responsive: "De la Utopía al Espejismo"
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	responsive design, diagramación, grilla
Período	2013-2013
Asignatura	Gráfica Digital 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)	Danila Ilabaca, María Michelle Camus
Profesor	Katherine Exss

"De la Utopía al Espejismo"

Introducción

El proyecto que se presenta a continuación plantea propuestas para la realización de un sitio web responsivo del texto "De la Útopía al Espejismo", escrito por Godofredo Iommi y extraído de la Biblioteca Constel del sitio de la Escuela de Arquitectura y Diseño PUCV.

Se consideran tres formatos: PC, tablet y móvil para las cuatro propuestas. Realizando wireframes con el objetivo de identificar diagramación, tamaños de márgenes, imágenes y tipografía.

• TÍTULO: De la Utopía al Espejismo
• AÑO: 1983
• AUTOR: Godofredo Iommi
• COAUTORES: Alberto Cruz
• TIPO DE PUBLICACIÓN: Artículo en Revista de Divulgación
• REVISTA: Universitaria N.9
• EDITORIAL: Pontificia Universidad Católica de Chile
• COLECCIÓN: Ciudad Abierta
• CIUDAD: Santiago

Mapa de navegación

Versión 1

Para la barra de navegación del sitio se consideraron los seis textos de la Biblioteca Constel e[ad], además de un buscador para que una vez dentro de una sección sea más fácil llegar a otra.

Versión 2

En las propuestas dos, tres y final se retiró el buscador del sitio ya que se consideró innecesario debido a la simplicidad en cuanto a cantidad de contenidos.

Objetivos del sitio responsivo

El objetivo principal de la adaptación del sitio en tres formatos distintos permite al usuario acceder al contenido de forma óptima independiente del dispositivo que esté utilizando, generando así resultados positivos para la experiencia de cada usuario. La idea fundamental es potenciar el sitio en cada formato utilizando las herramientas tecnológicas que se presentan. Para esto es necesario identificar las variables presentes en el contenido y la jerarquización de estos.

Elementos visuales del texto

"Utopía al espejismo" consta de tres croquis sobre los espacios construídos en la Ciudad Abierta, especificamente de la Hospedería y Ágora.

• 

  Croquis Ágora y Hospedería

• 

  Croquis interior Ágora

• 

  Croquis interior Hospedería

Diagramación del texto con responsive design

Se realiza el trabajo de diagramar una grilla de responsive design para el texto "De la utopía al espejismo" de Godofredo Iommi. Se defonen tres tamaños que son para PC, Tablet y Móvil.

Propuesta uno

Los elementos de navegación como el menú y el buscador van cambiando su manera de ser presentados en los tres formatos. También cambian los tamaños de las fuentes, el número de columnas, la interlínea y el tracking. Dentro de los cambios de formatos hay elementos que cambian totalmente de aspecto como vendría siendo el menú lateral.

PC

La diagramación para pantalla posee un Header y un footer que prácticamente son iguales. El único menú existente (el cual dirige a otros textos relacionados) está ubicado en la parte izquierda, es un menú lateral. Cuando se está en un texto en el menú ese nombre pasa a ser celeste para diferenciar y ubicar al usuario.

El cuerpo de texto esta dispuesto en dos columnas para facilitar la lectura. Las imágenes van acompañadas de sus notas respectivas a la derecha y en gris para que sea diferenciado del cuerpo de texto.

Tablet

El formato Tablet se mantienen los mismos elementos, el único que cambia su aspecto radicalmente es el menú lateral, el cual pasa de ser una menú completo a un solo botón el cual dirige a otro sitio en donde se muestra el menú en su totalidad. El cuerpo de texto pasa a estar en una columna. Se reduce su interlínea y tamaño de fuente.

Móvil

En el formato Móvil se mantienen los mismos elementos que en el tablet, lo que cambia es el número de fuente y su interlínea. También cambia considerablemente el ancho de la columna.

Propuesta dos

La propuesta dos presenta los mayores cambios en la barra de navegación y en la ficha técnica, ambos respecto a diagramación en la pantalla y no en su contenido. El texto principal se mantiene casi homogéneo en sus tres versiones.

PC

El formato PC dispone de una barra de navegación horizontal donde los elementos de esta (considerados como botones) están distanciados entre sí. La opción que uno opte cambia de color tanto el fondo como lo escrito. Luego aparece la ficha técnica del texto en la parte derecha de la pantalla, diferenciándose del texto por una franja gris que recorre todo el contenido. El texto principal se presenta en una sola columna y en la parte inferior aparecen las notas.

Tablet

En el tablet la barra de navegación ha cambiado su formato, ahora es vertical y todos los elementos están unidos. La barra de navegación se sitúa en la parte superior izquierda. La ficha técnica ahora se integra al texto, ya no aparece como una columna aparte, sin embargo, se diferencia por la misma franja gris. El texto se presenta nuevamente como una sola columna, incluyendo las notas.

Móvil

En el dispositivo móvil la barra de navegación se asemeja más al formato tablet, pero esta se ensancha y se centra en la pantalla. La ficha técnica ya no aparece, sino que hay que pinchar para verla. El texto de igual modo se presenta mediante una sola columna. Por otro lado, se produce un cambio, al igual que en la ficha técnica, donde las notas también son una sección aparte que hay que pinchar.

Propuesta tres

PC

En la pantalla de PC la propuesta tres muestra una barra de navegación horizontal y con los elementos conjuntos, donde la opción que se pinchará se oscurece. La ficha técnica aparece al costado izquierdo de la pantalla y en gris para diferenciarla del texto principal. El texto se presenta en una sola columna. Las notas están dispuestas en la parte inferior mendiante tres columnas y con un fondo gris.

Tablet

En el tablet la barra de navegación se ha cambiado al costado izquierdo y es vertical, utilizando el mismo funcionamiento de oscurecer la opción que se elegirá. La ficha técnica se integra al texto y esta no se diferencia con un fondo gris como ocurre en el PC. El texto se mantiene en una sola columna. Las notas pasaron a ser dos columnas.

Móvil

El formato móvil presenta una barra de navegación muy similar al tablet, pero este está centrado y ocupa todo el ancho de la pantalla. La ficha técnica ya no aparece en su totalidad, sino que hay que apretar la opción para que esta se despliegue. El texto principal sigue estando en una sola columna y las notas (al igual que la ficha técnica) es una sección donde hay que entrar para verla.

Propuesta cuatro

En la propuesta dos se generan varios cambios en todos los aspectos. El cuerpo de texto principal en la propuesta uno estaba en dos columnas pero debido a la continuidad de la lectura se decide proponer el texto en una columna y así permitir una manera fácil de leer.

En cuanto al menú de navegación se propone una manera distinta para cada formato. En la versión de PC y Móvil el menú se presenta de manera vertical, en cambio en la versión tablet el menú se dispone de manera horizontal para ocupar mejor el espacio.

PC

En la propuesta cuatro se decide presentar el cuerpo de texto en una columna para las tres versiones de responsive design.

• En la versión para PC nos encontramos con un menú que se dispone de manera vertical al lado izquierdo de la pantalla. Cada texto se separa por una línea horizontal que los diferencia unos de otros.
• En cuanto a la ficha se reduce cierta información que no es considerada necesaria. Se presenta al inicio del texto a modo de introducir al lector de que se trata el texto que va a leer. La ficha se dispone dentro de un fondo gris para diferenciarlo del resto del texto, al igual que las notas que están ubicadas al final del texto.

• En el título la fuente está en 22 pixeles
• En el cuerpo de texto la fuente está en 15 pixeles
• En las notas de las imágenes la fuente está en 13 pixeles
• En la ficha y las notas inferiores la fuente está en 9 pixeles
• En el menú la fuente está en 12 pixeles

Tablet

• En al versión para tablet el menú de navegación pasa a la barra superior y toma una forma totalmente horizontal, Cada texto queda situado a un lado del otro y estás separados por una leve línea que los difernecia.
• La ficha se mantiene igual en cuanto a diagramación e ubicación, pero la fuente pasa de 9 px a 8 px. El fondo gris se mantiene para poder diferenciar los tipos de texto.
• En el título la fuente está en 15 pixeles
• En el cuerpo de texto la fuente está en 9 pixeles
• En las notas de las imágenes la fuente está en 7 pixeles
• En la ficha y las notas inferiores la fuente está en 8 pixeles
• En el menú la fuente está en 12 pixeles

Móvil

• Para el móvil el menú principal vuelve a su estado original (vertical un texto sobre otro) pero cambia su diagramación y espacio que ocupa. Los espacios se ven reducidos y por esto el perfil del botón de menú esta más cerca de las letras que en los casos anteriores.
• El título pasa de estar justificado a la izquierda a estar centrado, esto se debe que al ser tan pequeño el espacio la idea de centrar los elementos facilitan el ritmo de lectura.

Grilla y medidas en pixeles

Para observar los cambios del responsive design se disponen las medidas en pixeles, para así visualizar numéricamente los cambios. Los formatos al adaptarse cambian su grilla, márgenes, ubicación y tamaño de fuente en pixeles. Para mostrar los distintos tamaños existentes se utilizan colores. Se establecen 5 tamaños dentro de cada formato en donde se repite el tamaño de fuente de las notas con el de la ficha.

Interfáz

Propuesta Final Interfáz

A continuación se presenta la propuesta finalizada del wireframe "de la Utopía al Espejismo", donde se hicieron cambios en las propuestas anteriores, haciéndolas parte como ejercicios para llegar a una solución. El diseño nace a partir de las dos últimas propuestas realizadas en la última entrega.

Wireframe

• PC

En la versión para PC se dispone un menú principal de manera horizontal. La ficha forma parte del texto sin diferenciarla como un elemento aparte. Las imágenes poseen las notas en la parte derecha para usar el ancho. Para las notas del texto general si dispusieron tres columnas.

• Tablet

En la versión para tablet el menú se mantiene de manera horizontal. La ficha mantiene la misma diagramación que en la versión de pc. Las notas de las imágenes siguen estando al costado derecho de cada imagen. Las notas del texto general pasan de estar dispuestas en tres columnas a dos.

• Móvil

Para la versión móvil se opta por un menú vertical que ocupa todo el ancho de la pantalla. Las notas de las imágenes se disponen en la parte inferior de cada foto. Las notas generales del texto se disponen en una columna.

• Tablet horizontal

Al cambiar a la posición horizontal el menú se mantiene de la misma manera, extendiéndose al ancho máximo. La ficha mantiene el mismo tamaño y posición que en la versión vertical. Las notas continúan al margen derecho de cada imagen. Al igual que en la versión vertical las notas se mantienen en dos columnas.

• Móvil horizontal

En la versión horizontal del móvil el menú se mantiene vertical y ocupando el ancho máximo de la página. El texto central permanece centrado, al igual que las imágenes y las notas de éstas. Sin embargo, las notas de la zona inferior pasan a estar en dos columnas en vez de una.

Wireframes vertical: PC, Tablet, Móvil

Wireframes horizontal: Tablet, Móvil

Diagramación de los elementos

Mediante los colores se evidencia los cambios de la disposición de los elementos en los tres formatos. La barra de navegación (rojo) se mantiene horizontal en PC y tablet, mientras que en móvil se vuelve vertical. El texto (morado) mantiene su columna centrada en los tres formatos, sólo hay cambio en el tamaño del ancho de la caja de texto. Las imágenes (verde) se encuentran a continuación de cada párrafo en todos los dispositivos, pero en el móvil la imagen está centrada con la caja de texto. Las notas de las imágenes (amarillo) en pc y tablet están a un costado de la imagen, mientras que en el móvil se encuentran bajo la imagen ocupando su mismo ancho. Las notas (gris) en el pc se presentan en tres columnas, en tablet dos columnas y en el móvil sólo una columna.

Wireframes vertical: PC, Tablet, Móvil Archivo:Diagramación wireframes utopia copia.jpg Wireframes horizontal: Tablet, Móvil

Medidas wireframes en pixeles

Se presentan las medidas de los márgenes en pixeles de los tres wireframes (negro) y las medidas de la tipografía utilizada (verde). A modo general se han dejado márgenes laterales iguales en los dos lados, en el caso de pc son 65 pixeles a cada lado, en tablet son 35 pixeles y en el móvil 25 pixeles. Se evidencia que la caja de texto está centrada en los tres formatos. Los márgenes entre los elementos se han dejado con medidas precisas (por ejemplo: 110 px, 50 px, 25 px) para que sea más eficiente el cambio en los formatos.

Wireframes vertical: PC, Tablet, Móvil Wireframes horizontal: Tablet, Móvil

Interfaz

Se le agrega la capa emocional al wireframe final, se propone una paleta con tonos celestes y grises. En el footer y el header se le incorpora una imagen en escala de grises en donde aparece una grafía, para que no solo sea el color quien acompaña a la información si no que también diferentes texturas.

El color genera diferencia entre lo que es el texto continuo de lectura y el texto aparte que va complementando como notas y pie de imagen. Al poner el click sobre el menú la opción a elegir se vuelve verdosa.

Propuesta

Interfaz vertical: PC, Tablet, Móvil Interfaz horizontal: Tablet, Móvil

Tipografía

Fuente Utilizada para maqueta de interfaz: Din Pro

Se ha escogido una tipografía sin serif para que se vea más limpia y se complemente con el margen importante que se ha dejado a ambos costados.

Fuente Utilizada para WEB: Lato

Para la versión web se utiliza la fuente de Google Fonts llamada "Lato" es sus versiones "Light 300" y "Normal 400".

Cambios tipográficos PC, Tablet y Móvil

Se presentan los cambios tipográficos en todos los estilos que se utilizaron para el sitio. Los tamaños en el pc son diferentes con los otros dispositivos, en el tablet y móvil comparten algunas medidas, como los textos de la barra de navegación, la ficha técnica y las notas.

Archivo:Estilos tipográficos utopia.png

Paleta de colores

Ejemplo de utilización de la paleta

Trazo header y footer

Grafía hecha a mano utilizada para el header y footer del sitio.

Mapa de divs

Mapa de Divs versión 1

Link para ver código html mapa de divs

https://dl.dropboxusercontent.com/u/50998436/mapa%20de%20divs/graficahome.html

Mapa de Divs versión 2

Link para ver código html mapa de divs https://dl.dropboxusercontent.com/u/50998436/mapa%20de%20divs/index.html

Códigos HTML y CSS

https://dl.dropboxusercontent.com/u/50998436/De%20la%20utop%C3%ADa%20al%20espejismo/index.html

Entrega Final

Código HTML + CSS

https://dl.dropboxusercontent.com/u/50998436/De%20la%20utop%C3%ADa%20al%20espejismo%20Grupo%20A/responsiveindex.html

Comparación Interfaz y HTML/CSS

Se ha tomado la decisión de realizar pequeños cambios en el diseño de interfaz para una mejor visualización del contenido.

Notas

Se ha modificado el número de columnas de las notas de tres a dos, ya que al ser codificado las tres columnas no funcionaban óptimas para una lectura, notándose que resultaba legible sólo con dos.

Tipografía

Se cambió la tipografía Dinpro por Lato, ya que la primera no se encuentra disponible en google fonts, lo que no permitía el funcionamiento adecuado para ser visto en cualquier computador mediante web.

Conclusiones

Después de haber realizado diferentes propuestas para el sitio web, se considera necesario la identificación clara de los contenidos y posteriormente la jerarquización de estos para poder determinar qué es lo que se quiere mostrar. Este orden general u orden primero se ve sujeto a cambios y adaptaciones dependiendo del dispositivo y del objetivo que se plantea al usuario en cada uno de ellos.

La idea de poder navegar y visualizar el contenido en diferentes pantallas es entregar al usuario distintas formas de ver el contenido. Se considera importante que la persona pueda identificar un cambio notorio en las tres pantallas, para hacer más atractivo e interesante el sitio.

Después de realizar el proyecto se da cuenta que a pesar de tener los mismos elementos estos no se ven igual o cumplen la misma función en cada formato, todo está sujeto a ajustes de diagramación, lo que tiene estrecha relación con la importancia que el diseñador le da a cada elemento y cómo quiere que el usuario lo reciba.