Proyecto de sitio responsive: "Hoy me voy a ocupar de mi cólera"

De Casiopea
Revisión del 08:50 17 ago 2013 de Franwevar (discusión | contribuciones) (Desglose de interfaz)



TítuloGrupo 4: "Hoy me voy a ocupar de mi cólera"
Tipo de ProyectoProyecto de Curso
Palabras Claveresponsive design, web, gráfica digital, estudio, constel
Período2013-2013
AsignaturaGráfica Digital
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Francisca Wevar, Nathaly Sepúlveda
ProfesorKatherine Exss


Introducción

Como diseñadores de web, se debe comprender que resolver la mayoría de los problemas es importante para así abarcar y presentar de forma coherente toda la información que anteriormente se presento.

Acerca del responsive desing

Responsive Design o Diseño Adaptativo es un enfoque de estructuración, flexibilidad y fluidez en el diseño y desarrollo web, que propone responder al comportamiento que el diseño debería adoptar en las distintas pantallas o resoluciones disponibles actualmente, para la vista de un sitio web. Dando así una coherencia constante e identidad del sitio web en los distintos dispositivos, permitiendo que no se pierdan ciertos rasgos que lo caracterizan.

“Día a día, el número de dispositivos, plataformas y buscadores que necesitan trabajar con su sitio aumenta. El diseño web adaptable representa un cambio en como vamos a construir sitios web para la próxima década” Jeffrey Veen

"Transplant the discipline name "responsive architecture" which was a research topic in the field of architecture, Implementing that into Web design, generated a similar & new concept. Why to have a custom Web design for each group of users;as architects don't design a building for each group size and type that uses it? (Would be funny if they did) Like responsive architecture, Web design should automatically adjust. It shouldn't require custom-made solutions for each new category of devices of any resolution" Ethan Marcotte, A list Apart

Pantallas y resoluciones a resolver

El Responsive Desing trata de abarcar todos los tipos de tamaño de pantalla, eso quiere decir web, tablet y móvil.

Responsive design kinetic knowledge.jpg

Planteamiento del encargo

Introducción al encargo

El siguiente trabajo consta del planteamiento de un sitio web para el texto Hoy me voy a ocupar de mi cólera de Godofredo Iommi y perteneciente a la Biblioteca Constel de la E.ad Particularmente, para este texto se tomo en consideración la existencia de un precedente impreso el que a su vez se basa en un registro sonoro. Por consecuente, este trabajo no solo se aborda en el sentido de que un sitio debe contener el texto, haciéndose más apropiado entonces el término "edición web", tratándose de un sitio web pensado desde una perspectiva que respeta el relato de texto y los elementos que lo definen.

Objetivos

  • Creación de un sitio responsive.
  • Presentar el texto Hoy me voy a ocupar de mi cólera de Godofredo Iommi en esta plataforma responsive.

Usuarios

  • Personas interesadas en conocer las reflexiones de Godofredo Iommi.
  • Alumnos y docentes de la Escuela de Arquitectura y Diseño de la PUCV.


sobre el texto

El texto a utilizar es Hoy me voy a Ocupar de mi Cólera que es la transcripción del audio de una clase realizada el 20 de Marzo de 1983 por Godofredo Iommi para el Taller de Amereida, el cual se encuentra -formato audio - en la casiopea de la E[ad] - forma digital - en la Biblioteca Constel y - formato análogo - en la Biblioteca Especifica de Arquitectura de la Pontificia Universidad Católica de Valparaíso.

             Colerahoy portada web.jpg

El libro original consta de 33 páginas.


Como se explica es una clase que se realiza para el Taller de Amereida en la cual Godofredo Iommi nos presenta diferentes reflexiones de las cuales también nos propone distintos mecanismos de interpretación de todo lo hablado en algún momento. En todo el discurso presentado nos habla de una pintura ‘Guérnica’ de Pablo Piccaso con la cuál compara demasiadas realidades o pensamientos, ya que está pintura esta catalogada como el apogeo. Una de las aclaraciones que nos presenta o a la cual quiere llegar Iommi es que cada cual tiene una forma de interpretar, presentar y crear una idea o forma propia. Y con ello la identidad de nuestro carácter y forma de vida.

