Caso de estudio: Colly
| Caso de Estudio | |
| Nombre | Caso de estudio: Colly |
|---|---|
| Autor | Javiera Escudero |
| Período | 2014-2014 |
| Período | IIº trimestre |
| Palabras Clave | responsive |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Javiera Escudero |
| URL | http://colly.com/ |
Colly
Introduccion
El Diseño dentro de su gran universo de pososbilidades y definiciones, se basa basicamente en darle un soporte al contenido, este soporte puede ser variado, ya sea, impreso o digital, cual sea este formato el diseño debe estar pensado siempre en la persona que va a recibir este producto final con el objetivo de crear una experiencia y que esta sea provechosa y agradable para el usurario, en este sentido el diseño web (Responsive design) es un claro ejemplo del diseño centrado en el usuario y de la usabilidad efectiva que puede tener el sitio web.
Colly.com es un sitio web responsive que muestra el portafolio de un Diseñador de manera creativa. A continuacion el analisis del comportamiento del contenido con respecto a los distintos formatos (desktop, tablet, mobile)
Diseño Liquido
El sitio se va adaptando al formato en el cual se va mostrando,ya sea en vertical u horizontal, por eso también se le llama Diseño liquido.
Desktop
Sitio web visto en pantalla de computador de 1280px, esta podría ser la forma mas común de visitar e interactuar con el sitio. Al ingresar a el se puede apreciar a primera vista una galería de imágenes que llaman la atención pero que cumplen la función del menú. Las imágenes con la principal característica del sitio
Tablet
Pantalla Tablet de 768px en sus versiones horizontal y vertical. Los margenes se mantienen proporcionales al tamaño y las imágenes se reestructuran y agrupan en nuevas columnas. El Header no sufre mayores cambios, se mantiene.
iPAD 768x1024
iPAD apaisado
Mobile
Sitio web visto en un Galaxy S II de 320px. Los margenes se angostan mucho mas quedando 4 imágenes casi por completo en la pantalla, al ponerlo en posición horizontal las imágenes se agrupan en una fila, tal como se vería en PC. Tal como pasa en un Tablet el Header se mantiene sin mayores cambios.
Galaxy S II 320x950
Galaxy apaisado
Grilla
Como ya mencione anteriormente, la principal característica de este sitio son las imágenes ya que de de ellas se compone el contenido.
Comparación en la transformación de la grilla en los 3 formatos
Observando el sitio se evidencia una grilla que se deja ver a través de la organización de las imágenes en el, tal como se aprecia en la imagen, el sitio pose cuatro columnas sin contar los margenes del sitio. Al pasar a Tablet esta se transforma en dos ya que las imágenes quedan en dos columnas y así hasta llegar a un Mobile, el cual posee una columna de imágenes,
Comportamiento del contenido
En el Home, el movimiento del contenido y de los elementos en el sitio web responsive de 1280px a 320px, es ordenado y fluido permaneciendo toda la información. No se pierde nada al pasar de un formato a otro, solo se reagrupan y se vuelven a ordenar los elementos. Como todo sitio responsive, las secciones y contenido solo tiene a alargarse.
Partes y comportamiento del Home
El home, o pagina de inicio, es la bienvenida y la portada al usuario, en este caso, el sitio web analizado corresponde a un portafolio y su manera de presentarse y de dar a conocer sus trabajos y el contenido es a través de diferentes imágenes de animales e insectos, lo cual hace mas llamativo el sitio y su navegación
Header
El Header lleva el nombre del autor y dueño del portafolio, su tamaño no varia en el paso de un formato a otro pero si el blanco a su alrededor y se puede ver claramente en los tres tamaños.
Una observación en contra se debe a que al hacer click en el, este vuelve al mismo sitio ni tampoco sigue apareciendo al usar el skroll por lo que no tiene funcionalidad
Body
El body del sitio web se compone únicamente de imagen y textos, estos dos son los que permiten la navegación e interacción del usuario con el sitio
Comportamiento de las imágenes
Las imágenes se van agrupando hasta quedar en unidades (en formato 320px). El tamaño de estas cambia al estar visualizadas en un mobile. La imagen crece y se adapta a la pantalla mientras que la caja de texto que acompaña la imagen se alarga. Estas están en blanco y negro lo que hace resaltar el color rojo de la tipografía
Primera sección
Segunda sección
Comportamiento del texto
El home del sitio contiene poco texto ya que predomina la imagen. La única observacion visible en el paso de un formato a otro es el ancho de la caja de texto al aparecer en una pantalla de 320px.
Al igual que en el resto del sitio, los margenes se van angostando pero todo permanece alli. La caja del texto que aparece al final de la pagina va variando según el tamaño de la pantalla. Solo en el se generan cambios.
Pagina interna
Análisis del contenido
Al ingresar por uno de los botones a la sección "Biografía" se observa que el sitio crece en contenido y que se producen mas cambios interesantes al utilizar las distintas pantallas. Hay mucho mas texto y aparecen nuevas opciones en el body como también nuevos botones.
Movimiento de contenido
Se muestra el sitio en los tres tamaños, se puede apreciar como crece la pagina en contenido.
Los cuadros marcan las distintas secciones de la pagina analizada
Se puede apreciar como se van moviendo los elementos dentro del sitio y como se va limpiando la información para que solo quede lo esencial
Galería de imágenes y texto
Al observar la galería de imágenes y el texto de la sección "biografía" se aprecia que en este caso que al mostrar el mismo portafolio que salia en el home a 320px, las imágenes se van y aparecen nuevos botones que solo contiene el titulo de la sección.
Dimensión de la imagen: 134 × 135px
Junto con el texto aparece en pantalla desktop una imagen con la cara del autor, luego esta desaparece y el texto se ajusta al nuevo formato. Los margenes en la tablet se empiezan a angostar, también así en pantalla mobile quedando el texto en casi toda la pantalla. Aquí es donde se barre mas información.
Siguiendo con el body de la pagina aparece esta otra sección que también se podía ver en la home. Se puede apreciar en la imagen de los cuadros de colores como desaparecen y aparecen nuevas cosas con el responsive design.
Análisis Tipográfico
El sitio en general posee poco texto y variacion del mismo por lo tanto las tipografías utilizadas en la pagina son dos las cuales corresponden a las siguientes familias tipográficas en sus versiones regular e italic.
Cambria
Times New Roman
Estilos y tamaños tipográficos distintos
El tamaño utilizado en los textos que acompañan la imagen en el body, titulos y bajas de titulo va desde los 12px hasta los 65px
Tamaño:65px
Imagen
Tamaño: 12px y 15px
- Color de la tipografía: #333
- Background: #FFFAFA
Conclusión
Al analizar este sitio web responsive me di cuenta de que el diseño de este quizás no este pensado desde la pantalla del computador hacia la pantalla de un teléfono mobil si no que al contrario ya que de esta manera se evita tener información y contenido extra de la cual no se requiere y que podría llegar a entorpecer la navegación por el. Creo que al ser un portafolio web esta lo justo y necesario sobre todo en la home y lo muestra de una manera que llama la atención.
Este análisis básicamente pretende mostrar como se va eliminando la información o como esta va apareciendo, como la pagina se va limpiando de lo que ya no se necesita mostrar para optimizar la navegación del usuario y finalmente cumplir con el objetivo de toda búsqueda, el encuentro.
Tercer encargo: Analisis HTML desde el codigo
El analisis consiste en ver el sitio web desde sus codigos de programacion para poder observar distintos elementos de la pagina, ya sean los divs, los vinculos externos, las listas, etc. Para ello se crean 3 carpetas en las cuales se analisa la pagina de distinta manera.
- Carpeta uno: HTML completo
- Carpeta dos: HTML intervenido, sin vinculos externos
- Capeta tres: Aparecen los divs
