Sitio Responsive: Hoy me voy a ocupar de mi cólera

De Casiopea



TítuloSitio Responsive: Hoy me voy a ocupar de mi cólera
Tipo de ProyectoProyecto de Curso
Palabras Claveresponsive design
Período2013-2013
AsignaturaGráfica Digital
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Samira Bajbuj, Christopher Fattori
ProfesorKatherine Exss


Introducción

Se dispone crear un sitio web Responsive sobre el texto Hoy me voy a ocupar de mi cólera de Godofredo Iommi.

Propuesta 1

Para el diseño responsive del texto “Hoy me voy a ocupar de mi Cólera” de Godofredo Iommi se estableció la diagramación de 4 formatos de ancho de pantalla distintos: 320px, 480px, 800px, y 1024px como las estructuras de quiebre.

El texto impreso original se presenta como un texto interrumpido por la diagramación de sus párrafos, imágenes y blancos que se presentan como pausas en el texto. Se decide mantener la estructura de párrafos del texto web pues presenta mayor cantidad de pausas que facilitan la lectura.

Dado que el mensaje original es transmitido oralmente y se edita una transcripción, para evitar errores en el mensaje del texto o provocar mal interpretaciones se mantiene la estructura original no creando secciones o subtítulos que podrían ser inadecuados.

Antes de realizar la una diagramación se tomó en cuenta el sistema de navegación del sitio a realizar.

Texto-0.jpg

Tras esta diagramación se estableció que lo apropiado y facilitar la navegación los textos deben de estar disponibles rápidamente en el menú de navegación.

Texto formato 320px

Para este formato se decide un menú simple con los títulos de los textos a la vista, un rotulado claro y preciso de qué es lo que el usuario encontrará al cliquear en él.

Texto-1.jpg

Características:

  • menú: botones y rótulos centrados
  • título: centrado
  • botón: ficha desplegable
  • texto: justificado a la izquierda.
    1. cabecera: 23px
    2. rótulos: 13px
    3. título: 19px
    4. ficha: 11 y 12px
    5. texto: 13px
    6. pie de imagen: 12px
  • imágenes: rectangular, centrada

El diseño presenta la ficha de datos del texto como un botón desplegable, pues se puede partir leyendo desde un comienzo el texto y permitiendo leer la ficha (la cual ocupa mucho espacio vertical) después, o bien abrir de inmediato la ficha y cliquearla para esconderla de nuevo evitando un largo scrolling para comenzar a leer y no retrasar la lectura. Se presenta como texto justificado a la izquierda. A la vez se propone un botón para subir al menú principal luego de leer el texto facilitando nuevamente el acceso a los demás libros.

Texto formato 480px

Este formato presenta características similares al formato anterior, se mantienen los márgenes y algunas características tipográficas como en el menú y título y datos de la ficha, mas cambia la estructura de la ficha.

Texto-2.jpg

Características:

  • menú: botones y rótulos centrados
  • título: centrado
  • botón: ficha desplegable
  • texto: justificado a la izquierda.
    1. cabecera: 23px
    2. rótulos: 13px
    3. título: 19px
    4. ficha: 11 y 12px
    5. texto: 13px
    6. pie de imagen: 12px
  • imágenes: centrada

Los márgenes de los botones se expanden a los costados debido al nuevo ancho de pantalla. La estructura de la ficha, que se mantiene como desplegable, cambia, aprovechando mejor el espacio estableciéndose en dos columnas. Tanto el tamaño de la tipografía del texto se mantiene, en cambio las imágenes aumenta de 260x125 a 420x200 px.

Texto formato 800px

Este formato presenta otro cambio, la estructura del menú cambia a dos columnas y la estructura de la ficha desplegable también, ubicando la foto del texto original a la derecha. El margen de las imágenes se presenta más centrado y más aireado, presentándose como un quiebre en el texto, característica presente en el texto original.

Texto-3.jpg

Cambio en la tipografía:

    1. título: 32px
    2. texto: 16px

Cambio en el tamaño de imágenes:

  • de 420x200 a 585x280

Texto formato 1024px

Cambio de estructura final, el menú se presenta en una barra horizontal en la parte superior de la pantalla, la ficha ya no se presenta como desplegable sino que se mantiene fija, en una estructura similar a la anterior salvo que posee una caja de párrafos mayor, ocupando menos espacio vertical.

