Caso de estudio: London SE
| Caso de Estudio | |
| Nombre | London SE |
|---|---|
| Autor | Sofia Enriquez |
| Período | 2014-2014 |
| Palabras Clave | responsive design |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Sofia Enriquez |
| URL | http://www.london-se.com/ |
London SE
Introducción
London SE es un sitio que busca mantener al tanto de los mejores lugares de comida, arte, compras y actividades al aire libre. Son dos personas los creadores que están en constante movimiento por los barrios de Londres, pero a su vez funciona desde una lógica cooperativa, en donde cualquier persona puede mandar un mail contando sobre sitios y actividades. Pareciera ser que estuviese pensado desde la idea de la constante movilidad, el acceder al sitio en el mismo instante en que se recorre la ciudad.
Home
Visualización en 3 pantallas
El sitio se estudiará desde tres tipos de pantallas, de 320px ( movil), 780px ( tablet), 1280px (notebook). Cada cual va reestableciendo tanto tamaños como distrubución de los elementos dentro de la pantalla, de manera de lograr la mejor optimisación funcional y visual de estos.
Estructura
La estructura posee evidentemente un sidebar el cual finalmente termina por desaparecer al llegar a la pantalla movil por un tema de optimisación de espacio, al tener una pantalla reducida el elemento no tendría sentido, ni visual ni funcional
Partes que la componen
Dentro del inicio se pueden distinguir las diversas partes que componen la página en cuanto a contenido y estructura.
Header
- Logo (home)
- Favorite Spots
- Maps
- What's on
Body
- Favourite spots
- Ongoing Exhibitions
- Map favourite spots
- Pizza map
- Newsletter
- Who and what we are
- Contact
Primera vista
En una primera vista se podría decir que en terminos estructurales tablet y notebook son bastantes similares. Ambas tienen su sidebar con una fotografía, y la composición del emcabezado. En cuanto a movil ya cambia de una manera más radical eliminando el sidebar y teniendo inmediatamente una vista de la primera fotografía bajo el encabezado.
Encabezado y Menú
El encabezado se mantiene dentro de las tres pantallas en cuanto a diseño, al igual que la disposición de elementos, solo varía en cuanto a tamaño.
Respecto del menú, primero se tiene el de pantalla de 1280px, en donde el logo de este es de 135px x 60 px, luego "favorite spots" es de 154px x 40 px, "maps" es de 70px x 40px, y "what's on" es de 107px x 40 px.
En la pantalla de 780px, el logo desaparece y el menú se torna como un icono de 60px x 60 px, la caja de este mide 513px x 292px, en donde cada item de menú posee una dimensión de caja de 513px x 73px.
Finalmente en pantalla movil, el icono de menú sigue siendo de 60px x 60px, la caja de menú mide 321px x 292px, y cada item es de 321px x 73px.
Primera categoría
La primera categoría se conforma desde los items que están en el menú, siendo "favourite spots", "maps" y "what's on", dentro del body el con mayor predominancia es favourite spots, al costado ocupando el sidebar está what's on y finalmente bajo estos se posiciona maps, al poseer una menor cantidad de información y funcinar estructuralmente de otra manera, como un googlemaps.
Favourite spots
En la pantalla de notebook, luego del encabezado viene la parte predominante, en donde se tiene una jerarquía fotográfica, en donde se tiene una primera gran imagen, para luego dar paso a una estructura de dos en dos, essta es la unica de las tres pantallas en donde se puede dar esta jerarquía fotogtáfica. Esta primera gran imagen es de 736px x 491px, para luego dar paso a las siguientes cuatro de 354px x 237px.
En el caso de la pantalla de 780px, la jerarquía de imagenes desaparece y todas poseen un tamaño de 419px x 280px.
Y las imagenes de movil son de 284px x 190px.
Imagen en donde se puede apreciar de manera más demarcada las secciones que conforman la primera parte del body, en sus tres pantallas, en donde la de 1280 posee en rojo la jerarquía de la fotografía, la cual luego desaparece en las dos siguientes.
What's on
Esta segunda categoría utiliza casi en su totalidad el sidebar, salvo en el encabezado, el cual tiene una fotografía que va rotando.
Esta categoría consiste en una constante información de donde y cuando están los eventos en la ciudad, es por ello que primera se tiene la fehca de inicio y termino, para luedo dar paso al nombre y el autor. Esta categoría es la unica de las tres que cambia drasticamente al momento de ir a ver su propia página, en donde utiliza una grilla con diversas fotografías, con sus respectivos nombres y fechas.
Los anchos en esta categoría también son bastante variables, por ejemplo el ancho del movil es superior al tablet, esto se debe a que en tablet aún actúa como sidebar, mientras que ya en movil toma el mismo ancho que todos los elementos.
La medida de sidebar es de 450px x 2331px en notebook, el modulo de exibiciones es de 340px x 1520px, y las cajas de texto varían según la extensión de este, pero mantienen el mismo ancho de 285px.
En tablet, la medida de sidbar es de 194px x 1977px, y el ancho de las cajas de texto es de 162px.
En movil, sidebar es de 320px x 270px, luego unos margenes de 283px, para finalemente obtener un ancho de caja de 238px y largos variables.
Maps
Maps se presenta en el inicio dentro de la misma grilla que el resto de los items, pero luego al acceder a ellos funcionan como google maps, obteniendo su información cliqueando en los puntos de referencia que aparecen en el mapa.
La medida de estos en el inicio es de 354px x 422px en notebook, 419px x 414px en tablet y 248px x 422px en movil
El comportamiento del footer es conservar ambas columnas hasta llegar a movil, en donde todo se vuelve de un mismo ancho, una sobre otra. Dentro de los elementos del footer se tienen por un lado las redes sociales, y por otro el quienes son y el contacto, con pequeñas reseñas.
Las medidas del footer en notebook son de 901px x 419px, la caja que contiene a la columna de las redes sociales es de 234px x 157px, y la que contiene el quienes somos es de 355px 128px, al igual que la de contacto.
Las medidas en tablet son de 513px x 495px el footer, redes sociales 13px x 157px, quienes somos y contacto, amas de 202px x 166px
En movil, footer de 320px x 660px, redes sociales 262px x 162px, quienes somos 262px x 157px, contacto 262px x 178px.
Grilla y márgenes
La primera gran observación dentro de los márgenes que es ody y sidebar son dos estructuras por separado, no pensaron la pagina de una forma unificada, por lo tanto cada cual posee sus prpias medidas, las cuales solo coinciden en el primer título de cada cual. La separación entre fotografía en el caso de la pantalla de 1280, es la misma. Y a su vez la separación entre los títulos principales también tiene su propia medida. En el caso del sidebar, la separación entre cada uno de los items es la misma. Esto mismo pasa en el caso de la pantalla de 780, poseen el mismo comportamiento.
Finalmente en el caso del movil todas las separaciones tienden a una misma regularidad, una misma norma de separación según cada uno de los items.
Home
Paginas principales
Las paginas principales, junto con sus paginas interiores, dan cuenta a simple vista que desde un principio se pensó en un diseño responsive al tener una estructura de cajas, puediendo ser facilmente apilables, modificando tan solo tamaños y tipografías. Poseen una gran adaptabilidad. A continuación se mostrará la pagina principal de cada uno y un ejemplo interno.
Favorite spots
Pagina interior
What's on
Pagina interior
Maps
Pagina interior
Tipografía
La tipografía del sitio se centra en dos familias. Helvetica y georgia. La primera es utilizada para el menú, los principales títulos y los textos de mayor extensión, incluyendo el footer. Y la segunda es utilizada para el encabezado, y títulos más pequeños.
Home
Las variantes del inicio son primero, el menú con una tipografía helvetica, luego un encabeza con Georgia, y el logo, el cual es una imagen incrustada, por lo tanto no se pudo saber a que familia pertenecía. En un mismo nivel se encuentran el título de favourite spots, con el de ongoing exhibitions, tanto en tamaño como tipografía. Al igual que maps y newsletters. Para luego en cada item ir jugando con tamaños en Helvetica, siendo esta además la elegida para un texto de mayor extensión.
Tipos
Las variantes tipográficas que se pueden encontrar en home son helvetica 13px, la cual es utilizada para el menú, helvetica 15px, helvetica 15px para títulos menores, y helvetica 24 px para los títulos del sidebar. Por otro lado se tienen las variantes de georgia, las cuales se encuentran en el encabezado con 42px y 15px y 16px para títulos.
Niveles
Los principales niveles que se encuentran en el inicio son primero el logo, luego en encabezado, los títulos de los nombres de las exposiciones, y finalmente los títulos de los diversos items del menú.
Menú
El menú dentro de las tres pantallas se tomó como ejemplo para observar las variaciones de tamaño en las diversas pantallas, al igual que el logo, en donde ambos conservan tanto en notebook como en tablet sus proporciones, las cuales son finalmente disminuidas en el móvil.
- Notebook
font-family: “ColfaxWebBold”, “Helvetica Neue”, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 40px; margin: 12px 1px 0 0; padding: 0 16px;
- Tablet
font-family: "ColfaxWebBold", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 40px; margin: 12px 1px 0 0; padding: 0 16px;
- Movil
font-family: "ColfaxWebBold", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 40px; margin: 12px 1px 0 0; padding: 0 16px;
Encabezado
El tamaño de tipograía solo cambia en el movil
- Notebook
font-family: "PublicoHeadlineLight", Georgia, Times, "Times New Roman", serif; font-size: 42px;
- Tablet
font-family: "PublicoHeadlineLight", Georgia, Times, "Times New Roman", serif; font-size: 42px;
- Movil
font-family: "PublicoHeadlineLight", Georgia, Times, "Times New Roman", serif; font-size: 32px;
Logo
Al igual que el encabezado, solo en movil baja el tamaño tipográfico.
Conclusión
Como conclusión podríamos decir en un primer nivel que el sitio fue pensado desde el concepto responsive, en primer lugar porque el mismo consiste en un modo movil, el estar en la ciudad y poder consultar que está pasando en ella, donde ir, donde comer, mapas para guiarte, puedes contribuir a ella con tus propios lugares, etc. Y en un segundo lugar, esta posee una estructura en donde es facil situarlo en las diversas platarfomas y variaciones de tamaños.
Por otro lado, uno de sus errores podría estar en el diseño del item "what's on" ya que en un principio no queda del todo claro que se trata del mismo conteido que está en el sidebar, primero porque el título no es el mismo, y segundo al entrar directamente al item el diseño es muy distinto, con muchas imagenes y contenido, y finalmente al acceder a uno de los eventos la grilla también cambia, se extiende, no posee una similitud con los otros items, se sale un poco del concepto general y unificador.
Fuera de ese concepto unificador creo que es un sitio que cumple con la función que ellos dicen proponer y que posiblemente su mayor publico se encuentre en dispositivos moviles.
Analisis html y css
https://www.dropbox.com/sh/rzuyrcee3h6t484/AADnOMb7KXZvQq7OUcbfZJpoa/Grafica%20digital
