Estudio y trabajo Sitios Responsive

De Casiopea






Caso de Estudio
NombreAnálisis en torno a Sitios Responsive
AutorCarolina Nuñez
Período2013-2013
Estudiado enTutorías Gráfica Digital 2013


[Introducción]

En un primer momento comprender lo que es un sitio responsive, de manera personal, lo definiría de la siguiente forma. Lugar digital en donde se interactúa de una cierta manera, en su plataforma web, la cual mediante cambios estructurales puede ser modificada para ser vista en otros tipos de dispositivos, como lo son tablet, smartphone. La diversidad de estos dispositivos hace crear categorías a trabajar desde puntos concretos, es decir, límites entre resoluciones para producirse el cambio.

Ifour, Sitio Web de Estudio

[Web Ifour] Este sitio web corresponde a una agencia de diseño, la cual se define como innovadora,reputación y por soluciones inteligentes en los negocios, mediante inspiración e integridad.

Elementos Visuales Generales

Header: Presenta El logotipo del sitio. Siguiente a el, la Barra del Menú de Navegación. Hacia una esquina, notoriamente muestra las redes sociales para poder acceder a ella de manera rápida.

header


Click en el buscador
  • Buscador, al apretar en la lupa, se despliega para poder escribir.

Al lado del buscador, llamando la atención a otros sitios web, muestra el número de teléfono de contacto como único elemento de servicio en un primer momento. Cuando se busca algo, esta búsqueda queda en la parte inferior de la página.

Ubicación de lo del Buscador
  • Interacción con Botones, en todo el sitio se puede observar el uso del color amarillo como interfaz de interacción al pasar el cursor por encima de elementos determinados.
Interacción con botones


Body:

  • Welcome

Cambios:

Ejemplo 1 Welcome

En este sector notaremos los siguientes cambios con respecto a su construcción misma y a su interacción con los elementos. Dentro de los elementos visuales se encuentra, para resaltar artículos el uso de gif, con la característica del alejamiento en la imagen(como un zoom inverso) mostrándose un panorama general desde lo cercano como se muestra.

Artículo, Imagen cercana
Alejamiento en la Imagen


Cada vez que inicio el sitio web o vuelvo a apretar la pestaña Welcome, puede partir de forma distinta el gif junto con los elementos de la derecha(como se muestra acá otro ejemplo)

Inicio del Sitio Ifour/Ejemplo2



Otro elemento a considerar es la interacción entre cosas del sitio, por ejemplo, al pasar por una noticia, esta queda en amarillo, y entre una noticia a otra noticia, su transición es percibida en el desaparecer del cuadro amarillo a otro lugar en donde arrastro el cursor para llegar a otra noticia.

Si seguimos bajando por el "body" del sitio en su Home, nos encontramos con estos elementos; son 3.

Elementos en el Home
Al pasar el cursor, amarillo
  1. Online Design
  2. Corporate Branding & Collateral
  3. Strategic Thinking


Los cuales si pulsáramos nos llevan a lo que se muestra acá. Correspondiente al botón "Service" de la barra del Menú.

Elementos dentro de "Service"

Se observa una tabla de contenidos a la izquierda que tiene la característica q ue guarda contenidos en las 3 categorías mencionadas anteriormente.


Bajo esta zona, en Welcome, se encuentra "Client List" ingresando de forma rápida a los clientes que poseen, es decir, a su portafolio, por lo tanto al ingresar a alguna imagen específica, nos lleva a la explicación y el resumen de cada producto".
Veremos el Caso del cliente Microsoft.

Botón en Welcome, "Portafolio"
Portafolio Cliente Microsoft


  • Portafolio
Portafolio Texto

Cuando hacemos siguiente con el click, se despliega la totalidad de los elementos en el Portafolio.

Pestaña Portafolio
Totalidad de Elementos Portafolio

Al hacer click en la segunda pestaña "Websites" dentro de Portafolio.

Vista Websites item
Interacción,Item Websites

Se presenta un elemento en todo momento a lo largo de la navegación del sitio, el cual nos permite volver al "top" de la página, es decir, a la parte superior. Es un botón situado en la parte inferior derecha de la pantalla.

volver arriba

Al igual que las transiciones entre artículos en el Welcome, en cada momento que hay noticias o artículos, esto se repite en cada vez. (Como muestra el ejemplo)

Transiciones
  • About

Corresponde a la explicación de quienes son, con elementos precisos, tamaños en la tipografía engrandecidos para denotar importancia a ciertos tópicos, el uso de ilustración se hace visible aca.

Vista de la pestaña About


  • Process

Esta pestaña es la más interesante y con elementos ilustrativos y animados durante todo el recorrido. Trata de simplificar el proceso mental de la marca realizadora de proyectos de todo tipo.

El cuerpo de la pestaña Process
Animación primera, cerebro vacío
cambios animados
  • Blog

Esta pestaña es una de las más complejas en cuanto al contenido, es extensa por la cantidad de artículos y noticias relacionadas.(abajo una muestra)

blog extenso vertical

La manera que se conforma el blog, es con todas sus imágenes del artículo a la izquierda, luego la columna de texto y hacia la derecha un buscador, con categorías respectivas de búsqueda y con archivos por fecha.

Vista artículo y columna categorías

