Lo primero que queremos hacer este nuevo año es disipar dos grandes mitos: que para hacer una página web profesional y con diseño de calidad hay que ser licenciado en diseño o experto en programación y que crear una página web es necesario, pero no divertido.Este artículo te demostrará lo contrario y te ayudará a descubrir que crear tu propia página puede ser una experiencia increíble, si sacas al creativo que llevas dentro y dejas volar tu imaginación. Y para ayudarte a despertar esa creatividad hemos reunidos las diez tendencias más importantes que marcarán el diseño web en 2019.
Por supuesto, no tienes que usar todos los elementos de esta lista en tu propia página. Como bien indica el experto en diseño UX Aarron Walter en su libro,Design for Emotion, “Si todo grita para llamar la atención de tu espectador, no se escucha nada”. Resumiendo: abrumar a tus clientes con demasiadas opciones o elementos visuales no está de moda. Más bien asegúrate que los elementos que elijas tengan un diseño lo suficientemente llamativo para cautivar a tu audiencia y ayudarte a posicionar tu marca. Así pues, toma nota de las tendencias del diseño web que se vienen este año así como nuestros consejos para implementarlas en el diseño de tu página.
01. Micro-animaciones
No es necesario transformar toda tu página web en un proyecto que compita con la última película de Disney. La animación es una tendencia en auge los últimos años, con funciones como el desplazamiento de paralaje (que utiliza el movimiento y la percepción profunda para sumergir a la audiencia en la historia de tu página). Sin embargo, en el 2019, las animaciones aparecen en una dimensión diferente: las mico-animaciones.
Se trata de movimientos mínimos que aparecen cuando los visitantes de tu página web realizan una acción específica. Mientas que también aportan energía a tus páginas, afectan menos al tiempo de carga y no distraen a tus visitantes. Puedes pensar en ellos como señales de tránsito que ayudan a indicarle a un visitante dónde ir y brindar comentarios positivos mientras recorren tu página web. Por ejemplo, cambiando el diseño de los botones cuando se pasa el mouse sobre ellos, indicas a los usuarios que están en el camino correcto.
Además de funcionar como guías para tus páginas, estas interacciones animadas se pueden usar simplemente para agregarle un tono divertido a tu página y sorprender a los visitantes.. Esto incluye por ejemplo, el uso de los cinemagraphs como fondos o dentro de una colección más grande de imágenes bellamente exhibidas en una galería. Incluso, entrando al mundo encantador donde puedes agregar fácilmente efectos a tus videos, con VideoBox. Esta herramienta te permite mejorar tus imágenes con diferentes modos de reproducción y comportamientos para llevar la calidad de tus imágenes dinámicas un paso más allá de un GIF. Independientemente de la dirección en la que vayas, estas micro-animaciones tendrán un efecto dramático en el diseño de tu página web.
02. Optimización móvil
Afortunadamente para los usuarios de surstyle, la versión compatible con dispositivos móviles de tu página web se crea automáticamente, y está totalmente optimizada con los requisitos de Google. Una vez que tengas la estructura, asegúrate de deshacerte de todo el contenido innecesario, ya que las pantallas pequeñas pueden llenarse rápidamente. Ryan Warrender, que fue Director de Mobile UX en Google, define el éxito del universo móvil de la siguiente manera: “Un usuario debería entender qué hacer y por qué debe permanecer en tu sitio móvil desde el primer momento”.
Una buena manera de saber qué contenido puedes eliminar de la versión móvil es ponerse en el lugar de un visitante que llega por primera vez a tu página. Pregúntate por la utilidad de cada elemento y elimina los que no necesitas (no te preocupes, no afectará a la versión de escritorio). Ésta es una de las mejores prácticas que encontrarás en la red.
03. Formas geométricas
Tranquilo que no te vamos a dar una lección de matemáticas. El 2019, es momento de divertirse organizando figuras geométricas en tu página web, aprovechando las ventajas de simplemente colocar formas básicas en el fondo de tu página o recortar imágenes en marcos geométricos. Desde las líneas limpias y clásicas de los triángulos y círculos hasta los rombos y hexágonos más modernos le brindan una distribución uniforme y estéticamente agradable a tu página, ayudándote a cumplir fácilmente con el principio del diseño basado en el equilibrio.
Hay tres rutas que llevan a este estado de equilibrio: simétrico, asimétrico y radial. Aquí hay un rápido desglose de lo que cada uno implica:
Balance simétrico: en este enfoque clásico, los elementos de la mitad de una composición se reflejan perfectamente en la segunda mitad.
Balance asimétrico: si bien las dos mitades de la página no coinciden, todas tienen un “peso” visual equivalente. Esto se logra jugando con los colores, texturas, formas y posiciones de los elementos que se están visibles.
Balance radial: este estilo posiciona de manera equitativa todos los elementos de un diseño alrededor de un punto central, para que se irradien hacia afuera.
En el 2019, se llevará la asimetría. Un estilo innovador, que emana modernidad y vitalidad, dos cualidades que vale la pena implementar en el diseño web. Como mencionamos anteriormente, agregar formas ayuda a aportar un aspecto asimétrico a las páginas. Digamos que el lado derecho de tu página está cargado de texto. Una solución para estabilizar el peso es crear un diseño atractivo a partir de triángulos a la izquierda. Puedes tener un diseño vanguardista y aún así, mantener la atención de los visitantes centrada en lo que importa.
04. Salpicaduras de color
Los colores llamativos forman parte de la lista de tendencias año tras año. Con el internet saturado de contenido, el color es una forma fiable de dar un mensaje contundente con tu presencia online. Por supuesto, eso no significa olvidar las pautas de la psicología del color y apostar solo por el color más brillante que puedas encontrar. La elección de la paleta de colores para tu marca aún debe ser guiada por las emociones que deseas transmitir, los estándares de tu industria y el mensaje que esperas comunicar a través de la identidad visual de tu empresa. Sin embargo, una vez que entiendas qué colores son los adecuados para tu negocio, trata de averiguar cómo puedes combinarlos para llamar la atención de todos. Específicamente, ¿cómo puede el color ayudar a concentrar a los visitantes en las secciones más importantes de tu página web?
Hay varias opciones de pasos a seguir. Los bloques de colores únicos están de moda en la escena del diseño web en este momento. Puedes pintar la parte superior de tu página de inicio (la parte que es inmediatamente visible en la pantalla de un visitante antes de que tengan que desplazarse hacia abajo) de un color sólido como por ejemplo el color de Pantone del año, para el 2019, (¿te animas? ). Si eso no concuerda con la vibra de tu negocio, hay formas más sutiles de acentuar el brillo de tu página web, como la incorporación de ese color en los botones de llamada a la acción (CTA), o en tu logo.
Los esquemas de color complementarios también están tomando posiciones. Nos referimos a los dos colores colocados uno frente al otro en la rueda de colores, como el rojo con el verde, el amarillo y el púrpura. El contraste resultante hace que cada uno sobresalga en la página incluso más de lo que lo harían por sí solos. Para crear un esquema completo, agrega un color neutro al dúo complementario. Los colores neutros son los que no aparecen en tu rueda de colores estándar, como el beige, los marrones claros, los grises claros, el blanco y el negro. Una vez que tengas tus colores, puedes aplicarlos en los mismos lugares mencionados anteriormente, CTA o cualquier bloque de contenido que quieras destacar en tu página web.
05. Tipografía con encanto
Sabemos que es fácil vivir con el cómodo trío de Arial, Times New Roman y Calibri. En el 2019, sin embargo, es hora de pensar fuera de la caja (de texto). Las fuentes pueden ser declaraciones intencionales en sí mismas, con las versiones más artísticas y detalladas capaces de enviar un mensaje de seriedad o diversión caprichosa. En otra sección de Design for Emotion, Aarron Walter afirma: “El gran diseño que usa contraste cognitivo y visual no solo lo hace destacar, sino que también puede influir en la forma en que las personas usan su interfaz”. Realmente, todo vuelve a la identidad de tu marca nuevamente. ¿Qué esperas comunicarle a los visitantes? Tu respuesta a esta pregunta te ayudará a elegir el mejor tipo de letra para tu página web.
Una tendencia emergente en el mundo de la tipografía son las fuentes únicas, con estilos diferentes que imprimirán un toque artístico al diseño de tu página web. Nuestra consejo es que si te decantas por fuentes en negrita, las combines con tipos de letra más tradicionales para evitar un impacto visual demasiado fuerte. Si no sabes cómo combinar tipos de letra, en esta guía encontrarás las combinaciones perfectas.
Al combinar diferentes tipos de letras (¡Ojo!, nunca más de 3) podrás asignar a cada sección de tu página web un aspecto diferente. Por ejemplo, puedes usar una fuente más artística y en negrita para el encabezado y un tipo de letra más limpio y minimalista los textos. Esta práctica te puede ayudar a crear una jerarquía visual en tu página web, para que sea mucho más fácil para un usuario filtrar y entender la información que tiene enfrente.
06. Encabezados de video
En particular el mundo del vídeo está cayendo rendido a los pies de los encabezados de video, que se presentan en forma de pantalla completa o en pistas de vídeo que funcionan como un fondo dinámico. Puedes superponerlos con texto, tu logo, las opciones de menú y más. Digamos que eres dueño de una cafetería y quieres mostrar algunas fotos de la atmósfera bulliciosa que los clientes pueden encontrar en tu establecimiento. Simplemente carga el video a través del Administrador de medios de surstyle, y personalizarlo desde allí. Para minimizar el impacto del video en la velocidad de carga, opta por un clip corto con un tamaño de archivo de no más de 6 MB, que se reproduzca en bucle de cinco a diez segundos. Esta repetición hace que aparezca como una presentación más larga de lo que realmente es, sin embargo, ahorra mucho espacio. También es recomendado mantenerlo en silencio o mudo, así le ahorrarás a muchos de tus usuarios un momento incómodo cuando abran tu página en medio de una reunión de trabajo.
07. Esquinas redondeadas y líneas suaves
En 2019 veremos un aumento en el uso de esquinas redondeadas y líneas más naturales en en todos los elementos de las páginas web, desde cuadros de texto, marcos de imágenes, botones e incluso formas abstractas de fondo. Esta tendencia se aleja bastante del uso de bordes definidos muy de moda en otras épocas. es un cambio de enfoque de los bordes bruscos del pasado. Es como la diferencia entre un colchón extra firme y aquel colchón de espuma especial que se amolda al cuerpo. Éste último transmite fácilmente la sensación de confort, mientras el primero transmite una sensación más distante y austera. Esto es un gran ejemplo de cómo un cambio sutil en el diseño puede realmente alterar la percepción que el público tiene de tu marca.
¿Cómo lograr esto? Puedes recortar las formas de tus imágenes usando marcos redondos, agregar diferentes siluetas amorfas de colores brillantes, cambiar los botones rectangulares por diseños curvados, etc. Y si te decides por las encantadoras micro-animaciones de VideoBox que mencionamos antes, puedes elegir alguna de las opciones de diseño de marcos de líneas suaves disponibles para los videos. Incluso podrás recortar el formato de estas micro-animaciones para que se amolden al diseño que tenías en mente.
08. Pantalla dividida
Una nueva tendencia que empieza a emerger es la de las páginas web con pantalla dividida, lo que significa que tu contenido se divide verticalmente entre los dos lados de la página. Es otra forma de insertar jerarquía visual, así como “calmar visualmente las cosas”, para aquellos que se encuentran en tu página web por primera vez. Este diseño puede resultar fantástico si eres un fotógrafo de moda o un artista culinario, por ejemplo, buscando la manera de separar el texto de tus imágenes.
La división permite que cada elemento de tu página respire, en lugar de colocar todos los elementos uno encima del otro. Desde la perspectiva del espectador, les ayuda a procesar cada componente por sí solo, en lugar de intentar procesar diferentes tipos de contenido a la vez. Una forma de mantener una cierta armonía entre las dos secciones es aprovechar el punto donde las dos columnas se fusionan como el punto central ideal. Coloca ahí tu logo, CTA o cualquier otro elemento que deseas que robe la atención de los visitantes. El resultado es un aspecto unificado incluso cuando la mirada del visitante se aleja del punto. . Ser creativo con el diseño no significa renunciar a la cohesión y la coherencia.
09. Adiós a la cuadrícula clásica
No es necesario pasar mucho tiempo en Internet para entender que los humanos tendemos a sentirnos atraídos por todo lo extraño o diferente. Piensa en los innumerables memes de los que te has reído, o en los test de BuzzFeed que has realizado y que de alguna manera saben relacionar tu sabor preferido de helado con tu gusto musical. Un patrón que nos ha llamado la atención son los componentes de diseño web inesperados. Hemos visto esto reflejado en algunas de las otras tendencias, como las formas geométricas, los colores de fondo en negrita y las micro-animaciones. Ahora, queremos analizar cómo este elemento sorpresa puede aparecer en tu página web a mayor escala.
Para la mirada distraída de los visitantes, ser recibido con un diseño asimétrico es lo suficientemente inusual como para llamar su atención y convencerlo de que se concentre en leer el contenido de tu web. La apariencia ligeramente desequilibrada, cuando se hace correctamente, puede lograr la fascinación del visitantes sin caer en el simple “desorden”. Caos organizado, por así decirlo. Una forma de conseguirlo podría ser convertir una forma geométrica o una micro animación de video en una elemento destacado situándolo ligeramente más a la derecha o izquierda de donde la lógica de la simetría lo hubiera ubicado, o hacer que se superponga con otro elemento. Otra posibilidad es contrarrestar una imagen grande con espacios en blanco. Dale a la imagen el 40% del espacio y mantén el otro 60% como pausa visual, y complétalo solo con un CTA o un breve encabezado escrito en una fuente sólida.
El único vestigio del diseño de la cuadrícula que permanece, por más irónico que pueda parecer, es la propia cuadrícula. Sí, las líneas que normalmente te guían como diseñador, aunque invisibles para tu audiencia web, ahora compiten por sobrevivir. Estamos viendo superposiciones de cuadrícula en vídeo y fondos. Los más valientes, pueden jugar con el efecto de cuadrícula para realmente conseguir un aspecto retro con un toque artístico remitiendo a los días iniciales de internet. Para aquellos que están buscando diferenciarse pero sin exagerar, es posible experimentar con algunas líneas expuestas a lo largo de tu página. Su función será romper con el peso del contenido de la página y mostrar los tamaños diferenciados de sus columnas y cuadros de texto mientras mantienen, al mismo tiempo, una sensación de control debido a su simplicidad y firmeza de estructura. Entendemos que es una ruptura un poco confusa con la cuadrícula, pero ¿qué podemos decir?
10. Minimalismo
Sabemos que ya estás deseando ponerte manos a la obra y aplicar todas estas tendencia a tu web. Sin embargo, hay una última tendencia que debes conocer. Una tendencia que no caduca y que es m´s bien uno de los principios fundamentales del diseño: la navegabilidad limpia. Es decir, si tu página web no es fácil de navegar y los visitantes se pierden en ella sin encontrar lo que venían a buscar, por muy atractiva que sea la micro-animación que has agregado a tu página de inicio, tu web terminará siendo un fracaso. De hecho, si hay algo en lo que coinciden las tendencias anteriores es en el compromiso con la Experiencia de Usuario (UX), que nos atrevemos a decir, será prioridad en el 2019.
Y estar comprometidos con el UX significa analizar todas las tendencias anteriores e identificar aquellas que transmitan de manera efectiva tu identidad de tu marca y lo que realmente quieres obtener de tus visitantes. Además, si eres capaz de atraer a tu audiencia con un diseño fascinante, habrá más posibilidades de que permanezcan más tiempo en tu página, lo que se traduce en una mejora para tu SEO.. Una vez que hayas elegido las tendencias de diseño adecuadas para tu página web, aplícalas con coherencia y adapta el diseño del resto de tu página en consecuencia para mantener una estructura a prueba de errores y atractiva, ya que estas tendencias del 2019 dejarán a tus visitantes sin aliento!
¡Sorprende a tus visitantes con estas deslumbrantes tendencias de diseño web! ¡Empieza creando una página web hoy!
Bibliografia
