{"id":586,"date":"2018-03-21T15:09:29","date_gmt":"2018-03-21T14:09:29","guid":{"rendered":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?p=586"},"modified":"2018-03-24T17:33:11","modified_gmt":"2018-03-24T16:33:11","slug":"tendencias-del-diseno-web-actual","status":"publish","type":"post","link":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/tendencias-del-diseno-web-actual\/","title":{"rendered":"Tendencias del dise\u00f1o web actual"},"content":{"rendered":"

Antes de abordar las herramientas y t\u00e9cnicas que hacen posible la elaboraci\u00f3n de dise\u00f1os especiales en WordPress -nos referimos a los llamados \u00abconstructores de p\u00e1ginas\u00bb o page builders<\/em>-, conviene conocer y tener muy en cuenta las tendencias m\u00e1s significativas en el \u00e1mbito del dise\u00f1o web contempor\u00e1neo. Con tal prop\u00f3sito, enunciaremos a continuaci\u00f3n algunos principios que se han impuesto durante los \u00faltimos a\u00f1os. Siempre que podamos, los ilustraremos con ejemplos significativos.<\/p>\n

<\/p>\n

1. Tendencias del dise\u00f1o web actual<\/h2>\n

Son muchas las tendencias que pueden advertirse en el dise\u00f1o web moderno, as\u00ed que vamos a centrarnos en aquellas que consideramos m\u00e1s importantes:<\/p>\n

1. Dise\u00f1o orientado a dispositivos m\u00f3viles<\/strong>. Ya en noviembre de 2016<\/a>, Google anunci\u00f3 que hab\u00eda decidido orientar los motores de b\u00fasqueda seg\u00fan el principio de \u00abllos m\u00f3viles primero\u00bb, lo cual significa en la pr\u00e1ctica que cualquier sitio que no tenga una buena respuesta en dispositivos m\u00f3viles sufrir\u00e1 una severa penalizaci\u00f3n por parte de dicho buscador. Por tanto, es esencial que todos los sitios web se orienten desde su inicio a este principio. Afortunadamente, todos los temas de la familia Genesis presentan un comportamiento excelente en dispositivos m\u00f3viles. Para comprobar si un sitio web est\u00e1 adecuadamente dise\u00f1ado seg\u00fan este principio, se puede utilizar la p\u00e1gina de prueba de optimizaci\u00f3n para m\u00f3viles de Google<\/a>. o un servicio espec\u00edfico, como poro ejemplo Am I Responsive?<\/a><\/p>\n

2. Dise\u00f1o basado en \u00abuna sola p\u00e1gina\u00bb<\/strong>. Los sitios que corresponden a este principio de dise\u00f1o son muy f\u00e1ciles de identificar, porque su estructura se compone de una serie de bloques horizontales, claramente marcados y diferenciados (aunque con algunos elementos de dise\u00f1o y contenido comunes, como pueden ser las gamas de colores, la tipograf\u00eda, o incluso las distintas secuencias de una historia), que contienen la informaci\u00f3n esencial. Son adecuados para sitios web con poco contenido, y que buscan concentrar toda la informaci\u00f3n esencial en una p\u00e1gina de impacto. En estos dos enlaces se pueden encontrar muchos ejemplos de este tipo de dise\u00f1o web:\u00a0One Page Mania<\/a>\u00a0y\u00a0One Page Love<\/a>.<\/p>\n

3. Dise\u00f1o basado en una o varias \u00abp\u00e1ginas de aterrizaje\u00bb o\u00a0landing pages<\/a><\/strong>, que son p\u00e1ginas especiales dise\u00f1adas para conseguir alg\u00fan tipo de objetivo espec\u00edfico, normalmente a trav\u00e9s de la interacci\u00f3n con los visitantes: una suscripci\u00f3n, una venta, una acci\u00f3n medible y verificable, etc. En el art\u00edculo P\u00e1ginas web: 10 landing pages geniales<\/a>, pueden verse unos cuantos dise\u00f1os de p\u00e1ginas web basadas en este concepto.<\/p>\n

4. Dise\u00f1o basado en una imagen potente<\/strong>, que ocupa toda la anchura de la p\u00e1gina. Muchos sitios web modernos est\u00e1n basados en este tipo de elementos gr\u00e1ficos, denominados hero images<\/a> (‘im\u00e1genes h\u00e9roe’, a falta de una mejor traducci\u00f3n). En el art\u00edculo Exploring the Hero Image Trend in Web Design<\/a> pueden verse distintas t\u00e9cnicas para utilizar las im\u00e1genes \u00abhero\u00bb en un sitio web; tambi\u00e9n recomendamos la lectura del art\u00edculo 25 Examples of Super Wide Website Designs<\/a>, que propone muchos ejemplos de esta t\u00e9cnica.\u00a0En algunos casos, la imagen puede ser sustituida por un v\u00eddeo que se ejecuta a pantalla completa; un buen ejemplo de su uso es el sitio de Imagely<\/a>, empresa desarrolladora del celeb\u00e9rrimo plugin NextGEN Gallery<\/a>.<\/p>\n

5. Dise\u00f1o basado en paletas de colores vibrantes y arriesgadas<\/strong>. La importancia del color, tanto desde el punto de vista puramente est\u00e9tico como psicol\u00f3gico, es crucial en todos los \u00e1mbitos de la expresi\u00f3n art\u00edstica. y el dise\u00f1o web no pod\u00eda ser menos. En este \u00e1mbito las variantes son m\u00faltiples: colores muy saturados, contrastes fuertes, gradientes y degradados, juegos de color en dos tonos, etc. Se pueden ver dise\u00f1os muy inspiradores en Best Colorful Websites<\/a>. V\u00e9ase tambi\u00e9n el magn\u00edfico cat\u00e1logo de paletas crom\u00e1ticas compilado en\u00a0Trendy Web Color Palettes and Material Design Color Schemes & Tools<\/a>.<\/p>\n

6. Dise\u00f1o con una presencia destacada de la tipograf\u00eda<\/strong>. Los tipos novedosos (a menudo con rasgos de letras manuscrita), los grandes tama\u00f1os de letra, las tipograf\u00edas con mucho impacto visual y un marcado car\u00e1cter expresivo, constituyen una tendencia reiterada en el dise\u00f1o web contempor\u00e1neo. V\u00e9anse, por ejemplo, los ejemplos que se mencionan en estas dos referencias: Typography is the new black. Trends in web design<\/a> y\u00a0 How to Use Handwritten Typography in Website Design<\/a>.<\/p>\n

7. Dise\u00f1o minimalista<\/strong> (el principio de \u00abmenos es m\u00e1s\u00bb como concepto b\u00e1sico), con una gran presencia de espacios vac\u00edos, m\u00e1rgenes generosos, predominio de los tonos claros y del color blanco y, en general, apariencias limpias, escuetas y muy depuradas. Algunos ejemplos caracter\u00edsticos de este principio de dise\u00f1o pueden verse en Best Minimal Websites<\/a> y Best Minimalist Websites<\/a>.<\/p>\n

8. Dise\u00f1o caracterizado por los efectos de animaci\u00f3n<\/strong>, en elementos como los\u00a0logotipos, los men\u00fas de navegaci\u00f3n, la acci\u00f3n de pasar el rat\u00f3n por encima de botones u otros elementos que provocan una llamada a la acci\u00f3n<\/a>, la acci\u00f3n de desplazamiento por la p\u00e1gina (el denominado scroll<\/em>), etc. Dentro de los efectos de animaci\u00f3n pueden incluirse tambi\u00e9n otras t\u00e9cnicas muy utilizadas en la actualidad, como el uso de v\u00eddeos de fondo, los efectos cinem\u00e1ticos, los GIFs animados o el denominado efecto Parallax<\/a>. Hay muchos ejemplos disponibles de este tipo de creaciones en Best Animation Websites<\/a>, Best examples of video in Web design<\/a>, Best Parallax websites<\/a>,<\/p>\n

9. Dise\u00f1os basados en microinteracciones<\/strong>, es decir, en gestos y acciones de los usuarios que est\u00e1n vinculados a tareas habituales sobre los elementos de un sitio web. Un uso creativo, original o innovador de estas interacciones puede dar lugar a efectos muy llamativos y sorprendentes. Para m\u00e1s informaci\u00f3n sobre este concepto, recomendamos la lectura del art\u00edculo\u00a0Micro-interacciones, la diferencia est\u00e1 en los detalles<\/a>, la consulta de los ejemplos propuestos en\u00a08 Steps to Amazing Microinteraction Design<\/a> y la recopilaci\u00f3n de Best Gestures and Interaction Websites<\/a>.<\/p>\n

10. Dise\u00f1os basados en ilustraciones y gr\u00e1ficos personalizados<\/strong>, a menudo con un toque \u00abretro\u00bb, ‘\u00bbvintage\u00bb, o \u00abhecho a mano\u00bb. Este tipo de dise\u00f1os se han puesto muy de moda, sobre todo en \u00e1mbitos espec\u00edficos, como los productos y servicios con sellos \u00abecol\u00f3gicos\u00bb, la restauraci\u00f3n, determinados segmentos del comercio electr\u00f3nico, etc. V\u00e9anse las siguientes recopilaciones: Best Illustrative websites<\/a> o Best Retro Websites<\/a>.<\/p>\n

Estos no son, ni mucho menos, los \u00fanicos principios de dise\u00f1o web que conviene tener en cuenta. Los profesores y profesoras que deseen replantearse el aspecto de sus sitios web, o que deseen comenzar a dise\u00f1ar un nuevo sitio, pueden buscar conceptos, ejemplos y fuentes de inspiraci\u00f3n en los siguientes art\u00edculos, de los que hemos entresacado las diez tendencias que acabamos de exponer:<\/p>\n

    \n
  1. 7 WordPress and Web Design Trends to Watch in 2018<\/a>.<\/li>\n
  2. 9 cutting-edge web design trends for 2018<\/a>.<\/li>\n
  3. 9 Web Design Trends to Watch For in 2018<\/a>.<\/li>\n
  4. 10 WordPress Design Trends to Rule 2018 and Beyond<\/a>.<\/li>\n
  5. 15 Web Design Trends in 2018 (+1\u00a0Bonus)<\/a>.<\/li>\n
  6. 19 web design trends for 2018<\/a>.<\/li>\n
  7. The Top WordPress Trends for 2018<\/a>.<\/li>\n
  8. WordPress Web Design Trends 2018 – What to Expect in the New Year<\/a>.<\/li>\n
  9. WordPress Design Trends To Follow in 2018<\/a>.<\/li>\n
  10. WordPress Web Design Trends You Need to Know for 2018<\/a>.<\/li>\n<\/ol>\n

    2. El framework Genesis y las modernas tendencias del dise\u00f1o web<\/h2>\n

    Algunos de los principios y tendencias que acabamos de explicar est\u00e1n bien representados en aspectos distintivos del framework Genesis, como por ejemplo la preferencia por el minimalismo, la importancia de la tipograf\u00eda, o los dise\u00f1os tipo landing page<\/em>. De entre los temas disponibles en el cat\u00e1logo de StudioPress, muchos de los publicados en los dos \u00faltimos a\u00f1os representan de manera muy visible las tendencias ya mencionadas. Citamos a continuaci\u00f3n algunos de los m\u00e1s llamativos:<\/p>\n

    \n