¿Por qué se le pone más énfasis aún para el 2018? SEO, SEO y más SEO. No me canso de decirlo, pero es que parece que no queda claro :-p
La máxima para ayudar a que una página web tenga un buen posicionamiento es que ésta cargue rápido, y en el caso de las páginas web navegadas desde dispositivos móviles, es todavía más importante si cabe. Por eso desarrollar tecnológicamente una web teniendo en cuenta los conceptos de SEO Off Page es fundamental.
Las tendencias para este 2018 las describe los siguientes adjetivos:
Personalización, sencillez, limpieza, armonía inter-elementos, grandiosidad, visual, colorido, interactividad = DiferenciaciónVoy a dividir en cinco bloques para hacer más clara la presentación de las Tendencias, así que veréis tendencias de Diseño y Maquetación; Color y Forma; Tipografía, Imágenes, videos y efectos.
Diseño y Maquetación
1 Diseño en esqueleto y carga progresiva
Por lo que parece, ha pisado muy fuerte el diseño en esqueleto. Ya llevamos unos años donde nos encontramos webs que el contenido va cargando conforme se va avanzando con el scroll. Gracias a este diseño, la web se carga en etapas, involucrando al usuario a ser partícipe y haciéndole sentir parte de la web, porque al mostrar el contenido progresivamente hay efectos animados, dinámicos haciendo que se centre el foco de atención. Aparte el usuario se puede hacer una idea mucho más clara de la estructura que se va a encontrar, y esto a nivel de usabilidad es fundamental, ya que además se reduce el tiempo de carga.
2 Progressive Web App (aplicaciones web progresivas)
Éste punto y el anterior (diseño en esqueleto y carga progresiva) tiene mucho que ver. Es una de las grandes tendencias en diseño web y maquetación del 2018, bueno en diseño web, ya que la optimización web será la palanca de cambio de proyecte un buen diseño web. Tras analizar el tiempo de carga de muchas páginas web, podemos decir que existe un abandono de más de un 50% tras pasar los 3 segundos de carga de una web.
Las progressive App combinan lo mejor de las webs y de las APPS, no requieren instalación, permiten almacenamiento local, se muestran al usuario de forma rápida en cualquier navegador y con cualquier red porque pueden cargar sin necesidad de tener conexión a Internet, acceden a. hardware móvil, puede enviar notificaciones push, se carga a pantalla completa, y mucho más.
El usuario puede ponerse en su Smartphone un icono que le lleve a la web al igual que con las APSS pero, al contrario que con las APPS, sin ocuparle espacio en el móvil. Las páginas web que se comportan como aplicaciones nativas (Progressive Web Apps) son casi con total seguridad el futuro de la web.
3 Diseño modular
Para que os hagáis una idea, es como el formato de Pinterest. Este tipo de diseño, hace que la web funcione mediante módulos que actúan de manera independiente, proporcionando una gran capacidad de adaptación a las dimensiones de cada dispositivo.
4 Personalización hasta la médula
El Material Desing sigue siendo el gran aliado en las tendencias de diseño web y además ayuda a que la página se haga responsive de manera más sencilla que con diseño tridimensionales. Pero estamos en un punto en que las webs diseñadas con plantillas cada vez son más parecidas unas a otras, y por ello es muy necesario realizar diseños personalizados, basados en plantillas.
"Cada vez hay más webs que se parecen unas a otras a causa del uso de plantillas, por eso el diseño personalizado es la guinda para diferenciar tu web"5 Elementos pegados en el inferior del site
Al estar más en auge el uso de los dispositivos mobile, vamos a ir viendo cada vez más como se hace tendencia en el diseño web, el hecho de pegar los menús en la parte inferior de la pantalla.
El motivos es por la Usabilidad. Cuando navegamos con un dispositivo móvil, el gesto más común a la hora de navegar es el uso del dedo pulgar sobre la parte inferior de la pantalla del dispositivo.
A partir de ahora es recomendable pensar incluso primero en diseño para mobile y luego diseño para sobremesa. Y como la tendencia es móvil, en términos de usabilidad para dispositivos mobile, es recomendable que los los menús estén ubicados en la parte inferior.
Color y Forma
6 Infografías e Ilustraciones a medida
Cada vez en Intelligenia nuestros clientes nos solicitan que les diseñemos ilustraciones e infografías propias. No con ello se deja de usar los bancos de imágenes, pero es cierto que lo personalizado está más demandado.
7 Diseños Interactivos
Para que un diseño sea interactivo requiere de mucho diseño a medida, obteniendo resultados muy diferenciadores.
8 Personalización al detalle
Ya he comentado que la personalización está en voga, y es llevada hasta la creación de botones personalizados. Una web está considerada como un ente vivo, la cual debe proyectar personalidad, aparte de sensaciones y emociones, reforzando de esta manera la identidad de la marca. ¡Todo es Branding!
9 Minimalismo y Espacio Negativo
En este 2017 se quiere poco, pero es que la tendencia en el 201 haya menos aún. La fuerte corriente minimalista en la que el diseño web está inmerso sigue llevando a prestar especial atención a los espacio vacíos. Ahora orientamos la atención del usuario gestionando la distancia que hay inter-elementos.
También el minimalismo se instaura fuertemente al branding web y branding de marca (logotipos), donde podremos ver diseños limpios, claros, entendibles rápidamente a nivel visual.
10 Blanco, mucho fondo blanco
No hay nada como el color blanco para iluminar, y hacer resaltar cualquier elemento para que el usuario centre su atención en él.
11 Color intenso
Uso del colores fuertes, vivos, con degradados y biocromatismos.
De nuevo tenemos que decir adiós a la combinación moncromática, con su presentación de escalas de grises, suavizando o anulando incluso tonos, incluyendo superposiciones de blanco sobre negro, etc., la "ausencia" de color era sinónimo de elegancia.
Para este 2018 lo dejamos aparcado (porque al final muchas de las tendencias luego vuelven, como ocurre en el sector de la moda) y le damos la bienvenida a la explosión del color. El color se presentará en su más amplia gama de viveza e incluso de combinaciones, para deleitar nuestros sentidos. Como todos los aspectos del mundo gráfico, esta tendencia debe también ser usada con cabeza y estudiada al detalle, porque el exceso de elementos con colores vivos y/o mal presentados puede hacer que nos "estallen" los ojos.
Los degradados son fusiones bitonales que dejamos de ver en diseño web sobre el año 2000, pero para este 2018 vuelven con mucha fuerza, ya que consigue captar la atención del usuario, las webs que la utilizan con cabeza, son diferenciadoras, ayuda a potencian la identidad cromática corporativa
La técnica basada en aunar dos colores de forma degradada a modo de fondo o superposición ha vuelto.
 |
