Responsive Web Design: Hay que ser Absolutamente Moderno

De Casiopea


TítuloResponsive Web Design: Hay que ser Absolutamente Moderno
Tipo de ProyectoProyecto de Taller
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Nicol Valenzuela, Camila Valenzuela
ProfesorKatherine Exss
PDFArchivo:POE 1982 Absolutamente Moderno.pdf
URLhttp://wiki.ead.pucv.cl/index.php/Hay que ser Absolutamente Moderno


Etapa Uno: 18 Jul.

Organización de Contenidos

Fundamento

Las propuestas realizadas las diseñamos a partir de 2 pemisas:

  1. Teoría del Mobile First, es decir, diseñamos a partir del tamaño más pequeño y simple.
    1. Consideramos que el texto el diseño de este texto es un elemento particular dentro de un grupo mayor de 6 textos. Por lo que tomamos en cuenta que la navegación fuera aplicable/adaptable a los contenidos de éstos.

Organización de Contenidos

Mapa Conceptual.png

Wireframes Baja Intensidad

Para los wireframes definimos una paleta de colores en la que el rojo indica los elementos con los que se interactúa y los 3 grises indican la relevancia visual del elemento siendo el más oscuro el elemento más importante.

Propuesta 1

Esta primera propuesta considera la lectura del texto como el objetivo fundamental.Este no posee capítulos, sino que es un texto único y continuo con una nota final a modo de reflexión. Al no estar dividido en partes, se toma la decisión de que el diseño contenga la menor cantidad de elementos posibles de modo que estos no interrumpan la lectura.

Además de esto, las imágenes has sido eliminadas ya que no siempre son las mismas ni son imprescindibles. De hecho en el sitio de la Escuela no están las imágenes, en el sitio de la Wiki se indica que hay solo 6 y en el PDF hay 14.

Iphone 3

  • Resolución: 320 x 480px
  • Tipografía del texto: 14px
  • Los botones o elementos pulsables son más grandes que para las pantallas de computadores ya que interactúan con la superficie de los dedos.

Propuesta1 movil-06.png

Acción 1-2

Se pulsa el "menú", ubicado en un cuadrado en la esquina superior derecha de la pantalla ya que es la forma en que lo hacen la mayor parte de los diseños responsive y, por lo tanto, las personan se han acostumbrado a buscarlo en ese espacio.

Se despliega el menú con un botón que enlaza con los demás textos. Este menú desplegado aprovecha el espacio de toda la pantalla. El texto en el que nos encontramos se diferencia visualmente del resto.

Para volver al estado anterior o "cerrar" en menú pulsamos nuevamente el botón "menú".

Acción 1-3

El título del texto es al mismo tiempo un botón. Por esto tiene un tamaño adecuado al dedo que ha de pulsarlo en el caso de los móviles.

Al pulsarlo, se despliegan los datos del texto (año, autor, edición, etc.) ocupando el espacio total de la pantalla.

Al igual que con el menú, para volver al estro anterior se pulsa nuevamente en el botón "título". Se mantiene así coherencia en el modo de interacción.

Ipad

  • Resolución: 768 x 1024px

Propuesta 2 Tablet-06.png

Acción 1-2 Se pulsa el "menú", ubicado en un cuadrado en la esquina superior derecha de la pantalla al igual que en el caso del smartphone.

Se despliega el menú con un botón que enlaza con los demás textos. Este menú desplegado ocupa parte de la pantalla mientras el texto está "cubierto" a modo de lightbox. El texto en el que nos encontramos se diferencia visualmente del resto.

Para volver al estado anterior o "cerrar" en menú pulsamos nuevamente el botón "menú".

Acción 1-3

El título del texto es al mismo tiempo un botón. Por esto tiene un tamaño adecuado al dedo que ha de pulsarlo en el caso de los móviles, pero para el caso de las tablet se han aumentado los márgenes para evitar lineas de texto demasiado extensas y así mantener una lectura adecuada del texto.

