UX London: análisis
| Caso de Estudio | |
| Nombre | UX London |
|---|---|
| Período | 2013-2013 |
| Palabras Clave | Responsive Design |
| Estudiado en | Gráfica Digital 2013 |
| Estudiado por | Alison Saravia |
| URL | http://2012.uxlondon.com/ |
Sitios Responsive
El Concepto de Responsive Design se ha transformado en uno de los más relevantes para el diseño digital en éstos últimos tiempos. Pasó de ser una tendencia a ser un requisito para el diseño de sitios web, ya que permite la adaptabilidad del sitio a todas las plataformas digitales que existen hoy en día, y por ende, es una ventaja. Un usuario por comodidad, eficacia y buena lectura visual preferirá estar viendo desde su celular un sitio "adaptable" a ver un sitio que pierde su estructura, proporciones y elementos gráficos y que terminará por crear una confusión y una mala fluidez de lectura.
A continuación, tomando como Caso de Estudio la página http://2012.uxlondon.com/ se procederá a realizar un análisis que permita un mayor entendimiento de las funciones de un sitio Responsive.
Estructura inicial de la página
El Home de la página "UX London 2012" se presenta de manera sencilla, no contiene exceso de elementos, y sintetiza bien lo que quiere mostrar.
Es un sitio rico en información visual, con párrafos de texto y con imágenes, con una estructura acorde a una grilla y además cumple con el requisito de ser una página "Responsive".
Sitio web. Resolución para pantalla
Muestras de la adaptabilidad del sitio
Adaptabilidad para Tablet
La siguiente captura de pantalla muestra otro de los tamaños adaptativos que puede adquirir este sitio web, y está pensado para una pantalla Tablet. La estructura interna de la página sufre cambios más que nada en cuanto al tamaño de los elementos que la componen.
En cuanto a la estructura y disposición, sigue manteniendo un calce con el tamaño inicial de la página, pero para que siga funcionando de la misma manera es necesario reducir los bloques de texto para los párrafos que se presentan en el sitio.
cabe destacar la buena funcionalidad del sitio; al tener cambios tan sutiles no permite que existan descalces ni confusiones que puedan desorientar al usuario.
Adaptabilidad para móvil.
El tamaño de los elementos es el factor que mayores cambios tiene. La disposición de los elementos sufre pequeños cambios, ya que como estructura todo sigue integrado en el mismo orden, solo que ahora ese "orden" es el que se adapta a la plataforma.
Todas las imágenes se vuelven a acomodar de modo que exista un calce perfecto de la pantalla. Los párrafos de texto se adaptan a un nuevo bloque de texto de menor tamaño. Nunca se pierden los elementos visuales propios del sitio.
la clave está en pensar el sitio web primero para el teléfono móvil. El concepto llamado " Mobile first", ya que de esta forma, al ya tener una estructura y diseño pensada para el móvil, lo que se hace después es simplemente ir adaptando esta estructura a las plataformas mayores, que sería más fácil.
Ejemplos entre los elementos que componen el sitio, en 3 de sus tamaños adaptativos.
HEADER.
Web
Tablet
Móvil
