01<\/h6>\n\n\n\nModo Goblin – maximalismo<\/h3>\n\n\n\n
<\/p>\n<\/div>\n\n\n\n \u2018Modo Goblin\u2019 ha sido elegido como la Palabra del A\u00f1o 2022 por Oxford.\nEl t\u00e9rmino se refiere a \u201cun tipo de comportamiento que es descaradamente autoindulgente, perezoso o desali\u00f1ado, y que t\u00edpicamente rechaza las normas o expectativas sociales.\u201d Se ha convertido en la primera palabra del a\u00f1o decidida por voto popular. <\/p>\n\n\n\n No es ning\u00fan secreto que, como sociedad, hemos ca\u00eddo lentamente en la autoindulgencia en las \u00faltimas d\u00e9cadas.\nA veces es vergonzoso y a veces excesivo, pero se puede ver en todos los aspectos de la vida occidental.\nRopa deportiva, comprar todo en l\u00ednea, pedir comida r\u00e1pida cuando nos sentimos perezosos y maratonear la \u00faltima serie de televisi\u00f3n.\nEstos son solo algunos ejemplos de la vida moderna que crean la atm\u00f3sfera perfecta para que nuestro goblin interior salga a la luz, y es intrigante pensar c\u00f3mo esto afectar\u00e1 el dise\u00f1o web en el futuro. <\/p>\n\n\n\n Estas normas sociales reci\u00e9n evolucionadas, como refleja el t\u00e9rmino goblin, son interesantes cuando las correlacionamos con el dise\u00f1o UI y UX.\nEn su esencia, el dise\u00f1o UI y UX es un campo basado en est\u00e1ndares, mejores pr\u00e1cticas y el estudio de los usuarios, mientras se intenta ser lo m\u00e1s inclusivo posible.\nUna de las formas en que vemos esta tendencia en acci\u00f3n es a trav\u00e9s de sitios web goblin que ponen la marca primero, antes que el usuario.\nIgnorando las mejores pr\u00e1cticas e incluso la accesibilidad a veces, estos sitios web cuestionan qu\u00e9 es \u201cbelleza.\u201d\nAspiran a fortalecer la presencia de la marca<\/a>, haciendo que el sitio web sea memorable y atractivo utilizando un estilo rudo, exceso de im\u00e1genes, duplicaciones, colores fuertes, ruidos, animaciones de entrada bruscas, m\u00faltiples objetos, etc.\nPodemos enamorarnos de estos sitios web, o criticarlos, pero no podemos pretender que nunca hemos usado uno o dos de esos trucos para mejorar la presencia de un sitio web. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n En el otro lado del espectro del maximalismo, vemos un movimiento de simplicidad que afirma que todo lo que necesitamos es un poco de equilibrio – un ejercicio en \u201cralentizar.\u201d\nEsta tendencia crea una experiencia agradable y relajante para el usuario y es opuesta a la \u201ccultura de todo sobre las apariencias.\u201d <\/p>\n\n\n\n Veremos m\u00e1s y m\u00e1s sitios web que exploran la simplicidad a trav\u00e9s de la reducci\u00f3n de detalles, buscando alcanzar el anonimato.<\/p>\n\n\n\n Estos sitios web a veces act\u00faan como una estructura o un wireframe dise\u00f1ado, utilizando tipograf\u00eda minimalista, una gama limitada de estilos tipogr\u00e1ficos dentro del sitio, colores apagados que se alinean con grandes im\u00e1genes o con ilustraciones amorfas que reemplazan las ilustraciones detalladas de UX.\nAdem\u00e1s, a veces una dulce animaci\u00f3n de desplazamiento envuelve el sitio web y te hace flotar en la serenidad. <\/p>\n\n\n\n Sorprendentemente, puede ser un proceso dif\u00edcil dise\u00f1ar un sitio web as\u00ed, ya que se requiere madurez del dise\u00f1ador para entender d\u00f3nde est\u00e1 la esencia y qu\u00e9 es redundante.\nEstos sitios web a veces destacan m\u00e1s, tanto en t\u00e9rminos de estilo como de rendimiento<\/a>, haci\u00e9ndolos destacar entre los sitios web de la competencia que est\u00e1n cargados de contenido e im\u00e1genes. <\/p>\n\n\n\n Templeton Clothing<\/a> es un sitio web de comercio electr\u00f3nico de los Alpes del Norte de Baviera.\nUna mirada r\u00e1pida a su secci\u00f3n de h\u00e9roe es suficiente para entender su actitud; animaci\u00f3n en c\u00e1mara lenta, sin promociones ni CTA.\nSin usar palabras, te est\u00e1n pidiendo que te relajes y navegues.\nLos bordes lineales en blanco y negro y las grandes im\u00e1genes en general se ajustan a su \u201canti-dise\u00f1o, destacando los productos como lo principal y la marca como secundaria.\u00bb <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n El a\u00f1o pasado hablamos sobre scrollytelling<\/a>, y aunque parece que fue hace una d\u00e9cada, este a\u00f1o, parece que la experiencia web dio varios pasos adelante con nuevas formas de interactuar.<\/p>\n\n\n\n Antes de crear un sitio web, mapeamos un recorrido del usuario y por razones funcionales, creamos una estructura y un marco.\nSi lo comparamos con el mundo real, el sitio web es un camino que queremos que el usuario recorra hacia la conversi\u00f3n<\/a>.\nLa pregunta que plantea esta tendencia es, \u00bfcu\u00e1l es este recorrido del usuario y c\u00f3mo deber\u00eda verse en 2023? <\/p>\n\n\n\n Este enfoque de \u2018deleite\u2019 nos inspira a empezar a pensar en el sitio web como algo m\u00e1s que un conjunto de p\u00e1ginas, sino como una experiencia tridimensional.\nEl objetivo general, por supuesto, es mantener a los usuarios involucrados y curiosos, y guiarlos en el camino con sorpresas y huevos de pascua alegres en el camino.\nUn gran ejemplo de tal deleite alegre es el cursor animado, que puede jugar un papel importante en mejorar la experiencia del usuario en el dise\u00f1o web. <\/p>\n\n\n\n De esta escuela de pensamiento, podemos pensar en las caracter\u00edsticas que sol\u00edamos descartar como t\u00e9cnicas, bifurcaciones en el camino, como el men\u00fa o los enlaces internos, CTA<\/a> y los finales del camino tambi\u00e9n, como el pie de p\u00e1gina o el 404.\nEn estas \u201c\u00e1reas de conflicto<\/a>,\u201d podemos mapear los sentimientos que los usuarios podr\u00edan experimentar como \u00e9xito o fracaso, inter\u00e9s, confianza o sospecha, etc.\nAgregar animaciones, mensajes de marketing<\/a> y motivos humor\u00edsticos puede facilitar la experiencia del usuario y fortalecer el v\u00ednculo entre el usuario y la marca.\nParece que, por el momento, los clientes no tienen sentimientos fuertes respecto a estas \u00e1reas, lo que las convierte en el lugar ideal para dejar volar nuestra creatividad. <\/p>\n\n\n\n Studio Brot<\/a> es una agencia de dise\u00f1o que se enfoca en publicidad y branding.\nSus servicios est\u00e1n desglosados y simplificados, presentados al usuario en forma de una met\u00e1fora de horneado de pan (Brot – alem\u00e1n para pan).\nNos enamoramos de sus t\u00e9cnicas de navegaci\u00f3n y las diversas animaciones a lo largo del sitio web que siempre te mantienen en vilo, haci\u00e9ndote preguntarte qu\u00e9 esperar a continuaci\u00f3n. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n Como parte de la difuminaci\u00f3n de los l\u00edmites entre lo f\u00edsico y lo virtual, es fascinante sumergirse y prever los cambios en el \u00e1mbito del comercio electr\u00f3nico<\/a>.\nEs un poco parad\u00f3jico.\nPor un lado, el dise\u00f1o f\u00edsico se est\u00e1 volviendo hiper digitalizado, pero por otro lado, algunos sitios web de comercio electr\u00f3nico atrevidos sugieren una experiencia de compra sensual y tangible. <\/p>\n\n\n\n Por una buena raz\u00f3n, a muchos de nosotros nos gusta entrar en una tienda de ropa, el olor de la ropa nueva, o probarse una camisa y sentir la suavidad de la tela.\nEsta tendencia web intenta reproducir una experiencia de compra real a trav\u00e9s de exhibiciones de productos interactivas que a\u00f1aden otra capa de dimensi\u00f3n para hacer que todo el proceso de compra sea casi tangible. <\/p>\n\n\n\n Incluso con un presupuesto peque\u00f1o, podemos intentar estimular los sentidos del usuario utilizando animaciones lottie, rotaci\u00f3n y animaciones 3D, todo para alentar al usuario a explorar e interactuar con el producto que estamos vendiendo.\nEsto crea una sensaci\u00f3n poderosa y memorable de descubrimiento de las caracter\u00edsticas del producto, \u00e1ngulos e iluminaci\u00f3n con un gran sentido de juego.\nEl truco es entender c\u00f3mo tu producto es diferente de los dem\u00e1s y c\u00f3mo hacer que el usuario interact\u00fae con \u00e9l. <\/p>\n\n\n\n Grace<\/a> es un producto nutricional, con un enfoque de marketing impactante.\nPermiten a los usuarios simular la experiencia de desempaquetar, jugar con el paquete y revelar el producto a trav\u00e9s de un recorrido de usuario cuidadosamente dise\u00f1ado que ni siquiera es posible en la tienda f\u00edsica. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n Aunque estamos lejos de las primeras etapas de la tecnolog\u00eda de IA, solo recientemente se ha vuelto accesible para el p\u00fablico y parece que todos est\u00e1n hablando de ello.\nEn el \u00faltimo a\u00f1o hemos sido testigos del surgimiento de varios motores de IA en l\u00ednea que parecen ser un cambio de juego.\nMotores como ChatGPT, dall.e2, Midjourney, Stable diffusion por nombrar algunos, junto con la tecnolog\u00eda deepfake, han generado un amplio debate sobre c\u00f3mo se ver\u00e1 nuestro papel como creadores en el futuro. <\/p>\n\n\n\n Gran parte de la conversaci\u00f3n gira en torno a la noci\u00f3n de que la IA pronto har\u00e1 obsoleta la necesidad de profesionales creativos.\nEste es un enfoque bastante dist\u00f3pico.\nLa verdad es que la IA en su estado actual es m\u00e1s una herramienta para que usemos en lugar de un reemplazo futuro.\nY la usaremos. <\/p>\n\n\n\n Hemos visto esta tendencia acelerarse en los \u00faltimos meses con la explosi\u00f3n de dall.e2 y Midjourney en la escena con sus impresionantes capacidades de creaci\u00f3n de im\u00e1genes.\nM\u00e1s recientemente, la introducci\u00f3n de ChatGPT en la mezcla, y la microcopia nunca se sinti\u00f3 m\u00e1s accesible.\nPero es importante recordar, los resultados que obtenemos de estos motores requieren trabajo, y como cualquier herramienta, cuanto m\u00e1s la dominemos, mayor ser\u00e1 nuestro control.\nCentr\u00e9monos en la creaci\u00f3n de im\u00e1genes.\nSi tomamos Midjourney como ejemplo, puedes crear f\u00e1cilmente im\u00e1genes a partir de simples indicaciones de texto.\nEstas son im\u00e1genes que sol\u00edan llevar una eternidad en crearse o incluso encontrar y comprar los derechos.\nPero las indicaciones simples solo te llevan hasta cierto punto.\nLa clave es refinar tus consultas a medida que avanzas, enfoc\u00e1ndote en las \u00e1reas que sientes que necesitan trabajo.\nCuanto m\u00e1s profundices, m\u00e1s r\u00e1pido llegar\u00e1s a los resultados deseados. <\/p>\n\n\n\n <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n En mayo celebraremos 20 a\u00f1os de WordPress.\nLa introducci\u00f3n de WordPress desencaden\u00f3 una especie de revoluci\u00f3n propia, llevando la creaci\u00f3n web a las masas.\nAhora, estamos en 2023, y cada pocas semanas leemos sobre un desarrollo digital diferente y sensacional. <\/p>\n\n\n\n A veces, queremos estar a la vanguardia de la tecnolog\u00eda como buenos primeros adoptantes, leer un art\u00edculo y aprender una nueva herramienta o t\u00e9cnica y compartir nuestros descubrimientos con nuestra comunidad de creadores web.\nPero de vez en cuando, preferimos saltarnos la curva de aprendizaje, acurrucarnos y aferrarnos al pasado c\u00f3modo incluso en esta era de aceleraci\u00f3n digital.\nTodav\u00eda vemos una gran cantidad de motivos de los 80-90.\nLo que encontramos intrigante es la a\u00f1oranza por la tecnolog\u00eda antigua, como la primera computadora que tuvimos en casa o el reproductor de discos compacto de aspecto tonto. <\/p>\n\n\n\n Entonces, para los rezagados entre nosotros, o para aquellos con cari\u00f1o por el Y2K, especialmente tomamos nota de collages, pixelizaci\u00f3n, colores fuertes, interfaces de usuario similares a MS-DOS y las influencias de los viejos juegos de arcade. <\/p>\n\n\n\n Hie<\/a> es una agencia de talentos para creadores de contenido.\nUsan objetos nost\u00e1lgicos y los reinventan desde un punto de vista contempor\u00e1neo.\nEsta juguetoner\u00eda est\u00e1 dise\u00f1ada para despertar nuestra curiosidad y atraernos. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n La capacidad de atenci\u00f3n de las personas disminuye cada a\u00f1o.\nPodemos culpar a las redes sociales, Tiktok<\/a> e Instagram, por supuesto, pero tambi\u00e9n somos consumidores adem\u00e1s de creadores.\nDada esta realidad, la interfaz de usuario no puede permanecer est\u00e1tica. El movimiento<\/a> es una gran herramienta para atraer a los usuarios y puede ser una experiencia muy efectiva e inmersiva.\nEn el \u00faltimo a\u00f1o hemos visto c\u00f3mo se utiliza el movimiento para mantenernos comprometidos, llev\u00e1ndonos a consumir m\u00e1s contenido.\nNos permite, como usuarios, sentir que estamos interactuando con el sitio web a un nivel m\u00e1s alto que antes, y de una manera m\u00e1s significativa. <\/p>\n\n\n\n Nuestros usuarios est\u00e1n acostumbrados a ver p\u00edxeles movi\u00e9ndose y saltando; esperan recibir indicaciones para cada acci\u00f3n.\nEsta retroalimentaci\u00f3n permite al usuario sentirse como un participante activo, haci\u00e9ndolo sentir presente y enfocado.\nUna forma de crear tal experiencia es a trav\u00e9s de la animaci\u00f3n de desplazamiento suave, hecha usando efectos de paralaje flotante entre secciones que suavizan micro animaciones.\nOtro ejemplo, que esperamos se vuelva m\u00e1s popular, es el movimiento que excede las normas, incluso llegando a jugar con el sentido del equilibrio y la gravedad del usuario.\nVeremos m\u00e1s animaciones o videos integrados que buscan jugar con tus ojos, con animaciones de entrada bruscas, explosiones poderosas, acercamientos, fuentes variables, pegatinas giratorias, y as\u00ed sucesivamente.\nPuede ser agotador a veces, pero la atenci\u00f3n del usuario es tan valiosa que intentaremos atraerla por cualquier medio necesario. <\/p>\n\n\n\n Estudios Victor Cordon<\/a> es una plataforma creativa que apoya a la comunidad art\u00edstica independiente.\nUsan un movimiento constante y fluido mientras te desplazas de una secci\u00f3n a otra.\nAlgo a notar, que encontramos tanto hermoso como \u00fanico, es que los componentes en pantalla son en realidad est\u00e1ticos, pero el movimiento creado por el fondo da una sensaci\u00f3n de fluidez y movimiento constante. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n En contraste con la est\u00e9tica de dise\u00f1o limpio, vemos cada vez m\u00e1s sitios web que literalmente llevan los l\u00edmites al extremo con dise\u00f1os tipogr\u00e1ficos \u00fanicos.\nEsta tendencia es bastante sorprendente considerando que esta pr\u00e1ctica de dise\u00f1o es com\u00fan en medios que tienen poco espacio, como empaques traseros, carteles de festivales de m\u00fasica, etiquetas y se\u00f1alizaci\u00f3n, etc.\nTal vez esta tendencia tenga que ver con nuestra a\u00f1oranza por los dise\u00f1os que usan materiales reales, que abandonamos en favor de la pantalla y la experiencia interactiva. <\/p>\n\n\n\n Con el objetivo de atraer la atenci\u00f3n, los m\u00e1s interesantes juegan con tipograf\u00eda<\/a> y cuadr\u00edculas mientras dejan de lado los dise\u00f1os web convencionales en su misi\u00f3n de crear una experiencia visual memorable basada en texto.\nEstos sitios web tienden a usar encabezados de letras grandes con tipograf\u00eda de estilo brutalista<\/a>, que no se usa t\u00edpicamente en la web.\nComo parte de este movimiento, tambi\u00e9n podr\u00edamos ver m\u00e1s sitios web con secciones que tienen solo un p\u00e1rrafo con un tama\u00f1o de letra tan grande que ocupa toda la secci\u00f3n.\nEn conjunto, agrega un elemento din\u00e1mico a la p\u00e1gina, incluso cuando est\u00e1 est\u00e1tica. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n En una \u00e9poca de voces extremistas en aumento en el mundo real, tenemos la oportunidad de marcar la diferencia aqu\u00ed en el universo alternativo de la web que creamos.\nDespu\u00e9s de todo, nosotros como creadores web, somos una gran comunidad.\nTenemos la oportunidad de agregar m\u00e1s valor y hacer de la web un lugar mejor y m\u00e1s inclusivo<\/a>. <\/p>\n\n\n\n Junto con la creciente dependencia digital en nuestra sociedad, desde que golpe\u00f3 el Covid19, los usuarios pasan mucho m\u00e1s tiempo en l\u00ednea para obtener incluso los servicios m\u00e1s b\u00e1sicos.\nAl comenzar un proyecto, generalmente creamos un brief preciso y adaptamos el dise\u00f1o para una persona usuaria<\/a> y necesidad espec\u00edfica.\nTal vez este a\u00f1o, nuestra resoluci\u00f3n de a\u00f1o nuevo pueda ser intentar ver Internet a trav\u00e9s de los ojos de los dem\u00e1s, haciendo la tecnolog\u00eda utilizable para todas las personas, independientemente de sus habilidades, situaci\u00f3n econ\u00f3mica, edad, educaci\u00f3n o ubicaci\u00f3n geogr\u00e1fica. <\/p>\n<\/div>\n\n <\/p>\n<\/div>\n\n\n\n Las redes sociales, con sus infinitas posibilidades, a\u00fan tienen algunas limitaciones; compartir solo un enlace en tu perfil es ciertamente una de ellas.\nAs\u00ed naci\u00f3 el \u2018Enlace en la biograf\u00eda\u2019.\nEl enlace en la biograf\u00eda es b\u00e1sicamente una p\u00e1gina de destino dise\u00f1ada para conectar redes sociales, sitios web, tiendas, videos, m\u00fasica, podcasts, eventos y m\u00e1s.\nTodos se unen en esta p\u00e1gina dise\u00f1ada para conectar, formar nuevas relaciones y convertir. <\/p>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/image-2.png\")
<\/a>
Bornfight studio<\/a> es una peque\u00f1a agencia que se especializa en producci\u00f3n web.\nSu actitud Goblin se manifiesta a trav\u00e9s del tono de voz de su sitio web, que es muy \u201cdirecto,\u201d desinhibido y algo descarado.\nToma su divertido banner de cookies, por ejemplo – \u201cla vida es amarga, as\u00ed que usamos cookies,\u201d o la afirmaci\u00f3n sincera de que trabajan por cumplidos y dinero, y las abrumadoras, pero hermosas, animaciones de desplazamiento de im\u00e1genes superpuestas. <\/p>\n\n\n\n02<\/h6>\n\n\n\n
Simplicidad y minimalismo<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/2.png\")
<\/a>03<\/h6>\n\n\n\n
Delicias hiper en un viaje por el sitio web<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/3-1.png\")
<\/a>04<\/h6>\n\n\n\n
Comercio electr\u00f3nico – Una experiencia casi tangible<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/image-2-1.png\")
<\/a>05<\/h6>\n\n\n\n
La IA est\u00e1 llamando a nuestra puerta<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/5-1.png\")
<\/figure>\n\n\n\n06<\/h6>\n\n\n\n
Nostalgia en tiempos de sobrecarga digital<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/6.png\")
<\/a>07<\/h6>\n\n\n\n
El movimiento genera emoci\u00f3n<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/7.png\")
<\/a>08<\/h6>\n\n\n\n
Dise\u00f1os tipogr\u00e1ficos – Te extra\u00f1amos, impresi\u00f3n<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/8.png\")
<\/a>
La p\u00e1gina web de Parazker<\/a> tiene mucho que absorber.\nEste \u00fanico pliegue podr\u00eda haberse distribuido f\u00e1cilmente en varios pliegues y p\u00e1ginas, sin embargo, esta presentaci\u00f3n crea una sensaci\u00f3n de familiaridad, como etiquetas en empaques o c\u00f3digos de barras.\nLos dise\u00f1adores aqu\u00ed condensaron toda la informaci\u00f3n en un solo pliegue, para que los usuarios puedan ver todo de un vistazo. <\/p>\n\n\n\n09<\/h6>\n\n\n\n
Accesibilidad – hagamos que la web sea un lugar mejor<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/9.png\")
<\/figure>\n\n\n\n
Es un peque\u00f1o cambio de mentalidad y un peque\u00f1o ajuste en el flujo de trabajo<\/a>.\nComienza desde la etapa de inicio con la responsabilidad de educar a los clientes sobre la accesibilidad y los requisitos legales que conlleva.\nPensar en ello desde la etapa inicial y dedicar un poco m\u00e1s de tiempo y esfuerzo puede ayudar a dar forma al estilo de dise\u00f1o del sitio web.\nPodemos usar colores y tama\u00f1os de fuente sabiamente, as\u00ed como texto alternativo y soporte para la navegaci\u00f3n con teclado.\nDise\u00f1ar a trav\u00e9s del lente de este desaf\u00edo no solo puede crear nuevos estilos y convenciones, sino que puede cambiar c\u00f3mo experimentamos la web en su totalidad. <\/p>\n\n\n\n10<\/h6>\n\n\n\n
Exploraci\u00f3n de la p\u00e1gina de \u00edndice del enlace en la biograf\u00eda<\/h3>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/01\/10.png\")
<\/figure>\n\n\n\n