31/07/2013

Actuales tendencias en diseño web

Actuales tendencias en diseño web

El aspecto estético de los sitios web se enriquece a medida que aparecen nuevas tecnologías para ampliar los horizontes de los diseñadores. Por ejemplo, la biblioteca jQuery y los estándares HTML5 y CSS3 introdujeron efectos visuales y modalidades de maquetado que antes habrían sido muy difíciles de proyectar (al menos sin recurrir a soluciones poco felices, como el uso de applets en Java o ActionScript). Al mismo tiempo, la diversificación de dispositivos físicos para acceder a Internet obliga a realizar nuevas consideraciones sobre usabilidad y experiencia de usuario, lo cual tiene una relación directa con el aspecto visual de un sitio web.

Actualmente, estas transformaciones promueven distintas tendencias estéticas:

  • Headers fijos. El header es una barra que actúa como encabezado de la página. Suele contener el logo y un menú de navegación. Cada vez es más habitual ver que este componente permanece adherido a la parte superior de la pantalla y no se desplaza con el resto del contenido cuando hacemos scroll hacia abajo. Así, el usuario siempre tiene «a mano» los enlaces al resto de las secciones del sitio. Ver ejemplos.
  • Imágenes de fondo. Muchos sitios presentan, en su página principal, un bajo volumen de contenido (generalmente, un menú y un breve texto de presentación) dominado por una imagen de fondo que ocupa todo el ancho de la pantalla. Este detalle capta rápidamente la atención del usuario y contribuye a la identidad de la marca. Ver ejemplos.
  • Diseño «plano». CSS3 nos permite utilizar gradientes, sombras y texturas para enriquecer los colores de nuestra página. Si bien muchos diseñadores aprovechan esta ventaja, otros eligen, por el contrario, utilizar colores sólidos que eliminan toda ilusión de tridimensionalidad. Esto brinda una mayor facilidad de interacción, algo vital en dispositivos móviles. Ver ejemplos.
  • Efecto de paralaje. Cuando hacemos scroll en una página con efecto de paralaje, los elementos principales se desplacen a una velocidad diferente a la del fondo. Así, creemos estar viendo varias capas de profundidad. Ver ejemplos.

Estos y otros recursos permiten desarrollar sitios web sorprendentes, que queden grabados para siempre en la retina del usuario.

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