Texto-4.jpg

Cambio en la tipografía:

    1. rótulos: 10px
    2. texto: 18px

Aumenta los márgenes y las imágenes mantienen su tamaño.


Propuesta 2

Contenidos del Sitio

Se define los elementos con los que se trabajará. Los contenidos que albergará el sitio son:

  • Texto "Hoy me voy a ocupar de mi cólera"
  • Imágenes del texto
  • Ficha sobre los datos del texto
  • Sobre el autor (Godofredo Iommi)
  • Audio que da origen al texto
  • Otros textos (enlaces a los demás sitios)
  • Enlace a Biblioteca Con§tel.


Elementos de navegación

Resoluciones

En esta primera instancia se propone en base a tres resoluciones que definirán los momentos de cambio en la diagramación. Estos corresponden a resoluciones más utilizadas en móviles, tablet y desktop. Estas son:

  • 320px x 480px / 480px x 320px
  • 768px x 1024px / 1024px x 768px
  • 1280px x 800px / 800px x 1280px
Soportes-01.jpg

Grilla

Wireframes baja densidad

Móvil:

Movil portrait completo.jpg


Movil portrait-01.jpg


Movil portrait menu-01.jpg


Movil landscape-01.jpg


Movil landscape menu-01.jpg


Tablet:

Tablet portrait-01.jpg


Tablet portrait menu-01.jpg


Tablet landscape-01.jpg


Tablet landscape menu-01.jpg


Móvil en soporte:

Movil.png


Tablet en soporte:

Tablet1.png


Tablet2.png.png


Propuesta 3

En base a las propuestas realizadas, se realizan wireframes de alta densidad que contienen aspectos traídos desde estas tres propuestas. Ahora, los contenidos que se mostraran en el menú principal son los siguientes:

Contenidos

  • Texto "Hoy me voy a ocupar de mi cólera"
  • Ficha sobre los datos del texto
  • Sobre el autor (Godofredo Iommi)
  • Imágenes del texto
  • Audio original
  • Descargar PDF
  • Textos relacionados
  • Enlace a Biblioteca Con§tel.

Se mantienen los contenidos del menú de la propuesta anterior, pero se añade el ítem "Imágenes" de la propuesta dos. Este ítem sirve para el usuario que busca únicamente las imágenes del texto y facilita su visualización del total de imágenes y su descarga.


Mapa de navegación

Se establece el mapa de navegación del sitio para jerarquizar los contenidos a presentar.

Mapa-2.jpg

Aquí se establece el orden y la forma en que estos contenidos aparecen. Enn este caso se aprecia un menú emergente que enlaza a los contenidos en links externos y un sub menú para los textos relacionados.

Móvil

Para la diagramación del dispositivo móvil definido por el ancho de pantalla se definen las siguientes características:

Menú

  • margen externo: 24 px
  • margen superior: 14px
  • alto de menú: 36px
  • ancho menú desplegable: 250px
  • botón menú desplegable: 224 x 31 px
  • alto de secciones: 40px
  • línea separación de secciones: 1 x 223 px
  • iconos: 15 x 17 px
  • texto titulo: 62px
  • texto menú: 15px
  • texto secciones: 10px

PORTRAIT


LANDSCAPE

Secciones

Para las secciones del menú se establecieron las siguientes características:

  • margen sub menú: 14px
  • texto sección: 33px
  • texto párrafo negrita: 13px
  • texto párrafo: 13px
  • textos altas: 13px
  • margen externo imágenes: 14px

PORTRAIT

GRILLA

LANDSCAPE

GRILLA

Texto

Para el texto se consideró en una fuente libre que pueda ser vista en cualquier dispositivo, esta es la Open Sans.

  • Título:62 px
  • Texto continuo: 13px
  • Margen externo:24px
  • Margen de imágenes: 13px

PORTRAIT

LANDSCAPE

Tablet

Menú

PORTRAIT

LANDSCAPE

Secciones

PORTRAIT

LANDSCAPE

Texto

PORTRAIT

LANDSCAPE


Web

Texto

Se establece una grilla de 14 columnas de 62px con un gutter de 5px y cuatro columnas principales de 198 px.

  • Márgen superior: 14px
  • Márgen superior: 14px
  • márgenes externo: 40px
  • márgenes de imagen: 14px y 35px entre párrafos.

