Spektrum Media
| Nombre | Spektrum Media |
|---|---|
| Autor | Franco Baldassare |
| Período | 2013-2013 |
| Palabras Clave | Responsive Design |
| Estudiado en | Gráfica Digital 2013 |
| Estudiado por | 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.
Para ser visto en pantallas grandes de pc.
Pantallas de notebooks
Tablets
Tablets
Smartphones
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
Grilla para pc
Grillas para netbooks
Grillas para tablet
Grillas para tablet
Grilla para smartphones
Grilla fusión 1 y 4 columnas
Grilla blog
Análisis de forma
Análisis de cuerpo gráfico por sección
Spektrum Home divididida
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
- 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.
- Muestra objeto Exper menú desplazado.jpg
Menú en movimiento
- Muestra objeto Exper menú mark.jpg
Menú en movimiento
- Cambio del menú flechas.png
Muestra del desplazamiento del menú al ir recorriendo el sitio
- 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.
Menú extendido
Menú traducido a ícono
- Muestra objeto menú desplegado.jpg
Despliegue de menú en lista
- 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.
Sub menú escondido lateral izquierdo.
Sub menú lateral desplegado.
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.
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.
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:
Imagen sin selección de botones
Flecha apretada superior
Flecha inferior apretada
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.
Sección blog completa
Sección horizontal tipo slide comienza a desaparecer
Secciones trasladas
- Botón acción.png
Activación del botón
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.
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.
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.
- 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.
- 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.
- 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.
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.
- RelaciónUs1.png
La presencia de botones es dar espacio a que el usuario tenga cierto control dentro del sitio ante lo ajeno.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