imágenes del texto

Las imágenes utilizadas en la edición original, son dibujos extractos del cuadro "Guérnica" de Pablo Picasso. Estos extractos son realizados por un alumno de titulo de la época, ya que Godofredo Iommi lo solicito. [Fuente: Sylvia Arriagada]

Principalmente es importante la conservación de dichas imagenes según sus características fundamentales dentro del texto. Todo con el proposito de que se conserve lo relevante del original.

Desarrollo

Mapa de Navegación

  • Home: Contiene el título, el que se denomina página "0" pues cumple dos funciones, recibir al usuario y dar inicio a la lectura.
  • Sobre el texto: Ficha del texto y nota sobre la edición web.
  • Lectura continua: Desde el HOME que contiene la pagina "0" (título) hasta la página 33 (Nota del Editor). Como en la lectura de un libro el usuario-lector no puede volver omitiendo cierto intervalo de páginas. No obstante, puede recurrir a la lectura indexada para dicho proposito.
  • Lectura indexada: Si el usuario-lector desea leer una página en particular debe cliquear "Lectura Indexada", donde estará el indice de las páginas.
  • Búsqueda o "Search": El motor de búsqueda busca el elemento consultado dentro del texto y trae los distintos resultados de forma ordenada a tráves de la indexación de las páginas.
  • Sitios Hermanos: Vínculos a los sitios web de los textos realizados por otros grupos.


Hoymevoyaocupardemicolera mapsite gd franwevar.png


Decisiones

Para realización del encargo, se decidió tomar como referencia la edición impresa de Hoy me voy a ocupar de mi cólera (Iommi.G), por ende, el trato del texto y su forma de leer pretende ser lo más cercana a la intención ya dada en la versión impresa. No obstante, trabajar respecto a esta edición trae consigo diferentes factores los cuales se consideraron dentro de la edición web.

Ritmo de lectura > Modo de navegación - Modo de lectura:

Dada la extensión y sintaxis del texto, se plantea de que forma se navegará o bien, leerá el texto. Es decir, debe crearse un modo de lectura que permita llevar un ritmo adecuado para enfrentar la extensión del texto y a su abra paso a su compresión. Por otro lado, este mode de leer -sin desmedro de lo anterior- debe respetar el relato que el texto en si mismo posee y que ha sido deliberadamente estipulado a través de su sintaxis. Así es que se han planteado dos modos de navegación, independientes entre sí:

Modo uno > Navegación horizontal: Este modo de leer satisface los requirimentos del texto, ya que se encuentra -independiente de que se trate de un medio digital/web- más cercano a la lectura del libro, lo que se entiende como un ritmo ciertamente pausado, que posee la detención necesaria para la compresión que requiere el usuario - lector. Primordialmente, una de las razones que sustenta dicha decisión es la experiencia ya existente con el texto Hoy me voy a ocupar de mi cólera (Iommi.G), presente en la plataforma web Wiki Casiopea y el sitio web de la Escuela Ead. El problema con estas "ediciones" web es la ausencia de elementos que marquen el ritmo del texto pues este se muestra como una única columna continua de texto. Asi mismo, esta ausencia de "marcadores" influye en la perdida del ritmo de lectura del propio lector, y a su vez, como este comprende el modo de relatar del texto.

Modo dos > Navegación vertical: Para hacer posible esta forma de leer, se plantean ciertas condicionantes dada las experiencias ya existentes respecto al texto editado como muchos otros que están sujetos al mismo problema del "scrolling". Por tanto, se determina necesario la existencia de un "scroll" limitado, es decir, que cuando el usuario-lector requiera"pasar la página", la porción visible baje hasta un cierto punto, desplegando únicamente el contenido de la "página" solicitada.

Tipo de indexación