El texto se presenta así en una columna de 605 px de ancho al lado izquierdo dejando en el costado derecho a las imágenes no interrumpiendo el texto y colocándolos como acompañamiento en el sentido original del texto. Las imágenes se dejan en una columna de 265 px de ancho.

GRILLA

Secciones

La páginas siguen la diagramación estableciéndose dentro de las columnas dispuestas en la grilla. Hay ciertas páginas que usan la misma diagramación (imágenes y decargar pdf y otras no.


GRILLA

Diseño de Interfaz

Se incorporan tipografías utilizadas y paleta de colores a los wireframes, definiendo estilos gráficos y detalles más desarrollados del diseño.

Móvil:


Tablet:


Márgenes y tamaños

Se definen márgenes y tamaños de columna para los wireframes anteriores.
Móvil:


Tablet:


Márgenes

  • Móvil Portrait: 24px
  • Móvil landscape: 30px
  • Tablet: 72px, 24px (margen interior portrait), 40px (margen interior landscape)
  • Escritorio: 144px (contenedor) 72px (contenido), 60px (margen interior)

Columnas

  • Móvil Portrait: 272px
  • Móvil landscape: 420px / 200px
  • Tablet Portrait: 624px (contenido), 400px (columna texto), 200px (columna imágenes)
  • Tablet Landscape: 880px (contenido), 440px (columna texto), 400px (columna imágenes)
  • Escritorio: 848px (contenido), 544px (texto), 244px (imagenes)


Tipografía

Se utilizan dos tipografías para el diseño. Ambas fuentes están albergadas en Google Web Fonts.

Títulos y menú

Para títulos del texto y del menú, se utiliza la tipografía Oswald. En sus tres variables: Light, Normal, Bold.

Oswald-Light.png
Oswald.png
Oswald-Bold.png
Oswald-500x400.jpg

Párrafo

Para los párrafos de texto se utiliza la tipografía Open Sans debido a sus características de legibilidad y su optimización en interfaces móviles.

Open-sans-serif.jpg

Propuesta 4

  • En base a correcciones anteriores, se realiza una cuarta propuesta; ésta posee una nueva grilla, proporciones de columna y márgenes, puesto que era una de las características más débiles de las anteriores propuestas.
  • Además se trabaja más en el diseño de interfaces y estilo gráfico del diseño, tomando decisiones gráficas más acordes al contexto y lenguaje de la colección poética, y al origen del texto propiamente tal.

Móvil

Para la diagramación del dispositivo móvil definido por el ancho de pantalla se definen las siguientes características:

Movil portrait

  • Margen externo: 28 px
  • Columnas (4): (56px)
  • Gutter de 8px


Movil landscape

  • Margen externo: 46,5px
  • Columnas (4): (83px)
  • Gutter de 11px



MENÚ

El diseño en esta plataforma varía más entre su posición horizontal y su posición vertical. Aquí los botones del menú cambian su posición notoriamente, pero dentro de los márgenes ajustados por la grilla establecida..

En su posición vertical (portrait) los botones se establecen en un eje central, acentuando la visión del lector en estas opciones primordialmente y manteniendo correspondencia con esa verticalidad.

Error al crear miniatura: Falta archivo


En su posición vertical (landscape) los botones se adecuan a los márgenes de esta dimensión estableciéndose un horizonte entre los botones primarios y los secundarios, pero claramente jerarquizados por sus tamaños.

Error al crear miniatura: Falta archivo

Tablet

Para la diagramación del dispositivo tablet definido por el ancho de pantalla se definen las siguientes características:

Tablet Portrait

  • Margen externo: 76,5px
  • Columnas(4): (130px)
  • Gutter de 19px


Tablet landscape

  • Margen externo: 100px
  • Columnas (4): (176px)
  • Gutter de 24px



MENÚ

A diferencia de el menú anterior, aquí los botones del menú de opciones cambian y se establecen en la parte superior de la pantalla, así se prioriza y se enfatiza en el título, además se consideran esas opciones en una lectura menor, gráficamente, pero no menos importante en términos de contenido.

Error al crear miniatura: Falta archivo

Luego en su posición horizontal no presenta grandes diferencias, pues solo se adecuan a los márgenes estrechándose mínimamente, estableciéndose una continuidad en el diseño.

Error al crear miniatura: Falta archivo

Escritorio

Para la diagramación del escritorio definido por el ancho de pantalla se definen las siguientes características:

Escritorio

  • Margen externo: 130 px
  • Columnas(4): (222,5px)
  • Gutter de 26px


MENÚ

Como ocurre en el caso anterior, para darle continuidad al diseño, el menú en esta pantalla se presenta de la misma manera, solo que posee mayores márgenes debido al ancho de pantalla, pero siguiendo la misma estructura otorgada por la grilla.

Error al crear miniatura: Falta archivo

INTERFAZ

Presente aquí como lo será en los anteriores dispositivos, los botones se accionarán ante el tacto del dedo o del mouse cambiando su color neutral gris a un rojo de encendido avisando al usuario de la acción del sistema.

Desktop interfaz TR 1.jpg
Desktop interfaz TR 2.jpg


En la versión de escritorio, el botón "Descargar PDF" y "Descargar Audio", se mantendrán fijos al hacer scroll.

Fondo

Para amenizar el texto se establece una imagen de fondo para el menú y el texto.

Fondo Menú y Pie de página

Para el diseño del sitio se propone un fondo negro, con tramas en grises, estilo expresionismo abstracto, acorde a la metáfora del título del texto. Le da un aspecto sobrio y poético.

MENÚ

Imagen fondo menu.jpg

PIE DE PÁGINA

Imagen fondo footer.jpg

Fondo texto

Para el fondo del texto se propone una imagen de textura de papel, muy sutil, para no estropear la lectura,a la vez que le da una atmósfera cercana a la lectura de un texto impreso.

FONDO TEXTO

Imagen fondo texto.jpg

Tipografías

La tipografía principamente usada para títulos, menú y secciones es la Univers, dada su facilidad en el código, su imagen neutral para menúes y secciones y su variante ultracondensada que le da un aspecto más elegante y digital a la edición.

Título principal

Error al crear miniatura: Falta archivo


Error al crear miniatura: Falta archivo


Error al crear miniatura: Falta archivo


  • Móvil: 36px
  • Tablet: 72px
  • Escritorio: 75px

Rótulos menú y secciones

Error al crear miniatura: Falta archivo

Tanto para móvil, tablet y escritorio, el texto:

  • Blanco: Universe CondensedLt 14px
  • Gris: Univers CondensedLT 14px.


Texto secciones

Texto secciones TR.jpg

Tanto para móvil, tablet y escritorio, el texto:

  • En gris alta: Univers regular 11px
  • Negrita baja y variante italic: Universe Bold 12px.

Texto Continuo

Texto continuo TR.jpg

Para el texto de párrafo se utiliza la tipografía Roboto Slab Light de 14 px. Esta decisión se basa en la óptima legibilidad de esta tipografía que se debe a sus formas con características geométricas que le proporciona claridad al tipo, pero al mismo tiempo con curvas abiertas y formas mas "relajadas" del trazo que le dan continuidad al texto. Esta dualidad permite una lectura continua y a la vez relajada del texto.

Vista en Dispositivos

MÓVIL

Pantalla 320px x 480px

Error al crear miniatura: Falta archivo

TABLET

Pantalla 1024px x 768px

Error al crear miniatura: Falta archivo

ESCRITORIO

Pantalla 1280px x 800px

Error al crear miniatura: Falta archivo

Programación

Mapa de Divs

Una vez ya establecidos los wireframes definitivos de visualización, se procede a la programación en lenguaje Html y css estableciéndose primeramente los sectores primordiales de la diagramación, estos funcionan como cajas denominadas divs. Así se procede a realizar un mapa de divs.


Mapa de divs-TR.jpg

Códigos HTML y CSS del mapa de divs

Mapa de Divs

https://www.dropbox.com/sh/mst7qf9dnplwryz/3RKSIi7KX6/MAPA%20DE%20DIVS%20codigos

Sitio Responsive

https://dl.dropboxusercontent.com/u/67644009/Texto%20Sitio%20Responsive/index.html

Cascada de Estilos

https://dl.dropboxusercontent.com/u/67644009/Texto%20Sitio%20Responsive/css.css