Caso de estudio: Colly

De Casiopea




Caso de Estudio
NombreCaso de estudio: Colly
AutorJaviera Escudero
Período2014-2014
PeríodoIIº trimestre
Palabras Claveresponsive
Estudiado enGráfica Digital 2014
Estudiado porJaviera Escudero
URLhttp://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)


1.jpg


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


Pantalla LCD 1280x1024


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.


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.




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,


Sitio web en sus tres tamaños
Grilla del sitio y su transformación



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.

Los cuadros de colores marcan las distintas secciones dentro del sitio, desde el header hasta ek footer
Se marcan los elementos y como estos se van re-ordenando dentro de la pagina

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


No se muestran cambios en el tamaño de la tipografía al pasar de un formato a otro


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


Body del sitio web donde se aprecia cada imagen y su texto


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

Primera sección del body donde se presenta la biografía, obras y otros intereses del Autor


Segunda sección

En esta sección el Autor presenta referencias externas, otros sitios de interés para el y el usuario


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.

Texto de presentasion que acompaña una imagen

Footer

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.


Footer en los tres tamaños analizados


Texto justificado al centro, su ancho va variando según el formato donde se muestre


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


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.


El menú que aparecía en el home, vuelve aparecer pero esta vez cambia al aparecer en una pantalla de 320px
Hay una limpieza de información y re-ajuste de texto


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.


Galería de imágenes en desktop, tablet y mobile.
Se evidencia el body y el footer de la pagina, aparece un nuevo color


Visualización del menú en una pantalla de 320px.

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

Cambria.gif


Times New Roman

TimesNewRoman.gif


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


  • Color de la tipografía: #333
  • Background: #FFFAFA


Texto descriptivo Times New Roman
Texto del footer

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

https://www.dropbox.com/home/Public/ANALISIS%20HTML