El texto Hoy me voy a ocupar de mi cólera (Iommi.G) no posee foliación, capitulación o cualquier tipo de categorización que permita indexar su contenidos de manera inmediata. Frente a esto, se plantea un sistema de numeración de páginas -en base a la versión impresa - que comienza en el cero, número asignado a la portada. No obstante, no existe capitulación -entendida como un nombre para una cantidad de páginas- por lo que el hecho de asignar un numero de pagina a cierto contenido no soluciona el problema, pero la determinación de un cierto "título" a uno u otro contenido del relato puede ir en desmedro de la compresión lectora que cada usuario-lector puede hacer del texto. Como solución se plantea mantener el sistema de foliación creado, pero a este se le agrega una parte de la primera frase de la página númerada. Esto permitira al lector encontrar una referencia de lo que se encuentra en dicha página.

Ejemplo:

  • 1. Hace dieciocho años...
  • .
  • .
  • 11. Rápido partido...
  • .
  • .
  • 16.¿Qué nos pasa en América?
  • 17. (Viene de 16) [...] ayer hablaba como un vendedor...
  • .
  • .
  • 21.¡No! Entonces...
  • .
  • .
  • 33. Nota del Editor


Análisis texto y páginas tipos

Para la presentación del texto en la edición de web, se revisaron los distintos tipos de grillas de la versión impresa, lo que arrojo N° plantillas en las que el texto se encuentra contendió en una caja centrada respecto a la página y lo que varía es el corte del texto y su posición dentro de esta, siendo ambos elementos los que determinan el ritmo o sintaxis del relato.

Distintos tipos de plantillas de texto

PUNTOS DE QUIEBRE Dado que el propósito final es la lectura del texto sin afectar su sintaxis, no existe un gran número de elementos que se puedan considerar de los puntos de quiebre. No obstante, se debe considerar dentro de este punto la apariencia y el comportamiento de menú.

Apariencia del menú Sitio web: Todos los contenidos y la barra de búsqueda se presentan en una barra ubicada en la parte superior de la ventana en lugar de un header.


Móvil - Navegación modo horizontal: Todos los contenidos y la barra de búsqueda se condensan en un botón con tres lineas y la palabra "MENÚ" ubicado en la parte superior izquierda de la ventana en lugar de la barra que utilizaba la parte superior por completo.

Ejemplo de navegación horizontal


Móvil - Navegación modo vertical: Cuando el móvil cambia su modo de navegación (no confundir con posición/orientación de lectura) a vertical el botón de menú se comprime Todos los contenidos y la barra de búsqueda se condensan en un botón con tres líneas ubicado en la parte superior izquierda de la ventana en lugar del botón con la palabra menú presente en el otro tipo de navegación en móvil y la barra que utilizaba la parte superior por completo. Este cambio se hace necesario dado que el botón "MENÚ" interferiría entre la interacción del usuario e interface al navegar hacia arriba o abajo.

Ejemplo de navegación vertical
  • Comportamiento de menú 1

Sitio web: La barra de menú se encuentra presente en todo el sitio con las mismas secciones y contenidos. Cada sección del menú tiene la posibilidad de ser cliqueada y así, desplegarse para mostrar sus contenidos. Los menús de cada sección se despliegan solo si son cliqueados y se colapsan automáticamente cuando uno de los contenidos es elegido.


Móvil: Al estar todos las secciones y contenidos dentro de un botón y al tratarse de pantallas más pequeñas, el menú se despliega cubriendo la pantalla. Una vez desplegado se visualizan las secciones. Ahora, al interactuar con las secciones existen tres acciones resultantes: 1. HOME y "Sobre el texto": El botón HOME redireccionará a la página "0" donde se encuentra el título y desde donde se puede comenzar nuevamente la lectura. "Sobre el texto" realiza el mismo tipo de acción pero redirecciona a la página con su nombre que posee la ficha del texto (autor, edición, etc.) y una nota sobre la edición web.


2. Botones "SEARCH" y "SITIOS HERMANOS" : Ambos botones se despliegan dentro del mismo menú 1, es decir, no hay re-dirección a otra página sino que todo sucede en una misma ubicación. Colapsan al volver a hacer click en ellos.


