[vc_section][vc_row][vc_column][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
\nA la hora de hacer tu sitio web moderno y \u00fatil para sus visitantes, es importante que se dise\u00f1e y programe acorde a las necesidades y tendencias del p\u00fablico actual. Por eso, hoy hablamos de las principales tendencias del dise\u00f1o web para el 2020<\/em><\/strong><\/p>\n
<\/p><\/blockquote>\n
[\/vc_column_text][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Tendencias de dise\u00f1o web para 2020<\/strong><\/span><\/h2>\n
[\/vc_column_text][vc_tta_accordion style=\u00bbmodern\u00bb color=\u00bbblack\u00bb c_align=\u00bbcenter\u00bb active_section=\u00bb20″ css_animation=\u00bbfadeIn\u00bb collapsible_all=\u00bbtrue\u00bb][vc_tta_section title=\u00bbUso de elementos din\u00e1micos\u00bb tab_id=\u00bbelementos-dinamicos\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Las animaciones sencillas, los controles de p\u00e1gina, banners deslizantes, botones, videos, hovers, llamados a la acci\u00f3n y otros elementos con los que los usuarios pueden interactuar dentro de la web son fundamentales<\/p>\n
Elementos flexibles y reactivos son muy bien percibidos por los visitantes de sitios web, principalmente los que est\u00e1n colocados de manera ordenada y estrat\u00e9gicamente accesibles<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2736″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbDise\u00f1os asim\u00e9tricos\u00bb tab_id=\u00bbdisenio-asimetrico\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Siempre que el dise\u00f1o de la web luzca ordenado en general, los visitantes perciben como algo positivo una secci\u00f3n con un ligero desorden visual: la composici\u00f3n asim\u00e9trica de elementos<\/em><\/p>\n
Es importante que la asimetr\u00eda se encuentre en secciones especificas y no en toda la p\u00e1gina web<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2737″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbEfectos de slide, scroll, parallax y similares\u00bb tab_id=\u00bbslides-scroll-parallax\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Los efectos en banners mas vistosos y buscados entre quienes hacen sitios web y quienes los visitan son los carruseles, banners que hacen deslizamientos y fondos que se mantienen est\u00e1ticos y que se cubren y\/o descubren a medida que el usuario se desplaza entre el contenido (parallax)<\/p>\n
Este efecto consiste en que, cuando entras en una web, hay determinados elementos o bloques en los que, al hacer scroll, el fondo se mueve a un velocidad diferente a la del resto de contenido<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2738″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbDise\u00f1os 3D\u00bb tab_id=\u00bbdisenios-3d\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Siempre que tenga un prop\u00f3sito real dentro de lo que est\u00e1 comunicando el contenido de la p\u00e1gina, colocar im\u00e1genes en 3D es muy bien visto por los visitantes de un sitio web. Pero las im\u00e1genes deben ser livianas y sin son animaciones, debe cuidarse que su carga sea r\u00e1pida<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2739″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbContenido dividido o fusionado\u00bb tab_id=\u00bbcontenido-dividido-fusionado\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Un efecto visual muy atractivo cuando se desea que el cerebro del visitante identifique inmediatamente similitudes y\/o diferencias entre elementos. Suele usarse en la comparaci\u00f3n de productos y caracteristicas<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2740″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbEfectos hover\u00bb tab_id=\u00bbefectos-hover\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
En dise\u00f1o web el hover es la alteraci\u00f3n que se produce cuando pasas el rat\u00f3n por encima de un elemento espec\u00edfico. Seguro que lo has visto cientos de veces en botones o men\u00fas que cambian de color o de forma cuando pones el puntero encima<\/p>\n
Pues bien, una de las tendencias de dise\u00f1o web para 2020 es extender ese efecto o \u00abalteraci\u00f3n\u00bb a otras partes de mayor tama\u00f1o en la web, como pueden ser bloques completos, fondos o im\u00e1genes<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2742″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbDesplazamiento vertical\u00bb tab_id=\u00bbdesplazamiento-vertical\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Este formato consiste en que toda la informaci\u00f3n del sitio se va desplazando de forma vertical sin moverse la pantalla a medida que el usuario hace scroll por la web<\/p>\n
Es un efecto sumamente agradable a la vista de los usuarios que navegan el sitio web<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2743″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbPaginas sin men\u00fas explicitos\u00bb tab_id=\u00bbsin-menu-explicito\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Se trata de elementos que funcionan como un men\u00fa, pero realmente no lo son. Estos elementos suelen ser generalmente im\u00e1genes<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2744″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbSticky bars o elementos siempre visibles\u00bb tab_id=\u00bbsticky-bars\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Otra de las tendencias que ya se han empezado a ver son las barras adhesivas, especialmente si hablamos de un ecommerce<\/p>\n
Este tipo de elementos que quedan fijos a medida que el usuario se desplaza por el sitio (por el producto en este caso) ayudan a aumentar las conversiones y ventas de la tienda online<\/p>\n
Otro tipo de sitio en la que es posible usar barras adhesivas son las landing page en las que el usuario tiene que completar una acci\u00f3n espec\u00edfica: comprar una entrada, reservar un producto, registrarse o darse de alta, etc<\/p>\n
Si vas a usar este recurso, recuerda que no se convierta en algo molesto para el usuario y que no distorsione su navegaci\u00f3n<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2745″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbT\u00edtulos y tipograf\u00edas como protagonistas\u00bb tab_id=\u00bbtitulos-tipografias\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Se trata de otorgarles un papel protagonista junto al resto de elementos (v\u00eddeos, im\u00e1genes, textos, etc)<\/p>\n
Es decir, ahora las tipograf\u00edas aparecen en primer plano (en ocasiones con tama\u00f1o gigante) y son parte destacado del dise\u00f1o<\/p>\n
A la hora de elegir combinaciones de tipograf\u00edas para web, recuerda que deben ser elegantes y casar entre s\u00ed (en realidad, no es tarea sencilla)<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2746″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][vc_tta_section title=\u00bbElementos sobrepuestos o superpuestos\u00bb tab_id=\u00bbsuperposicion-elementos\u00bb][vc_row_inner][vc_column_inner width=\u00bb1\/2″][vc_column_text css_animation=\u00bbfadeIn\u00bb]<\/p>\n
Las estructuras superpuestas tambi\u00e9n han sido tendencia durante el \u00faltimo a\u00f1o y continuar\u00e1n si\u00e9ndolo por un tiempo m\u00e1s.<\/p>\n
[\/vc_column_text][\/vc_column_inner][vc_column_inner width=\u00bb1\/2″][vc_single_image image=\u00bb2747″ img_size=\u00bbfull\u00bb alignment=\u00bbcenter\u00bb onclick=\u00bblink_image\u00bb css_animation=\u00bbfadeIn\u00bb][\/vc_column_inner][\/vc_row_inner][\/vc_tta_section][\/vc_tta_accordion][\/vc_column][\/vc_row][\/vc_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
A la hora de hacer tu sitio web moderno y \u00fatil para sus visitantes, es importante que se dise\u00f1e y programe acorde a las necesidades y tendencias del p\u00fablico actual. Por eso, hoy hablamos de las principales tendencias del dise\u00f1o web para el 2020<\/p>\n<\/div>","protected":false},"author":2,"featured_media":2748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"csbAdvScrollBarCursor":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6,13,17,20,25,31,32,33],"tags":[41,147,413],"class_list":["post-1628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-general","category-innovacion","category-marketing","category-recomendaciones","category-tecnologia","category-tips","category-trendings-tendencias","tag-41","tag-diseno-web","tag-tendencias"],"jetpack_featured_media_url":"https:\/\/aguilarsoluciones.com\/network\/wp-content\/uploads\/cover-post-gas-tendencia-disenio-web-2020-1200x630px-777x437-1.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts\/1628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/comments?post=1628"}],"version-history":[{"count":2,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts\/1628\/revisions"}],"predecessor-version":[{"id":2749,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/posts\/1628\/revisions\/2749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/media\/2748"}],"wp:attachment":[{"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/media?parent=1628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/categories?post=1628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aguilarsoluciones.com\/network\/wp-json\/wp\/v2\/tags?post=1628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}