Seguir las tendencias en cuanto a Dise\u00f1o Web es importante para conocer de primera mano \u00bfqu\u00e9 es lo que se est\u00e1 usando actualmente? y \u00bfcu\u00e1les son las herramientas que quedaron en el pasado?No se trata de que debes conocer a profundidad todo lo relacionado a las tendencias de Dise\u00f1o de Sitios Web este 2018 pero s\u00ed que tengas claro c\u00f3mo evoluciona el p\u00fablico al que quieres llegar y c\u00f3mo un Dise\u00f1o de Sitio Web pensado para posicionar a tu empresa en Internet puede ayudarte a estar presente en la mente de tus consumidores.
\nUn usuario que ingresa en internet buscando un producto y se encuentra con una web anticuada y obsoleta tendr\u00e1 una mala impresi\u00f3n del negocio, no navegar\u00e1 el Sitio Web y por lo tanto no conocer\u00e1 tu producto o servicio.<\/p>\n
Antes de revisar estas 7 tendencias de Dise\u00f1o Web en el 2018, es importante tener en cuenta lo siguiente:<\/p>\n
Revisaremos las siguientes tendencias del Dise\u00f1o de Sitios Web en este a\u00f1o.<\/p>\n
Para conocer un poco m\u00e1s el significado de estas tendencias te ampliamos un poquito m\u00e1s la informaci\u00f3n.<\/p>\n
Cinemagraphs:<\/b><\/p>\n
Son fotograf\u00edas en las que ocurre una acci\u00f3n de movimiento menor y repetida. La mayor\u00eda de la imagen es est\u00e1tica, pero alg\u00fan elemento de la misma tiene movimiento.<\/p>\n
Video:<\/p>\n
En el ejemplo todo es una fotograf\u00eda normal excepto el agua de cascada que se mueve. Puedes ver el efecto entrando en la web, la imagen est\u00e1 enlazada.<\/p>\n
El fin de esta herramienta es sorprender al usuario, que se encontrar\u00e1 ante una imagen supuestamente normal que de repente se empieza a mover.
\nhttps:\/\/flixel.com\/<\/p>\n
Full screen v\u00eddeos<\/b><\/p>\n
En este caso, el fondo de la web es un v\u00eddeo que ocupa toda la pantalla del navegador. Los men\u00fas de la p\u00e1gina, est\u00e1n sobrepuestos en el mismo v\u00eddeo. No quedan espacios en blanco en la pantalla. Estas web son m\u00e1s envolventes y atractivas para el usuario.
\nMicro-interacciones<\/b><\/p>\n
Son peque\u00f1as interacciones entre un dispositivo o web y el usuario. Puedes mejorar la experiencia de los visitantes a tu web con ellas.<\/p>\n
Aunque creas que no sabes lo que es, las usas todos los d\u00edas, un ejemplo es el bot\u00f3n para poner en silencio un smartphone; cuando lo pulsas el m\u00f3vil queda sin sonido y sale un icono en la pantalla que te dice que el tel\u00e9fono est\u00e1 en silencio.<\/p>\n
Tienen cuatro fases:<\/p>\n
Disparador<\/b>: es el bot\u00f3n para activarla.<\/p>\n
Regla<\/b>: lo que ocurre despu\u00e9s, la funci\u00f3n del bot\u00f3n.<\/p>\n
Feedback<\/b>: es la respuesta que da el dispositivo o la web en este caso.<\/p>\n
Bucle<\/b>: es el tiempo que dura y si se repite.<\/p>\n
Un ejemplo son las im\u00e1genes que puedes comparar con un simple movimiento de rat\u00f3n, hacia a un lado de la barra queda una imagen y al otro lado la otra imagen. Puedes moverla para ver m\u00e1s de un tipo o del otro.<\/p>\n
Animaciones en scroll<\/b><\/p>\n
Esta t\u00e9cnica permite que el usuario de tu web se desplace horizontalmente en ella y los contenidos se vayan mostrando de una forma animada. Hace la visi\u00f3n de tu website m\u00e1s divertida y amena para los posibles clientes.<\/p>\n
La empresa Apple es una experta en este tipo de recursos inform\u00e1ticos.
\nParallax<\/b><\/p>\n
Si accedes a una web, haces scroll y ves que el fondo se mueve a otra velocidad que el contenido puedes estar seguro de que el dise\u00f1ador de esta p\u00e1gina ha utilizado la t\u00e9cnica parallax.
\nEs un dise\u00f1o que ya se vi\u00f3 mucho en 2017 y que utiliza distintas capas que te ayudan a crear en tu website un peque\u00f1o efecto de profundidad y cada vez que los usuarios se desplacen por la pantalla ver\u00e1n partes del fondo que antes no se ve\u00edan.<\/p>\n
PWA<\/b><\/p>\n
Son las siglas en ingl\u00e9s de aplicaciones web progresivas. \u00bfPor qu\u00e9 progresivas? Porque son aplicaciones, que cambian su funcionalidad seg\u00fan la capacidad del dispositivo en el que se est\u00e9n ejecutando.<\/p>\n
Esto quiere decir que si un usuario de tu web la abre desde un smartphone, usar\u00e1 las funciones necesarias para que el contenido se vea \u00f3ptimamente en \u00e9l; pero si otro usuario la abre en un ordenador, la web se adaptar\u00e1 y se optimizar\u00e1 a ese dispositivo.<\/p>\n
Dise\u00f1o tipogr\u00e1fico<\/b><\/p>\n
La tipograf\u00eda en s\u00ed y la ordenaci\u00f3n de la misma, tiene mucho impacto en la experiencia de tus clientes y usuarios. Cuando se dise\u00f1a un sitio web, lo ideal es que la tipograf\u00eda sirva para complementar el dise\u00f1o del mismo.
\nPor supuesto el dise\u00f1o tipogr\u00e1fico tambi\u00e9n debe de estar equilibrado con el mensaje de la web. Si quieres una web formal, se utiliza tipograf\u00eda fina y elegante; y si el dise\u00f1o que quieres es minimalista, no usar\u00edamos m\u00e1s de dos tipos de caligraf\u00eda.<\/p>\n
Podemos hablar de otras tendencias en cuanto al color, contenido, im\u00e1genes y v\u00eddeos. <\/b><\/p>\n
(Tomado de otro Post, corregir)<\/p>\n
Un dise\u00f1o en esqueleto que permite que la web se cargue en etapas, de lo m\u00e1s simple a lo m\u00e1s complejo. Se traduce en una mejora en la usabilidad de la web gracias sobre todo a que la velocidad se reduce notablemente. Esto quiere decir que en una primera instancia ver\u00edamos la estructura de la web y poco a poco se ir\u00edan cargando el resto de contenido.<\/p>\n
Tambi\u00e9n se ir\u00e1 dando paso a los dise\u00f1os modulares, como Pinterest, hace que la web funcione mediante m\u00f3dulos que act\u00faan de manera independiente, proporcionando una gran capacidad de adaptaci\u00f3n a las dimensiones de cada dispositivo.<\/p>\n
Con respecto al color, la tendencia es a crear un contenido propio con respecto a ilustraciones e infograf\u00edas, triunfando sobre todo los dise\u00f1os que permitan la interacci\u00f3n con el sitio. Usando colores vivos, degradados y bucromatismos, formas geom\u00e9tricas usando texturas de la vida misma, fondo sobre formas, continua el dise\u00f1o minimalista y limpio (no solo en la web, sino tambi\u00e9n en logos y nombres de marca) y personalizaci\u00f3n en formas y botones.<\/p>\n
Si hablamos de im\u00e1genes y v\u00eddeos, se pone de manifiesto aquellos que ocupan toda nuestra p\u00e1gina, a modo de presentaci\u00f3n de la marca, siempre y cuando tengamos cuidado con los tiempos de carga. Tambi\u00e9n se est\u00e1 hablando de las microinteraciones (peque\u00f1as acciones que provocan un cambio cuando el usuario interact\u00faa con ellos), diferentes tipos de efectos hover (que se activa cuando el usuario posa el rat\u00f3n sobre la imagen y esta cambia) o parallax ( movimientos en distintas velocidades de elementos web que se activan cuando se hace scroll) y por supuesto, la realidad virtual y el 360\u00ba.<\/p>\n
Y por \u00faltimo, pero no menos importante, uno de los puntos importantes en dise\u00f1o web y es la tipograf\u00eda, las \u201chand made\u201d o vintage siguen estando presentes al conseguir una mayor diferenciaci\u00f3n y distinci\u00f3n de las habituales. No obstante, las tipograf\u00edas circulares y la Sans Serif tambi\u00e9n ocupan gran lugar entre las preferidas. Y una de las tendencias es a combinar textos o t\u00edtulos horizontales y verticales para llamar la atenci\u00f3n de los usuarios.<\/p>\n","protected":false},"excerpt":{"rendered":"
Seguir las tendencias en cuanto a Dise\u00f1o Web es importante para conocer de primera mano \u00bfqu\u00e9 es lo que se …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[16,19],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-diseno-web","tag-marketing","tag-tendencias"],"_links":{"self":[{"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":0,"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=\/wp\/v2\/posts\/21\/revisions"}],"wp:attachment":[{"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/medellinwebdesign.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}