Caso de estudio: Forefathers
| Caso de Estudio | |
| Nombre | Caso de estudio: Forefathers |
|---|---|
| Período | 2014-2014 |
| Período | II° Trimestre |
| Palabras Clave | web responsive, forefathers |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Karol Barrera |
| URL | http://forefathersgroup.com/ |
Introducción
El diseño Responsive Web Design o diseño web adaptativo surge como una necesidad tras la aparición de distintas plataformas, las cuales tienen la posibilidad de conectarse a internet. Esta multiplicidad de formatos hace que una página web se muestre en distintas resoluciones, y es ahí donde surgen problemas de diseño.
EL objetivo del responsive design es adaptar el flujo de la información para que el usuario tenga una buena experiencia tanto con un celular como con un computador, es así como se logra que los tamaños de columnas, fotos, botones y tipografía varíe dependiendo del soporte, ya que una página web tiene una cierta flexibilidad que debemos saber aprovechar.
El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una consecuencia de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos ‘aceptar el flujo y reflujo de las cosas.[1].
Para poder conocer la implicancias de esta manera de diseñar, analizaré un sitio que tenga riqueza en sus elementos, para ver como éstos responden al diseño adaptativo: Forefathers
Forefathers
Es una agencia de diseñadores e ilustradores, quienes ofrecen originalidad y creatividad de los forefathers o antepasados. Se auto clasifican en un diseño innovador, y algo vintage la cual va dirigida a un público comercial adulto-joven ya que tienen proyectos asociados a creaciones de sitios web, branding, diseño impreso e ilustraciones.
sitio adaptado a 3 dispositivos
La primera vista de la página se centra principalmente en el menú de navegación, en la cual se predisponen de manera distinta para cada plataforma, dejando entre ver que viene una imagen, la cual crea la continuidad y le da a entener al usuario que continúa el contenido con el scroll hacia abajo.
Desktop
Tablet
Mobile
Home
Grilla
La grilla pareciera ser de una columna centrada, ya que por lo general hay un párrafo o elementos que se desarrollan hacia abajo
Comportamiento secciones
Contenido de las secciones:
- Header: (Rojo) logo, menú, descripción empresa
- Body: (verde) Visualización projectos
- Body: (azul) Promoción Forefathers
- Body: (amarillo)Referencia clientes
- Body: (naranjo) Lista de clientes
- Footer: (celeste) Contacto
Gracias a esta visualización, se puede notar como se comporta el sitio tras su cambio de soporte, bajo el menú existe una franja centrada, en la cual aparecen 4 palabras que hacen alusión a su trabajo, que funciona como un separador de contenidos, ésta permanece en el tablet sin embargo desaparece en la versión del celular.
En la primera sección desaparecen elementos, que son básicamente ilustraciones, en la cual en el pc se visualizan 2, luego en el tablet 1 y en el celular ninguna.
También es posible notar como hay secciones completas que desaparecen, como la azul y la amarilla.
Header
Se puede observar el comportamiento del header, al comparar los tres casos de estudio (desktop, tablet y smartphone). Se logra ver que el logo mantiene en los tres soportes centrado y del mismo tamaño.
Como observación personal, creo que en el celular el logo toma mayor protagonismo, en relación al espacio en el que se encuentra, ya que es un elemento que luego desaparece y es el nombre de la empresa, su imagen corporativa, por lo tanto debe permanecer en la retina del usuario en este soporte que es tan fugaz.
La disposición del menú varia en los tres casos.
El footer del sitio cuenta con 5 secciones, en donde el usuario tiene la posibilidad de:
- registrarse
- navegar por el sitio con enlaces directos
- ver el último tweet
- un indicador para saber si el cliente está logueado
- contacto a través de las redes sociales junto al mensaje de copyright
Éste cuenta con las mismas secciones en la versión del pc y del tablet, no obstante surge un pequeño cambio en el botón del registro, de encontrarse en un primer momento a un costado, luego se encuentra por debajo.
Cabe destacar que los íconos de las redes sociales, además de permanecer en todo momento en el footer, éstas no sufren ninguna variación en su tamaño. Al pasar de pc a tablet ésta se centra para permanecer así en el celular.
Ilustraciones
Esta página web se destaca y diferencia de las demás por su uso de ilustraciones, sin embargo se puede notar que al pasar a un soporte más pequeño, las ilustraciones van desapareciendo. La página de inicio en el desktop cuenta con 6 ilustraciones (que se encuentran abajo, en la galería), pero disminnuye a la mitad cuando se visualiza el sitio en un tablet [2, 3 y 6], para terminar con sólo una ilustración en el caso del celular [6]. Ésta última ilustración mantiene siempre su tamaño.
1
2
3
4
5
6
Tipografía
El sitio cuenta con tipografía ilustrada por ellos, sin embargo su font-family es georgia serif, en la cual prevalece su versión italic. Esta familia tipográfica es una de las primeras sans serif utilizada para pantallas, de hecho Microsoft lanzó su versión inicial en 1996, como parte de una colección de fuentes principales para web. Georgia está diseñado para ser eficaz y clara en pantallas, incluso en tamaños pequeños.
Se tomo un párrafo que se encuentra en sus 3 formatos, se puede notar que su tamaño no cambia (16 px) sólo el divs que lo contiene, éste se encuentra siempre centrado.
Página interior: Workshop
En este caso se puede apreciar como la página tiene tendencia a ir alargándose hacia abajo a medida que el contenedor es menor. Crear una página tan larga para un formato de la resolución de un celular pareciera no tener problema, ya que la manera de manejar la información es a través de la mano (touch) en donde el contenido se puede mover más rápido y con mayor facilidad.
Grilla
La grilla cambia en esta página al tener una galería de imágenes, la cual está conformada por mosaic overlay en donde de 3 columnas (en la plataforma del computador y el tablet) pasa a tener una columna en el celular.
Comportamiento secciones
Contenido de las secciones:
- Header: (Rojo) logo y menú navegable.
- Body: (verde) Título sección (the workshop)
- Body: (amarillo) Reseña (¿de qué trata?)
- Body: Referencia clientes
- Body: (naranjo) Galeria de imágenes
- Footer: (celeste) Contacto
En esta página todo el contenido es esencial en las tres plataformas, las seis secciones que componen esta página permanecen tanto en el computador, como en el tablet y el celular, sin embargo hay ciertos elementos que desaparecen, como es visible en la tercera sección (amarilla) la cual está compuesta de un texto más una ilustración, la cual termina en el formato del celular sólo en el texto.
Página interior: The Origins
Esta página es completamente distinta a las otras dos, ya que en esta prevalece el texto.
Grilla
Comportamiento secciones
Wireframes
Wireframe tablet
wireframe móvil
Errores
Existe un detalle claramente visible y ocurre con el formato del celular.
- el contacto se encuentra por encima del logo, sin embargo este no es un real problema ya que el botón de contacto debió crecer ligeramente para que sea posible apretarlo con el dedo sin mayor complicaciones.
- Al final de la página se encuentra una lista con los clientes de la empresa, en donde anteriormente vimos que su ilustración no cambiaba su tamaño en ningún formato, sin embargo esto causa un problema, ya que queda texto:
- Por encima de la ilustración
- Por encima del footer
En ambos casos logra quedar ilegible el texto, en el primer caso por encontrarse un texto del mismo color que la ilustración y en el segundo porque el texto se encuentra sobre un fondo oscuro, ambos errores más que un problema de contraste, tienen un problema de ubicación.
Conclusión
Se puede inferir tras el análisis del sitio web, que la versión del móvil parece ser la que contiene elementos esenciales para el usuario, mientras que en comparación con la versión del computador, ésta tiene muchas más ilustraciones y elementos para admirar. Creo que ese es un punto clave, que tiene mucha lógica, no se trata solamente que una pantalla es más grande y por ende quepan en ella más elementos, sino que se trata de la temporalidad y la experiencia del usuario, generalmente cuando uno está utilizando un computador se encuentra sentado mirando y admirando, existen tantas páginas web que éstas deben captar tu atención, sin embargo en el caso de los celulares existe una visita más expedita, generalmente por casos específicos, por lo tanto una mejor experiencia para el usuario es encontrar más fácilmente lo que está buscando. Poder acceder de manera rápida.
referencias
- ↑ http://alistapart.com/article/dao, por John Allsopp
Tercer encargo
análisis desde el código
Se crearon tres carpetas, en la primera se encuentra el html de la página web; Forefathers group para poder analizarla desde su código, para eso la página debía correr de manera local en el pc. En la segunda carpeta se eliminaron vínculos externos, los cuales no realizaban cambios en el sitio, y en la tercera carpeta se muestran todos los divs que contiene el sitio, los cuales se marcaron desde la cascada de estilos.
https://www.dropbox.com/home/Public/Karol%204DG
