Fundamentos

Fundamentos del diseño web actual
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 deebooks, smart TV.
Dispositivos tradicionales: Computadoras de escritorio, laptops, netbooks.
Mobile first

Diseñar en Photoshop con el 960 Grid System ya quedó en el pasado. 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 dispositivoen 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.
Sepueden 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 (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 distintostamañ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) quedefine 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 micro entregas en HTML/CSS para tomar decisiones en el navegador.
Desafío 2: Velocidad
Lavelocidad 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 flatdesign 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 (degrades, 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 ymantenerse 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 web:
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...