Responsive Web Design: Hay que ser Absolutamente Moderno
| Título | Responsive Web Design: Hay que ser Absolutamente Moderno |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| 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) | Nicol Valenzuela, Camila Valenzuela |
| Profesor | Katherine Exss |
| Archivo:POE 1982 Absolutamente Moderno.pdf | |
| URL | http://wiki.ead.pucv.cl/index.php/Hay que ser Absolutamente Moderno |
Primera etapa
Fundamento
Las propuestas realizadas las diseñamos a partir de 2 pemisas:
- Teoría del Mobile First, es decir, diseñamos a partir del tamaño más pequeño y simple.
- 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
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.
Estado1
Estado2
Estado3
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
Estado1
Estado2
Estado3
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
Estado1
Estado2
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:
1. Home (Menú)/Click Texto 2
2. Opciones texto 2/Click Datos
3. Despliegue Datos/Click Texto
4. Despliegue de texto.
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:
1. Home (Menú)/Click Texto 2
2. Opciones texto 2/Click Datos
3. Despliegue Datos/Click Texto
4. Despliegue de texto/Click Galería
5. Despliegue de Galería
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:
1. Home (Menú)/Click Texto 2
2. Opciones texto 2/Click Datos
3. Despliegue Datos/Click Texto
4. Despliegue de texto/Click Galería
5. Despliegue de Galería