Al pulsarlo, se despliegan los datos del texto (año, autor, edición, etc.) en un lightbox, al igual que el menú, que se ubica debajo del título y mantiene el mismo ancho.

Para volver al estro anterior se pulsa nuevamente en el botón "título".

MacBook 13"

  • Resolución: 1280 X 800px

Propuesta1 Notebook-06.png

Estado 1

Los márgenes son mayores que en el diseño para los dispositivos móviles para mantener el ancho de párrafos adecuado para la lectura. Por lo mismo la tipografía aumentará levemente su tamaño, al igual que la interlínea.

En este caso, a diferencia de los dispositivos móviles, estos datos se encuentran en la pantalla desde un principio, ya que el título no actúa como un botón ni es entendido como tal. Se ubican en una columna lateral a la derecha pero en un tamaño y peso tipográfico menor, de modo que el texto tenga siempre mayor importancia visual.

Estado 2

Bajo la columna de "datos" hay un botón clickeable que despliega el menú de enlaces a los otros textos. Esto, a diferencia de los datos, no se encuentra en pantalla desde el principio, sino que contenido en un botón para no llenar la pantalla.

Propuesta 2

1. Argumento:

La propuesta de diseño se define según dos ejes, uno vertical y otro horizontal. El eje horizontal permite navegar los textos, y el eje vertical, el texto mismo en el cuál el usuario se encuentra.

Iphone

  • Resolución: 320 x 480px
  • Argumento particular: El diseño móvil posee una pequeña línea en la parte de arriba, donde se ubican los textos según la numeración que se dio en el Home, así los usuarios pueden orientarse con respecto al eje horizontal, y que sean consciente de ello.
  • Wireframes:

Nota:

  • HOME: En el home, los títulos mismos no son clickeables, sino que su número, ya que está basado en la lógica de una persona que no usa su dedo índice, sino el pulgar, para sujetarnos un poco a la realidad cotidiana de uso.

Ipad

  • Resolución: 768 x 1024px
  • Argumento particular: Como el tamaño del Ipad es más ancho, nos permite incluir un esbozo de lo que es la siguiente página, para dar la idea de esta especie de "galería de textos" y que el usuario pueda orientarse horizontalmente.
  • Wireframes:

Nota:

  • HOME: En el home, los títulos mismos pueden ser clickeables al igual que el número que le corresponde

MacBook 13"

  • Resolución: 1280 X 800px
  • Argumento particular: Lo que cambia con respecto al tablet, es que la cantidad de columnas aumenta, y los menús, ya no se presentan en orden de arriba abajo, sino que estan de iquierda a derecha.
  • Wireframes:

Etapa Dos: 1 Ago.

Wireframes Alta Intensidad

Móvil

1. VERTICAL

  1. En la primera pantalla, a modo de "home" se encuentran los botones que enlazan a todos los textos.
  2. Pulsamos sobre "Hay que ser absolutamente moderno". La decisión aquí fue que el mismo texto conformara el botón; no se diseña un botón aparte.
  3. Ingresamos directamente al texto y no hay más elementos que es

2. HORIZONTAL

Tablet

1. VERTICAL

Web

Etapa Tres: 8 Ago.

Arquitectura de la información

Luego de realizar los primeros wireframes nos hemos dado cuenta de que el encargo se trata del diseño del texto como elemento principal y los enlaces a los otros textos es una función meramente secundaria. Por lo tanto, hemos tenido que re estructurar nuestro mapa de navegación, poniendo como punto de inicio nuestro texto "Hay que Ser Absolutamente Moderno".

A partir de esto discriminamos dos tipos de contenidos relacionados: Unos que pertenecen al texto y por lo tanto los hemos jerarquizado como contenidos de mayor importancia y los que son externos al texto (vale decir, la lista de textos con los cuales están trabajando nuestros compañeros), los hemos definido como parte de un menú secundario.

750px

Caso "Datos"

Wireframes

Argumento General