3. "LECTURA INDEXADA": Al cliquear en está sección, se va del menú 1 al menú 2, este último correspondiente a la sección. En el menú 2 se encuentra el indice de páginas. Este menú soporta scrolling táctil por lo tanto posee un link de retorno al menú 1 al principio y al final de indice o bien, el usuario puede dar "tap" al volver de su teclado táctil.

Wireframes baja intensidad

Web


primera propuesta home para web
primera propuesta despliegue "sobre texto" para web
primera propuesta despliegue resultados de busqueda para web

Bosquejos de proporciones dentro de la pantalla para realizar posteriormente los wireframe

Móvil

Home móvil horizontal
Home móvil vertical
horizontal


Bosquejos de proporciones dentro de la pantalla para realizar posteriormente los wireframe


Segunda parte: Wireframes alta intensidad

Definición de propuesta

Para esta nueva propuesta se tuvo que redefinir la forma de navegar por el texto, es decir, el ritmo de lectura. Esto implico distintas problemáticas independientes de cada dispositivo, ya que mientras los de mayor tamaño permiten ciertas acciones y ritmos, los más pequeños requieren de otros. Si bien en la primera propuesta la navegación era horizontal ,para todos los dispositivos, lo que ayudaba considerablemente a respetar la sintaxis del texto, a su vez se podría volver este modo de leer podría volverse una dificultad técnica a la hora de la programación del sitio para los distintos dispositivos.

Navegación y Capitulación

De esta manera, se planteo una navegación vertical limitada. Esto quiere decir, en el caso de los dispositivos de mayor tamaño (computadores - ipad) que la "página" que se ve en la caja o ventana no baja a través del uso de un scroll bar o la herramienta endless scrolling, si no que el usuario al cliquear o tocar el botón en la interfaz, esta moverá la página hasta un cierto punto o altura. Esto cabe decir sólo sucederá cuando el usuario esta en la sección "Lectura". Este tipo de navegación permite mantener un ritmo, un pasar de página vertical. Si se quiere poner más simple este punto, se puede recurrir a un simple ejemplo cotidiano de lectura en el internet; suele suceder que al leer, extensos textos en sitios web, no existe la posibilidad de leer de otra manera que no sea la vertical, no obstante, esta tiende cansar y sobre todo a desorientar al usuario/lector.

Ahora bien si la sintaxis puede conservarse de cierto modo dentro de las pantallas de mayor tamaño con navegación vertical, por otro lado, en los dispositivos pequeños, esta se pierde. Al tratarse, de pantallas mucho más pequeñas, se torna más difícil manejar los márgenes, mantener los blancos o conservar la posición de las imágenes. Para que el texto conserve un cierto ritmo de lectura y no se vuelva una "sábana" de contenidos, se determina un sistema de partición del texto en 5 capítulos, esto dado por las temáticas que va tocando a través del relato. Cabe mencionar, que esta capitulación también se encuentra en los dispositivos de mayor tamaño, ya que la propuesta consiste en que el usuario pueda acceder al texto de forma completa o continua, es decir, leer el texto por completo; y una lectura capitulada, que permite que el lector se dirija a un determinada parte del texto.

Nota: Los nombres de los capítulos no son los definitivos, así como también los menús llevarían etiquetas alt con el nombre y el título.

Mapa de Navegación

Para el esta nueva propuesta se replanteo el mapa de navegación puesto que el anterior no se adaptaba a la forma de leer que se deseaba para el texto.

ColeraMAPA SITIO 2.png

Dispositivos a comparar

  • MacBook Pro 15": 1440 x 990
  • Ipad lectura horizontal: 1024 x 768
  • Ipad lectura horizontal: 768 x 1024
  • Smartphone #1: 320 X 480
  • Smartphone #2: 240 X 320
Secciones del Sitio
  • HOME

  • PLANTILLAS DE LECTURA
    1. Plantilla A
    1. Plantilla B
    1. Plantilla B2
    1. Plantilla C
    1. Plantilla D

  • SOBRE EL TEXTO

  • RESULTADOS Y BARRA DE BÚSQUEDA

