Grupo B: Segunda carta sobre la phalène

Título	Grupo B: Segunda carta sobre la phalène
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	responsive
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)	María Ignacia Falcone, Franco Baldassare
Profesor	Katherine Exss

Propuestas de wireframe

Primera propuesta

Web Se propone una primera diagramación en la que se separan el contenido del texto, su ficha con sus datos técnicos y el menú navegable que contiene el índice con los otros textos.

Se prueba ubicando el menú de navegación arriba y abajo del contenido. Finalmente se toma la decisión de que la barra esté arriba, ya que a pesar de que jerárquicamente el índice no es lo más importante, el contenido del texto es bastante extenso y eso haría más difícil acceder a él.

Tablet Al pasar a una diagramación de tablet, la propuesta cambiaría poco en el índice y el contenido. La mayor diferencia sería que la columna que contenía los datos técnicos de la ficha pasaría a tomar una forma más horizontal y se ubicaría bajo el índice y sobre el contenido.

Smartphone En tamaño para móviles, se privilegia que la persona pueda acceder rápidamente al texto, por lo que los datos del índice se esconden en un menú pequeño que se encuentra al principio de la página. Los botones de ese menú son "Más textos" (el índice) y "Ficha" (los datos técnicos). Se ubican al principio de la página, siguiendo el mismo orden de la diagramación anterior, sólo que el contenido se encuentra oculto.

Web
Web
Tablet
Smartphone

Segunda propuesta

Web Nuevamente, se separa el contenido. Esta vez se opta por colocar juntos los datos técnicos y menú de navegación, separados del contenido del texto. Para la versión web, los datos y el menú se colocan arriba, separados dell resto, y las imágenes se colocan en una columna junto al contenido.

Tablet El único cambio (además de el ancho de algunos objetos) está en las imágenes del texto, que pasan de estar a la derecha a ser incorporadas dentro de la misma columna de texo.

Smartphone Los datos técnicos y el menú pasan a estar escondidos, siendo visibles al clickear en un botón. Ambos botones se encuentran uno al lado del otro, intentando conservar las ubicaciones de esos contenidos como se encontraban en las diagramaciones anteriores (ficha arriba a la izquierda, menú arriba a la derecha).

Web
Web
Web
Tablet
Smartphone

Tercera propuesta

Web La propuesta es similar a las anteriores. Los contenidos también se separan. El menú de navegación ha perdido algo de su importancia, pues ya no se encuentra en un menú superior; se considera que sólo la persona interesada en otros textos lo utilizará, pero no es algo estrictamente necesario para la lectura.

Tablet Esta propuesta tendía a mantenerse igual al cambiar el tamaño del documento, pues ya tenía incorporadas desde el principio algunas de las soluciones de las propuestas anteriores (por ejemplo, las imágenes dentro de la columna de texto en lugar de al lado), por lo que fue descartada.

Web
Tablet

Cuarta propuesta

Web Esta consta de una estructura básica de una columna, mientras que en su lado izquierdo consta de 1 menú fijo y en la franja de su derecha aparecen datos anexos como la ficha o la imagen que tenga que ver con la relación al párrafo.

Tablet En la propuesta de la tablet se propone un menú que desaparece dando mayor espacio al texto, se propone una ficha superior que deja de ser visible al momento de ver la página y la columna derecha presenta un espacio para poder mostrar solo fotos.

Menú lateral
Sin Menú lateral

Smartphone En este soporte se presenta una propuesta donde consta de una sola columna donde el menú es cabecera del sitio y que es plegable. De primera instancia se muestra la ficha y luego comienza el texto con imágenes entre los párrafos.

Menú desplegado
Sin Menú y ficha
Sin Menú parrafo e imagen

Quinta propuesta

Web En este modo se presenta un menú superior el cual constaría con lo textos y un sub menú que indicaría el texto en el que se está navegando. Consta de una sola columna de texto ubicada en la columna derecha con imágenes entre sus párrafos.

Web Menú y submenú

Tablet Este modo presenta el mismo menú permanente arriba mientras que su submenú desaparece e indica la ficha, tiene una columna para textos y otra pa las imágenes.

Menú sin submenú
Sin Menú lateral

Smartphone En primera instancia se presenta el sitio como dos columnas de menú siendo equivalentes cada una, tras hacer click en el texto que se quiere se presenta un encabezado con el título del texto y con un ícono que representa la posibilidad de volver al menú anterior. Luego se muestra la ficha primero que el texto y al ir bajando las imágenes van apareciendo entre los párrafos. En su forma apaisada su menú aparece en el lado lateral del texto, y al momento de achicarse adquiere la forma anterior de un encabezado con el icono de retorno al menú.

Menú movil vertical
Vista del contenido vertical
Vista vertical contenido imagen
Menú apaisado
Contenido apaisado
Contenido apaisado con imagen

Sexta propuesta