Todos los contenidos que pertenecen al texto están ubicados en la misma página, cada uno diagramado de acuerdo a la resolución del dispositivo. En propuestas anteriores que quisimos separar los elementos en páginas diferentes con la intención de dividir los contenidos para no saturar la página y que no presentara un scroll desmesurado, sin embargo esta decisión provocaba un quiebre muy abrupto en la continuidad de la lectura y el acceso al contenido mismo. Por esta razón decidimos ubicar estos contenidos en una misma página y la accesibilidad a los mismos la hemos solucionado por medio de un menú que funciona a modo "ancla" dentro de la página, saltando de una sección a otra en la misma verticalidad de la diagramación general del texto.

  • Texto en una columna única
  • Los enlaces a otros textos están en orden alfabético
  • Los contenidos relacionados están por orden de jerarquía establecida por nosotras
  • Nos basamos en las resoluciones de dispositivos de apple.

1. Móvil

Dado el espacio reducido con el cual contamos, tomamos la decisión de privilegiar el texto y las demás opciones (contenidos relacionados con el texto y enlaces a los otros textos) las ocultamos dentro de un botón/menú de contenidos relacionados en la esquina superior superior derecha, como lo hacen la mayoría de los sitios responsive estudiados y en una pestaña superior desplegable se encuentran los enlaces a los otros textos.

MENÚS

1. Menú principal:

Al pulsar el botón donde está contenido el menú principal, este se desplegará bajo el título, desplazando lo que se encuentre bajo de él, de manera que no interrumpa la diagramación total, y no luzca invasivo. El que se despliegue bajo el título es para que el usuario no pierda la orientación de donde se encuentra.

El menú en sí, se despliega en una caja con un elemento visual en la esquina superior derecha que indica de donde ha surgido. Los elementos que contiene este menú, estan organizados por orden de importancia y se encuentran en un espacio definido y enmarcados a modo de "botón".

1. Menú principal. 1.1 Menú principal desplegado

2. Menú secundario:

El menú secundario correspondiente a los enlaces a "textos relacionados", se encuentra oculto o contenido en una barra o pestaña superior tanto en la tablet como en el dispositivo móvil. Se despliega hacia abajo mediante el gesto de arrastrar con el dedo. Para volver a plegar el menú se debe realizar el mismo gesto pero en sentido contrario. En esta barra tendrá una flecha en la parte inferior derecha que muestra la dirección en la cuál se debe arrastrar la misma. Los elementos (links) de textos que este menú contiene, estan organizados por orden alfabético.

1 Menus proyecto responsive HQSAM movil 2 copia 2.png

ORIENTACIÓN DEL DISPOSITIVO

Independiente de si el dispositivo móvil es utilizado de forma vertical u horizontal la resolución es la misma, por lo que los menús se mantendrán ocultos en botones y/o pestañas en ambos casos. La diferencia fundamental entre el móvil vertical y el horizontal es que en el segundo al aumentar el ancho aumentan también las columnas de la grilla, pero disminuye la altura, para optimizar el espacio, los elementos de ambos menús pasan a distribuirse en dos columnas.

1. Vertical

  • Medidas


2. Horizontal

  • Medidas

3. Comparación del dispositivo Vertical/Horizontal

Paralel movil.jpg

2. Tablet

Para el caso del tablet, la diferencia con el smarthphone es que al tener una resolución mayor y por lo tanto tener más espacio para acoger a los elementos, el menú de los contenidos relacionados ya no están congregados en un botón, si no que están visibles en la pantalla permitiendo un acceso más rápido a ellos. No así los enlaces a otros textos, que aún se encuentran plegados u ocultos en la pestaña superior, ya que son elementos con una relevancia menor a los contenidos relacionados directamente con el texto. Con respecto a la tipografía, hemos aumentado levemente el tamaño tipográfico del texto de ____ a _____ y la interlinea a su vez de ____ a ___, ya que al ser una línea de texto más larga necesita más "aire", es decir, márgenes más grandes y un mayor interlineado que permita la lectura clara y fluida.