DESPLIEGUES DE MENÚS
  • Despliegue de "Textos anexos"

Nota: Grupos Hermanos se cambio a Textos anexos, pero por error no se cambio en todos los wireframes.

  • Despliegue de menú de capítulos y botones de navegación

Para algunos dispositivos dadas sus capacidades de uso se han implementando algunos elementos como botones que sólo aparecen al tocar la pantalla, por ejemplo.

  • 1. Macbook

En este caso, al tratarse de un dispositivo no táctil, y que se interactúa mediante un puntero o mouse, el contenido está "enmarcado" entre dos elementos (inferior y superior) que poseen la herramienta para poder moverse por el texto. Este "marco" viene a reemplazar el scroll bar, pues como ya se planteo antes, no sirve para los requerimientos de la propuesta. Así mismo, el elemento de navegación posee dos comportamientos; el primero, cuando se encuentra dentro de la lectura. En este escenario, el elemento no funcionara como una barra de scroll, sino al contrario, cuando el usuario cliqueé la página se moverá con el "limite" que se explico anteriormente. Por último, en cualquier otra sección, se comportará como una barra de scroll pero sin perder su apariencia.


En el caso del ipad, dado el usuario interactúa con él mediante gestos de forma directa sobre la pantalla, se uso esto a favor, dado que al disminuir el tamaño del dispositivo, algunos elementos -como el marco de navegación descrito anteriormente- se superpone sobre el texto e imágenes. Por cual, se planteo como solución que el elemento de navegación solo apareciese cuando el usuario hiciera algún gesto en la pantalla.

  • 2. Ipad (H)


  • 3. Ipad (V)


  • Márgenes Verticales

La grilla esta basada en franjas de 30px x 30px, por lo que cada franja representara 30px.

Las líneas rojas corresponden a los márgenes establecidos para los contenidos.

  • Anchos de Párrafo (px)

móvil

La resolución de pantalla a analizar es de 320x480 px. Tamaño de la mayoría de pantallas de smartphones tiene este tipo de resolución.

En estos casos


Tamaño 320x480 px
  • Home

Homeiphone.png

  • Despliegue del menú
  • Lectura

Capitulo uno activadomedidas.png


Cabe destacar que el scroll aparece solamente al tacto o interacción con la pantalla, permitiendo indicar donde en la lectura se encuentra el usuario.

  • Despliegue de resultados

Una de las importancias de y quiebres en el móvil con respecto al web o tablet, es que en el caso de los resultados de búsquedas estas están dispuestas en barras. La barras de resultados tienen una altura máxima de 74px y un alto mínimo de 62 px.


Sobre los puntos de quiebre

Los puntos de quiebre de este sitio dentro de los dispositivos de este tamaño son: los márgenes (verticales), los anchos de párrafo, algunos aspectos del menú como el despliegue o la compresión en el tamaño de los botones.

Cambios de Fuentes y cuerpos de texto
  • Título Portada H1 (px)
    1. MacBook Pro: 48 px
    2. Ipad (H): 36 px
    3. Ipad (V): 32 px
    4. Móvil: 24px
  • Títulos (px)
    1. MacBook Pro: 22 px
    2. Ipad (H): 18 px
    3. Ipad (V): 18 px
    4. Móvil: 14px
  • Anchos de Párrafo (px)
    1. MacBook Pro: 660 px
    2. Ipad (H): 620 px
    3. Ipad (V): 590 px
    4. Móvil: 260px
  • Cuerpo de texto (px)
    1. MacBook Pro: 16 px / 22 px (interlineado)
    2. Ipad (H): 16 px / 22 px (interlineado)
    3. Ipad (V): 16 px/ 22 px (interlineado)
    4. Móvil: 12px/

Tercera Parte: Inicio de codificación y diseño de interfaz

