|
TENDENCIAS EN LA
PÁGINA WEB
|
|
Tendencias En Diseño Web Y Gráfico En 2018
En este artículo voy a enseñarte las tendencias
en diseño web para el 2018. Las tendencias en diseño web
van cambiando, ahora encontramos mucho flat design, y es de los estilos que
está mas presente en las páginas web pero…¿Os acordáis de los GIFs, que
dominaban la web en los años 90? Vamos a repasar que tendencias siguen los
mejores diseños web, o que hay que intentar hacer para lograr los mejores
diseños de páginas web.
Las tendencias en diseño web son aquellas que
han ido asentándose como los mejores diseños para hacer que la experiencia
de usuario en la navegación sea la mejor posible, por eso debes
elegir la que mas se ajuste a tu proyecto.
Debido a la popularidad del diseño web responsive
cada vez vemos mas sitios adaptados a dispositivos móviles para cumplir con
las pautas que marca Google en cuanto a las webs “mobile friendly”.
El diseño de una web debe buscar ser lo mas usable
posible para el usuario. Por eso las tendencias actuales hoy en día tienden a
decantarse por diseños con las características que verás a continuación.
Vamos a repasar las tendencias mas
populares en diseño web para este año.
 ¿Que tendencias en diseño
web puedes encontrarte en los mejores diseños web?
El problema del diseño web responsive es que todas
las páginas web pueden parecer iguales en dispositivos móviles. No obstante
esto también es debido al boom de WordPress y al aumento del uso de
plantillas.
Esto ha resultado en un montón de diseños comunes,
aunque algunos de ellos han madurado y podemos ver algo de innovación:
 El menú “Hamburguesa”
El menú tipo “hamburguesa es el típico menú de los
teléfonos móviles, es decir, un icono de tres líneas horizontales. Este
menú ha sido criticado por su poca usabilidad, ya que no todo el mundo
asociaba ese icono al menú de la web.
No obstante, con el aumento significante
de la navegación desde móviles este tipo de menú ya es familiar y
reconocible por casi todos.
Su uso es cada vez mas extendido no solo en
teléfonos móviles, sino que cada vez está mas visto en muchas páginas web en
su versión “pantalla grande”, consiguiendo un diseño limpio y minimalista.
 Formularios de registro:
Un formulario de registro será siempre un
formulario de registro, y su función está clara y definida.
La tendencia web hoy en día está en facilitar y
acelerar este proceso facilitando que el usuario se registre con su
perfil de redes sociales.
De esta forma se completan muchos mas registros de
usuarios ya que estos no estarán tan reacios ante la idea de perder tiempo
rellenando campos.
La tendencia para registros mas complejos es
crear formularios “por pasos” en los que el usuario es
guiado por cada una de las fases del proceso de registro de una forma mas
efectiva.
 
Diseños tipo “tarjetas” con información
escaneable.
El pionero en este tipo de diseños fue Pinterest y
cada vez vemos este estilo en mas sitios. De hecho están surgiendo cada vez
mas plantillas de WordPress que incorporan este tipo de diseño y logran
diferenciarse de los diseños a los que estamos mas que habituados hasta
ahora.
Lo bueno de estos diseños es que cada “tarjeta”
contiene y presenta la información en pequeños trozos perfectamente escaneables.
Aíslan la información de forma muy visual dando un punto de vista gráfico
atractivo, y favoreciendo la usabilidad.
 Imágenes “Hero”
Las llamadas “Hero images” son la imágenes que
vemos nada mas llegar a muchas páginas web y que ocupan toda la
pantalla.
 Las imágenes en las páginas
