Spektrum Media

De Casiopea




Caso de Estudio
NombreSpektrum Media
AutorFranco Baldassare
Período2013-2013
Palabras ClaveResponsive Design
Estudiado enGráfica Digital 2013
Estudiado porFranco Baldassare
URLhttp://spektrummedia.com/
DescripciónCaso de estudio del sitio web: Spektrummedia.com Comportamiento, grilla, cambios gráfico, etc.

INTRODUCCIÓN

Espektrum Media es un sitio web creado por un grupo de diseñadores para presentar su estudio de diseño a cargo de la creación de sitios webs y software. Este tiene el carácter de ser un sitio estilo Responsive, el cual se ajusta a diferentes tamaños de pantalla, cambiando de manera sustancial la grilla sin cambiar su identidad.

Análisis estructurales

Resoluciones

Spektrum Media es un sitio web que permite la visualización de su contenido a través de un diseño adaptable a diferentes tamaños de pantalla. El cambio de soporte ya sea pantalla de pc, pantalla de tablet o pantalla de smartphone es un tema a considerar ya que en el mundo de hoy la gente vive con un traspaso de información muy grande y suelen estar conectadas a internet desde diferentes soportes lo cual implica, un forma diferente de visualización. Hoy si una sitio web no es adaptativo al medio en el cual se reproduce, tendrá un efecto negativo al momento de ser visualizado.

Grillas

Este sitio consta de 5 grillas distintas en las que sus márgenes exteriores siempre son de 25px y los internos siempre de 50px, el ancho de las columnas va cambiando dependiendo del tamaño de la ventana.

  1. En la grilla para pc se pueden ver dos márgenes externos cuatro columnas de 270px cada una y tres márgenes internos.
  2. En la grilla para netbooks consta de dos columnas de 395px cada una y márgenes internos y externos ya nombrados.
  3. La primera grilla para tablet mantiene dos columnas y sus grillas se achican a 319px y los márgenes internos y externos ya nombrados.
  4. La segunda grilla para tablet de resolución más pequeñas se piensa en una única columna central de 504px y los márgenes externos se mantienen (en este caso no existen márgenes interiores).
  5. La grilla para smartphones también consta de una columna de 181px y se mantienen los márgenes externos.
  6. Grilla fusión de una columna central interrumpida por una de cuatro columnas
  7. La grilla de una columna está presente en la sección de los blogs y tiene una columna central de 630px y de márgenes 318px

Análisis de forma

Análisis de cuerpo gráfico por sección

Header

Contiene un header muy sencillo que presenta en su extremo izquierdo el Logo de la compañía, el cual además de cumplir con ser la imagen corporativa, es un link que lleva hasta la y que está siempre presente. Mientras que en el costado izquierdo se encuentra el menú del sitio web.

Despliegue de formas de menú

  • Menú Fijo

Este menú se encuentra en algunas partes del sitio y se encuentra en el tope de la página. 700px


  • Menú Movil

Este menú aparece en algunas partes del sitio y al ir recorriendo el sitio verticalmente éste acompaña el recorrido desde el tope de la ventana.

  • Menú Plegado

Por razones de espacio el menú se simplifica a un ícono el cual acompaña durante el recorrido vertical del sitio y en el momento de ser apretado se despliega una lista vertical de este. El punto de quiebre que activa el cambio del menú se pliegue en un solo ícono es a los 554px de ancho de pantalla.


  • Sub Menú

En algunos caso existe un sub menú que se desprende desde el lado izquierdo como es el caso del portafolio. Este aparece en el rombo con las tres líneas horizontales paralelas. Al hacerle click este ícono desaparece y aparece este menú con los subtemas.

Body

Análisis del color

Dentro del sitio se usa una paleta de colores bien contrastada en la cual el color calipso y el amarillos son los que más producen un efecto de contraste en los fondo que suele ser algún gris claro o bien un gris casi negro: Los colores de más oscuro a más claro son:

  1. Gris oscuro: R:33 G:33 B33
  2. Gris menos oscuro: R:37 G:37 B:37
  3. Calipso: R:0 G:246 B:246
  4. Verde oscuro: R:41 G:255 B:142
  5. Verde Claro: R:016 G:255 B:108
  6. Amarillo: R:235 G:255 B:51
  7. Gris semi claro: R:236 G:236 B:236
  8. Gris Claro: R:242 G:242 B:242

Los colores bases de fondo son los grises mientras que el amarillo, verdes y calipso, son aquellos los que le dan energía a la visualización de la página.

Paleta de coloresspektrum.png

Análisis de imágenes

Análisis de tipografías

Spektrum cuenta con dos familias tipográficas distintas: Brandon Grotesque con cinco variables y Open Sans con nueve variables distintas.

Cascada de estilosspektrum.png

Análisis de botones y acciones

Los contenidos se presentan como botones de acciones instantáneas creando cambios de color, cambio de tamaño del ícono e incluso llegan a poner dos botones simultáneamente agregándole una nueva función.

