3200 Tigres
| Título | 3200 tigres |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | responsive design, diagramación, grilla |
| Período | 2013-2013 |
| Asignatura | Gráfica Digital |
| Del Curso | Gráfica Digital 2013, |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | María Michelle Camus |
| Profesor | Katherine Exss |
| URL | http://3200tigres.wwf.fr/ |
Introducción
El proyecto que se presenta a continuación hace referencia a Responsive Design o Diseño Responsivo, el cual se preocupa del desarrollo de un sitio web adaptable a los dispositivos como PCs, tablets y teléfonos móviles, entre otros. Permitiendo al usuario navegar por el sitio en cualquier aparato de forma óptima. El comercio web vía móviles y tablets crece de forma extraordinaria, actualmente está en torno a un 10% y se estima que el próximo año llegue al 30%. La idea es que cualquier diseño web se visualice acorde al tamaño de la pantalla que está utilizando el usuario, para esto se necesita cambios estructurales en cuanto a la diagramación y contenido.
Caso de estudio
3200 Tigres
Para el proyecto se eligió un sitio web que sea Responsive Design para analizar las transformaciones en 3 dispositivos: PC, tablet y móvil.
3200 Tigres (http://3200tigres.wwf.fr/) es un sitio francés que trata de la extinción de los tigres en el mundo debido a la caza furtiva, circulación ilegal y desforestación. En el último siglo la población más grande de felinos ha disminuído un 95%. Hasta el momento quedan sólo 3200 tigres en el mundo (por eso el nombre del sitio). Además de la información, en cuanto a datos históricos y noticias actuales, que presenta 3200 Tigres, hay una fuerte inclinación a la participación. El sitio tiene una funcionalidad importante en cuanto al activismo del usuario, éste puede mandar cartas e inscribirse para participar en la detención de la extinción de los tigres.
Home
Se presenta la home de los 3 dispositivos: PC, tablet y móvil (en el orden correspondiente).
Subpágina
Se presenta la subpágina de los 3 dispositivos: PC, tablet y móvil (en el orden correspondiente). Se escogió esta sección como página tipo, ya que las demás secciones cumple con la misma grilla.
Diagramación de los elementos
Se estudia los cambios que tiene el sitio en cuanto a los márgenes dados en cada dispositivo y la posición de los elementos.
Grilla
La estructura principal consta de 3 columnas dadas por los márgenes laterales y los márgenes entre columnas, los cuales tienen la misma medida en cada caso respectivo. En el caso del tablets ocurre lo mismo que el en PC, pero con un tamaño disminuyendo su ancho de forma proporcional, dejando la distinción entre los 2 márgenes. En el caso del móvil, la columna se más ancha y solo es una.
Elementos
La disposición de los elementos del sitio varía en cada dispositivo, suprimiendo también, en algunos casos, los elementos para ajustarse al medio en que se presenta. Los elementos que no tienen un gran cambio en su disposición y tamaño son: el cuadro de texto, el video y los contactos. Y los que si se evidencia un cambio son: la barra de navegación y el video. Por otra parte, los elementos que son suprimidos en el dispositivo movil son: La fotografía principal y las sub-secciones.
Elementos estructurales
A continuación se presentan las 3 secciones en que se divide el sitio: header, body y footer. Se observa por separado los cambios que ocurren en cada una de las partes para asi evidenciar más el detalle.
Header
El header del sitio cambia dependiendo del dispositivo. En primer lugar el logo y el nombre del sitio se mantienen en la misma posición y con la misma diagramación, solo disminuye el tamaño. La barra de navegación en el PC es horizontal y centrada, mientras que en el tablet se junta y aparece verticalmente e inclinada a la derecha, en el móvil también aparece verticalmente pero centrada.
Body
El body presenta transformaciones en cuanto al ancho del cuadro de texto y en los elementos gráficos. El cuadro de texto en el tablet se agranda y en el móvil disminuye. Lo mismo ocurre con el esquema lineal que aparece justo después del primer cuadro de texto. El esquema en el tablet se agranda y luego en el móvil disminuye. Los contactos pasan de estar vertical (PC) a estar horizontal (tablet) y finalmente vuelve a la verticalidad (móvil). El video cambia su posición al final del sitio.
En el footer no ocurren cambios tan significativos. El de PC y tablet son muy parecidos, solo disminuye su tamaño. En el móvil desaparece la sección de redes sociales (cuadrados naranjos).
Elementos visuales
Los elementos visuales en este sitio tienen transformaciones independientes, no porque uno cambie, el otro también lo hace, sino que se determina por la jerarquía de la información que se requiere mostrar.
Fotografía principal
La fotografía principal, que es lo primero que uno ve cuando entra al sitio, es determinante. En el PC aparece grande y en la parte inferior izquerda la oculta con los contactos, mientras que en el tablet también aparece determinante, y se oculta en la parte superior derecha por la barra de navegación. En el dispositivo móvil la imagen desaparece.
Línea esquemática
La línea esquemática no tiene transformaciones aparte de su tamaño. Ésta aparece en los 3 dispositivos cumpliendo la misma función y entregando el mismo tipo de información.
Video
El video en PC y tablet son de un tamaño similar, mientras que en el móvil éste se agranda hacia los lados, esto sucede por lo que se veía anteriormente en la grilla. En el dispositivo móvil la columna es sólo una pero más ancha. En el video ocurre lo mismo.
Problema en cuanto al Responsive Design
En la última sección de la barra de navegación donde dice signer la pétition, en español hacer una petición, ocurre un problema, ya que es la única parte del sitio donde no hay compatibilidad con todos los dispositivos. Solo aparece de forma adecuada para PC, pero cuando se intenta abrir en tablet o móvil este pierde el diseño.
Conclusiones
Responsive Design es una forma de adaptar un sitio web a la necesidad que requiere el usuario en un momento determinado. No creo que debería ser excluyente y que a medida que avanza la tecnología algunos dispositivos vayan desapareciendo (como ocurre en el ámbito análogo con los libros), sino que creo que la invención de éstos tiene que ver con una adaptación al medio. La idea fundamental es que la persona pueda navegar por un sitio independientemente donde esté y qué es lo que quiera hacer. Si se dispone a leer sobre los tigres y además buscar información en otros sitios lo más probable es que utilice el PC. En cambio si quiere buscar un dato específico o entrar a una cuenta privada, ya que no está con la intención de disponerse a una lectura extensa, utiliza los dispositivos móviles.
A modo personal, creo que el problema que emerge con el diseño adaptable es que la mayoría de los usuarios utilizan los sitios web relacionados con las redes sociales, es decir el mayor interés está en conectarse y comunicarse con personas. Es por esto que los dispositivos móviles tienen tanto éxito, porque el usuario está conectado a donde quiera que esté. Ya no utiliza tanto el PC porque el tiempo que tiene para leer puede utilizarlo para comunicarse con gente a través de su teléfono móvil. Hoy en día la mayoría de las personas caminan con un teléfono móvil en el bolso en vez de un libro.
En cuanto al sitio 3200 Tigres, la adaptabilidad a cada dispositivo está bien lograda, ya que en cada uno es factible la navegación. Los elementos están dispuestos de forma adecuada y la grilla se expresa clara. Sin embargo, creo que la fotografía principal es un elemento sumamente importante dentro del sitio, y en el dispositivo móvil, si bien es para buscar datos específicos, creo que pierde valor al desaparecer, ya que podría haber estado de la misma forma de bajo de la barra de navegación. También encuentro que el error de diseño responsivo en la última sección del sitio es fundamental ya que es la parte donde el usuario que está navegando puede contactarse con los administradores, y es esa misma sección la que no funciona en el dispositivo móvil.
