Caso de estudio: i Travel York
| Caso de Estudio | |
| Nombre | Caso de estudio: i Travel York |
|---|---|
| Período | 2014-2014 |
| Palabras Clave | responsive design |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Cindy Sanhueza |
| URL | http://www.itravelyork.info/ |
Introducción
El sitio escogido para analizar es i Travel York, el objetivo de este sitio es entregar información esencial a las personas para movilizarse por Nueva York, teniendo la posibilidad de planificar el viaje con anterioridad para conocer la ruta más fácil para llegar al destino en cualquier medio de transporte. Ingresando el lugar da a conocer el tiempo que se tardaría caminando, en bicicleta, en auto o en transporte público indicando 3 opciones distintas del mismo, los horarios y la dirección a seguir paso por paso.
Además da a conocer el clima en los siguientes 3 días, los eventos que vayan a realizarse, la ubicación de lugares por medio de un buscador y poder revisar un mapa.
Visualización de el sitio
El sitio web incorpora el responsive design, dando la posibilidad de adaptarse a distintas resoluciones de pantalla en este caso se analizan 3 variaciones, la primera es la pantalla de un computador de 1280px, la segunda es de una tablet vertical de 678px y la tercera de un smartphone vertical de 320px de ancho.
Inicio
Inicio 1280px
Inicio 678px
Inicio 320px
Plan a Journey
Plan a Journey 1280px
Plan a Journey 678px
Plan a Journey 320px
Grilla
La grilla esta compuesta de tres columnas
- En la resolución de 1280px las dos columnas de la derecha son de 225px separadas por un espacio de 20px y la tercera columna que se encuentra a la izquierda es de 450px, es decir la suma de las dos columnas anteriores pero sin contabilizar el espacio de separación de 20px.
- En la resolución de 678px las dos columnas de la derecha son de 176px y nuevamente separadas por un espacio de 20px, la columna de la izquierda es de 352px que es la suma de las dos columnas anteriores sin contabilizar el espacio de 20 px.
- En la resolución de 320px las tres columnas pasan a ser solo una de 300px.
1280px
678px
320px
Disposición de los elementos
A medida que cambia la resolución de la pantalla varía la disposición de los elementos adaptandose al nuevo espacio, pero manteniendo todo el contenido.
Header
En la sección superior se encuentran las opciones para las redes sociales, cambiar tamaño de la fuente, la accesibilidad, imprimir la página actual y registrarse en el sitio. Estas opciones se disponen de forma horizontal con una altura de 49px para pc, en Tablet se desplaza la sección de registro hacia abajo y el alto queda de 100px y en Smartphone los íconos de las redes sociales se integran en un menú desplegable llamado Follow, el cambio de tamaño de la fuente, la impresión de la página y la accesibilidad de integran en otro menú llamado Access y la sección de registro se encuentra dentro de My iTravel, modificando la altura a 40 px.
En la siguiente sección aparece el logo del sitio, un buscador y el menú. En la resolución de 1280px aparece el logo a la izquierda y al otro extremo se encuentra el buscador, posteriormente aparece el menú, el cual cada opción es desplegable. En la versión para tablet se reduce el ancho y el menú pasa a ser un botón desplegable con cada opción en su interior. En la versión para Smartphone se acomoda todo en la misma columna partiendo por el logo, después el buscador, terminando con el botón del menú.
Inicio
El inicio se caracteriza por tener varios recuadros se comprenden pequeños extractos de cada sección para mostrar en el momento que se entra las cosas que se pueden encontrar dentro del sitio. Dentro de todo lo que compone no se hace una reducción de contenidos, sino que se acomoda de tal forma de que todo permanezca. Resultando la versión de smartphone bastante extensa, ara esto se soluciona con un botón para volver al inicio y no perder tiempo volviendo al principio.
Secciones 1280px
Secciones 678px
Secciones 320px
Plan a Journey
Plan a Journey 1280px
Plan a Journey 678px
Plan a Journey 320px
Continua con la grilla del contenido en la pantalla para pc, pero al pasar a tablet las dos columnas representativas de la derecha se unen por el pequeño párrafo de contacto a otro sitio de city of york council, por lo que podría decirse que pasan a ser dos grandes columnas, para posteriormente transformarse en una para la pantalla de smartphone con toda la información hacia abajo.
Elementos gráficos
El sitio incorpora iconos para indicar la sección en que se encuentra y también paa reemplazar palabras por lo que se vuelve más llamativo para navegar. Además de los íconos se encuentra el logo del sitio el cual está compuesto por dibujos que son tomados como la iconografía central del sitio. Analizando estos elementos en las distintas pantallas se descubre que solo 3 son los que cambian de tamaño y dentro de esos 2 conservan igual tamaño en pc y tablet y cambian solo en smartphone, por consiguiente solo 1 es el que cambia de tamaño en cada resolución de pantalla.
Además de los íconos también se encuentran las imágenes, las cuales hay de 3 tamaños distintos, pero solo 2 varían con el cambio de resolución siendo una más grande en smartphone y la otra a pesar de cambiar en smartphone, en pc y tablet mantiene igual tamaño.
Relación de los colores con el logo
El logo del sitio además de cada color enmarca la sección en la que se entra, así como al posarse en la opción car sharing esta se destaca con un color naranjo y al ingresar se mantiene una línea por debajo del color. Entrando a esta sección se da a entender de inmediato que estoy en un post el cual trata de ir en auto a alguna parte, el título de la sección esta en naranjo, aparece el icono de un auto que es el mismo de el logo, por lo que al salir de esta sección se puede reconocer y recordar que el color naranjo era para lo relacionado con viajar en auto, por lo que hace la navegación más rápida e interactiva.
Variación en controles
En el sitio ningún contenido desaparece por lo que revisando lo único se modifica al cambio de pantalla son los controles de movimiento para avanzar unas imágenes, el botón de búsqueda de una sección y un icono que aparece solo en las pantalla de pc.
- El recuadro gris contiene el ícono que aparece solo en la pantalla de 1280px
- El recuadro verde contiene unos botones de desplazamiento y de parar y reproducir la secuencia, al pasar a la pantalla de 320px desaparecen y solo queda el de reproducir y pausar.
- El recuadro rojo contiene unos puntos que marcan la cantidad de imágenes solo parece en la pantalla de 1280px.
- El recuadro morado muestra como el botón de ir pasa de ser redondo, a cuadrado y después nuevamente redondo.
Tipografías
Las tipografías utilizadas son Ubuntu y Pragmatica-Web de tamaño 13 a 31px en las versiones normal y 700px. Analizando la tipografía de cada una de las secciones en las distintas pantallas llama la atención que no haya una variación en el tamaño mas que solo en el menú, por lo que puede deducirse que el sitio está pensado para ser móvil.
Comportamiento tipografía el ancho máximo de texto es de 450px para la pantalla de 1280, para tablet el ancho es de 349px y para smartphone el ancho es de 337px, comparando la tipografía nuevamente se repiten los mismos tamaños para cada pantalla, excepto por un parrafo que es la introducción al tema que en pc y tablet es de 18 px y en smartphone pasa a ser de 16px.
Errores
El sitio web al estar pensado para ser móvil y que las personas puedan consultar la ruta para seguir una dirección directamente desde la calle hace que sea fundamental el responsive design por lo que se puede ver que todo el contenido se adapta a los distintos formatos de pantalla, revisando aparece una sección que formaba parte del inicio de la página que es un post para planear un viaje colocando el lugar de origen y el de destino; al ingresar en una sección del menú este formulador de tiempo de viaje se encuentra al inferior de la página y en el tamaño 678px se observa que el botón de ir se encuentra desplazado hacia abajo esto ocurre en los formatos de 645px hasta el 799px.
Conclusión
Como ya entes mencionado al ser un sitio para ayudar a movilizarse por la ciudad a las personas tiene la facultad de funcionar muy bien adaptándose a las distintas resoluciones de pantalla, además utilizando los colores propios del logo con un icono para cada medio de transporte hace que el moverse por el sitio sea muy intuitivo, logrando mostrar al usuario los distintos elementos que hablan sobre lo que está buscando solo guiándose por el color.
