St Paul's School
| Título | St Paul's School |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| 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) | María Ignacia Falcone |
| Profesor | Katherine Exss |
| URL | http://www.stpaulsschool.org.uk/ |
Introducción
El sitio estudiado pertenece al colegio británico St Paul School.
Es responsive, lo que quiere decir que su diagramación se adapta a distintos tamaños de la pantalla. Posee tres momentos principales en los que la diagramación cambia radicalmente: al alcanzar los tamaños de un computador, una tablet y un móvil.
Home para PC
Home para tablet
Home para móvil
Contenido para PC
Contenido para tablet
Contenido para móvil
Grillas
A simple vista se puede observar una simplificación de la grilla a medida que el ancho de la pantalla disminuye.
En el caso de la home, la pantalla completa posee una diagramación de una mayor complejidad, dividida en dos columnas principales. La primera a la izquierda es más angosta, posee solo algunos elementos estructurales fijos como el título del header, el menú principal y la agenda.
La columna de la derecha es más ancha y posee mayores contenidos (un párrafo introductorio, noticias, etc). Esta columna se divide en dos secciones diferentes, una abajo y otra más arriba, cada una con su propia división en subcolumnas. En estas últimas se posicionan las fotografías y otros elementos con forma de caja.
Al transformar el tamaño de la pantalla a uno de tablet, la diagramación pierde estas subcolumnas. En cambio, se mantiene la columna de la izquierda y la de la derecha contiene sus elementos dispuestos de forma vertical.
Finalmente, cuando la pantalla alcanza el tamaño de la de un móvil, la columna de la derecha se pierde por completo. En su lugar se mantiene la columna de la izquierda, un poco más ancha, con todos los elementos ajustados de modo que éstos quepan dentro de la columna dispuestos verticalmente.
Grilla home PC
Grilla home tablet
Grilla home móvil
E. estructurales PC
E. estructurales tablet
E. estructurales móvil
De forma parecida, la grilla de una página cualquiera de contenidos del sitio se encuentra dividida en tres columnas principales.
La primera a la izquierda es la misma columna del home (ancho de 126 px, contiene el menú de navegación y el título del header). La segunda columna, más ancha, contiene la mayor parte del contenido escrito (textos, títulos, etc). La tercera columna, también angosta, contiene las imágenes y otros objetos con forma de caja.
Cuando el tamaño de la pantalla se reduce, también lo hacen el número de columnas, siempre manteniendo la de la izquierda. En tamaño de tablet, la diagramación cuenta con dos columnas (se unen las de la derecha) y en móvil vuelve a tener solo una (la de la izquierda, más ancha).
Grilla contenido PC
Grilla contenido tablet
Grilla contenido móvil
Algunos elementos estructurales o de navegación más pequeños aumentan de tamaño y cobran mayor protagonismo.
Estos elementos no pueden perderse al disminuir el ancho de la pantalla, ya que son necesarios para el funcionamiento de sitio.
Uno es el buscador. En pantalla para PC el buscador tiene un ancho de 100 px. En tamaño de ipad su ancho es de 82 px, disminuye de forma proporcional, pero aún visible. En el caso de los móviles, el tamaño del buscador aumenta (150 px), y se ubica en la pantalla de tal forma que jerárquicamente es uno de los elementos principales del sitio.
Lo anterior se debe a que primero; si se hubiera continuado reduciendo el tamaño de forma proporcional, el buscador habría resultado ilegible. Segundo; se tiende a asumir que el usuario que entra a un sitio a través de su móvil lo hace con menos tiempo y buscando alguna información en particular, por lo que se opta por facilitarle la tarea.
Otro ejemplo es el recuadro del header que contiene el nombre del sitio. Es necesario que se mantenga visible porque le indica al usuario donde se encuentra, que ya ha llegado al sitio.
El resto son los menús, que al cambiar la diagramación vuelven a agrandarse de modo que ocupan el ancho de la columna. Lo que se logra con eso es que el alto de la caja y el tamaño de la tipografía no cambie, facilitando su lectura.
Buscador
Header
Menú principal
Algunos de los elementos estructurales más grandes tienden a encogerse o desaparecer, suprimiéndose la información que se considera innecesaria.
Por ejemplo, la barra semitransparente del header desaparece (no es necesaria, ya que solo se necesita el título y el buscador) y es reemplazada por completo por el recuadro que contiene el nombre del sitio.
El menú secundario que se encuentran abajo se mantiene, porque sí aportan algo nuevo, pero no son tan necesarios para la navegación como lo son por ejemplo el bucador o el menú principal.
Header
Menú secundario
Comportamiento de imágenes
Las modificaciones a las imágenes pueden ser de distintas variaciones.
Aquí habría que considerar que tan importante es cada fotografía, la información que entregan. ¿Es necesario que esté presente? ¿Cuánto de ella es necesario?
En el primer caso, la imagen se conserva del mismo tamaño, pero se corta de modo que quepa en la pantalla. Se elige una especie de centro en la fotografía (las escaleras del monumento con algo del jardín de fondo) y se recortan los bordes, manteniendo el alto de la fotografía.
En el segundo caso, cuando la diagramación cambia la foto simplemente desaparece. Aquí el menú secundario no necesita de las imágenes, ya que cada sección posee un título y una descripción que expresan el contenido del link.
El tercer caso es el de una galería de fotos en la que se muestran vistas del colegio y su ubicación. Aquí lo que se intenta hacer es conservar la integridad de la imagen, centrándola en lugar de cambiar su tamaño, pero al llegar al tamaño de pantalla móvil es necesario hacer un corte. Si esto no ocurriera, la fotografía debería escalarse a un tamaño menor, lo que afectaría su visibilidad (que es importante, ya que se trata de una galería).
En el último caso, la imagen se a escalado de modo que calce con el ancho de la columna en la que se encuentra. Aquí surge un error, ya que a pesar de que hacer eso funciona para la diagrmación en PC y móvil, el tamaño de la imagen en tablet queda desproporcionadamente grande. Esto se vuelve una molestia, ya que la foto en particular no entrega información ni es parte esencial del artículo (como podría ser el caso del mapa, o fotos en una galería). Termina siendo necesario hacer scroll sobre la fotografía para llegar a los menús que se encuetran en la parte de abajo de la diagramación, lo que interrumpe la navegación del sitio.
Se corta
Se elimina
Se mantiene y se corta
Se cambia su tamaño
Estilos tipográficos y de párrafo
El sitio no posee variaciones en los estilos tipográficos cuando cambia el tamaño de la pantalla. Éstos permanecen iguales, mismo tamaño, misma tipografía.
Sin embargo, al cambiar el ancho de la columna, los párrafos de texto se acomodan de forma que puede tener más o menos líneas. Esto ocurre no solo con los cambios drásticos de las tres grillas, sino que también cambia en los tamaños intermedios.
- Paulestilostítulo.jpg
Títulos
Párrafos
