¿Cuáles son las tendencias de diseño web en 2018 a las que hay que prestar una atención especial? En los últimos 20 años, el diseño web ha experimentado un rápido desarrollo, caracterizado por grandes avances tecnológicos y un sinnúmero de posibilidades completamente nuevas. Actualmente algunas características web tienen muy poco tiempo para desarrollarse antes de volverse obsoletas. Sin embargo, hay dos cosas que nunca han dejado de tener importancia para el diseño web: la usabilidad y la alta calidad del contenido, y no solo ahora que millones de personas están constantemente conectadas desde dispositivos móviles.
Las tendencias de diseño web en 2018 siguen un patrón bien definido. Para empezar, el aspecto visual de las páginas web pasa a un segundo plano para dar prioridad a la usabilidad. Además, el contenido debe ser presentado de forma atractiva y tener un valor añadido para el usuario independientemente del dispositivo. El diseño web responsivo seguirá siendo un concepto clave en 2018, pues el éxito a largo plazo de cualquier proyecto online o aplicación web depende de que sus características funcionen y de que se adapten a cualquier dispositivo desde donde se pueda visualizar una web.
Aprovechar al máximo lenguajes como HTML5, JavaScript y CSS3 facilitará el diseño de páginas web flexibles. En la medida de lo posible, el contenido y los elementos gráficos de una web deben ofrecer la posibilidad de ser visualizados correctamente desde cualquier dispositivo sin estar condicionados por la resolución de la pantalla o el método de entrada (ratón o pantalla táctil). El diseño responsivo se encarga de garantizar el ajuste flexible y automático de una web a todo tipo de pantallas, asegurando incluso su correcto funcionamiento en dispositivos futuros. El desarrollo de páginas web pensadas únicamente para móviles, creadas y gestionadas a partir de plantillas especiales, no resulta especialmente práctico; con una página web responsiva solo es necesario administrar el contenido una vez, adaptándose automáticamente a cada terminal por sí solo.
Las principales tendencias de diseño web de los últimos años también entran pisando fuerte en 2018 y se centran principalmente en una meta: lograr contenido personalizado y de alta calidad. Las nuevas influencias están marcadas por los progresos en la investigación de la IA y por la creciente digitalización de la vida cotidiana en el marco del Internet de las cosas (IoT). Ambas tendencias ofrecen a los diseñadores web la oportunidad de mejorar la experiencia de usuario y de presentar a las visitas unas posibilidades de interacción sin precedentes.
El hecho de que los diseños inteligentes y de calidad se copien cada vez más rápido y más a menudo es algo que también queda cada vez más patente en las tendencias del diseño web. Para la elaboración y disposición de los contenidos, las interfaces de usuario de muchas páginas y aplicaciones web se guían por las mejores prácticas. En este sentido, el diseño es algo que siempre influye en la usabilidad de las páginas web. En términos generales, las páginas web que tengan una interfaz de usuario (UI) ordenada nunca podrán inducir a error, de la misma forma que nada impide seguir confiando en el formato de portal para las webs de gran envergadura o en el de blog para páginas más modestas. Sin embargo, entre las tendencias de diseño web de 2018 dos son las tendencias de diseño que desde hace poco tiempo se encuentran en muchas interfaces gráficas.
El primer fenómeno se ha consolidado de una manera tan rápida que ya se ha convertido en algo evidente para los usuarios a la hora de elaborar menús: el pequeño botón de menú, también conocido como “icono de menú hamburguesa” (hamburger button en inglés). Al principio se usaba, sobre todo, para los menús desplegables de las páginas web móviles, aunque con el paso del tiempo se ha convertido en el signo que designa al botón de menú en las versiones de escritorio. Dicho símbolo recuerda a una hamburguesa dividida en capas y a menudo se representa por medio del signo matemático “≡”, que significa “idéntico”.
La segunda tendencia de diseño web hace referencia a la presentación de los contenidos. Los card layouts (también denominados como “card based design”) se utilizan cada vez más. Con este formato los contenidos basados en texto o en imágenes o los botones de llamada a la acción (CTA, Call To Action) aparecen en cajas distribuidas por la interfaz. Esto da lugar a muchas ventajas: además de la posibilidad de estructurar páginas web con claridad y de una manera visualmente atractiva, el card layout también plantea ciertas utilidades desde el punto de vista pragmático, ya que, debido a que cada una de las cajas o cartas funcionan como contenedor de la información, pueden desplazarse con facilidad por la estructura de la página web. Especialmente en el caso del diseño web responsivo, este tipo de diseño permite redistribuir el contenido con facilidad. El diseño card layout es popular, sobre todo, gracias a páginas web como Pinterest o a plataformas de diseño web como Dribbble.
Las páginas web de calidad no solo convencen por su contenido, sino por la presentación de este contenido y por la experiencia del usuario (User experience, UX) al visitarlas. Por ello, la atención del diseño UX se centra en la interacción con el visitante con el objetivo de elaborar contenidos que sean atractivos visualmente y facilitar la recepción de la información. Una tendencia de diseño web moderno que también se plantea para el 2018 es el storytelling interactivo, que consiste en contar historias con ayuda de elementos multimedia.
El reportaje multimedia “Snow Fall”, del New York Times, muestra cómo se pueden presentar temas complejos de un modo fascinante con el interactive storytelling. Esta crónica periodística de más de 10.000 palabras cuenta la historia de un grupo de esquiadores atrapados en la nieve durante una avalancha. Sin embargo, gracias al tratamiento multimedia de la información, que incluye entrevistas, vídeos, imágenes y animaciones, la longitud del texto pasó a un segundo plano y logró atraer a millones de visitas en pocos días.
Esta tendencia a la interacción se hará visible para el usuario por medio de cambios que modificarán la apariencia de la interfaz de usuario fundamentalmente. Entre los elementos interactivos cuyo uso se potenciará en 2018 se encuentran las microinteracciones, los vídeos en 360º, los chatbots y la Voice User Interface (VUI).
Microinteracciones: las microinteracciones son toda una tendencia en el diseño UX en la que pequeños efectos de animación acompañan a las interacciones seleccionadas por los usuarios. Esto puede hacer referencia, por ejemplo, a un botón “me gusta” que otorga al clic del usuario un efecto de movimiento o que hace que vibre el smartphone. Para expertos en UX como Dan Saffer incluso estos detalles son los que constituyen la experiencia de usuario. En páginas como Awwwards.com o Dribble se pueden encontrar ejemplos de animaciones con las que se pueden crear microinteracciones.
Vídeos en 360°: en el pasado, los vídeos pretendían captar el punto de vista de los espectadores con el ángulo de la cámara. Esto es algo con lo que rompen los vídeos de 360°, en los que el espectador decide en qué dirección quiere mirar. A este respecto, las plataformas de vídeo como YouTube ya han implementado los requisitos técnicos para la vista panorámica. Esta tendencia de diseño web moderno se hará todavía más visible en 2018, de modo que los usuarios de Internet podrán disfrutar de los contenidos multimedia que presentan entornos virtuales inmersivos. El siguiente vídeo ofrece un pequeño anticipo que permite al usuario experimentar el contacto con una manada de elefantes.
Chatbots: los programas de soporte para tareas de comunicación no son una novedad. Los chatbots tienen su origen en el ámbito de la investigación de la Inteligencia Artificial (IA) y se aplican en la actualidad en las páginas web de las empresas o en las tiendas online. Por lo general, se trata de pequeños cuadros de diálogo que se hacen cargo de las solicitudes de los usuarios y generan respuestas automáticamente, las cuales pueden personalizarse gracias a los algoritmos de Machine Learning. Como los usuarios tienen la impresión de que se trata de trabajadores humanos que hacen preguntas y responden a ellas, los chatbots se emplean como asistentes de compra virtuales o como alternativas a las clásicas FAQ.
Voice User Interface (VUI): los asistentes de voz como Siri de Apple, Alexa de Amazon, Google Assitant o Cortana de Microsoft se sitúan en cabeza. La Voice User Interface, una interfaz de usuario de reconocimiento de voz, ofrece a los usuarios una posibilidad de interacción alternativa para los elementos de control gráficos y puede que sea una de las tendencias de diseño web en 2018. La ventaja de la VUI es que el usuario tiene las manos libres y no es necesario que mire a la pantalla. Además, los asistentes de voz pueden compensar las dificultades que surgen cuando los usuarios visitan páginas web con dispositivos que tienen una pantalla pequeña o un teclado incómodo. Ya en los años cincuenta del siglo XX, los investigadores de los Bell Laboratoires presentaron con el sistema “Audrey” la primera interfaz de usuario (UI) controlada por voz. Las adaptaciones modernas al sistema recurren a conocimientos de la investigación de IA y posibilitan una navegación orientada al diálogo con ayuda de comandos de voz.
Internet de las cosas (IoT): bajo el término de Internet of Things se engloban diferentes tecnologías que posibilitan la conexión de electrodomésticos a través de Internet y podrían convertirse en una tendencia de diseño web en 2018. Las interfaces de IoT están pensadas para utilizarse en páginas web que permiten la interacción con dispositivos inteligentes como básculas o frigoríficos que soportan Internet.
El arte informativo y “pegadizo” de la narración, ligado a una presentación que permite interactuar al usuario, convierte a una simple visita en una experiencia interactiva y aumenta las posibilidades de una respuesta positiva. Sin embargo, hay que tener en cuenta que “menos es más”: el uso excesivo de animaciones puede resultar contraproducente para obtener un rendimiento estable.
La presentación adecuada del contenido web para el destinatario es uno de los principios básicos del diseño web. En concreto en el eCommerce, la selección de los contenidos y su presentación debe orientarse a las necesidades de los clientes potenciales. Si hasta ahora se daba prioridad a grupos de personas abstractos, en 2018 el foco se centra en la experiencia de usuario de los individuos en particular y si hoy en díafunciones como “También te podría interesar…” son parte habitual de las tiendas online, la plataforma de música en streaming Spotify o el portal de vídeos bajo demanda Netflix dan un paso más allá y adecúan la información, los productos y las formas de presentación directamente al individuo.
Una tendencia de diseño web en 2018 será la página web personalizada, en la que los visitantes visualizan los contenidos en función de sus hábitos de uso. La base informativa para una UI personalizada la constituyen las herramientas de análisis web como Google Analytics o Piwik, que trazan una visión global de cómo los usuarios de Internet interactúan con el contenido.
El lema “Mobile First” no solo es aplicable a las ventanas gráficas y a la presentación sin pérdidas de contenidoen diferentes terminales. De ahora en adelante, la tendencia de los dispositivos móviles tendrá una influencia cada vez mayor en los contenidos web.
Uno de los avances más importantes en este contexto es el paso del clic al scrolling. El scrolling en páginas web es un viejo conocido. Los conceptos de diseño como el infinite scrolling o el efecto parallax siguen gozando de popularidad y también serán tendencia de diseño web en 2018.
Infinite scrolling: dentro de las tendencias del diseño web para 2018 se encuentra el infinite scrolling, que permite a los usuarios cargar nuevos contenidos desplazándose y sin tener que hacer clic sobre los enlaces. Una vez alcanzado el final de la barra de desplazamiento, se desplega una nueva página. Esta forma de navegación ha sido aprovechada especialmente por redes sociales como Facebook o Instagram para presentar el contenido a los usuarios en un news feed continuo. Algunos blogs también cuentan con el “scroll infinito” desde hace ya bastante tiempo y estasta es, ciertamente, una herramienta que seguirá jugando un papel importante en el futuro.
El infinite scrolling se puede utilizar en páginas web con una amplia oferta informativa. Mientras que un blog con 100 o 200 entradas puede paginarse sin problemas, la utilidad de una división por páginas se reduce en el caso de proyectos web de gran envergadura con una cantidad de información creciente. Así, es bastante improbable que un usuario busque específicamente la página 812 entre un total de 5 782 subpáginas. El infinite scrolling, por el contrario, se utiliza con unos algoritmos sofisticados que realizan un filtrado preliminar de la información y entregan a los usuarios las entradas más relevantes en primer lugar.
Los gestores de páginas web que quieran recurrir a la tendencia del infinite scrolling en 2018 deben centrarse en una implementación apta para los motores de búsqueda. Aunque al principio Google tuvo dificultades con el rastreo de las páginas web que utilizaban este método, hoy en día el infinite scrolling puede utilizarse sin riesgo alguno gracias a las detalladas normas de diseño del líder entre los buscadores. En este sentido se deben tener en cuenta los siguientes aspectos:
Como ejemplo para una implementación del infinite scrolling apta para los motores de búsqueda, Google remite a la página web demo del webmaster y analista de tendencias John Mueller.
El efecto parallax: el parallax scrolling, aunque no forma parte de las tendencias de diseño web más actuales, sí tendrá una importancia crucial en un futuro próximo.. Este efecto visual se utiliza desde hace un par de años como elemento esencial para la creación de páginas web modernas y consiste en capas que se mueven por velocidades y en direcciones diferentes. La ventaja de usar este tipo de técnica es que, gracias a sus efectos visuales, se aprovecha el movimiento para generar reacciones en los usuarios. El parallax scrolling se deja combinar perfectamente con el interactive storytelling, como lo demuestra claramente la página web “Every Last Drop”.
Hasta hace unos años, el uso de fuentes grandes y la mezcla de tipografías se consideraban un error catastrófico para cualquier página web. Sin embargo, este tipo de variación se ha convertido en una de las tendencias del diseño web para el 2018. Las fuentes de letra diferentes que armonizan entre sí suelen tener un muy buen efecto en los usuarios. El uso de diferentes tamaños ofrece una mejor impresión visual de la estructura de una web. Así se perciben primero, por ejemplo, los elementos más grandes.
En general, la tipografía de una web debe ser elegida con cuidado y teniendo en cuenta el producto que se ofrece, la empresa, el tema y el público objetivo al que va dirigida. A pesar de las libertades con las que cuenta un diseñador web a la hora de elegir la fuente para una página web, ya sea en tipos o tamaños, siempre habrá una característica imprescindible: la tipografía elegida debe ser legible para el usuario.
Un simple vistazo a Internet demuestra el uso de fotos de stock hasta donde alcanza la vista. Esta forma de trabajar ha facilitado enormemente la tarea a los administradores y hoy en día, en lugar de crear fotos propias, se recurre a un procedimiento que, en comparación, es muy habitual y muy asequible: la adquisición de fotos de stock. Sin embargo, el resultado no es muy original y hace que la plusvalía que esto tiene para el usuario se limite a un lugar de reposo para el ojo cuando más o menos motivos rellenan los vacíos en los textos.
La gran desventaja de las fotos de stock es su asiduidad, pues lo más probable es que los usuarios encuentren las mismas fotos en numerosas páginas de Internet. Por el contrario, de entre la masa gris se pueden extraer páginas con contenidos audiovisuales únicos y de calidad. No obstante, una tendencia de diseño web moderno para el 2018 es la utilización de imágenes, gráficos y vídeos dinámicos en un segundo plano.
Estos elementos dinámicos ofrecen a los gestores de páginas web la posibilidad de proporcionar información de una manera más rápida y directa que con los elementos de texto. Así, se puede llegar a los visitantes con ayuda de fotos, gráficos o vídeos desde un punto de vista emocional. A este respecto, se suele recurrir al diseño de un fondo dinámico con el objetivo de crear sensaciones y de infundir en los visitantes los sentimientos deseados.
Otra de las tendencias de diseño web que tiene una gran influencia en el aspecto personalizado de una web, y que seguramente garantizará una mayor atención por parte de los usuarios, es la integración de ilustraciones de alta calidad. Estas se encargan principalmente de presentar información de manera sencilla para apoyar y concretar su validez. Especialmente en el contexto del contenido multimedia, encontrar una web con ilustraciones resultará muy atractivo a primera vista. Es difícil copiar una web con imágenes únicas y bien logradas, lo que seguramente hará que esa web sobresalga entre la masa. Para quienes carezcan de habilidades para ilustrar o crear fotografías de gran calidad, es recomendable conseguir la ayuda de un diseñador gráfico profesional. Una web que ejemplifica perfectamente el uso apropiado de ilustraciones es la página de inicio del servicio de almacenamiento en la nube Dropbox.
Las tendencias de organización del diseño web moderno, como las animaciones interactivas, los efectos parallax o los fondos dinámicos, causan sensación y mejoran la recepción de la información siempre que se utilicen de un modo eficaz. A menudo, el diseño elaborado de las páginas web tiene consecuencias negativas sobre el rendimiento. Por ello, los diseñadores web deben sopesar con exactitud cuáles son los contenidos multimedia e interactivos que ofrecen un valor añadido para los usuarios y cuáles ralentizan la página sin necesidad. Como casi siempre, “menos es más”, sin que ello implique obligatoriamente que haya que volver a un diseño plano.
No hay que olvidar que el rendimiento de una página web repercute directamente en la experiencia de usuario, para lo que hay que distinguir entre el tiempo de carga real y el percibido. Las demoras solo resultan problemáticas cuando el usuario las percibe, de ahí que los diseñadores web recurran a los siguientes trucos para ocultar los tiempos de carga:
Si quieres conocer más trucos para mejorar el rendimiento de tu página, visita la siguiente guía sobre la optimización de páginas web.
En resumen, para cualquier vídeo, foto y gimmick se aplica lo mismo que para los contenidos, es decir, estos deben ser de calidad, únicos y relevantes para el usuario. Asimismo, también es recomendable que dichos contenidos se carguen cuando el visitante los solicite. Los usuarios de los dispositivos móviles o de conexiones de Internet débiles se benefician, así, de páginas web bien estructuradas y libres de la carga de datos innecesaria.
Las tendencias de diseño web de 2018 giran en torno al concepto de la interactividad pero, además, en el futuro se deben crear las páginas web más orientadas al usuario y permitir un acceso más rápido. En ello, los contenidos web no se diseñarán por separado en función de los diferentes terminales, sino que se optimizarán en el marco del diseño web responsivo para lograr una presentación apta para cualquier tipo de dispositivo.
Infinite y parallax scrolling son recursos populares para acompañar al visitante durante su recorrido por la web, dos conceptos clave dentro del interactive storytelling. Es importante que el usuario no tenga la sensación de que el contenido está siendo presentado por obligación, sino que haya un trasfondo. Las ilustraciones dibujadas a mano, un fondo de calidad y las fuentes personalizadas le darán un toque personal adicional a cualquier página web. Es importante concentrar esfuerzos para atraer visitantes a la web e involucrarlos emocionalmente. Aun así, el principio sigue siendo el mismo: una página web creada pensando en el usuario y con contenido de alta calidad, presentado de manera atractiva, es el primer paso en el camino hacia el éxito en la World Wide Web.
Si estás pensando en crear una página web o quieres actualizar la tuya, hay un par de tendencias del diseño web en 2018 en las que seguramente encontrarás inspiración.
Hasta hace unos años, la tipografía era un tema poco interesante para los diseñadores web. Sin embargo, el panorama ha cambiado gracias a los avances tecnológicos de los últimos años. Ahora es posible valerse de tipografías modernas para destacar aspectos relevantes de una página web, así como para generar un impacto determinado en sus usuarios. Además, ya no es obligatorio instalar la fuente...
Las icon fonts permiten integrar pictogramas vectoriales en una página web. A diferencia de los tradicionales gráficos en mapa de bits, los iconos vectoriales tienen la ventaja de ser escalables sin perder su calidad. Además, la integración a través de CSS (Cascading Style Sheets) ofrece amplias y sencillas posibilidades de configuración dentro del mismo código fuente. Por otro lado, muchos...
La gran oferta de fuentes y familias tipográficas en Internet es cada vez mayor, incluyendo aquellas de código abierto que pueden ser descargadas de forma gratuita. La mayoría de estas fuentes web son adaptables, lo que las hace perfectas para su implementación en páginas web responsivas, es decir, aquellas que adaptan su visualización a diferentes dispositivos. Conoce algunas de las plataformas...
Para que en el futuro las campañas de newsletters sigan surtiendo el efecto deseado es importante prestar atención a las tendencias de Email Marketing de 2018. Entre ellas destacan el incremento de las opciones de automatización, las nuevas oportunidades para la presentación de contenido, las nuevas leyes de protección de datos y la realización de predicciones gracias a la inteligencia artificial....
