Top 10 Tendencias de Diseño Web del 2013

Balu2 Enero 2013 - 9:09pm 7 comentarios
Enviar por Email Imprimir

Top 10 Tendencias de Diseño Web del 2013

Ya que el mundo no llegó a su fin el 21 de diciembre pasado, lo mejor es ir prestando atención a las nuevas tendencias de diseño web para el 2013.

En el 2012 hemos sido testigos de cómo las tendencias del diseño web se han ido implantando como piedras fundamentales en el rediseño de toda web. Al parecer, el 2013 continuará el mismo sendero: Webs adaptables, que hagan uso de los estándares y enfocadas en la usabilidad y velocidad son las premisas. Este es nuestro Top 10 Tendencias de Diseño Web del 2013, que no podemos dejar de conocer.

1. Diseño Responsivo (Responsive design)

Aún no sabemos bien como traducirlo, pero el responsive design ya es toda una tendencia en el mundo. En los últimos meses, muchos de los sitios más populares de internet ya han rediseñado sus web teniendo en cuenta este enfoque. ¿Qué es Responsive Web Design?.

2. Transparencias con CSS

Las nuevas propiedades de CSS3 nos permite modificar la opacidad de cualquier elemento de una página web. Esto significa que podemos controlar la transparencia de las imágenes, los divs, etc. Para dar un look moderno a nuestro sitio web, Photoshop ya no es necesario. Sin embargo, hay que tener en cuenta que los navegadores más arcaicos pueden tener dificultad en mostrar las transparencias correctamente.

Ejemplo | blog.squarespace.com

3. Barras fijas en la cabecera de la web

No sé si ya se han percatado, pero muchos nuevos rediseños incluyen esta característica. Cuando hacemos scroll en la página, automáticamente la cabecera (que incluye el menú principal) flota fija en la parte superior de la web. En varios casos, se reduce su altura para no ocupar mucho espacio y permitir una cómoda lectura.

Ejemplo | elcomercio.pe

4. Tipografías variadas y bien diseñadas

Los días de Arial y Verdana parece que llegan a su fin. En el 2013 esperamos que la mayoría de rediseños incluyan fuentes únicas o especiales, que se integren bien con el diseño de la web y que contribuyan a mejorar el aspecto creativo de la web. La tipografía se ha convertido en una parte importante de cualquier diseño web.

Ejemplo | moresoda.co.uk

5. Cajas que resaltan

Los populares slideshows están teniendo competencia. Por lo general los diseñadores solían recurrir a carruseles o slideshows para destacar un contenido sobre el resto. Eso parece que esta cambiando, ya que hoy por hoy empiezan a abundar los sitios con cajas estáticas que destacan el contenido.

Estas cajas suelen ser estáticas, de un ancho y alto fijo, con una imagen como fondo y el título del contenido sobre ella. Podemos ver varios ejemplos de este, por ejemplo nosotros lo utilizamos en nuestra sección de videos y un ejemplo mucho más claro lo podemos apreciar en el rediseño de theverge.com.

6. Animaciones con HTML5

Flash aún sigue en la lucha, pero durante este año ya no podemos decir que Flash es el rey. Si bien aún existe una infinidad de sitios (legado) que usan Flash, en el 2013 empezaremos a ver como el número de sitios animados con HTML5 incrementan. Una prueba de esto podemos verlo en el sitio del juego del increíble hombre araña, el cual previamente estaba diseñado en flash.

7. Soporte Retina

Aún no se aplica, pero con el incremento de dispositivos que ofrecen retina display (sobre todo los de Apple), esperamos que los nuevos diseños además de responsivos también muestren gráficos de alta densidad. Es decir, el número de píxeles físicos se mantiene, pero digitalmente la cantidad de píxeles se duplican en el mismo espacio. Las pantallas Retina son básicamente dos veces más densas que un LCD promedio.

Retina.js es una librería JavaScript que automáticamente muestra copias de imágenes optimizadas para equipos con retina display. Sería bueno ir dándole una mirada.