Para esta etapa se ha considerado importante para la funcionalidad del sitio y su contenido, es decir, que sea responsive, que todas las plantillas o "páginas" se dispongan en una única sábana navegable. Esto a planteado algunos cambios en el diseño de algunos dispositivos, sobre todo los pequeños, mientras que en los de mayor tamaño se ha replanteado la "función" que cumplen los elementos del menu. En los dispositivos de mayor tamaño se tenía que cada sección del menú de navegación llevaba al usuario a una nueva "página" con contenido. Por ejemplo, si hacia click HOME (o el icono de la casa) iria a la Portada o título H1, lo mismo sucede si se cliquea lectura o sobre el texto, mientras que si se hacia click en textos anexos, se desplegaría un menú con hipervínculos a los trabajos de los demás grupos. Ahora bien, estos botones de navegación ya no redirigen a una nueva página si no que sirven de anclaje a una cierta parte de la sábana (que se llamará HOME). Los únicos elementos que mantendrán su comportamiento es el menú desplegable de texto anexos. Estos cambios significarán una simplificación en los contenidos a desplegar en los dispositivos de menor tamaño en cuanto al menú. Al encontrarse todo en la sábana HOME, la navegación -en este caso- estará remitida a esa ubicación. Esto se verá reflejado tanto en el mapa de divs como en el diseño de los wireframes, pues como ya se explico al no existir redirecciones -en este caso- ya que se trata de una lectura continua, no se requiere de un menú de navegación. No obstante, se han decidido conservar ciertos elementos como el menú para navegar por los capítulos en el header) y una barra desplegable con los hipervínculos a los textos anexos (footer) y los elementos previamente ubicados en el footer (Biblioteca Constel, ead, Contacto).

Mapas de Divs

Los mapas de DIVS son la disposición y orden de los contenidos dentro del sitio web. Estas son las jerarquías que se disponen dentro del sitio web. Lo cual permite saber también las etiquetas "divs" que se utilizarán para realizar el codeo de dicho interfaz.

Nuestros mapas de divs

Tomando en cuenta el replanteamiento que hemos tenido que plantear y como lo llevaremos a cabo después, realizamos todos los cambios y se presentan las jerarquías.


mapa de div del tamaño Desktop, móvil

Propuestas de diseño de Interfaz

Primera propuesta

La propuesta consiste en un diseño simple y limpio pues no se desea interferir con el objetivo del sitio más allá de que sea funcionalmente reponsive sino que también permita que el protagonista sea el texto y su lectura.

Nota: Las propuestas se basan en el dispositivo 1440 px de ancho.

Segunda Propuesta

Criterios para el diseño de la interfaz

La primera propuesta consistía en un diseño cuyo propósito era no interferir con la lectura del usuario/lector. No obstante, dado que ahora todos los contenidos se encuentra en la sabana "HOME" se ha perdido el valor de la sintaxis que el texto "Hoy me voy a ocupar de mi cólera", aspecto al cual se abocaba el diseño anterior tanto en la navegación, mapa de divs e interfaz. Dado lo anterior, se tuvo que cambiar los menús de modo que permitiesen al usuario navegar a través del contenido y al mismo tiempo, fuesen posibles de programar.

  • Elementos navegación que permanecen y/o cambiaron: Los elementos que permanecieron y/o cambiaron dentro del sitio web.
    • Barra de navegación, la que permitirá navegar a través del sitio a través de sistemas de anclaje (href)
    • Botón de Inicio o Home, que permite volver desde un cualquier punto del sabana a la "portada".
    • La capitulación del texto, lo que por ende significará la permanencia (y rediseño) del menú que permita navegar a través de estos.
    • Los enlaces a los textos anexos que son sacado de la barra de navegación y puestos en una barra de navegación secundaria y de menor jerarquía.
    • El footer pero con menos contenidos como mapa de sitio, contacto o términos de uso y sólo conteniendo enlaces al sitio web Biblioteca Constel y al sitio web de la Ead.
  • Elementos eliminados
    • Motor de búsqueda
    • Scroll con "limites" o paginado que pretendía conservar la sintaxis.
    • Los "fondos" horizontales transparentes fijos que se comportaban como marco **para la lectura del texto y el scroll limitado o "paginado".
