Nueve tendencias de diseño de páginas web para este 2016

Las tendencias de diseño normalmente duran varios años (incluso décadas en el caso de algunos tipos de diseño), pero el diseño de páginas web es una industria que se mueve rápido y donde las tendencias vienen y van con bastante frecuencia.

Aún seguimos trabajando en algunas de esas tendencias ahora: diseño web responsive, diseño web plano, rendimiento y velocidad y perfeccionamiento de experiencia de usuario. No obstante, ¿cuáles son algunas de las nuevas y emergentes tendencias que podemos esperar este nuevo año? A continuación, veamos algunas:

1. Seguiremos experimentando con navegaciones y menús

Como diseñadores web, nos hemos dado cuenta de que no podemos desplazar la navegación de una página web. Seguimos jugando con ella, experimentando y haciendo diferentes cosas para hacer que funcione de una buena forma.

Hacemos cosas como ponerla en un lugar nuevo e inesperado, esconderla detrás de un ícono hamburguesa o solo dejarla ahí donde sabemos que es necesaria pero que no luce bien.

Luchamos por descubrir con exactitud la forma de mostrar este importante elemento de contenido para hacerlo más útil sin importar la pantalla donde se vea. Seguimos experimentando en formas de descubrir lo que se ve mejor. Por ejemplo, Shellshock (la imagen de arriba) está experimentando tanto con el menú hamburguesa con un esquema inspirado en tarjetas para su navegación.

2. Desplazarse o no desplazarse

¿Hemos llegado a punto donde el desplazamiento (o scroll) incrementa el número total de lectores, pero deseamos menos de él? Es posible. Para este 2016, anticipamos que algunas páginas web apostarán por un mínimo desplazamiento mientras que otros harán todo lo contrario.

Ambos tienen beneficios y desventajas: los desplazamientos largos se sienten naturales y son más que fáciles de dar clic, pero separa el contenido y hace que sea difícil de escanear para encontrar información, mientras el desplazamiento corto va al punto, pero puede ser muy rápido al punto de causar que las tasas de rebote incremente.

En la parte de arriba, Uppercase ha optado por una página sin desplazamiento. Lo que vez en la captura de pantalla es la forma cómo carga la página. Todo lo que necesitas se encuentra ahí sin necesidad de desplazarse más.

Sería interesante ver esta batalla entre ambos enfoques este 2016 y ver cuál gana. En la actualidad, existen más páginas web con desplazamientos largos, pero solo el tiempo dirá cuál es realmente la mejor  forma de consumir contenido.

3. Diseñar en módulos y componentes en lugar de páginas enteras

El diseño web se está moviendo hacia un diseño web modular y de componentes en lugar de bosquejar esquemas de pantalla enteros para una página web en particular. Estos componentes, con frecuencia, requieren diseñar la forma en que la función de búsqueda funcionaría, cómo la navegación estaría diagramada, etcétera.

Ahora pensamos que tenemos diferentes elementos repetidos en diferentes pantallas, y que esos elementos necesitan ser diseñados para funcionar de forma independiente, pero también con el resto de la página web.

No solo estamos más consciente acerca de cómo estos componentes lucen en términos de diseño, sino de también el hecho que todos ellos cargan sus propias funcionalidades. Diseñar con componentes y módulos permite que la funcionalidad sea replicada sin importar el lugar donde aparezca en la página web.

4. Las páginas web seguirán siendo planas

Con el diseño web responsive tomando control de toda la web, esperemos que el diseño plano siga dominando la estética web. No solo existirán páginas web que presenten un diseño plano, sino que también aquellas páginas web ya planas lo serán aun más.

Toma como ejemplo el diseño de logo de Google. La empresa cambió su logo para hacer más plano (perdiendo los biselados) y cambió la fuente. Se ha descubierto que una fuente sans-serif más limpia ha ayudado a reducir el tamaño del archivo del logo usado en páginas web en más de la mitad. Google también ha descubierto que era más fácil de leer en dispositivos más pequeños.

Esto incluye actualizaciones en los logos (como Google), íconos, imágenes y otros elementos que no fueron planos en la primera vez.

5. El Material design despegará

Google lanzó su lenguaje Material Design en junio de 2014, pero su acogida ha sido un poco lenta. Sin embargo, los diseñadores web ahora tienen un mejor conocimiento de este Material Design y pensamos que empezarán a usarlo más en sus diseños.

El Material Design se concentra en elementos táctiles pero dinámicos que nos recuerdan a la tinta y al papel. Las sombras son realísticas, los ítemes que sobresalen lo hacen con un sentido realista con respecto de la realidad, las interacciones se quedan dentro del material y no impactan otro material a su alrededor.