8. Scroll infinito

Empiezan a aumentar la cantidad de sitios que permiten cargar más contenido haciendo scroll al navegador. Si bien, esto ya era una práctica en sitios populares como Google Images, es en los últimos meses cuando un mayor número de sites empiezan a crear la tendencia. Por ejemplo, Pinterest o Tumblr.

9. Ocultar y Mostrar el menú de navegación en los dispositivos móviles

Una de las cosas más complicadas a la hora de diseñar con responsive design es construir un menú de navegación sencillo y útil. Una de las tendencias que se esta imponiendo, a propósito del uso de frameworks CSS, es la forma de Mostrar y ocultar el menú en los dispositivos móviles, pulsando en un botón.

Un claro ejemplo, lo podemos apreciar en cualquier sitio (de los muchos) que usan Twitter Bootstrap (No olvides reducir el ancho de la ventana del navegador, para observar como cambia el navbar).

10. Una imagen como background de toda la página

Ya muchos sitios tienen en cuenta esta aproximación: Una imagen vale más que mil palabras. Y una imagen bien elegida es suficiente para resaltar la marca del sitio web. Plus: El diseño se mantiene sencillo y limpio.

Ejemplo | Davidia

¿Se me pasó alguna?

Espero que tengas en mente estas tendencias y el efecto que tendrán en los diseños de las próximas web. Ya hemos visto ejemplos tanto en sitios pequeños como muy populares. Pero, si crees que estoy olvidando alguna tendencia o consideras que alguna no debería aparecer en esta lista, deja tu comentario.

Comentarios

Imagen de diseño web medellin
diseño web medellin

Totalmente de acuerdo, sobre todo en el HTML5 y el diseño responsivo.
Aunque yo le pondría también una dosis de microdatos, pues dado que estamos a las puertas de la Web 3.0, es mejor estar listos y comenzar con nuevos diseños y nuevas ideas en este mundo cibernetico que no para de crecer.

Imagen de juan camilo 2
juan camilo 2

Hola de todos los sitios que diste ejemplo solo unos se adapta a cualquier tamaño de pantalla y comentas que flash muere buen en muchas cosas tienes razón como diseñador tanto flash como html tome un camino para PC uso fash y para dispositivos moviles html5 y cin un simple codigo de php segun desde te conectes abre para pc o para moviles o tablets

te dejo un ejemplo que hice www.alejandrofonte.com entra desde pc o celular y notaras la diferencia muy buen articulo sin duda lo unico es saber como reinventar los lengusajes que usas

Imagen de baluart
baluart

Hola juan, cada sitio es un ejemplo de cada apartado. No todos son responsive.

Imagen de German Arias Gamas
German Arias Gamas

hola Juan. me encanto el ejemplo de la pagina web que dejaste en tu comentario, me gustaría saber que programas o lenguajes de programación utilizaste para ella. lo que pasa es que lo quiero para un proyecto que planeo hacer al finalizar la carrera pero aun no llevamos nada de diseño web y la verdad quiero adelantarme, ya que el diseño web es lo que mas me atrae del área de sistemas computacionales. y solo tengo conocimientos básicos pero de HTML 4 pero si me apoyas con lo que te pido creeme que me enfocare mucho en investigar. se te agradece tu atencion muchas gracias!!!!!

Imagen de  juan camilo 2

hola la pagina para pc la hice en flash AS3 y la versión celular en html5 css3 aunque voy a extrañar flash mucho tengo que acomodarme a los requisitos de ahora y te recomiendo usar HTML5 es casi lo mismo que html4 y css3 mi sitio web esta desarrollado en html5 java jquery

Imagen de dweb3d
dweb3d

Interesantes tendencias que muiestras, la del diseño adaptable es por la que más he optado

Imagen de yeseniaQ
yeseniaQ

Me gustaria saber si la información que muestras es basada en tu experiencia o partes de alguna fuente bibliografica

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más