Estudio y trabajo Sitios Responsive
| Caso de Estudio | |
| Nombre | Análisis en torno a Sitios Responsive |
|---|---|
| Autor | Carolina Nuñez |
| Período | 2013-2013 |
| Estudiado en | Tutorí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.
- 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.
- 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.
Body:
- Welcome
Cambios:
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.
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)
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.
Al pasar el cursor
Transiciones entre imágenes
Transiciones
Al pasar el curso a otro elemento
Si seguimos bajando por el "body" del sitio en su Home, nos encontramos con estos elementos; son 3.
- Online Design
- Corporate Branding & Collateral
- 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ú.
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.
Categorías
Despliegue
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.
- Portafolio
Cuando hacemos siguiente con el click, se despliega la totalidad de los elementos en el Portafolio.
Al hacer click en la segunda pestaña "Websites" dentro de Portafolio.
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.
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)
- 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.
- 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.
- 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)
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.
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.
- Contact
Presenta 3 partes importantes:
- Redes Sociales
- Mapa de Ubicación
- detalles para mensajear.
Nombre para contactar, al escribir se marca.
Mensajes para contactar
Requerimientos de servicio
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.
Tamaños
Los tamaños creados por los realizadores del sitio web corresponden a:
- 320x480px
- 360x640px
- 768x1024px
- 800x1280px
- 980x1280px
- 1280x600px
- 1920x900px
Tamaño total estructuras:
- 1349x1861px body.home
- 1349x121px Header-container
- 1349x120px Hedaer-spacer
- 1349x338px Footer
- 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:
- 1329×715px Principal/jpg
- 366×129 logo Ifour
- 560×280 tamaño artículos,lista de clientes
- 330×240, 589×356, 1072×612 tamaño imágenes artículos
- 120x120 botones redes sociales
- 50x50 iconos redes sociales
- 560×560 Icono de twitter
- 25x25px Botón/mano click
- 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ú.
Home Móvil
Al abrir la pestaña, tapa la primera categoría correspondiente a Online design de manera exacta.
- Movil pestaña service.png
Pestaña Service Abierta
- 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)
Error en "About
- 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.
![Categoría Strategic Thinking]]](https://wiki-ead.b-cdn.net/images/thumb/7/76/Movil_service_strategic_thinking.png/34px-Movil_service_strategic_thinking.png)
Categoría Strategic Thinking]]
![Categoría Strategic Thinking]]](/Archivo:Movil_service_strategic_thinking.png){kind=small}
- 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.
![Cuerpo Móvil de Pestaña portafolio]]](https://wiki-ead.b-cdn.net/images/thumb/f/f9/Movil_portafolio.png/32px-Movil_portafolio.png)
Cuerpo Móvil de Pestaña portafolio]]
![Cuerpo Móvil de Pestaña portafolio]]](/Archivo:Movil_portafolio.png){kind=small}
- Process
Cuerpo pestaña Móvil, Process
Ilustración antes animada
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.
Cuerpo móvil de la pestaña Contact
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.