Web Se separan el texto del menú y la ficha. Estos últimos se colocan en una barra lateral a la isquierda, mientras que el texto se coloca a la derecha de ésta.

Tablet Para la vista en tablet horizontal, el único cambio es que la barra lateral se esconde a la izquierda de la pantalla. Para desplegarla se debe hacer click en una franja angosta al borde de la pantalla que contiene un símbolo, y que se mantiene fija al hacer scroll.

Smartphone La barra lateral cambia de estar escondida a la izquierda a estar escondida en la parte superior del sitio. El contenido se encuentra dentro de dos botones, "Ficha técnica" y "Más textos...". Estos se mantienen en el mismo orden que en las diagramaciones anteriores. Los botones son fijos al hacer scroll

Web
Tablet
Interacción tablet
Smartphone
P1wireframeSPinteracción.fw.png

Interacción smartphone

Séptima propuesta

Web Esta propuesta se basa en la idea de mostrar el menú de navegación como si fueran separadores de una carpeta. Los tres elementos (menú de navegación, ficha y texto) se encuentran en la diagramación. El menú se encuentra arriba, en la barra superior, cada texto representando un "separador" distinto. La ficha se encuentra en una columna a la izquierda, y el texto a la derecha más o menos centrado.

Tablet La vista horizontal en tablet se mantiene casi igual, sólo cambian algunos anchos. Para la vista vertical, las opciones del menú deben reacomodarse (son dos filas de separadores en lugar de una) y la ficha pasa a encontrarse en la misma columna del texto, arriba, de modo que se ahorra el espacio antes utilizado por la barra lateral.

Smartphone

Web
II Carta a la Phalène T1.png

Tablet horizontal
II Carta a la Phalène T3.png

Tablet vertical

Grillas

La cantidad de columnas de cada grilla está basada en el número de separadores en el menú de navegación del wireframe, pues se tiene en cuenta que estos deben tener un ancho similar.

Web
Tablet horizontal
Tablet vertical

Propuesta para smartphone

Grilla

La propuesta para Smartphone se plantea desde una resolución de pantalla de origen vertical de resolución 320x480. Se plantea la resolución de una grilla con márgenes de 12px y tres columnas de 90px, más una segunda grilla que varía en el ancho de sus columnas conservando los márgenes de 12px y un aumento el ancho de columnas quedando en 142px. Esta columna se crea especialmente para poder acomodar mejor la forma de la ficha.

Menú

Ya que se decide optar por un menú sencillo y resumido en tres elementos se usa la forma de fichero y se estructura la grilla en tres columnas. Se plantea que los elementos más importante es nuestro texto por lo tanto es lo primero que aparece de izquierda a derecha, y de arriba hacia abajo. Luego creemos fundamental el hecho de que el usuario no pierda de vista la ficha debido a la verticalidad que va a producir la lectura del texto. Se crea una situación presencial de esta en caso de que se quiera ver. Ya por último se presenta una tercera opción con el elemento de "más textos". De esta manera se ofrece el despliegue de textos en un menú aparte.

Footer

Por otro lado se presenta siempre la opción de un footer que incentiva a la lectura del resto de los textos. Por ende este debe aparecer en los dos elementos del menú: "Segunda Carta sobre la Phalène" y "Ficha".

Interacción

Debido a que la lectura se tiende a extender enormemente, se toma la decisión de implementar un "Menú de ancla" que acompañe el recorrido de la lectura del texto. De esta manera siempre será posible acceder en cualquier minuto a la ficha o bien elegir otro texto sin necesidad de llegar al footer.

Archivo:Wireframe Smartphoneee.pdf

Diseño de interfaz

Estilos tipográficos

Se seleccionó dos fuentes tipográficas extraídas desde Google Fonts. Roboto , tipografía Sans Serif dedicada especialmente para el menú, ficha y footer para una lectura rápida, mientras que para el texto continuo se seleccionó PT font, una tipografía que conformara un gris tenue y no quedara tan rígido el cuerpo de texto. Además se eligió con serif, ya que el cerebro tarda un poco más en identificar la letra de tal manera que obliga al lector a mantener cierto nivel de concentración.

Estilos II Carta a la Phalène SI.png

Propuesta para Web

Primera propuesta

Propuesta de web basada en un menú de 6 columnas que permite acomodar el menú de los seis textos. Cada texto tiene su propio botón el cual cambia de color de un azul opaco (color que se usa para los títulos)y un celeste claro para el cuadro de texto del Texto seleccionado.

Se presenta una columna central de texto, con un título grande sobre este y una tabla que contiene una ficha a la izquierda del texto.

Versión Web II Carta Sobre la Phalène

Segunda propuesta