Ya que hemos tocado la cima con el diseño plano, los diseñadores web están optando por lo algo más, y Google ofrece eso en su lenguaje Material Design. Anticipamos que más y más páginas web seguirán esta estética este 2016.

6. Abandono de elementos de stock por algo mejor

Estamos empezando a ver más y más páginas web que dejan de lado el uso de elementos de stock como las imágenes por algo que se siente más diseñado y personal.

Algunas páginas web están optando por usar su propia fotografía en sus páginas de inicio o publicaciones de blog en lugar de escoger una imagen de stock. Otras páginas web están dejando sus imágenes de stock por videos, infografías o incluso GIFs para ayudar a transmitir sus mensajes. Por ejemplo, Flatiron Health ha optado por su propia fotografía en diferentes áreas de su página web para hacer que sea más atractiva y menos corporativa.

Los íconos son otros elementos de stock que están siendo dejados de lado a favor de algo más personalizado. Existen miles de íconos, así es fácil simplemente escoger uno a trabajar con base en él, pero los diseñadores están notando ese pequeño detalle para crear íconos personalizables que pueden ayudar a diferenciar una página de otra.

7. Formularios e ingresos en pantalla completa

Más y más páginas están optando por formularios y pantallas de ingreso (como registros e inicios de sesión) en pantalla completa en lugar de en una sola parte de la pantalla. Haz clic en “iniciar sesión” o “contáctanos” y podrás ver cómo una ventana se abre con el formulario necesario en lugar de solo dirigirte hacia una nueva página. Un ejemplo de esta tendencia es el formulario de Eighty East. Cuando haces clic en “contacto”, se abre una ventana que ocupa toda la pantalla.

Como se mencionó líneas arriba, esta tendencia nace deldiseño web responsive por muchas razones: evita que otra pantalla cargue, da más espacio de pantalla para un mejor rendimiento en pantallas táctiles y anima a los usuarios a completar un formulario.

8. Más interés en funciones que en apariencias

Tener un bonito diseño web es genial y todo, pero no importa nada si tu página web no funciona bien. Los usuarios ahora están más conscientes si una página web funciona o no.

Es más común que los usuarios abandonen una página web porque han descubierto que no funciona bien. ¿Imagina cuán mal sería esto para una página web ecommerce?

Los diseñadores desean que sus páginas web luzcan bien, así que es importante que puedan hacer que sus proyectos funcionen bien. Dale a las personas lo que desean: función y diseño.

9. Más diseños dentro de los navegadores

Algunos diseñadores web ahora diseñan dentro de los navegadores (usan programas que hacen que sus cambios se vean automáticamente en los diferentes navegadores). Esto tiene algunos beneficios: acorta el tiempo de desarrollo web, te permite ver las limitaciones y reacciones en el navegador real y es más natural que diseñar en un programa que no tiene nada que ver con la web.

Es bastante común que los diseñadores sepan codificar al menos en el front end de las páginas web (HTML/CSS/JS), así que diseñar en el navegador tiene sentido para ellos. Con la tendencia de mover el diseño web fuera de los diferentes programas como Photoshop, Illustrator y Sketch para moverlo hacia los navegadores, anticipamos que otros diseñadores web empezarán a usar más HTML y CSS.

Diseño web: Tres tendencias de tipografía para este 2016

Tendencias de diseño web. Poco puedes hacer sin verlas, saltan por todos lados y le dan a tu diseño una sensación “actual” cuando está bien usada.

En el siguiente artículo vamos a ver, específicamente, tres tendencias de tipografía en páginas web y por qué las amamos u odiamos. Aunque estos tres estilos (retro, acuarela y el uso de mayúscula) están en todos los lugares, los diseñadores no pueden evitar amarlas (incluso si no quieren). Es por esta razón que compartiremos el uso de estas tendencias en diferentes páginas web.

1. Tipografía Retro grunge

Lo retro y vintage están pasando por un buen momento. A donde mires, los diseñadores están usando esta tipografía de estilo antiguo, grunge pero elaborado. Las fuentes tienen una apariencia personalizada, pero no demasiado personalizada. En resumen, estas fuentes son un poco (tal vez bastante) hipster.

Vas a querer tratar de odiarla. La mayoría de estas fuentes no son parte de una plantilla de diseño web gratis. Muchos de estos interesantes estilos son personalizados, diseños de un solo uso que no tienen elementos o estilos extra.

Pero son tan buenos.

