Las tendencias de Diseño Web que este año se consolidan

Posted on Actualizado enn

Desde Vuelo IV se analizaron las páginas web de los mejores diseñadores y programadores que marcan tendencia, y con un poco de imaginación, elaboraron a principio de año esta lista de tendencias en Diseño Web para este año.

Este 2013 a traído grandes cambios en el diseño webLa rápida difusión de tablets y smartphones cambió la forma de concebir el diseño de una página web.

Avances como HTML5 y CSS3 que, años anteriores fueron novedad, este año se convirtieron en estándar gracias a que la mayoría de los usuarios ya tiene navegadores compatibles.

 1. RESPONSIVE WEB DESIGN

diseño web barcelona

Es primera por ser la más importante. Pero más que una tendencia es una obligación a esta altura. Pensar el Diseño Web sólo para ordenadores y que se vean igual en smartphones, tablets, etc, es obsoleto.

Probablemente este año todos los diseñadores/as comiencen a diseñar pensando en todos los dispositivos y tamaños de pantalla a la vez.

Responsive Web Design” es una técnica que detecta el tamaño de pantalla del dispositivo mediante el cual el usuario está viendo una página web y muestra un diseño especialmente adaptado al tamaño de pantalla. Ajusta el tamaño y disposición de textos e imágenes para facilitar su lectura.

Al diseñar y programar la página web, el diseñador determina la posición y tamaño de los elementos para cada tamaño de pantalla.

2. WORDPRESS

joomla vs wordpress

¿Joomla o WordPress? Tanto diseñadores como clientes se deben haber hecho esta pregunta muchas veces.

WordPress se consagró como estándar absoluto en 2013 y Joomla va camino a quedar en el museo de CMS’s.

WordPress es el CMS más recomendado por consultores SEO porque su código es perfecto para posicionamiento en buscadores.

Para diseñadores web es flexible y permite una total integración con cualquier diseño por complejo que sea.

Para el cliente final es extremadamente fácil de usar, con uno o dos unas horas de práctica.

Además la comunidad WordPress y la colaboraciones plugins y módulos han crecido de tal forma que hoy en día casi cualquier función, por compleja que sea, se puede resolver con WordPress.

Y si te queda alguna duda, mira las tendencias de búsqueda de los últimos años para los términos “wordpress” y “joomla”.

3. INFLUENCIA METRO, PINTEREST Y TIMELINE DE FACEBOOK

Metro: Hoy no nos sorprende ver una avalancha de páginas web imitando el estilo “Metro” de Windows 8 con íconos, titulos y fotos ordenados en una cuadrícula.

estilo-metro

Pantalla dividida o en zig-zag: Imitando el “Timeline” de Facebook  los contenidos se organizan con la pantalla dividida a la mitad. Es una forma bastante efectiva de mantener la atención, ya que provoca una lectura en zig-zag.

diseno-web-zig-zag

Pinterest: Y para organizar trabajos en un portfolio el estilo Pinterest con su cuadrícula dinámica que varía según la altura de las fotos.

pinterest

4. WEBS DE UNA SÓLA PÁGINA.

A diferencia de la mayoría de las páginas web que tiene cada sección en páginas diferentes que deben cargarse luego de hacer clic en un botón del menú, las páginas web de una sola página tienen todo el contenido en la “Home”.

El contenido se organiza verticalmente, y permite navegarlas cómodamente con sólo desplazarse verticalmente. Lo que las hace ideales para visualizarse desde tablets o smartphones.

No se recomiendan para cualquier proyecto. Pero pueden ser muy efectivas para productos que requieran gran impacto visual y comunicar un mensaje muy concreto con poco contenido. Por ejemplo para “landing page” de un producto o servicio concreto, eventos, etc.

 EJEMPLO: http://exposanten.belgianboatshow.be/nl/

5. ANIMACIONES ASOCIADAS AL DESPLAZAMIENTO VERTICAL

Las posibilidades de CSS3 apenas están siendo exploradas en la mayoría de las páginas web.

Un nuevo recurso que es la posibilidad de que elementos del diseño se muevan, aparezcan o desaparezcan a medida que el usuario se desplaza verticalmente (scroll down). Ya sea con el mouse, trackpad o touchscreen.

6. CINEMAGRAPHS

¿Cinemagraphs? Sí, ¿porque no? Porqué poner sólo imágenes estaticas si por unos Kb más se puede poner un simpático “cinemagraph”

Un “cinemagraph” es un gif de pocos cuadros en que se repite en blucle.

Por ejemplo:

cinemagraph

cinemagraph

cinemagraph

¿ALGUNA TENDENCIA MÁS PARA AGREGAR?
COMPÁRTELA EN LOS COMENTARIOS!

Vía: VueloIV

Anuncios

3 comentarios sobre “Las tendencias de Diseño Web que este año se consolidan

    Daniel escribió:
    05/07/2013 en 2:06

    Podria entrar en la categoria de “animaciones asociadas al desplazamiento” pero es definitivamente mas que eso. Me refiero al Parallax, un script que hace posible la ilusión de la profundidad de campo en los sitios. Lejos una de los mejores juguetes que nos trajo html5.

      jorgellanten respondido:
      05/07/2013 en 2:13

      Definitivamente, parallax con estas “capas” (z-index) que se mueven a diferente velocidad mientras haces scroll esta entrando fuerte por su llamativo resultado, pero aun no se consolida tanto como los otros ítems, pero va por el camino.

    Francisco Aguilera G. escribió:
    05/07/2013 en 11:27

    Creo que faltó mencionar lo fuerte que se está posicionando el flat design. Hasta hace poco era poco más que una tendencia, pero luego de que apple lo adoptara para su iOS paso a ser mucho más que eso.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s