Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las tendencias en Diseño Web del 2016 o del que viene.
¿Por qué?
Muy simple. No queremos que el tiempo y el dinero invertido vayan a la basura.
Por ejemplo:
¿Qué pasaría si no hacemos una web que funcione a la perfección tanto en dispositivos móviles como en ordenadores?
Que la usabilidad y por tanto la experiencia del usuario al usar nuestra página web se vería resentida. Lo que nos da como resultado que el porcentaje de rebote¿Qué es el porcentaje de rebote?Métrica que indica la proporción de sesiones en las que el usuario abandona una página web sin realizar ninguna interacción. Es decir, entra en una página y tras unos segundos en ella, sin clicar en ninguna parte, la abandona.Otras denominaciones: Tasa de rebote, bounce rate más aumente y que la tasa de usuarios recurrentes baje.
¿Cómo lo solucionamos?
Haciendo un diseño web responsive para que se adapte automáticamente a todos los tamaños de pantalla.
Este es sólo un ejemplo de lo que puede pasar si no vamos a la par de la evolución del diseño web y sus tendencias.
Es muy importante investigar y documentarse antes de adentrarse en un proyecto web.
Da igual si eres tú el que va a realizar el proyecto o si contratas una agencia de diseño web para que haga el trabajo por ti.
Debes buscar toda la información necesaria para no quedarte obsoleto enseguida, o para comprobar que la agencia que contrates esté a la última en diseño web y no acabes con un producto mal acabado.
Miguel me ha dado la oportunidad de escribir en su blogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra más para contarte las nuevas tendencias en Diseño Web en 2016.
Esto no es una guía de diseño web que tienes que seguir a rajatabla. Cada proyecto tiene unas características y necesidades del diseño web diferentes.
Depende de cada uno buscar lo que quiere transmitir para alcanzar un buen diseño web.
También te podría interesar:
20 Mejores Bancos de Imágenes Gratis de Alta Resolución
Súper Guía para crear y optimizar imágenes y fotos para un Blog o Página Web [Incluye 5 vídeo tutoriales+PDF]
20 Páginas para subir imágenes gratis a Internet
Tendencias en Diseño Web en 2016
1.- Be responsive my friend
Sí o sí tienes que tener una web responsive.
A parte de una tendencia es una necesidad.
Cada vez aumentan más las visitas a nuestras páginas web desde dispositivos móviles.
Tenemos un montón de tamaños diferentes de pantallas. Queremos comunicar bien en todas ellas y que nuestra página web se vea perfecta en todo tipo de dispositivos (mobile-friendly).
<noscriptNoScript es un complemento del navegador para Mozilla Firefox, que impide que se cargue en las páginas web contenido como JavaScript, Flash o iFrames. Su objetivo es incrementar la seguridad durante la navegación y quitar la promoción comercial más molesta al cargar sitios web. El términoNoScript tiene un significado distinto en la programación HTML. Cuando JavaScript está desactivado, la etiqueta <noscript> o </noscript> asegura que el usuario pueda ver el más>
Imagen: Google Webmaster Central
Además el diseño web responsive es un factor SEO ¿Qué es SEO o search engine optimization? Conjunto de prácticas destinadas a mejorar el posicionamiento de una web en el ranking de resultados de los motores de búsqueda. Al contrario que la estrategia SEM, que contempla la inclusión de enlaces contratados para obtener este objetivo, el procedimiento SEO se ocupa exclusivamente de los resultados naturales (no pagados) localizados por el algoritmo propio de cada buscador. Para esto contempla ajustar más que tiene Google a la hora de posicionar nuestra web en los buscadores
Puedes comprobar si tu web está optimizada para dispositivos móviles desde este enlaceConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en más:
https://www.google.com/webmasters/tools/mobile-friendly
Como ves el nuevo diseño web de esta web está optimizado para dispositivos móviles.
2.- Patrones UI
Los patrones de diseño de interacción para mejorar la experiencia del usuario están a la orden del día. Siempre han estado ahí pero están en continua evolución.
Cuando tenemos un problema común tenemos que encontrar una solución efectiva para solucionarlo.
Esto enfocado al diseño web o al diseño de interfaces se traduce a que una solución a un problema común dentro del mundo del diseño se hace estándar.
Lo entenderás mejor con ejemplos de diseño web:
- Menú hamburguesa. Seguro que la primera vez que viste estas líneas no las entendiste. Pero ahora mismo es lo primero que buscas a la hora de navegar por una web en nuestros dispositivos móvil. Fue una solución ingeniosa para mostrar los menús de nuestras webs en pantallas más pequeñas. Como ya te he dicho anteriormente el diseño web del 2016 está muy influenciado por los dispositivos móviles. Ahora se está empezando a implementar para que se vean también en pantallas grandes y así tener el menú de navegación oculto para tener una vista más limpia de la web.
Ejemplo de diseño web con menú hamburguesa:
Imagen: http://silenza.it/
- Largos Scrolls verticales. Si antes te decían que cuanto menos scrollConcepto de Scroll¿Qué es el Scroll?El Scroll es una definición inglés que se usa para hablar del desplazamiento de los contenidos 2D que se muestran en la ventana de un navegador. Es ese sencillo gesto que el usuario realiza cuando desliza el dedo por la pantalla o usa la rueda del ratón para subir o bajar mientras observa los contenidos de una página.Aún cuando es un concepto que se usa más vertical mejor porque los usuarios se suelen cansar ahora son más fáciles de encontrar estos scrolls. Tenemos de dos tipos, scrolls infinitos que a medida que vas bajando van a pareciendo nuevos elementos y scrolls verticales bien estructurados que a medida que bajas vas pasando por las diferentes secciones de una web, me he llegado a encontrar webs hechas con una única página, sin menús y todo el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más va apareciendo con el scroll..
Ejemplo de diseño web con scroll infinito:
Imagen: http://creativecruise.nl/
- Registro de cuentas. Ante la proliferación de redes sociales el número de cuentas, de usuarios y de claves para identificarte se ha multiplicado. ¿Qué solución encontraron para solucionar este problema? Seguro que te suena, empezaron a dejar logearse a los usuarios con sus cuentas sociales. Por ejemplo, hootsuiteConcepto de Hootsuite¿Qué es la Hootsuite?Hootsuite es una herramienta pensada para facilitar la labor de administrar perfiles en redes sociales. Es una plataforma que centraliza la gestión de distintos cuentas en Redes sociales. Fácil de usar y con una interfaz bastante intuitiva, posee multitud de funciones pensadas para sacar el máximo partido al lado más social de Internet.Para las empresas, fundamentalmente para los especialistas en Social Media y otras ramas más, no hace falta que crees una cuenta nueva, simplemente logeándote con uno de tus perfiles sociales ya puedes empezar a usar su aplicación. De esta forma te ahorras aprenderte un usuario y su clave correspondiente más.
Imagen: hootsuite
3.- Animaciones
Gracias a las mejoras en las comunicaciones, los anchos de banda ahora permiten aumentar los datos a enviar por la red. Es por eso que el uso de animaciones en diseño web es cada vez más común.
Cada vez es más común ver videos, pequeñas animaciones para destacar zonas de la web o, grandes animaciones que necesitas de la interacción del usuario para que vayan mostrando una historia.
¿Qué veremos este 2016?
- Videos de fondo a pantalla completa. Todo lo que puedas contar con una imagen será más fácil de recordar que con texto. Con estos videos tan grandes consigues atraer al lector. Problema que veo, que si usas imágenes o videos demasiado recargados puedes llegar a distraer al usuario. Así que si lo usas, con moderación.
Ejemplo de video a pantalla completa en diseño web:
Imagen: http://www.dunckelfeld.de/en/
-
- Uso de animaciones de carga. Tienen dos cometidos. Por un lado cumple con uno de los principios básicos de Usabilidad Web: mostrar en todo momento el estado del sistema.
- Animaciones en los menús, para hacer transiciones más suaves. Por ejemplo, cuando nos encontramos con un menú hamburguesa y cuando pinchamos en él aparece el menú al completo.
Ejemplo de diseño web con animación en el menú:
Imagen: httpEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado más://www.etq-amsterdam.com/collection
- Hover no sólo en botones. Hover es cuando situamos el ratón encima de un elemento. Por ejemplo, cuando entramos en un botón, este cambia de color. También se usa en imágenes para mostrar textos ocultos, o para cambiar la imagen, etc. Cuando un usuario entra en una web y ve que si interactúa con una imagen esta reacciona, instintivamente va a ir pasando de imagen en imagen para ver que hace cada una de ellas. Conseguimos así retener al usuario.
Ejemplo de diseño web con hover:
Imagen: http://humaan.com/
- ParallaxConcepto de Parallax¿Qué es el Parallax?El Parallax es un efecto visual que forma parte del diseño web y que se trata de simular el desplazamiento de los items del fondo de cualquier página para que parezcan dar una perspectiva distinto al usuario mientras este hace scroll por esta. Es algo meramente visual.En Español se le conoce como Paralaje, aún cuando lo más frecuente es recurrir a este concepto por su más. Es una animación que requiere de la interacción con el usuario. Suelen hacerse con el scroll vertical.
A medida que el usuario va bajando por la página, ésta va mostrando animaciones que ayudan a contar una historia o para mostrar contenido de una manera más amigable.
Ejemplo de diseño web con parallax:
Imagen: http://vnstar.com.ua/en/
4.- Elementos multimedia
No es en sí una tendencia. Pero la proliferación de su uso en las webs, hacen que tenga que mencionarlo.
Tenemos que diferenciarnos del resto, y conseguir que los porcentajes de rebote de nuestros sites sean aceptables. Para conseguir eso necesitamos implementar el uso de elementos multimedia dentro de nuestros diseños web.
El uso de infografías es cada vez más una obligación que una sugerencia. Ayudan a viralizar tu contenido ya que se comparten muy bien por las redes sociales.
Si quieres saber más sobre las infografías te invito a ver el siguiente vídeo creado por Claudio Inacio.
En cuanto a las imágenes que uses en tus diseños webs, una recomendación: aléjate de las fotos de stock siempre que puedas..
Yo no digo que no las uses, pero con tanto blog o web los sitios de imágenes online gratis están a la orden del día. Y por tanto, tienes muchas posibilidades que uses la misma imagen gratuita que tu competencia.
Intenta diferenciarte, si bajas un recurso gráfico de este tipo de webs, intenta personalizarlo para que no sea igual.
5.- Diseño modular
Conoces Pinterest, ¿verdad?
Es el mejor ejemplo de diseño modular. Muchos son los que han copiado este sistema de mostrar información. Es perfecto para mostrar fragmentos pequeños de información y que sean escaneados por el lector hasta que dé con el que más le llame la atención. Además se adaptan a la perfección si quieres una web responsive.
6.- Diseño Flat vs Material Design
Vemos que todo conduce al minimalismo, es una tendencia dentro de cualquier tipo de diseño gráfico.
De ahí surgió el flat design, un diseño basado en colores planos e imágenes sencillas. Una tendencia en diseño que sigue muy viva y que creo que durará todavía unos cuantos años.
Sobre todo porque es fácil de implementar dentro del diseño web y el uso de este tipo de imágenes planas generan archivos poco pesados. Con lo que mejoramos los tiempos de carga de nuestras páginas webs.
Ejemplo de diseño web flat:
Imagen: http://flatomedia.com
Pero dentro del intento de mejora de cualquier tipo de diseño web se empiezan a añadir pequeñas sombras y degradados a los diseños. Así nace el Material Design.
Cada vez es más frecuente ver estos pequeños detalles dentro de los diseños web más simples para destacar las diferentes zonas que lo componen.
Ejemplo de material design:
Además el tipo de paletas de colores usados en estas dos formas de diseño son muy reconocibles. Si no quieres volverte loco buscando una paleta de colores, puedes usar esta web para hacer pruebas.
7.- Uso de tipografías personalizadas
A veces no se da el suficiente reconocimiento a este recurso gráfico para mejorar y potenciar el mensaje que queremos dar con nuestro diseño web.
Fuentes enormes, mayúsculas, versalitas, cursivas negritas, tienes un buen puñado de posibilidades para destacar tus textos.
Ahora, gracias a Google Fonts, tenemos más posibilidades de encontrar la tipografía que mejor va con nuestro diseño.
Creo que con este ejemplo verás mejor el uso de las tipografías en el diseño web: http://onirim.com/
8.- Volvemos a lo retro
Muchas de los cambios en tendencias de diseño gráfico tienen su origen en tendencias pasadas. Hace unos años pasamos a la moda vintage en cuanto a diseño web. La inspiración se buscaba en cartelería antigua y diseños desde los años 20 hasta los 50-60.
Ahora la inspiración del “retro moderno” hace que nos fijemos en la época ochentera, bueno más bien entre los 70-90.
Yo creo que volvemos a esa época porque muchos de los diseñadores actuales, crecieron en esa época, y eso marca J.
Yo, mientras no vuelvan las hombreras me quedo con esta tendencia.
9.- Apps inspiran los nuevos diseños web
Si has llegado hasta aquí, te habrás dado cuenta que muchas tendencias actuales vienen condicionadas por el uso de los dispositivos móviles.
Y dentro de estos dispositivos, están influenciados por la forma en que se diseñan las apps.
Cada vez veremos diseños web más sencillos, sin distracciones, con menús ocultos, contenido modular, etc.
Estoy convencido que incluso se empezarán a implementar acciones gestuales en las webs como si fueran una aplicación más de tu móvil.
10.- Usabilidad
Cada vez más tenemos en cuenta al usuario dentro del diseño web.
Se busca que la experiencia con nuestro site sea lo más agradable posible.
Búscamos interfaces transparentes o lo que es lo mismo, que el usuario no tenga ningún problema para poder moverse por nuestra web.
Este es el fin, de la usabilidad. Y es por eso que cada vez tiene más peso dentro del diseño.
Nadie volverá a tu web por muy bonita que sea, si no tiene usabilidad.
Empezamos la lista de las tendencias en diseño web en 2016 con el Diseño responsiveEn un diseño responsible, una web se mostrará de forma distinto según el tamaño de la pantalla y/o el tipo de dispositivo, con la finalidad de garantizar la facilidad de uso. Se aplica concretamente a las pequeñas pantallas de visualización de los dispositivos móviles, donde se requiere una representación distinto de la página. Antecedentes El diseño usual de una página web se basa en las pantallas de PC, tal y más y hemos acabado con la Usabilidad web para mejorar la Experiencia del usuario (UX User Experience).
¿Por qué?
Son los dos ejes principales dentro del diseño web. Muchos a lo mejor pensáis que son más que tendencias, buenas pautas dentro del diseño.
Puede ser, pero pienso que tienen cada vez más peso, y por eso no podemos dejar de nombrarlas.
Como he dicho antes, puedes tener un diseño web impecable, el mejor diseño web en cuanto a estética. Pero como falle la usabilidad y que no sea responsive, tu diseño no llegará a ningún lado.
Tienes que pensar más allá, piensa que te gustaría que tuviera una web para no salir de ella.
Mejor aún, recuerda las veces que has salido de una web sin ni tan siquiera leerla porque no se ve bien un tu dispositivo móvil o porque tarda mucho en cargar.
Por eso considero que son los dos pilares básicos sobre los que tienes que forjar tu proyecto web. El resto de tendencias son eso, tendencias.
Espero que te haya parecido interesante este artículo sobre las tendencias actuales en diseño web. Si es así ayúdanos a Miguel y a mí a difundirlo por las redes.
¿Cuáles son las tendencias en diseño web que más te han llamado la atención?
¿Consideras importante hacer un buen diseño web para mejorar la usabilidad y la experiencia de usuarioEl término experiencia de usuario (UX) se refiere a la experiencia que un usuario tiene con un producto o servicio. En cuanto a Internet, el término se usa frecuentemente al examinar la experiencia que los usuarios disponen con una web. Esto además puede ser en referencia al uso de un dispositivo smartphone (UX smartphone). Items de la experiencia del usuario La experiencia del usuario y la usabilidad se usan frecuentemente más?
Gracias a Shutterstock por ceder la imagen Bloomua.
