Fundamentos del diseño web actual

por Natalia Ventre el ・ podés leerlo en 4 minutos ・

El acceso a Internet a través de dispositivos móviles y el auge de las redes sociales presentan desafíos y oportunidades para el diseñador web.

Desafío 1: Tamaños de pantallas

Hay un gran número de dispositivos que permiten acceder a Internet incluyendo:

  • dispositivos móviles: celulares, smartphones, tabletas.
  • dispositivos especializados: lectores de ebooks (ej. Kindle Fire), smart TVs.
  • dispositivos tradicionales: computadoras de escritorio, laptops, netbooks.

Mobile first

Mobile First por Luke Wroblewski

Diseñar en Photoshop con el 960 Grid System ya quedó en el pasado1. Para diseñar para todos estos dispositivos, empezando por el básico (generalmente la pantalla más pequeña) y mejorando progresivamente (progressive enhancement) se consigue un sitio web que, como no está ligado a un dispositivo en particular, va a funcionar en todos los dispositivos actuales y futuros. Luke Wroblewski, autor de Mobile First (móvil primero) plantea las ventajas de este enfoque:

  • La limitaciones como por ej. el tamaño de la pantalla obligan a los diseñadores a enfocarse en el contenido y funcionalidades más importantes, lo que termina siendo beneficioso para la usabilidad en general.
  • Se pueden aprovechar las nuevas tecnologías como por ej. geolocalización, eventos táctiles, etc. para crear aplicaciones innovadoras.

320 and up por Andy Clarke y Jina Bolton es un ejemplo de framework que sigue la filosofía mobile first.

RWD

Responsive Web Design por Ethan Marcotte

Responsive Web Design (diseño web adaptivo o adaptable) es un término inventado por Ethan Marcotte que define cómo adaptar un sitio web a pantallas de distintos tamaños usando:

  • Sistemas de grillas fluidos, basados en porcentajes, que se adaptan a cualquier tamaño de pantalla.
  • Imágenes y videos flexibles que mantienen el contenido intacto en cualquier resolución.
  • Media queries que permiten ajustar el diseño según el tamaño y resolución de la pantalla.

El diseñador web en vez de diseñar páginas, pasa a diseñar un programa (o guía de estilo) que define qué componentes se van a mantener iguales (color, forma, textura, tipografía, etc.) y cuáles van a cambiar (disposición, tamaño de letra, etc.). Al cliente en vez de mockups se le presentan style tiles que consisten en fuentes, colores y elementos de interfaz sin una disposición definida y luego microentregas en HTML/CSS para tomar decisiones en el navegador.

Desafío 2: Velocidad

La velocidad es un aspecto decisivo de la experiencia del usuario y con el crecimiento del uso móvil de Internet volvió a cobrar importancia.

PageSpeed Tools de Google e YSlow de Yahoo analizan un sitio web y dan pautas para mejorar la performance web, pero si sólo se hacen pequeños ajustes al finalizar el proyecto sin cambiar la mentalidad de diseño no se obtienen mejoras radicales.

La estética flat design está de alguna manera asociada a la performance web, porque obviamente un fondo de color sólido es más liviano que una textura (archivo de imagen) o efectos complejos con CSS (degradés, sombras, etc.), pero más allá de lo visual, un diseño enfocado en la velocidad:

  • se enfoca en resolver problemas, no en crear cosas lindas.
  • conoce profundamente al medio, cómo funcionan los navegadores y qué tipo de código se necesita para conseguir un determinado diseño o comportamiento.

Desafío 3: Contenido en todos lados

A partir del auge de las redes sociales como Twitter, Facebook, Google+, Pinterest, etc. el usuario tiene expectativas de encontrar, relacionarse y compartir contenido de más maneras y por lo tanto es importante generar contenido que pueda viajar a distintos canales y mantenerse intacto, como explica Sara Wachter-Boettcher en Content Everywhere.

Jeffrey Zeldman, autor de Designing with Web Standards, resume en un tweet el rol del contenido en el diseño web2:

El diseñador web puede trabajar en equipo con los creadores de contenido y asesorarlos en cómo aprovechar el CMS (sistema de administración de contenido) para que el contenido sea re-utilizable. Para los diseñadores visuales la creación de gráficos útiles y atractivos, por ej. infografías que son muy compartidos en las redes sociales, es una oportunidad como especialización o como un servicio extra que puede ofrecerle al cliente.

Conclusiones

El diseño web como profesión es relativamente reciente, pero está llegando a una madurez que requiere un mayor profesionalismo. Las tácticas no son suficientes para diseñar un buen sitio web, se necesita conocer y aplicar estrategias.


  1. Adobe está desarrollando Adobe Edge Reflow para diseñar para la web adaptable y Nathan Smith creador de 960 Grid System recientemente lanzó Unsemantic, un sistema de grilla basado en porcentajes.

  2. El contenido precede al diseño. Diseñar en ausencia de contenido no es diseño, es decoración.