Pese a las fallas de muchas estas fuentes en términos de flexibilidad, conforman un buen bonus. Puedes usarlas para una presentación estelar. El truco para una fuente retro o vintage es, en definitiva, la moderación. Escoge una o dos palabras (o tal vez un logotipo) y no la uses en ningún otro lugar. Funciona mejor si la usas una sola vez.

Aquí tienes tres fuentes que puedes probar.

Brandon Printed

Wanderlust

Monthoers

2. Tipografía tipo acuarela

Las acuarelas están en todos los lugares. Desde fondos de pantalla a ilustraciones y tipografía, esta suave tendencia combina estilos de arte con una estética de diseño personalizado. Los estilos acuarela son atractivos porque aparentan ser artesanales, lo que hace el diseño webespecial.

Si deseas aprender más sobre esta tendencia de diseño web, entonces mira este artículo que habla sobre ella.

Las fuentes acuarela puede ser todo un desafío de usar en particular porque incluyen colores y variaciones de los mismos. El otro problema con este tipo de fuentes es que los usuarios ven este estilo a través de una perspectiva femenina. Estos dos desafíos pueden hacer que sea difícil crear un diseño web general usando el concepto.

No obstante, aquellos que estén dispuestos a aceptar el reto terminarán satisfechos. Usar un estilo acuarela te fuerza a estirar tus habilidades de diseño web y planificar el proyecto y el estilo de las letras. Al igual que con el estilo retro, la acuarela debe tener un propósito singular y específico en el diseño web.

Aunque muchos de los estilos acuarela son creados con un brochas, estas últimas no son una necesidad. Todo lo que necesitas para hacer que funcione es una fuente con brochas gruesas para que el color resalte.

Aquí tienes tres fuentes que puedes probar.

Minty

Zubuqlione

Haze

3. Tipografía en mayúsculas

El uso de palabras en mayúscula casi siempre ha sido asociado con gritar al lector. A veces deseas que un diseño web grite un mensaje específico. En ese caso solo asegúrate de crear un mensaje conciso.

Algunas personas odian, odian y ODIAN el uso de mayúsculas en palabras. Puede ser difícil de leer cuando no se usan bien o algunas fuentes no se prestan para este formato. Tienen que ser usadas con cuidado para que el uso de mayúsculas añada, y no le quite, valor al mensaje.

Pero esta tendencia de diseño web tiene mucho impacto con un mínimo esfuerzo. Las fuentes delgadas, condensadas, e incluso aquellas más anchas, pueden funcionar todas en mayúscula.

Dos buenos usos de mayúsculas se dan en los elementos de navegación. Estos pequeños detalles pueden diferenciarse en frases cortas y en minúscula. La tipografía de presentación es otro lugar donde el uso de mayúscula funciona bien (y donde muchos diseñadores está usando este concepto en sus proyectos de diseño web).

Al usar palabras y frases en mayúscula, opta por palabras y frases simples y fáciles de leer y asegúrate de incluir mucho espacios alrededor de las letras. Tal vez puedes usar más espacio de lo normal para asegurar la legibilidad. El uso de mayúsculas puede encajar bien con el uso de imágenes heropara crear un imágenes cautivadoras  y dominantes, como es la tendencia de estas imágenes.

Aquí tienes tres fuentes que puedes probar.

Oswald (Google Fonts)

Sweet Sucker Punch

Prestiggio

Conclusión

Aunque estos tres estilos de fuentes son las tendencias de moda en estos momentos y pueden estar en el borde del sobreuso, son estilos que no puedes dejar de amar (incluso si odias amarlos).

¿Has visto otras tendencias de diseño relacionado con el uso de tipografía? De ser así, háznoslo saber.

Cinco tipos de diseño web que interfieren con tus conversiones

El diseño web moderno es sorprendente, por decir menos. Los diseñadores web de ahora cuentan con innumerables herramientas y trucos para sacar lo mejor de las empresas y sus páginas web. Este 2016, se espera que estas herramientas y estilos de diseño web crezcan en popularidad con diseños que incluyen animaciones, parallax scrolling, videos, cinemagrafos, animación interactiva y navegación innovadora. Todo está diseñado en el nombre del usuario, quien desea que todo sea más divertido, emocionante y creativo.

No obstante, existe una peligro. El resultado puede ser hermoso, pero puede no tener el resultado que las página web ecommerce buscan. Hacer que personas visiten e interactúen con una página web no es lo mismo que convertirlos en clientes, y una de las tendencias más nuevas de diseño web puede estar afectando las conversiones.

