{"id":877,"date":"2021-04-09T01:59:51","date_gmt":"2021-04-09T01:59:51","guid":{"rendered":"https:\/\/moodwebs.com\/?p=101"},"modified":"2021-04-09T01:59:51","modified_gmt":"2021-04-09T01:59:51","slug":"estas-son-las-tendencias-de-diseno-web-en-el-2021","status":"publish","type":"post","link":"https:\/\/moodwebs.com\/en\/2021\/04\/09\/estas-son-las-tendencias-de-diseno-web-en-el-2021\/","title":{"rendered":"Estas son las tendencias de dise\u00f1o web en el 2021"},"content":{"rendered":"

La creatividad es sin lugar a duda el mejor recurso al momento de desarrollar un sitio web. Este debe plasmar la personalidad, visi\u00f3n y objetivos del emprendedor al p\u00fablico. Hagamos un breve intercambio de roles. \u00a1Ahora t\u00fa ser\u00e1s el cliente! Imag\u00ednate navegando por Internet en b\u00fasqueda de unas nuevas botas\u2026 Bien, llegaste al primer sitio web \u201catumedida.com\u201d. Ingresas y lo primero que percibes es el aspecto sombr\u00edo y triste de la p\u00e1gina recubierta por un color gris melanc\u00f3lico, una tipograf\u00eda arcaica y unas gr\u00e1ficas sin calidad. \u00bfTe animar\u00edas a comprar?…\u00a1Hasta las ganas de comprar botas se agotan! Despu\u00e9s de esa experiencia desalentadora, encuentras \u201cestilo.com\u201d Otra vez el color blanco de fondo, pero \u00a1hey! \u00a1Esos tonos brillantes en las letras! \u00bfNotaste el estilo de los textos animados? \u00bfLa combinaci\u00f3n de gr\u00e1ficas flotantes?\u2026 De repente ya te encuentras realizando el pedido. Saul Bass, dise\u00f1ador gr\u00e1fico estadounidense, mencionaba que: \u201cLa gente ignora el dise\u00f1o que ignora a la gente\u201d. Esta frase nos quiere decir que debemos tener siempre en consideraci\u00f3n qu\u00e9 elementos atraen al p\u00fablico, en pocas palabras, las tendencias, \u00bfEst\u00e1s preparado para el siguiente nivel?<\/p>\n

\"\"<\/p>\n

En estos primeros meses del 2021<\/span>\u00a0<\/span>se ha podido observar c\u00f3mo algunas tendencias se han consolidado en la escena virtual<\/span>.<\/span>\u00a0A continuaci\u00f3n, te presentaremos aquellas que llevar\u00e1n tu sitio web al siguiente nivel: lo extraordinario.<\/span>\u00a0<\/span><\/p>\n

1 \u00a1Que es la vida sin color!<\/span><\/b>\u00a0<\/span><\/p>\n

\u00bfHas escuchado hablar de la psicolog\u00eda del color? A trav\u00e9s de los colores se pueden influenciar las sensaciones de las personas, los pensamientos, estados de \u00e1nimos. (Ya sabes, el\u00a0<\/span>M<\/span><\/i>ood<\/span><\/i>\u00a0<\/span>\ud83d\ude09<\/span>)<\/span>\u00a0<\/span>As\u00ed, el color blanco puede indicar vac\u00edo llegando a ser percibido como mon\u00f3tono. El color rojo transmite pasi\u00f3n y energ\u00eda. Y, en el caso del amarillo, este representa alegr\u00eda, optimismo.\u00a0<\/span>As\u00ed, sucede con los miles de colores primarios<\/span>\u00a0and\u00a0<\/span>secundarios que existen. Estos<\/span>\u00a0funcionan de\u00a0<\/span>manera<\/span>\u00a0distinta y desencadenan reacciones m\u00faltiples en los seres humanos. Pero, eso no es todo. No se puede quedar en un simple color, la mezcla y el matiz es lo que\u00a0<\/span>har\u00e1 que<\/span>\u00a0tu sitio web\u00a0<\/span>pase de\u00a0<\/span>ordinario a extraordinario.\u00a0<\/span>Aunque pueda resultar obvio, nunca est\u00e1 de m\u00e1s recordar que una buena\u00a0<\/span>combinaci\u00f3n\u00a0<\/span>de colores y uso de tonalidades repotenciar\u00e1 la exposici\u00f3n de tu sitio web.<\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de la web\u00a0<\/span><\/span><\/em><\/a><\/p>\n

2 \u00a1Dale movimiento, dale onda!<\/span><\/b><\/p>\n

Tu p\u00e1gina web debe ser din\u00e1mica, en\u00e9rgica, operante. Todos los elementos deben hablar por s\u00ed solos. Puedes generar este movimiento a partir de dos efectos que est\u00e1n marcando la pauta en este 2021.\u00a0<\/span>\u00a0<\/span><\/p>\n

*\u00a0<\/span>Elementos pegajosos<\/span><\/b>: El efecto\u00a0<\/span>sticky\u00a0<\/span><\/i>permite<\/span>\u00a0<\/span>posicionar ciertos elementos (por ejemplo, el t\u00edtulo del art\u00edculo de tu blog o una barra de men\u00fa) durante la navegaci\u00f3n del usuario por tu sitio web. Este elemento permanecer\u00e1 estable en la pantalla mientras el cliente revisa el contenido de tu p\u00e1gina.<\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de la web\u00a0<\/span><\/span><\/em><\/a><\/p>\n

Elementos flotantes<\/span><\/span><\/strong>:<\/strong> El efecto flotante es tambi\u00e9n una t\u00e9cnica visualmente atractiva que permite generar movimiento entre los distintos elementos que conforman tu p\u00e1gina web (es decir, gr\u00e1ficas, textos, \u00edconos, etc.). <\/span><\/span>A medida que el usuario navega, las gr\u00e1ficas -a modo de ejemplo- crear\u00e1n la ilusi\u00f3n \u00f3ptica de haberse suspendido por unos breves segundos.\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n

<\/b>3 Llego la hora de <\/span><\/b>desplazarse sin fin<\/span><\/b>\u00a0<\/span><\/p>\n

Infinite<\/span><\/i><\/b>\u00a0<\/span><\/i><\/b>scrolling<\/span><\/i><\/b>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de la web\u00a0<\/span><\/span><\/em><\/a><\/p>\n

A veces, resulta muy inc\u00f3modo y abrumador cuando cliqueamos sobre un contenido y autom\u00e1ticamente se abre otra ventana. A quien no le ha pasado que despu\u00e9s de unos minutos de navegaci\u00f3n\u00a0<\/span>se encuentra con la sorpresa de que tiene<\/span>\u00a0m\u00e1s de 10 ventanas abiertas. En el 2021, los usuarios desean evitar la sobrecarga de cualquier tipo. Para eso, una tendencia es el\u00a0<\/span>infinite<\/span><\/i>\u00a0<\/span><\/i>scrolling<\/span><\/i>\u00a0que refiere a una t\u00e9cnica de dise\u00f1o web caracterizada por el \u201cdesplazamiento infinito\u201d dentro de un sitio web sin necesidad de cliquear.\u00a0<\/span>Esta herramienta es realmente beneficiosa si tomamos en cuenta que una gran parte de usuarios navega por Internet desde una\u00a0<\/span>tablet<\/span>\u00a0o smartphone. Por medio del\u00a0<\/span>touchscreen<\/span><\/i>,<\/span><\/i>\u00a0el desplazamiento se convierte en nuestro mejor aliado.<\/span>\u00a0<\/span><\/p>\n

\u00a04<\/strong> <\/span>Deja <\/span><\/b>q<\/span><\/b>ue el dise\u00f1o interact\u00fae con <\/span><\/b>el<\/span><\/b>\u00a0cliente<\/span><\/b>\u00a0<\/span><\/p>\n

La magia de las microinteracciones<\/span><\/b>\u00a0<\/span><\/p>\n

A trav\u00e9s de las microinteracciones, los clientes podr\u00e1n relacionarse de forma activa con tu p\u00e1gina web. Esta funci\u00f3n viene a ser parte de una de tendencias m\u00e1s utilizadas como parte del dise\u00f1o UX. Debes tener en cuenta, que el \u00e9xito de tu sitio web est\u00e1 intr\u00ednsecamente ligado a la experiencia del usuario. Por tal raz\u00f3n, no podemos dejar que esta interacci\u00f3n resulte tediosa. En esta l\u00ednea, las microinteracciones dentro de tu p\u00e1gina servir\u00e1n para potenciar la experiencia del cliente<\/span>. Algunos ejemplos:<\/span>\u00a0<\/span><\/p>\n

* Resaltar la informaci\u00f3n importante sobre el servicio que ofertas mediante<\/span>\u00a0notificaciones<\/span>.<\/span>\u00a0<\/span><\/p>\n

* Comunicar al usuario que ha reconocido las acciones dentro de la p\u00e1gina web (por ejemplo, un texto din\u00e1mico como \u201cestamos trabajando en su pedido\u201d)<\/span>.<\/span>\u00a0<\/span><\/p>\n

* Facilitar la b\u00fasqueda del usuario a trav\u00e9s de sugerencias<\/span>.<\/span>\u00a0<\/span><\/p>\n

Estos son solo unos ejemplos de todo lo que puede ofrecer el aceptar agregar contenido interactivo en tu sitio virtual.\u00a0<\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de la web<\/a><\/span><\/span><\/em><\/p>\n

5 Nada es lo que parece\u2026<\/span><\/b><\/p>\n

Efecto hover<\/span><\/b>\u00a0<\/span><\/p>\n

Estamos hablando de los poderosos \u201c<\/span>e<\/span>fecto hover\u201d<\/span>\u00a0o \u201chovering\u201d. Uno de los efectos CSS m\u00e1s llamativos cuando nos referimos al dise\u00f1o de p\u00e1ginas web<\/span>. Este consiste en la alteraci\u00f3n perceptual de un elemento gr\u00e1fico al momento de ubicar el rat\u00f3n sobre este. Por ejemplo, al posar el puntero encima de una gr\u00e1fica -aparentemente estable- esta puede encubrir\u00a0<\/span>otros aspectos (cambio de color, elementos nuevos en la imagen que yac\u00edan escondidos). Esta es una herramienta funcional y l\u00fadica, ya que tu sitio web se vuelve din\u00e1mico para el cliente. Sin duda un efecto que mantendr\u00e1 al p\u00fablico a la expectativa.<\/span>\u00a0Al fin y al cabo, \u00a1eso es lo que deseamos!<\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Imagen extra\u00edda de la web\u00a0<\/span><\/span><\/em><\/a><\/p>\n

Adem\u00e1s de estas, es necesario mencionar que la inclusi\u00f3n de gr\u00e1ficas, formas geom\u00e9tricas, animaciones y textos\u00a0<\/span><\/span>impulsar\u00e1\u00a0<\/span><\/span>el contenido que ofreces.\u00a0<\/span><\/span>Si deseas actualizar tu sitio web o reci\u00e9n est\u00e1s iniciando en el desarrollo de tu p\u00e1gina, esta informaci\u00f3n es perfecta<\/span><\/span>,<\/span><\/span>\u00a0ya que\u00a0<\/span><\/span>solo\u00a0<\/span><\/span>conociendo las tendencias ser\u00e1 posible capturar con mayor facilidad la atenci\u00f3n del cliente.\u00a0<\/span><\/span>Ya es web, ahora necesitamos que sea \u00a1WOW!<\/span><\/span>\u00a0<\/span><\/p>","protected":false},"excerpt":{"rendered":"

La creatividad es sin lugar a duda el mejor recurso al momento de desarrollar un sitio web. Este debe plasmar la personalidad, visi\u00f3n y objetivos del emprendedor al p\u00fablico. Hagamos un breve intercambio de roles. \u00a1Ahora t\u00fa ser\u00e1s el cliente! Imag\u00ednate navegando por Internet en b\u00fasqueda de unas nuevas botas\u2026 Bien, llegaste al primer sitio […]<\/p>\n","protected":false},"author":1,"featured_media":114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-novedades"],"_links":{"self":[{"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/posts\/877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/comments?post=877"}],"version-history":[{"count":0,"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/posts\/877\/revisions"}],"wp:attachment":[{"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/media?parent=877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/categories?post=877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moodwebs.com\/en\/wp-json\/wp\/v2\/tags?post=877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}