Caso de estudio: Sparkbox

De Casiopea
TítuloCaso de estudio: Sparkbox
Tipo de ProyectoProyecto de Taller
Palabras Clavesparkbox, responsive design, grillas, sitio web
Período2013-2013
AsignaturaGráfica Digital 2013,
Del CursoGráfica Digital 2013,
CarrerasDiseñ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)Camila De la Vega
ProfesorKatherine Exss
URLhttp://seesparkbox.com


Análisis del Sitio

En este Caso de Estudio, revisaremos como funciona el sitio de Sparkbox con respecto a como responde como sitio web responsive. El responsive design es la adaptación del diseño en los distintos soportes digitales (smartphone, tablets, monitores, etc.) Sparkbox es el sitio de un grupo de diseñadores que trabajan con el responsive design, no es un portafolio propiamente tal, ya que además de trabajar en diseño web, también hacen convenciones y charlas sobre su metodología. Aunque aún estan en construcción, los elementos disponibles son suficientes para ser analizados.


Seesparkbox home.png

El sitio en distintas resoluciones

Grilla

La grilla del sitio, en su resolución mayor, es de dos columnas de 450px con un espacio de 70x. El cambio de soporte de motitor a tablet y luego a smarthphone, cambia su estructura a una columna única

Elementos Visuales

Header

1280header-7.png

Elementos desplegables

We are rebuilding

Desde el Header se puede ver que hay una barra que sale la siguiente slogan "We're rebuilind, Join Us". Si uno apreta ahí, se despligua un menú oculto, explicando que el sitio está en remodelación y dá unos fechas importantes. Este elemento se presenta distinto en los otros soportes, respetando la grilla correspondiente.


Contacts

El Header en algunos casos en intercativo. En este caso, al ingresar al INTERSHIP, si uno apreta el botón de Contacts, se desprende la información del creador junto a su número y dirección. Aunque el elemento interactivo logra tapar al contenido, sólo funciona correctamente en tablets. En smarthphones ho hay interacción, el menú ya esta desplegado.

786header2.png 786header1.png

Footer

1280footer-1.png

Este elemento tiene un botón donde se desprende un menú negro, que se puede ocultar si se apreta de nuevo.

En las resoluciones pequeñas, esto desaparece, en cambio, en smartphones, el menú negro se encuentra ya desplegado. No hay interacción en este caso

Moviemiento de los Elementos

Mov sitio.png Mov sitio2.png Mov sitio3.png