Así también, se han aumentado, aunque en escala mayor, el título del texto y el nombre del autor, de acuerdo al ajuste de la grilla y a la relación de equilibrio entre los tamaños y la disposición de los elementos en esta resolución.

MENÚS

Entre el tablet vertical y el tablet horizontal, se producirá el quiebre de estructura de ambos menús.

El menú secundario que se ubicaba en la parte superior, pasa a ubicarse ya desplegado en el footer ¿Por qué en el footer?, el ancho del tablet en posición horizontal es de 1024px, extensión que muchos notebooks tienen por resolución y este hecho no puede pasar desapercibido para nosotros. En este punto ya puede existir un footer, elemento que en el móvil no puede porque sería difícilmente accesible para el usuario por la excesiva cantidad de scroll que se produce.

El menú principal se reacomoda a la parte lateral derecha de la pantalla y seguirá fijo en pantalla y esta vez los datos quedan desplegados y siempre visibles.

ORIENTACIÓN DEL DISPOSITIVO

En este caso, al ser una resolución mayor que la del móvil, los elementos de los menús se encontrarán ya en dos columnas para la posición vertical del dispositivo (en el caso del iPad el ancho es de 768 px) y cuando lo giramos, el ancho pasaría a ser mayor (para el caso del iPad pasa a ser 1024 px) por lo que aumentan las columnas y los elementos de los menús estarán distribuidos en tres de estas.

El resto de decisiones visuales se mantienen tanto en la disposición horizontal como vertical del tablet.

1. Vertical

2. Horizontal

3. Comparación del dispositivo Vertical/Horizontal

Paralel tablet.jpg

Web/Notebook/Computador

Hemos considerado la resolución de 1240 x 800 px como la mayor para el caso. Como la mayor para el caso. Cuando la resolución de pantalla sea mayor a esta, el contenido será centrado aumentando los márgenes, pero ya no habrán cambios estructurales de carácter "responsive".

En esta pantalla, todos los elementos de ambos menús, son visibles.

Comparación de estructuras visuales

Móvil/Tablet/Web

Mapa de Divs

Para realizar el mapa de divs consideramos los elementos ordenados de la forma en que creemos se ubican en el código html (unos dentro de otros). Por lo mismo, este mapa en único, ya que el código es uno solo que se reestructura visualmente a cada resolución, pero que no cambia sus contenidos.

Mapa de Divs Hay que ser Absolutamente Moderno-01.png

Mapa Corregido

Mapa de Divs2.jpg

Interacción

Primera Maqueta Navegable Móvil Vertical

Elementos de Interfaz

Paleta de Colores

Paleta Colores Hay que ser Absolutamente Moderno-01.png

Iconos

Iconos Hay que ser Absolutamente Moderno-01.png

Diseño de Interfaz

Diseño de Interfaz II

Para el diseño de interfaz se pensó la zona donde va el texto literalmente como una "página", la cual tiene pensados sus márgenes individualmente del espacio total. Primero en el header se presenta el encabezado, que presenta el título general. También se encuentra un link a los textos relacionados, que lanzará automáticamente al footer donde estarán ubicados Fuera de la página blanca, figuran los botones o herramientas que permiten navegar el texto.

Tipografía

La tipografía escogida para usar en el proyecto fue: Roboto

  1. Nombre de la tipografía: Roboto
  2. Diseñada por: Christian Robertson
  3. Descripción: Roboto posee una naturaleza dual. Posee un esqueleto mecánico y formas mayoritariamente geométricas. Al mismo tiempo, la fuente presenta rasgos amigables de curvas abiertas.
  4. Descarga: Gratuita de [1]
  5. Imagen:


Roboto-700x450.jpg


Colores

Imágenes

Pantallas Iniciales