Esto no quiere decir que las páginas web que buscan concretar ventas no deban contar con un diseño atractivo. Por el contrario, un diseño web atractivo puede ser muy útil al generar conversiones. Sin embargo, en muchos casos, simplemente no existen muchos elementos para que un usuario entienda el propósito de la página web y realice la compra. Si estás apuntando a reparar una página web este 2016, existen algunas cosas importantes que debes evitar:

Demasiados plugins

Los plugins en el diseño web son geniales. Pueden brindar funciones nuevas y especiales. También existe una increíble colección de plugins gratis en la web, lo que hace facilita su uso. No obstante, demasiados plugins en una página web alojada es perjudicial para los tiempos de carga.

La velocidad de carga es extremadamente importantepara los consumidores. De acuerdo con estudios, cualquier página web que tome más de tres segundos para cargar es propensa a una tasa de abandono del 79 %. Además, 44 % de las personas que abandonan la página dirán a sus amigos y familiares que no la visiten. El resultado es aproximadamente 40 % de clientes perdidos solo porque la página web se demora en cargar. En otras palabras, cuando tienes demasiados plugins en tu página web, el efecto es todo lo contrario a conversiones.

Demasiado diseño, poco texto

Aunque el estilo, imágenes, colores, navegación y otros elementos de la estructura de una página web son muy importante para llamar la atención de cliente, no deberían opacar el texto. Tu contenido es esencial para generar acciones del usuario. El contenido no debe ser algo en lo que se piense después que el diseño de la página web haya culminado.

Pero más importante: el diseño nunca debe opacar la llamada a la acción. Las mejores llamadas a la acción están bien redactadas y tienen un excelente diseño web que mezcla, a la perfección, el diseño alrededor de ellas. El diseño web debe llevar a la llamada a la acción, y luego el texto debe fomentar la acción.

Animaciones que distraen

En 2016, las últimas y mejores tendencias de diseño weboptaron por animaciones más ricas y gráficos más interactivos que interactúen con el usuario y los mantenga fascinados en las páginas web. Esta es una excelente dirección, pero viene con algunos riesgos. Lo más probable es que los diseñadores web estén advertidos de ser precavidos con el uso de imágenes que distraen.

Cuando estas imágenes toman control del diseño web, generan confusión y una sensación de caos, algo que los consumidores asocian con problemas empresariales. Experimenta con animaciones para dar vida y movimiento a una página web estática, pero usa estas imágenes con cuidado, y no dejes opacar el propósito de la página web.

Navegación inusual

Aunque cada página web apunta a ser diferente, existen algunas cosas que no deberían cambiar mucho para crear una experiencia de usuario igual en toda la web. Esta de estas experiencias es la navegación. Como criaturas de hábitos, los usuarios esperan que algunos lugares llamen la atención más que otros, ya sea en la parte superior de una página web o el parte izquierda o derecha de una ventana lateral emergente. Si no se encuentra ahí, se genera frustración y se incrementa la tasa de rebote.

A menudo, los diseñadores de esta era moderna se concentran tanto en páginas web elegantes que olvidan la navegación interior. Una página web puede lucir bien, pero esta falla puede causar que los usuarios la abandonen por completo. La mayoría de los consumidores no tienen interés en pasar tiempo en una página web cuyo propósito no entienden.

Imágenes gigantes

Como ya debes saber muy bien, las imágenes son fundamentales para tener una página web de éxito. El cerebro puede procesar las imágenes aproximadamente 60 000 más rápido que el texto, lo que hace que las imágenes tengan más valor para un buen diseño de página web. Sin embargo, existe un límite para el uso de las empoderante ayudas visuales, en particular con respecto del tamaño.

Con frecuencia, una sola imagen grande en el fondo del texto de una página web puede ser bastante efectiva al llamar la atención y al hacer que el texto resalte. Pero muchas de estas imágenes solo causarán distracciones.

Además, las imágenes muy grandes incurren en un muy difícil tiempo de traslación en pantallas pequeñas de dispositivos móviles; y ahora que el mundo que ahora está apostando más por las búsquedas móviles, es esencial mantener las imágenes a un tamaño manejable para evitar distorsiones que incrementen la tasa de abandono por parte de los usuarios.

La moraleja del mensaje de este artículo no es que el diseño web moderno sea malo. Todo lo contrario. Los elementos del diseño web moderno son herramientas increíbles que pueden ser usadas para engancharse con una audiencia más amplia y crear páginas web increíbles. Sin embargo, dejarse llevar por los elementos del diseño web moderno puede terminar en una pérdida de identidad de marca y menores conversiones. El objetivo final es un buen balance entre un buen diseño y mejores conversiones.