Blog tecnológico para emprendedores y desarrolladores de aplicaciones móviles

Top 10 tendencias diseño web y aplicaciones móvil 2012

Como cada año, repasamos las nuevas tendencias para el desarrollo de páginas webs y de aplicaciones móviles. El 2012 será un año cargado de innovaciones increibles y diseños espectaculares que te mantendrán pegado a tu gadget tecnológico horas y horas. ¿Queréis tener vuestra web y app móvil a la última, verdad? 

La tecnología se vuelve más envolvente y los usuarios continúan demandando una gratificación instantánea. La capacidad de atención promedia de los visitantes de la web es de 8 a 10 segundos. En ese corto período de tiempo, tenemos que decirles que están en el lugar correcto, y que nuestro es más atractivo e innovador que el de la competencia.

A continuación destacamos las tendencias que se implantarán este año y que harán de tu website o aplicación móvil, un lugar cool y agradable para pasar horas y horas:

Esquemas de colores simples

Simplicidad. No hay nada como impactar como un mensaje claro en un website acogedor.  El Silencio puede ser interpretado de diferentes maneras. Olvídese deblanco y negro o tonos de gris. Piensa en verde, amarillo o incluso rojo como sucolor principal. Sin embargo, limitar la paleta a dos o tres colores. Trabajar dentro de los tonos de cada color para la variedad. Puede ser realmente notablelo que algunos colores pueden hacer por su mensaje. Observe:

 

Nombres de dominio llamativos e intrigantes

Aunque no en el sentido estricto es cuestión de diseño web, esperamos cada vez nombres de dominio más creativos e ingeniosos. Piense que si su nombre de dominio es innovador y sorprendente al igual que sus contenidos, sus clientes querrán volver a verle.

 

Efectos 3D

Está pegando muy fuerte las sensaciones y efectos ópticos de profundidad, a veces hasta el punto donde los sitios web es como una película o un juego. Estamos todos para el uso de capas, sombras, degradados, transparencias y texturas para crear dimensión. Sólo asegúrese de no distraer al lector ni de perder la sutileza.

Ejemplo: Nike historia de las más famosas zapatillas
Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.

Buibee - top 10 trends design of web and mobile design 2012

 

Parallax Scrolling

Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer que las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. Para llevarlo aún más lejos, los elementos pueden salir o moverse según el usuario se desplaza o se mueve el ratón. Las posibilidades de hacer una página web creativa e interesantes se multiplican. Esta técnica comienza a ser utilizada también en las aplicaciones móviles y pega otra vez fuerte en el mundo de los videojuegos.

Ejemplo: el escolta Ben
Este sitio web es una página para una aplicación iPhone,  difumina la línea entre un juego y un sitio web.

Buibee innovative Apps and WebSites - paralax Scroll

 

HTML5 y CSS3

No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y cannon de diseño web, ya que Flash aún tiene funcionalidades insuperables, pero es muy aconsejable la utilización de Html5 ya que crea un código más legible y diseños que ayudan a la estructura de mark-up.  Cada día más y más usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes, la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas.  Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús desplegables, botones animados, fondos múltiples, aplicaciones web y tecnología de @ font-face. Ya tenemos todo!!!

Ejemplo: Arcade Fire Wildness DownTown
Una experiencia cinematográfica interactiva que convierte el navegador todo en una pantalla de cine. PS. Mueva su ratón sobre las aves.

Buibee - Wilderness

 

Grandes imágenes de background

Con cámaras de alta definición, una mejor optimización de la imagen, los métodos más inteligentes de carga y las conexiones rápidas a Internet, fotos y grandes ilustraciones intrincadas ya no son tabú en la web. Teniendo el fondo de pantalla como lienzo, podrás establecer el estado de ánimo, tus habilidades y deseos. Mientras que sea relevante y no compita en protagonismo con el contenido, una imagen vale más que mil palabras.

Buibee backgroun trends design

 

Diseñar para pantallas táctiles, no para ratones

La tecnología se ha vuelto mucho más táctil. La usabilidad es el cambio de lo abstracto a lo tangible. Todos los teléfonos inteligentes y tablets utilizan ya pantallas táctiles. ¿Tiene cabida el su diseño una buena usabilidad táctil?

Como diseñadores, adoramos a los ratones. Nuestros enlaces se iluminan cuando el ratón pasa por encima. Sin embargo, no esto no ocurre con la pantalla táctil. ¿De qué manera el diseño debe indicar enlaces a sus visitantes?  ¿Qué pasa con los menús desplegables? Eso también es una pérdida en el diseño de pantalla táctil. Tendremos que reinventa los estilos de los menús en entornos táctiles.