Se han definido tres secciones principales en el diseño:

  1. "Header" o cabecera: Aquí se ubica el título principal y un pequeño enlace a los textos relacionados que funciona como ancla al footer.
  2. "Página": El texto se ha construído en un espacio blanco a modo de "pagina" con amplios márgenes de modo que traiga a presencia la página impresa.
  3. "Menú de Contenidos": Este menú se ubica al lado derecho de la "página", por ser de menos relevancia que el texto y funciona a modo de anclas entre las distintas secciones de éste por lo que se mantiene fijo en la pantalla.


Comparación de Pantallas Iniciales


Diseño Total

Elementos de Quiebre

  • Título Principal
  1. Escritorio: Roboto medium 40px
  2. Tablet: Roboto medium 40px
    1. Pasa de ocupar una línea a dos líneas al llegar a los 768px del tablet vertical.
  3. Movil: Roboto medium 28px
  • Menú
  1. Escritorio: Son barras de texto de 240px y ocupan 5 columnas de 40px con intercolumna de 10px.
  2. Tablet Horizontal y Vertical: Cuadros con íconos y texto; miden 90x90px y ocupan 2 columnas.
  3. Móvil Horizontal y Vertical: Cuadros con íconos; miden 40x40px y ocupan una columna.
  • Títulos Secciones
  1. Escritorio: Roboto medium 24px
  2. Tablet: Roboto medium 24px
  3. Móvil: Roboto medium 16px
  • Texto
  1. Escritorio: Roboto light 16px; 1 columna de 590px (se establece como el ancho máximo de la línea de texto).
  2. Tablet: Roboto light 16px; 1 columna de 590px en horizontal y 1 columna de 490px en vertical.
  3. Móvil: Roboto light 12px; 1 columna de 400px en horizontal y 1 columna de 250px en vertical.
  • Sección Nota
  1. Escritorio: Roboto light 14px; 1 columna de 590px (se establece como el ancho máximo de la línea de texto).
  2. Tablet: Roboto light 14px; 1 columna de 590px en horizontal y 1 columna de 490px en vertical.
  3. Móvil: Roboto light 11px; 1 columna de 400px en horizontal y 1 columna de 250px en vertical.
  • Sección Datos
  1. Escritorio: Roboto medium, light 14px; 3 columnas de 190px.
  2. Tablet: Roboto medium, light 14px; 2 columnas de 240px en horizontal y 3 columnas de 190px en vertical.
  3. Móvil: Roboto medium, light 11px; 1 columna de 400px en horizontal y 1 columna de 250px en vertical.
  • Sección Índice de Autores
  1. Escritorio: Roboto medium 15px, light 11px; 4 columnas de 140px.
  2. Tablet: Roboto medium 15px, light 11px; 4 columnas de 140px en horizontal y 3 columnas de 140px en vertical.
  3. Móvil: Roboto medium 15px, light 11px; 3 columnas de 90px en horizontal y 2 columnas de 100px en vertical.
  • Footer
  1. Escritorio: Roboto medium 14px, regular 12px; alineación en bloque horizontal.
  2. Tablet: Roboto medium 14px, regular 12px; alineación en bloque vertical.
  3. Móvil: Roboto medium 14px, regular 12px; alineación en bloque vertical.



Comparación de Pantallas Iniciales


Menú Desplegable para Smartphone

Para el caso del Smartphone, el menú de "anclas" a los distintod tipos de contenidos del texto se ha ocultado dentro de un botón único "menú". Este despliega los íconos de las partes del texto de manera vertical, al igual que ha sido diseñado para tablet y para web.

Para ambos dispositivos móviles (tablet y smatphone) el menú ha incluído íconos. En el caso del tablet acompañados del texto y en el telefono presindiendo de este.

La medida de los íconos/botones en el tablet es de 90x90px y en móvil del 40x40px. Estas medidas corresponden a una grilla definida de columnas de 40px e intercolumnas de 10px; así, el botón en el tablet utiliza 2 columnas y una intercoluna (40+10+40) y el botón en el teléfono utiliza solo una columna.

Archivo:Movil menú desplegado.fw.png
Menú Smatphonr Desplegado

Etapa Cuatro: 15 Ago.

HTML & CSS

Hay que ser Absolutamente Moderno