Para esta propuesta se decide que las líneas del menu dejan de ser blancas para darle un tono gris claro y con un poco de transparencia. De esta manera se suaviza la barra de menú y se evita que aparezca tan obvia la grilla. Además se agrega la propiedad de disolver las puntas a un minimo de 2px evitando que el rectángulo azul del menú se contraste tanto con el blanco. Además se vuelve a re-pensar el over del botón de texto seleccionado cambiando de un azul a color blanco, el cual se le aplica la misma propiedad en que sus bordes se disuelven levemente. Además se propone que la letra adquiera en vez de blanco el color azul de la barra de menú.

Por otro lado se re ubica la tabla en base a la grilla, de tal manera de dar más margen entre la columna de texto principal y la grilla. También se toma la decisión de darle un color de fondo, que es el mismo que usa la tipografía en el menú y las franjas horizontales se les proporciona un gris que sea menos contrastado que el que tenían en la propuesta I de diseño de interfaz.

También se decide de cambiar el color celeste que tenía el nombre y la fecha del texto por el mismo color azul del título y del menú, ya que como tiene un cuerpo más pequeño tiene una sensación de azul más claro.

En cuanto al tamaño de la Imagen de Web, se plantea una imagen más grande y sin una caja de fondo con el fin de poder aprovechar la resolución de la pantalla.

DI II Carta Sobre la Phalène Diseño Web.png

Versión 2 Web II Carta Sobre la Phalène

Propuesta para Tablet

Primera propuesta

Esta propuesta, se reduce a un ancho de tres columnas por lo que su menú se duplica en cuanto a pixeles de 40px a 80 px. En la tablet la ficha se mueve de su lado izquierdo y se ubica en la parte superior de la columna central de texto. También se considera que El título debe estar presente siempre sobre la columna de texto sin ninguna interrupción, de esta manera se delimita a la ficha a quedar sobre el título usando el mismo ancho de columnas.

Versión Tablet II Carta Sobre la Phalène

Segunda propuesta

En esta propuesta lo que básicamente cambia es lo mismo que en el diseño web: Bordes disueltos, se cambia el botón de texto seleccionado, se le agrega un fondo a la tabla y se le cambian los grises, y por último se cambia el color del autor y la fecha del texto.

DI II Carta Sobre la Phalène Diseño Tablet.fw.png

Versión 2 Tablet II Carta Sobre la Phalène

Propuesta para Smartphone

Primera propuesta

Debido a que los móviles carecen de espacio, se propone una lectura con pocos márgenes, y un menú de un botón. Este menú tiene el carácter de ser desplegable al hacer click en el botón de Texto, este al abrirse despliega la posibilidad de elegir cualquiera de los otros cinco textos los cuales están acompañados por su autor y fecha. A diferencia del tablet y de la versión web hay un cambio en los datos y fechas ya que se mueven de debajo del título y se ponen dentro del botón.

Consideramos que era necesario siempre mantener en el header el nombre del texto el cuál se está leyendo por lo que se creo una etiqueta que no es clickeable que se muestra bajo el menú desplegable.

Se consideró necesario un botón en el footer que permitiera al usuario volver al inicio de la página.

Versión Smartphone Menú cerrado.
Versión Smartphone Menú de texto abierto.
Visión extendida del contenido

Segunda propuesta

Esta nueva propuesta también suaviza los bordes entre las uniones de las diferentes franjas del horizonte en el menú.

Se hace un cambio en la tipografía de light a regular en el menú (nombres de los textos) para que se puedan ver más contrastados. La tipografía adquiere el color del menú del diseño web y del tablet.

Por otro lado la etiqueta del texto seleccionado,deja de ser celeste y se vuelve blanca y con letras azules como en la propuesta web y tablet.

En cuanto a la tabla también es modificada de la misma manera que en web y el tablet, sin embargo, los bordes no son redondeados y se deja como un horizonte de color.

También se modifica el color del botón "Volver a Inicio" al color del menú.

DI II Carta Sobre la Phalène Diseño Móvil 2.png

Versión 2 Smartphone Menú cerrado.
DI II Carta Sobre la Phalène Diseño Móvil.png

Versión 2 Smartphone Menú de texto abierto.

Paleta de Colores para la segunda propuesta de Interfaz

Se propone Esta Paleta basada en el color azul, debido a que este color produce el efecto de calma en las personas (ya que es un texto de lectura que requiere concentración). El negro se propone para la lectura del texto continuo y los grises para los botones del menú no resalten tanto y se considere la idea de que son botones apagados. Además se usa el gris para que la tabla no diera la sensación de que estuviese volando. Por último el blanco es elegido para darle un mayor contraste al negro de la letra.

Móvil

Mapa de divs

Estos fueron creados pensando en tres tamaños de resolución: Pantalla, Tablet y smartphone. Por ende, los puntos de quiebre que manipulan la conducta del css, son 1280px de ancho (pantalla horizontal) para pantallas de computador, 768px de ancho (modo vertical) para pantallas de tablet, y 320px de ancho (modo vertical) para smartphones.