Por último, considere el uso de diseños “líquido” como parte de su compromiso con los avances gráficos. En el año 2011, ya no se establece un tamaño fijo de pantalla de resolución. Los visitantes pueden cambiar su orientación de visualización de vertical a horizontal. Su diseño debe ser flexible para afrontar cualquier reto, o si será una reliquia de 2011.

Buibee - multitouch oriented design for apps and webs

 

QR: de respuesta rápida

Seguramente haya visto códigos QR apareciendo en tarjetas de visita, revistas o anuncios, coches, ya sabrá que son una tendencia de para el año 2012. ¿Cómo es exactamente lo que se traduce en el diseño web? Sorprendentemente bien, de hecho.

Los códigos de barras QR, abreviatura de Quick Response o respuesta rápida. Basta con tomar una foto del código de barras único, con su teléfono con cámara. Como la magia, el teléfono llamará a la página web con código de barras, dijo. Lo bonito de QR es que se puede utilizar en multitud de formas. De su función QR en su sitio web, para que los visitantes del sitio para tener un acceso directo a su sitio móvil. También se puede rastrear a sus visitantes a través de QR, mediante la colocación de un código de referencia especial en su URL.

Buibee design trends 2012 - QR

 

Realización de las thumbnail para la previsualización de Google

Google ha introducido en la búsqueda de resultados la previsualización en miniatura. Atrás quedaron los días de hacer clic para ver el contenido de un sitio web. En estos días, basta con hacer clic en la lupa y se mostrará (suponiendo que no está en una pantalla táctil). Por arte de magia una previsualización de lo que el usuario verá al otro lado del click.

Si su diseño es basado en Flash, va a ser un problema. La vista previa no mostrará los elementos de su web ni su comportamiento tan fantástico.

A medida que el usuario medio de Internet se vuelve más sabio surfeando, este comportamiento se está extendiendo. La tentación de juzgar a un sitio por su miniatura ya está servida. ¿Se arriesgará a ello?

 

Websites de una sola página

Dado que el 80% de los visitantes del sitio web no navega por otras secciones que no sean la página de inicio, es tendencia el ajustar todo el contenido en una página web.  De sabor a su vida, HTML5, CSS3 y Javascript puede hacer que esa única página atrape a sus visitantes con un dinamismo único,  pestañas, las animaciones y los pop-ups están a vuestro servicio. Esta tendencia es mejor para los sitios con poco contenido, tales como eventos, sitios personales, productos y sitios de micro.

Ejemplo: Interactive día de San Diego
Hemos tenido un montón de diversión la creación de este sitio de una página para el evento de San Diego de conferencias más interactivo. Lo mejor es que no utiliza flash!

Buibee interactive websites with Html5 - San Diego Land Page

¿Qué opinais al respecto?

escrito por buibee en Aplicaciones Móviles,General,html5,Maquetas Diseño Web y tiene Comments (7)

7 Respuestas to “Top 10 tendencias diseño web y aplicaciones móvil 2012”

  1. UX toledano dice:

    Gran artículo!!!

    Super útil para el gremio de diseñadores. #Recomendar

  2. Alex dice:

    Interesante lo que se dice y muy malos ejemplos (a nivel diseño) para hablar de tendencias.

    El sitio web de arcada fire (es una pasada de pieza y muy, muy chula) no me atrevo a decir que es del 2010 pero si de principio de 2011.

  3. Alex dice:

    ups!! veo que hay censura en los comentarios, no hay libertad de expresión, no puede haber debate… ¡no es social!

  4. Me gusto mucho tu articulo;
    quiero crear una pagina web
    muy actual con todo lo que comentas;
    tienes algun contacto que pueda
    realizarmela? en google aparecen muchos;
    realmente necesito que sea muy bueno;
    en desarrollo, imagenes, diseño,etc.
    Gracias y Saludos.

  5. Frank dice:

    Gracias x la informacion! Estoy desarrollando algunos sitios web tratando de utilizar lo ultimo en tendencias en cuanto a diseño web y contenido y lo que he leido me es de mucha utilidad… me encanta el minimal y las ideas simples -no por ello aburridas- al contrario, la creatividad e ingenio le da vida al website…. pueden visitar una que estoy haciendo en un servidor gratuito: http://solidaridadpozarica.weebly.com/index.html
    Gracias nuevamente y saludos desde México!!!

  6. Gustavo dice:

    Una buen diseño adaptado al móvil es fundamental. Creo que poco a poco se van consiguiendo mejores sitios. Me ha gustado este post que hablan de como hacerlo: http://es.globedia.com/diseno-movil-tener-imagen-profesional

Escribe tu comentario

Por favor, rellena tus datos y haz tu comentario
Nombre
Email
Sitio web
Tu comentario