En la página de inicio, se complementa con estas imagenes en escala de grises, que son una especie de muestra de trabajos realizado por la compañía. Esta tienen su forma especial de mostrarse: Las franjas verticales de la imagen se expanden hacia sus lados de tal manera que se corren todas las franjas para darle cabida a esta y además es acompañada por una franja horizontal inferior de color bastante contrastado en el cual aparece el nombre del proyecto. De cierta manera también sigue como esta ley del responsive design en el que el contenido se amolda a las proporciones del medio en que se reproduce.

Cambio en boton de slide:

Cambio de efecto en botones de trabajos:

Cambio del botón anterior a una plataforma más angosta. Su altura disminuye y predomina la horizontalidad de este y su forma de destacarse mantiene el color amarillo al contraste con el negro. Sin embargo como son muchos sitios, se decide que después de visitar con el cursor el botón este desaparece asumiendo que este fue visitado. Para poder volver a ver el nombre del botón es necesario actualizar la página lo cual es incómodo para quién navega.

Cambio en botones: Al posar sobre el boton adquiere un color negro el ícono, y al ser apretado entrega la información ampliándose la casilla hasta la celda de más abajo mientras el resto le sede el espacio.

Dentro de la sección blog se presenta una galería la cual consta de 6 blogs distintos propuestos por la empresa.En el momento que uno desciende con el scroll se comienza a traslapar el horizonte de los blog sobre la franja tipo slide con la imagen verde hasta que esta desaparece y queda sobre puesta. Por otro lado los 6 blogs son representados por imágenes que en el momento de superponer el puntero del mouse, esta se desliza hacia abajo apareciendo la descripción del blog.

Footer

El footer no presenta cambios estructurales, solo su ancho se acomoda al diferente ancho de la ventana. Sus íconos de redes sociales se ubican siempre donde mismo y los derechos reservados a mano derecha también están inmóviles. Footer.pngVariación de la extensión horizontal del footer.


Análisis Contenido

Despliegue del contenido

Este recuadro separó los contenidos por los elementos que se muestran en cada parte del sitio. De esta manera, se puede ver que el área con mayor sobre cargar el submenú es la de "Portafolio" Otras por otro lado son excesivamente leves como es la de Contact en la cual es un despropósito hacer un sitio especial para ese item. Indice de contenidoSpektrum.png

Recorrido horizontal Menú

Aparte de mostrar las diferentes grillas se puede observar como afectan los colores de fondo grises claros y oscuros con sus opuestos verdes amarillos y calipso. Link de la imagen: http://wiki.ead.pucv.cl/images/9/94/Recorrido_por_el_men%C3%BAspektrum.png (es demasiado grande y la wiki no logra crear miniatura de esta, por eso agrego un link)

Objetivos de presentación por pantalla

  • Pantalla de Smartphone: Se simplifican los textos y slogan de la franja verde y se muestra uno es a uno en un orden vertical.

donde lo más importante es la opción de ver cualquiera de los cuatro trabajos en la misma cantidad de espacio de la franja horizontal verde. Hay cierta motivación por mostrar en el menor espacio la mayor cantidad de información importante. Se podría decir que es la forma de vender su imagen.

Archivo:231x1502.png50px

  • Pantalla de Tablet: Es curioso que en este tipo de resolución los segmentos son mucho más homogéneos. Y define tres tiempos muy definidos en cuanto a relación de ancho y largo simétrico. Da la sensación que el usuario tiene todo a la alcance de su mano en tres tiempos.

738x2358.png

  • Pantalla de Netbook: En la pantalla de 890x1986 se presenta un discurso de ideas más pequeño, se achicó la barra verde en su ancho y le abre paso al convencimiento a través de las obras o ejemplos en la barra negra con cuatro ejemplos de trabajos.

890x1986.png


  • Pantalla de PC Resolución 1200x800: Por las imágenes que se muestra usa metáforas que llaman al pensamiento creativo por ende lo más importante para este grupo de diseñadores es que conozcan su "speach" y luego sus obras.

1263x1688.png

Relación Entre sus sub-sitios

En la sección "Expertise" hay una relción de 1 columna vertical ancha y para su subtemas una granja dividida en cuatro columnas. Se puede observar que en la imagen Expertise 2 se evidencia como se van acomodondo el contenido dentro de la grilla al queda un tema solo indicando que esa es la siguiente fila por usar.

Cambio en la grilla

En el sub-sitio hay un cambio en la grilla partiendo desde tres columnas,luego dos hasta llegar a 1.

Integración: Relación Sitio-Usuario

A lo largo de todo el sitio, hay elementos que constantemente van estableciendo una relación con el usuario. Estos buscan acortar la brecha entre el usuario y su medio de visualización hasta la entidad corporativa que se presenta en un sitio web. Este sitio propone al menos siete elementos distintos que buscan aproximar al usuario a un conocimiento relativo de la compañía sin la necesidad que la compañía tenga que presentarse en persona. Así se Spektrum va un paso adelante,incentivando al usuario a relacionarse con ellos.