web son un recurso muy potente para captar la atención del usuario desde el
primer momento.
Con un buen servidor y una buena optimización de
tu sitio e imágenes en general no tendrás que preocuparte por tiempos de
carga bajos.
Este recurso ya viene siendo utilizado desde hace
unos años, pero anteriormente los usuarios tendían a no seguir haciendo
scroll en las páginas. Ahora ya estamos acostumbrados a este tipo de imágenes
de presentación, por lo que la mayoría de usuarios intuyen que debajo de
ellas continua el contenido de la web. Se puede observar que las páginas
web con un mejor diseño, muy visuales y estéticas apuestan por las imágenes
Hero.
Animaciones:
Las animaciones están siendo usadas cada vez mas
para resaltar los contenidos de un sitio web. Cada vez son mas tendencia en
diseño web y son incluidas en la mayoría de plantillas de WordPress.
Hacen que la experiencia de usuario sea mas
interactiva y entretenida. No obstante, no hay que pasarse con las
animaciones. No podemos ponerlas en todas partes de forma indiscriminada.
Las animaciones en una página web pueden ser
usadas de dos formas diferenciadas:
·
Animaciones “mayores”: Son usadas como una forma de interacción
directa para el usuario, como por ejemplo, incluir notificaciones en
forma de pop-up, o efectos parallax.
·
Animaciones “menores”: No requieren ninguna acción por parte del
usuario, como los iconos animados que aparecen cuando está
cargando una web, las barras animadas o los efectos hover.
ESTAS SON LAS ANIMACIONES MAS TÍPICAS QUE
PUEDES VER EN LAS PÁGINAS WEB ACTUALES:
Animaciones de carga:
Sirven para entretener al usuario en
el tiempo de espera mientras carga una web.
Deben encajar con la personalidad y apariencia de
tu web, deben ser simples y preferiblemente sin audio.
Menus:
Los menús “ocultos” están creciendo en
popularidad ya que pueden ahorrar espacio en la pantalla. Los menús
tipo hamburguesa ya tan comunes en dispositivos móviles activan varios tipos
de animaciones para mostrar los elementos del menú cuando se hace clic en un
icono específico.
Quizá te suene el nombre de off-canvas menu, que
cada vez se ve mas en las plantillas de WordPress.
Hover:
Las animaciones hover son esos efectos que se
activan cuando pasas tu cursor por encima de algunos elementos, como
por ejemplo los botones de una web.
Los efectos hover hacen mas intuitiva la
navegación en una página web ya que avisan que esos elementos incluyen algún
tipo de función, generalmente un enlace.
Galerías y slideshows:
Otra de las tendencias en diseño web que sigue
manteniéndose este año son las galerías en forma de carrousel o slideshow.
Son una forma perfecta de mostrar varias imágenes al usuario sin sobrecargar
una página web. Son perfectas para portfolios, webs de fotografía y productos.
Fondos con animaciones o videos:
Un simple fondo animado puede añadir mucha
visibilidad a una parte concreta de tu web. Aun así pueden distraer al
usuario, por lo que debe usarse con moderación.
 Microinteracciones en la web:
Las microinteracciones ocurren día a día en
nuestra vida cotidiana. Desde dar un like a una foto en Facebook hasta apagar
el despertador. Permiten al usuario interactuar con una interfaz y cada vez
las vemos mas en las apps y en los dispositivos que usamos.
En esta captura de pantalla puedes ver un ejemplo
utilizado en diseño web.
  Material Design: La
alternativa al flat design
El Material Design surge con el objetivo
de Google de crear un Sistema Operativo con una interfaz homogénea para todos
sus dispositivos, ya fueran tablets, smartphones o incluso en la web.
El material design usa mas sombreados y
profundidad que el flat design, y su función es recrear diseños que parezcan
mas realistas para los usuarios.
El principal objetivo del material design es crear
diseños web limpios y modernos enfocados en la experiencia de usuario (UX).
Algunas de las tendencias que empezaremos a ver
mucho mas en 2018 se identifican totalmente con el materia design, vamos a
ver algunas:
Degradados de color semi-transparentes sobre
imágenes.
 Vuelven a estar de moda los degradados pero se aplican de otra forma.
Se está observando desde hace un tiempo que los degradados están cobrando
protagonismo en muchas webs.
Pasaron de moda hace unos años pero con el
material design parece que vuelven a aplicarse, de una forma mas limpia,
sobre diferentes elementos del diseño para resaltar, destacar, o simplemente
como una capa de color semi-transparente sobre una imagen.
También se pueden aplicar en botones o iconos.
Sombras paralelas en imágenes o cajas
Las sombras, otro elemento del diseño web que
había pasado de moda, vuelve a ser tendencia, pero de nuevo, aplicado de otra
manera. En este caso las sombras se aplican de una forma mas sutil,
difuminadas y con mas profundidad.
Quedan muy bien en imágenes y elementos que van
encuadrados en cajas o con diseño tipo “ficha” o “tarjeta”, como se ve en la
siguiente foto:
 
Te dejo un sitio web donde encontrarás un montón
de RECURSOS BESTIALES para mejorar tu diseño web: https://uplabs.com
 Diseño web responsive
El diseño web responsive se ha vuelto
muy popular en estos últimos años debido al considerable aumento del uso
de teléfonos móviles.
El diseño web responsive realmente ha
dejado de ser una tendencia para pasar a ser una buena práctica.
El diseño web responsive se puede aplicar usando
plantillas de WordPress premium que te permiten tener tu página web
optimizada para móviles de forma sencilla y barata.
No obstante el diseño web responsive puede no
haber sido creado correctamente y provocar algunos fallos. Para
asegurarse de que el diseño web responsive funciona de la mejor forma
posible, los diseñadores web deben:
·
Evitar el uso de JavaScript y CSS en la carga de imágenes que añade
peso innecesario a una página.
·
Usar imágenes y videos responsive.
·
Prestar especial atención a los plugins de terceros, que puedan estar
ocasionando un impacto negativo en el rendimiento.
 