| Grabient es una ingente comunidad de degradados
Aquí podéis ver unos ejemplos de la utilización de colores intensos/vivos en degradado con ilustraciones a medida.
|
Utilización de formas geométricas y texturas realistas (texturas de la vida real). Es la colocación del fondo sobre la forma, superposiciones de colores simples para obtener un efecto de profundidad.
Sí podemos decir que Apple la adoptó y parece que no quiere soltarla :-)
13 Flat design
Se sigue manteniendo el Flat design (diseño gráfico plano), obteniendo diseños minimalistas que combinan imagenes limpias con fondos blancos o pastel. Iremos viendo a lo largo de 2018 si una de las dos tendencias prima sobre la otra, o pueden convivir.
 |
| Ejemplo de Skeumorfismo y Flat Desing |
 |
| Ejemplo de Skeumorfismo y Flat Desing |
Tipografía
14 Con curvas y redonditas
La tendencia son las tipografías de gran tamaño con cuerpo (nada de tipografías finas), que se utilizarán para superponerlas sobre imágenes, también utilizadas como formas y no como texto y/o para transmitir frases cortas e impactantes, con el objetivo de llamar/captar la atención del usuario.
Podéis ver muchos ejemplos de tipográficas en Awwwards y de webs con animaciones.
Las tipografías circulares y el uso de la Sans Serif están entre las preferidas a seguir usando.
Una tipografía que apunta ser la favorita en 2018, es una fuente gratuita de Google Noto, la cual al haber sido diseñada por google es correctamente visualizada en más de 800 idiomas y con unos 110.000 caracteres.
Una potente fuente de expresión con posibilidades infinitas y resultados sobresalientes.
Como he comentado antes, todo lo que se haga personalizado hace ganar valor a una web, y no por ello iba a quedar fuera las tipografías. Las tipografías hechas a mano "hand made" tendrán bastante peso en este próximo año 2018.
Otras tendencias dentro del "mundo" de la tipografía dentro del Diseño web son el uso del desencuadre, la utilización de texto superpuesto en imágenes, la combinación de textos o títulos horizontales con verticales, todo ello centrado en conseguir el objetivo de Captar la Atención del Usuario.
La tipografía se desprende de su clásica función transmisora de contenidos para convertirse en la protagonista de una interfaz.
Imágenes, vídeos y efectos
15 Más iconos, menos imágenes
Los iconos están en pleno apogeo como recurso gráfico, ya no sólo porque pesan poco y agilizan la web, o por sus mínimos problemas de resolución, también porque son una herramienta potente y eficaz para llamar la atención del usuario. La creatividad no tiene límite a a hora de crear icónos
En 2017 Flaticon ha aumentado a casi un 40% su volumen de nuevas colecciones multicromáticas, convirtiéndolos en un candidato de primer nivel para imprimir carácter y emoción a una web :-)
PASA POR ENCIMA
Y HAZ CLICKS
16 Sí, sí, más multimedia
Hace un tiempo se empezó a utilizar el formato WebM para minimizar los problemas de carga de las webs a causa del uso de los videos. Al reducir el "espacio" que ocupan los videos en la web, no es extraño que ya veamos videos que ocupan todo el fondo de una página web, para dar un estilo cinematográfico.
17 Full Screen
El uso total del ancho de página seguirá siendo tendencia, pero coge más fuerza ya que esta tendencia será utilizada con más frecuencia e incluirá no sólo a imágenes, heroimágenes, y videos, sino también a gifs.
18 Cinemagraphs
Tenemos que decirle ¡Adiós! al video ornamental en las webs. La tendencia es la fusión entre una imagen estática junto con un vídeo en completo movimiento. Son GIF breves de escenas estáticas con uno o varios detalles en movimiento. Eso crea un efecto visual potente que llama mucho la atención del usuario por su sencillez, livianidad y porque aporta armonía visual que crean detalles en la página web.
Pero mi opinión es que esta tendencia sea usada con cabeza y con cierta justificación. Aparte de para no "recargar" la generalidad visual de la web, también para que hace que se "ralentice" un poco los tiempos de carga de la página donde están insertados estos elementos.
Para un buen uso de los cinemagraphs, sería utilizarlos como hover en un bloque o para una imagen a modo de header (encabezado de la página). Como siempre a lo largo de este nuevo año 2018 que entra, aparecerán más aplicaciones de cómo usar los cinemagrahs de manera creativa y sorprendente.
19 Microinteracciones (Efecto Hover)
Las microinteracciones son apequeñas cciones que provocan un cambio cuando el usuario interactúa con ellos, por ejemplo, cuando se introduce un producto en el carrito, que éste se mueva o cambie de forma, cuando se hace un clic o se escribe una contraseña incorrecta.
21 Efecto parallax
Son movimientos a distintas velocidades de elementos web que se activan al hacer scroll, dándole profundidad a la página.
22 Objetos Vectoriales Animados, Realidad Virtual, Elementos 3D y 360
Ya se sabe de sobra que el usuario no quiere leer demasiado y lo que tenga que leer más vale que se lo presentemos de manera llamativa, con infografías, animaciones o algo con movimiento que capte su atención.
Pero como también reitero, todo se debe usar con "sentido común", armonía, estética, user interface...porque si no, el resultante puede ser esto.:
Podemos incluir elementos interactivos, que reaccionen al hover o click del mouse. Alguna de éstas formas que se pueden insertar en tu web, se puede hacer usando SVG o el elemento Canvas. Podéis mirar las librerías Lazy Line Painter para SVG y P5JS para Canvas.
Cada día más los usuarios están acostumbrandoase al uso de la Realidad Virutal dentro de su cotidianidad. Ni que decir que ya están completamente instauradas las imágenes 360.
Una de las marcas que se adelantó al uso de la tendencia es IKEA, entre otras más, la cual lanzó una aplicación móvil llamada Ikea Place. Con la aplicación podrás ver cómo queda cualquier artículo de IKEA en tu casa.
Los objetos 3d animados o interactivos, son elementos que llaman mucho la atención a los usuarios, y más aún si están dentro de una web. Lo bueno de incluir un buen elemento de 3D es que inmersa en la web al usuario haciéndole sentir parte del site.
Os recomiendo que le echéis un ojo a la librería de animaciones de 3D Three.js ya que tiene muchos elementos 3D que no te dejará indiferente.
En declive
Aparcamos el diseño responsive
La filosofía responsive es programar una sola web que se adapte a todos los tamaños de pantalla, pero se consigue menor calidad al no adaptarse a la experiencia nativa de cada dispositivo. La tendencia actual es el diseño adaptativo, que consiste en servir una versión distinta a cada tipo de dispositivo.
Aparcamos la Homepage
La mayoría de empresas están pasando de aglutinar todo su contenido en la página principal para centrarse en las landing pages que tienen como objetivo convertir visitantes en clientes.
Aparcamos el menú de hamburguesa
Aunque los diseños hamburguesa siguen siendo una práctica muy extendida, irán perdiendo fuerza para dar relevo al diseño modular.
El icono con las tres líneas horizontales está desapareciendo debido a que los expertos en usabilidad advierten de que entorpece la interacción. Es mejor utilizar las pestañas con el título de la sección.
Aparcamos el menú horizontal de navegación con buscador
Las webs más populares de la actualidad tienen una cosa en común, y es que tienen un menú de navegación horizontal que está en la parte superior y que tiene un campo de búsqueda.
Y pongo como verbo "aparcar" porque actualmente se sigue haciendo diseños webs responsives, con hompage. Sí es cierto que los menús hamburguesas se ven cada vez menos y mi opinión es que son un poco tediosos (pero como gustos colores) ;-)
Para concluir
No podemos decir que son 100% tendencia algunos de los recursos que os he comentado. Sólo el tiempo nos irá diciendo los que se instauran de manera consolidada, pero la navegación inferior móvil, la WebGL, y el SVG parece que van despuntando. El hecho de poder ir viendo cómo evolucionarán estás y otras tendencias del diseño web a lo largo de 2018 resulta motivador e ilusionante.
Si en algo puedo ayudarte, estaré encantada de responder cualquier duda o sugerencia que dejes en la zona de comentarios :-D
¡Hasta más post! ;-)
No hay comentarios:
Publicar un comentario