Ver el código de «Spektrum Media»

{{Caso de Estudio
|Nombre=Spektrum Media
|Autor=Franco Baldassare
|Ubicación=
|Desde=2013
|Hasta=2013
|Palabras Clave=Responsive Design
|Cursos Relacionados=Gráfica Digital 2013
|Alumnos=Franco Baldassare
|URL=http://spektrummedia.com/
|Descripción=Caso 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. 

<gallery>
Image:1263x1688.png|Para ser visto en pantallas grandes de pc.
Image:890x1986.png|Pantallas de notebooks 
Image:738x2358.png|Tablets
Image:554x2110.png|Tablets
Image:231x1502.png|Smartphones
</gallery>

===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.
#En la grilla para pc se pueden ver dos márgenes externos cuatro columnas de 270px cada una y tres márgenes internos. 
#En la grilla para netbooks consta de dos columnas de 395px cada una y márgenes internos y externos ya nombrados.
#La primera grilla para tablet mantiene dos columnas y sus grillas se achican a 319px  y los márgenes internos y externos ya nombrados.
#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).
#La grilla para smartphones también consta de una columna de 181px y se mantienen los márgenes externos. 
#Grilla fusión de una columna central interrumpida por una de cuatro columnas
#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

<gallery>
Image:1263x1688 Grilla.png| Grilla para pc
Image:890x1986 Grilla.png|Grillas para netbooks
Image:738x2358grilla.png|Grillas para tablet
Image:554x2110Grilla.png|Grillas para tablet
Image:231x1502grilla.png|Grilla para smartphones
Image:Sperktrum Grid Expertise.jpg|Grilla fusión 1 y 4 columnas
Image:Blog Grilla Spektrum.png|Grilla blog
</gallery>

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

<gallery>
Image:1263x1688 Desgloce .png|Spektrum Home divididida
</gallery>

==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. 
[[Archivo:1263x1688 menú.png|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. 
<gallery>
Image:Muestra objeto Exper menú desplazado.jpg|Menú en movimiento
Image:Muestra objeto Exper menú mark.jpg|Menú en movimiento
Image:Cambio del menú flechas.png|Muestra del desplazamiento del menú al ir recorriendo el sitio
</gallery>

*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.
<gallery>
Image:Muestra_objeto_bot_3.jpg| Menú extendido
Image:Muestraob4.jpg|Menú traducido a ícono
Image:Muestra objeto menú desplegado.jpg|Despliegue de menú en  lista
</gallery>


*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.
<gallery>
Image:Menu lateralspektrum.png| Sub menú escondido lateral izquierdo.
Image:Menu lateral desplegadospektrum.png|Sub menú lateral desplegado.
</gallery>

==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:

#Gris oscuro: R:33 G:33 B33
#Gris menos oscuro: R:37 G:37 B:37
#Calipso: R:0 G:246 B:246
#Verde oscuro: R:41 G:255 B:142
#Verde Claro: R:016 G:255 B:108
#Amarillo: R:235 G:255 B:51
#Gris semi claro: R:236 G:236 B:236
#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.

[[Archivo:Paleta de coloresspektrum.png|300px]]

===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. 

[[Archivo:Cascada de estilosspektrum.png|75px]]

===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.
<gallery>
Image:MuestraobjetoGrises.jpg|
Image:MuestreobjetoGrises.jpg|
Image:MuestraobjetoGrises1.jpg|
Image:MuestraobjetoGrises5.jpg|
Image:MuestraobjetoGrises3.jpg|
Image:MuestraobjetoGrises4.jpg|
</gallery>

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. 
<gallery>
Image:Muestra Objeto.jpg|
Image:Muestra objeto -1.jpg|
Image:Muestra objeto -2.jpg|
Image:Muestra objeto -3.jpg|
Image:Muestra objeto -4.jpg|
</gallery>

Cambio en boton de slide:

<gallery>
Image:Muestra objeto bot .jpg|Imagen sin selección de botones
Image:Muestra objeto bot 1.jpg|Flecha apretada superior
Image:Muestra objeto bot 2.jpg|Flecha inferior apretada
</gallery>

Cambio de efecto en botones de trabajos:
<gallery>
Image:Spektrum Portafolio.jpg|
Image:Muestra objeto bot 3.jpg|
</gallery>

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. 
<gallery>
Image:Muestra objeto bot 5.jpg|
Image:Muestra objeto bot 4.jpg|
</gallery>

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. 

<gallery>
Image:Muestra objeto Exper -1.jpg|
Image:Muestra objeto Exper -2.jpg|
Image:Muestra objeto Exper -3.jpg|
</gallery>

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. 

<gallery>
Image:SpektruBlog.png|Sección blog completa
Image:SMB1.png|Sección horizontal tipo slide comienza a desaparecer
Image:SpektrumMediaBlog2.png|Secciones trasladas
Image:Botón acción.png|Activación del botón
</gallery>

==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.
[[Archivo:Footer.png|700px]]Variació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. 
[[Archivo:Indice de contenidoSpektrum.png|700px]]

===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.

[[Archivo:738x2358.png|150px]]

*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. 

[[Archivo:890x1986.png|150px]]


*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. 

[[Archivo:1263x1688.png|150px]]

== 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. 

<gallery>
Image:Expertise.jpg|
Image:Expertise 2.jpg|
Image:Expertise 3.jpg|
Image:Sperktrum Grid Expertise.jpg|
Image:Spektrum Grid Expertise 2.jpg|
Image:Spektrum Grid Expertise 3.jpg|
</gallery>

===Cambio en la grilla===
En el sub-sitio hay un cambio en la grilla partiendo desde tres columnas,luego dos  hasta llegar a 1.
<gallery>
Image:Spektrum Portafolio.jpg|
Image:Spektrum Portafolio II.jpg|
Image:Spektrum Portafolio III.jpg|
</gallery>

==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. 
<gallery>
Image:RelaciónUs1.png|La presencia de botones es dar espacio a que el usuario tenga cierto control dentro del sitio ante lo ajeno.  
Image:RelaciónUs2.png|La ubicación dentro de un plano real le dice al usuario que no están escondidos y que puede llegar por su propia cuenta.
Image:RelaciónUs3.png|Los botones de twitter y facebook acercan al usuario en plataformas redes sociales, que él ya conoce y que comunican al instante.
Image:RelaciónUs4.png|El sitio pide que el usuario califique las obras a través de gestos cotidianos con la mano como malo, bueno, muy bien, y extraordinario.
Image:RelaciónUs5.png|Busca proponer con "personas con nombre y rostro" de la empresa. En su aspecto humano y algo cómico, consideran la mascota como parte del equipo. 
Image:RelaciónUs6.png|En este punto el usuario ya debería conocer bastante sobre Spektrum y lo incentivan a que deje sus datos y mande un mensaje contactándolos.
Image:RelaciónUs7.png| Por último les da espacio en los blogs para que los usuarios puedan opinar sobre algún artículo o nota que hayan subido.
</gallery>