Al igual de como se mostró más arriba en el Portafolio, está la opción de cambiar a un siguiente artículo y de cerrar todo, volviendo a la totalidad de los blog.

Vista otro artículo blog
Ingresar al artículo a través de..


  • Contact

Presenta 3 partes importantes:

  1. Redes Sociales
  2. Mapa de Ubicación
  3. detalles para mensajear.


Cuerpo de la pestaña Contact
El mapa está directamente utilizable con google, por lo tanto se acerca o aleja directamente



En los detalles del mensaje puedo filtrar lo que deseo, dando categorías específicas, precios y tiempos específicos también.


Footer Este elemento está durante todo el sitio en su parte inferior. Nos muestra las redes sociales en 5 grandes botones, los mismos que se repiten en la parte superior, agregando google+. En la parte derecha está la solicitud de recibir información al mail, dejando los datos como denota.

Footer

Tamaños

Los tamaños creados por los realizadores del sitio web corresponden a:

  1. 320x480px
  2. 360x640px
  3. 768x1024px
  4. 800x1280px
  5. 980x1280px
  6. 1280x600px
  7. 1920x900px

Tamaño total estructuras:

  1. 1349x1861px body.home
  2. 1349x121px Header-container
  3. 1349x120px Hedaer-spacer
  4. 1349x338px Footer
  5. 1280x761px Content: Bajo las imágenes principales se muestra el texto principal y el resto del contenido, con sus link directos a través de las imágenes para acceder a la información.

1349x0px Bajo lo anterior, se encuentra una barra que acompaña en todo momento la página,y su intención es brindar la información de contacto al hacer click cuando se desee, se despliega la información

Tamaño Imágenes:

  1. 1329×715px Principal/jpg
  2. 366×129 logo Ifour
  3. 560×280 tamaño artículos,lista de clientes
  4. 330×240, 589×356, 1072×612 tamaño imágenes artículos
  5. 120x120 botones redes sociales
  6. 50x50 iconos redes sociales
  7. 560×560 Icono de twitter
  8. 25x25px Botón/mano click
  9. 64x70px Botón para subir "Back to top"

(En el ancho 640px se produce el quiebre de las imágenes)

Imágenes

El formato en el que las imágenes están, corresponde a Jpg y Png. Las imágenes que se muestran en los distintos tamaños se acomodan al ancho del dispositivo y se suprime una cantidad, al bajar los 640pixeles.

[Distingo en los Tamaños de las imágenes]


  • Imagen del tamaño 640x, con las medidas respectivas.

Image:640px editada.png|640x

Ifour, Otros dispositivos de estudio(móvil,tabletas)

Elementos Visuales Generales

En el correspondiente Header, se minimiza el logo de Ifour y se deja un botón "+" el cual al apretarlo se extiende las pestañas correspondientes a la Barra de Navegación del Menú.

header, Buscador

Al abrir la pestaña, tapa la primera categoría correspondiente a Online design de manera exacta.

  • Welcome:Desaparece el uso de gif, se mantienen las 3 categorías en el home web aparecen más abajo.(Online Design,Corporate branding & collateral,Strategic thinking) en grandés botones que abarcan el ancho.

Luego está "featured projects" con solo 3 imágenes sin descripción, ni títulos, solo las imágenes. Luego de eso "Client List" con la misma cantidad de clientes que en el home web, pero con botones más pequeños. Después de eso, aparece el círculo amarillo para twitter, donde hacen referencia de la página en alguna entrada; antes estaba a la derecha. Finalmente en el footer, los 5 botones de las redes sociales puestos en línea horizontal.

  • About

en la pestaña About se puede ver, que a la dimensión menor aparece un error de unos cuantos pixeles(ya que se arregla al ajustar el ancho solo un poco)


  • Service

Se sigue el mismo patrón móvil, Titulares grandes, texto e imagen. Y en su parte superior las 3 categorías que se desglozan al hacer click.


  • Portafolio

El portafolio nos muestra algo nuevo, lo que era una pequeña barra en el escenario web, ahora son 6 botones en la parte superior para reducir las categorías como se desee. También se incorpora un detalle en las imágenes. Se comienza con una imagen del ancho del móvil, luego con 4 en miniatura y siguiente a eso se vuelve a mostrar una imagen extendida en el ancho; se ve más dinámico y no molesta.


  • Process

Esta es la única ilustración, que antes en su forma Web, era animada junto con todos los otros y ahora se mantuvo solo como una imagen.

  • Blog

El blog no muestra ningun distingo, solo la reducción de imagen al ancho mínimo correspondiente de las imágenes, sus titulares y texto presentan el mismo tamaño que en su versión Web. Image:Movil blog.png|Cuerpo móvil del blog.

  • Contact

En este formato, esta pestaña en específica se ve mucho más limpia y clara en su información. La línea horizontal de redes sociales se mantiene en un tamaño más reducido, el mapa ocupa el ancho y el largo es formando un cuadrado. Los detalles para contactarse están en una sola columna. El filtro de los servicios requeridos se muestran en 2 columnas. Se omite la Información opcional, que correspondia en el formato web a "valores y tiempos". El resto se mantiene igual.

Elementos Estructurales

Se puede ver los cambios estructurales que suceden al cambiar de pantalla al dispositivo móvil. Estos se consideran por ser los extremos en resolución dentro de lo que se está trabajando.

Estructuras comparativas