El diseño Flat no va a desaparecer en el
corto plazo
El Flat design es compatible con otras modas del
diseño web como el minimalismo, el diseño web responsive o el Material
Design.
De cara al futuro, es probable que veamos las
siguientes tendencias en el diseño Flat.
·
Las sombras largas (Long Shadows): Dan mucha mas más profundidad a
los diseños planos.
·
Combinaciones de colores vivos: Las interfazes y plantillas mas
populares han llevado a muchos a comenzar a usar colores más vivos en sus
diseños.
·
Tipografía sencilla: En el Flat Design, las tipografías sencillas
ayudan a asegurar que el texto sigue siendo legible.
·
Botones fantasma: Son los botones que se presentan con un simple contorno, y
cambian cuando el usuario se desplaza sobre ellos. Estos
mantienen la funcionalidad sin distraer al usuario.
 Secciones largas con mucho Scroll
Los usuarios ya estamos acostumbrados a
hacer mucho scroll en los dispositivos móviles, y por eso mismo
vemos que ya no es necesario preocuparse por crear páginas web con secciones
cortas en las que se trata de concentrar todo el contenido en la parte
superior a toda costa.
Las páginas con mucho scroll y mucho contenido son
perfectas además para quienes quieren atraer a sus usuarios a través
del storytelling.
AMP o Accelerated Mobile pages
AMP es el proyecto de Google que genera una
versión mobile en un código HTML super limpio y ligero y
provoca que las webs carguen ultra rápido. Actualmente es tendencia en diseño
web y podemos ver muchos blogs que muestran su versión AMP en búsquedas
realizadas desde teléfonos móviles. Esto beneficiará el WPO de nuestras webs
y repercutirá como consecuencia en un mejor SEO.
Actualmente AMP proporciona pocas posibilidades en
cuanto al diseño pero empezarán a surgir mayores opciones
para editar la linea gráfica y estética de los artículos en AMP para tener
mas control sobre el diseño.
Tendencias en diseño web peligrosas
Los cambios de tendencias y modas en diseño web
pueden venir dados por las necesidades de los usuarios, o simplemente por un
cambio en la industria. No obstante, no tenemos que aplicar todas las modas
en diseño web a nuestro proyecto.
En diseño web solo es aconsejable seguir una
tendencia si esta va a aportar algún valor o va a resolver alguna necesidad al
usuario. No debemos aplicar todas las modas solo porque queden bien en
nuestro sitio, sino que dependerá de cada proyecto.
Vamos a ver algunas tendencias en diseño web que
debes plantearte si debes aplicar.
Menú tipo hamburguesa que esconde contenido
relevante (hamburguer menu)
Los menús tipo hamburguesa quedan muy bien ya que
dan un aspecto muy limpio a una página web. Pero no son recomendables para
sitios como tiendas online, por ejemplo, ya que pueden ocultar contenido
importante que no sea visto a primera vista por los usuarios.
Usar demasiado Javascript
El javascript puede ofrecerte funciones
interesantes, pero puede hacer que tu web tarde mas tiempo en cargar,
provocando que los usuarios se vayan de tu sitio.
Debes tener cuidado con algunos plugins que crean
muchos archivos Javascript y CSS, afectando el desempeño general de tu web.
Sliders en la homepage con varias imágenes a
modo carrousel
Utilizar un carrousel de varias imágenes en tu
página de inicio te puede dar la oportunidad de agrupar información de una
forma muy ordenada y visual, pero tiene algunas desventajas.
Los sliders requieren de varias imágenes de alta
resolución que seguramente tengan un peso que haga que tu sitio tarde mas en
cargar. También suelen incluir Javascript, que hará que sea mas difícil
de optimizar.
Usar varias tipografías
En diseño web no es recomendable usar mas de dos
tipografías, ya que usar demasiadas podría despistar y dificultar la
legibilidad del contenido.
Si quieres saber cómo puedes instalar tipografías
en WordPress te recomiendo leer éste
post donde
te cuento cómo hacerlo.
Bonus – Los mejores diseños web
Para que veas de lo que he estado hablando en este
post, te voy a dejar a continuación una lista con webs de inspiración.
Podrás ver varios estilos web y sacar muchísimas
ideas de las mejores páginas web para tus propias creaciones. En concreto en
bestwebgallery te encontrarás con páginas que han sido premiadas por ser
precisamente los mejores diseños de páginas web en la actualidad.
 Conclusión sobre las
tendencias en diseño web ¿Que hacer para lograr los mejores diseños de
páginas web?
No se deben seguir las tendencias marcadas en
diseño web simplemente por ser lo que está de moda en un determinado momento.
En diseño web, lo que es tendencia o deja de serlo, viene marcado por lo que
es mejor para los usuarios, es decir por la experiencia de usuario (UX).
¿Piensas que están por venir otras novedades en el
diseño web? Si es así, déjame un comentario mas abajocontándome
tu punto de vista.
|
No hay comentarios.:
Publicar un comentario