Decisiones de diseño de interfaz
  • Nombres de los capítulos: Primero, se decidió no dar un título a los capítulos pues el texto es una transcripción de una clase y por tanto, es de un carácter libre, por este mismo motivo, se planteo tratarlo como un texto poético y así no influenciar al lector hacia una cierta interpretación.

Por otro lado, la extensión del texto pide un cierto ritmo de lectura, por lo tanto, se determino una capitulación numerada pero donde el número en si mismo se vuelve un título por su valor como palabra y no como signo cuantitativo.

  • Paletas de colores: La paleta de colores consta 4 colores.
    • Negro: Texto del cuerpo.
    • Blanco: Textos de menú de navegación y del footer.
    • Rojos: Elementos de navegación e imágenes.
Colores en RGB y HEX.

El uso de estos colores se centra en los tonos rojos:

  • Para romper con el paradigma de que una propuesta minimalista y/o "limpia" tiene que centrarse solo en colores como gris, negro y blanco, lo que se aplico claramente en la propuesta anterior.
  • Para tomar como identidad la intensidad que posee la cólera en los sentidos de apogeo y de planteamientos(?).
  • Es un hilo conductor gráfico que se desarrolla a lo largo de la sabana "HOME". Por lo anterior, se propone que las imágenes presentes en el texto también sean de color rojo. Esta cantidad de rojo no representa un problema de "saturación" dada la cantidad de imágenes versus la extensión del texto en el HOME.


Imagenes sometidas al nuevo tono



  • Fuentes
    • Familia tipográfica Raleway en sus variantes Light, Extra Light, Regular para Barras de navegación, ficha y portada.
    • Rosario: Texto del cuerpo.
    • Adobe Caslon Pro: Nombre del autor

Ambas fuentes disponibles del sitio web Google Fonts

  • Trazo

La propuesta consiste en utilizar alguna grafía que entregue un momento de inicio y se ubicara el titulo de texto y la ficha "Sobre el texto"

Para que el sitio no sea tan plano y posea un poco de entidad y concordancia con respecto a las imágenes, se presenta la opción de que exista este trazo. Puesto que todos los elementos del sitio son muy digitales y es importante que se presente un contraste. Alguna grafía que permita presentar unión entre las imágenes y los textos.


  • Ficha "Sobre del texto"

La información bibliográfica del texto permite conocer sus antecedentes. Por ello en el Desktop y el Ipad esta ficha se presenta a un costado del titulo para que el usuario tenga la libertad de leer la información. En el caso del móvil, esta tabla de información se encuentra cerca del footer al finalizar el texto. Para tomar esta decisión se pensó que el usuario ingresa al sitio por un dispositivo móvil porque esta más interesado en leer el texto que en encontrar la información bibliográfica.

Interfaz según dispositivos

Es importante siempre tener en cuenta cuales son los cambios que se van dando en los distintos dispositivos y como estos se van eliminando o se van cambiando dentro del sitio.

El importante mostrar que en parte se va adaptando todo y como la información se va presentando de una forma u otra pero nunca se omite.

Uno de los grandes cambios que se presentaron dentro del sitio es la barra de navegación, esta se va ajustando al espacio de la pantalla - de desktop al ipad - para luego transformarse y estar en otra forma dentro del móvil.

Propuesta con imágenes en rojo

Enlaces para visualzar archivos en mayor resolución

  1. Interfaz Desktop 1440px x 900
  1. iPad 768px x 1024px
  2. Interfaz Móvil
Propuesta con imagenes en negro


Enlaces para visualzar archivos en mayor resolución

  1. Interfaz del dispositivo móvil (320px x 480)
  2. Interfaz del dispositivo móvil con menú desplegado (320px x 480)
  3. Enlace a visualización de interfaz de Macbook Pro (1440 px)

Desglose de interfaz

  • Apariencia botones y hover

Comparación comportamiento botones en barra de navegación

  • Ficha Sobre el Texto

Comparación fichas de textos en distintos dispositivos

  • Despliegue de menús

Despliegue de menús en dispositivo móvil