11/12/2013

Fullscreen web design: aprovechando los espacios grandes

Fullscreen web design: aprovechando los espacios grandes

A veces pensamos que los dispositivos para navegar por Internet solo tienden a achicarse, olvidando que los monitores y los televisores inteligentes son cada vez más grandes. Muchas veces, el principio mobile first lleva a desarrollar sitios web que en monitores grandes dejan grandes espacios en blanco, algo especialmente ilógico si se tiene en cuenta que la navegación desde escritorio sigue siendo mayoritaria. ¿Por qué no diseñar sitios web que aprovechen cada píxel de la pantalla desde la cual se los visualiza?

Los monitores modernos permiten utilizar recursos gráficos que en un smartphone no lucirían tan bien:

  • Imágenes de fondo. Una de las actuales tendencias en diseño web es el uso de una imagen que ocupe absolutamente todo el fondo de la pantalla. No tiene por qué estar estrechamente relacionada con nuestra marca: así como puede mostrar nuestros productos o nuestro local, también puede presentar un paisaje u otro elemento que transmita una sensación especial.
  • Texto en gran tamaño. El espacio disponible permite hacer lucir tipografías llamativas a través de un tamaño de fuente inusualmente grande. Muchos diseños se basan más en creativas combinaciones de tipografías que en íconos o imágenes.
  • Efecto de paralaje. Una pantalla grande es el lienzo ideal para aplicar creativas transiciones de objetos y secciones dentro de una misma página.

¿Cuáles son las ventajas de este enfoque?

  • Ocupar cada píxel de la pantalla captura la atención del usuario, que no podrá distraerse con ningún espacio vacío.
  • Los sitios web para pantallas grandes son naturalmente responsivos: ocupan el 100% del ancho, sin importar de cuántos píxeles sea.
  • Evita que los elementos de la página deban estar amontonados en el mismo lugar, brindando un resultado visualmente agradable y una mayor usabilidad.

Los sitios web de tamaño grande pueden ser muy fáciles de desarrollar y, al mismo tiempo, cautivar a los usuarios reduciendo la tasa de abandonos. Pocos enfoques son tan efectivos a la hora de comunicar el mensaje de una marca.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce