Sitio Responsive: Hoy me voy a ocupar de mi cólera
| Título | Sitio Responsive: Hoy me voy a ocupar de mi cólera |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | responsive design |
| Período | 2013-2013 |
| Asignatura | Gráfica Digital, |
| 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) | Samira Bajbuj, Christopher Fattori |
| Profesor | Katherine 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.
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.
Características:
- menú: botones y rótulos centrados
- título: centrado
- botón: ficha desplegable
- texto: justificado a la izquierda.
- cabecera: 23px
- rótulos: 13px
- título: 19px
- ficha: 11 y 12px
- texto: 13px
- 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.
Características:
- menú: botones y rótulos centrados
- título: centrado
- botón: ficha desplegable
- texto: justificado a la izquierda.
- cabecera: 23px
- rótulos: 13px
- título: 19px
- ficha: 11 y 12px
- texto: 13px
- 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.
Cambio en la tipografía:
- título: 32px
- 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.
Cambio en la tipografía:
- rótulos: 10px
- 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.
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
Grilla
Wireframes baja densidad
Móvil:
Tablet:
Móvil en soporte:
Tablet en soporte:
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.
Se establece el mapa de navegación del sitio para jerarquizar los contenidos a presentar.
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
- Menú Móvil.jpg
- Menú Móvil2.jpg
- Menú Móvil3.jpg
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
- Imágenes.jpg
GRILLA
- Grillas menú.jpg
- Grillas menú2.jpg
- Grillas menú3.jpg
- Grillas menú4.jpg
- Grillas menú5.jpg
LANDSCAPE
- Menú landscapeMóvil2.jpg
- Menú landscapeMóvil22.jpg
- Menú landscapeMóvil23.jpg
- Menú landscapeMóvil24.jpg
- Menú landscapeMóvil25.jpg
- Menú landscapeMóvil26.jpg
- Menú landscapeMóvil27.jpg
- Menú landscapeMóvil28.jpg
- Menú landscapeMóvil29.jpg
- Menú landscapeMóvil210.jpg
GRILLA
- Grilla landscapeMóvil2.jpg
- Grilla landscapeMóvil22.jpg
- Grilla landscapeMóvil23.jpg
- Grilla landscapeMóvil24.jpg
- Grilla landscapeMóvil25.jpg
- Grilla landscapeMóvil26.jpg
- Grilla landscapeMóvil27.jpg
- Grilla landscapeMóvil28.jpg
- Grilla landscapeMóvil29.jpg
- Grilla landscapeMóvil210.jpg
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
- Texto Móvil.jpg
- Texto Móvil2.jpg
- Texto Móvil3.jpg
- Texto Móvil4.jpg
- Texto Móvil5.jpg
- Texto Móvil6.jpg
- Texto Móvil7.jpg
- Texto Móvil8.jpg
- Texto Móvil9.jpg
- Texto Móvil10.jpg
- Texto Móvil11.jpg
- Texto Móvil12.jpg
- Texto Móvil13.jpg
- Texto Móvil14.jpg
- Texto Móvil15.jpg
- Texto Móvil16.jpg
- Texto Móvil17.jpg
- Texto Móvil18.jpg
- Texto Móvil19.jpg
- Texto Móvil20.jpg
- Texto Móvil21.jpg
- Texto Móvil22.jpg
LANDSCAPE
- Texto Móvil.jpg
- Texto Móvil2.jpg
- Texto Móvil3.jpg
- Texto Móvil4.jpg
- Texto Móvil5.jpg
- Texto Móvil6.jpg
- Texto Móvil7.jpg
- Texto Móvil8.jpg
- Texto Móvil9.jpg
- Texto Móvil10.jpg
- Texto Móvil11.jpg
- Texto Móvil12.jpg
- Texto Móvil13.jpg
- Texto Móvil14.jpg
- Texto Móvil15.jpg
- Texto Móvil16.jpg
- Texto Móvil17.jpg
- Texto Móvil18.jpg
- Texto Móvil19.jpg
- Texto Móvil20.jpg
- Texto Móvil21.jpg
- Texto Móvil22.jpg
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
- Texto grilla PC2.jpg
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
- TextoPáginas.jpg
- TextoPáginas2.jpg
- TextoPáginas5.jpg
- TextoPáginas3.jpg
- TextoPáginas4.jpg
- TextoPáginas6.jpg
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:
- Móvil portrait a-01.jpg
Móvil portrait
- Móvil portrait b-01.jpg
Móvil portrait menú
- Móvil landscape a-01.jpg
Móvil landscape
Móvil landscape menú
Tablet:
Tablet portrait
Tablet portrait menú
Tablet landscape
Tablet landscape menú
Márgenes y tamaños
Se definen márgenes y tamaños de columna para los wireframes anteriores.
Móvil:
- Móvil portrait a margenes-01.jpg
Móvil portrait
- Móvil portrait b margenes-01.jpg
Móvil portrait menú
Móvil landscape
Móvil landscape menú
Tablet:
Tablet portrait
Tablet landscape
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.
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.
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
- Móvil portrait diseño-01.jpg
visualización portrait
- Móvil portrait grilla diseño-01.jpg
grilla portrait
- Móvil landscape diseño2.jpg
visualización landscape
- Móvil landscape grilla diseño2.jpg
grilla landscape
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.
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.
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
- Tablet portrait diseño2.jpg
visualización portrait
- Tablet portrait grilla diseño2.jpg
grilla portrait
- Tablet landscape diseño-01.jpg
visualización landscape
- Tablet landscape grilla diseño-01.jpg
grilla landscape
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.
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.
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
- Desktop diseño-01.jpg
visualización escritorio
- Desktop grilla diseño-01.jpg
grilla escritorio
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.
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.
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Ú
PIE DE PÁGINA
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
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
- Móvil: 36px
- Tablet: 72px
- Escritorio: 75px
Rótulos menú y secciones
Tanto para móvil, tablet y escritorio, el texto:
- Blanco: Universe CondensedLt 14px
- Gris: Univers CondensedLT 14px.
Texto secciones
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
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
TABLET
Pantalla 1024px x 768px
ESCRITORIO
Pantalla 1280px x 800px
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.
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
