Tendencias en diseno web para el 2021
2020 fue un ano decisivo para muchos empresarios. Muchos de ellos se han subido con exito a la ola online. Y algunos se han hundido en el olvido, sin saber nunca las oportunidades que nos brindaba el confinamiento y la distancia social impuesta a causa del virus. En toda esta historia, una cosa es importante: hay mas compras en Internet, lo que significa que el componente visual de un sitio web deberia funcionar aun mas para la promocion.
El diseno web es en estos momentos mas importante que nunca, y si tiene una empresa y ha pensado en cederle el honor de crear su web a su cunado, permitanos decirle que ha escogido el peor momento para hacerlo. A no ser que su cunado sea disenador web profesional, claro. El diseno web nos trae un monton de posibilidades en este momento, pero como todos los desarrollos, deben usarse con prudencia. ?Que ha cambiado en 2020 y que nos llevaremos en 2021? Desde una de las agencias mas punteras en diseno web en Navarra nos explican lo que viene en 2021 para diseno web. Hablando con ellos en su estudio de diseno web Navarra se han remarcado los siguientes puntos:
1. Las redes sociales lo son todo
?Has notado que la mayoria de los sitios, independientemente de lo que vendan, se han convertido cada vez mas en las redes sociales mas populares del mundo? Tomemos una tienda de cosmetica y perfumeria - "Primor.eu". Abrimos la pagina principal. ?No se parece a nada? Similar a la pagina de inicio de cualquier cuenta de Instagram o Facebook. Esto se nota especialmente cuando abre el sitio desde un dispositivo movil. Aqui tenemos una foto de titulo y una "historia" con productos y promociones actuales, y el feed principal en forma de los productos mas populares y nuevos. Los iconos de la version movil recuerdan francamente el marcado "instagram" de la red social.
Esta decision de diseno es bastante comprensible. La categoria de productos de belleza se vende en Instagram desde hace 5 anos, asi que por que no hacer un sitio web similar a la pagina de tu red social favorita, donde puedes ver la actualidad, estudiar el feed. La interfaz es comprensible para cualquiera que visite el sitio por primera vez, porque ya ha visto todo esto en alguna parte y sabe como usarlo.
Tal diseno sera relevante no solo para marcas de cosmeticos y ropa. Por ejemplo, la escuela de ingles SkyEng ha estado utilizando activamente el "shell de Instagram" casi desde la fundacion de la empresa.
2. Minimalismo
Esta es otra tendencia que esta cobrando impulso tanto entre los desarrolladores como entre los usuarios. La gente esta cansada del desorden y la informacion innecesaria. Por lo tanto, a veces es mas agradable mirar una imagen de la pagina principal y escuchar el canto de las ballenas, como usan los creadores del sitio web safe-whales, que confundirse con el flujo recibido de numeros y letras. Por cierto, este sitio utiliza no solo minimalismo, sino tambien animacion real y sombras suaves, que es otra tendencia de 2021.
Pero el minimalismo, como una forma de disenar su sitio, no es solo una imagen en la pagina de inicio. Aqui, la tarea del disenador es mostrar el producto, informacion o servicio que ofreces en todo su esplendor a traves de unas formas sencillas y comprensibles, y no centrarse en elementos decorativos.
El sitio de rescate de ballenas antes mencionado no golpea directamente en la cabeza "envianos tu dinero y salvaremos a las ballenas". Desde la pagina principal, presenta al lector las especies de ballenas que necesitan conservacion y apoyo de especies. Sin desorden con informacion innecesaria, solo ballenas.
El principio mas simple y comprensible del minimalismo ha sido utilizado por Google durante mucho tiempo. Como ves, el minimalismo tambien puede ser diferente, por eso te proponemos considerar sus caracteristicas.
Sencillez en todo.
Lineas claras, sin detalles innecesarios, fuentes complejas y una variedad de ilustraciones abigarradas, una cuadricula compleja de informacion y ubicacion de los medios. La simplicidad tambien se puede encontrar en el contenido interno del sitio: desde fotografias en estilo minimalista hasta videos y diseno de texto. Un gran ejemplo es el sitio web de la marca 12storeez. Porque el minimalismo en su caso es la solucion perfecta. Aqui, este estilo proviene del producto que se vende. Los disenadores crean prendas minimalistas, y al colocarlas en el sitio, seria un error rodearlas con montones y elementos decorativos del sitio. Simplemente "comerian" el producto que se vende.
Colores puros
La segunda caracteristica importante del minimalismo. Vale la pena senalar aqui que antes, los disenadores se adherian a una paleta en blanco y negro, no se usaba un maximo de colores pastel, brillantes y llamativos. Pero el ano nuevo nos dicta nuevas reglas. Lo mas importante de utilizar cualquier color es que proporcione un buen contraste entre las imagenes y el fondo. El fondo blanco sigue siendo relevante. Se puede diluir con acentos semanticos brillantes, por ejemplo, en aquellos lugares donde la mirada debe caer primero.
Imagenes sin fondo
Con la ayuda de imagenes, el disenador crea una conexion emocional con el cliente, por lo que es importante no exagerar aqui. No tendras un segundo intento.
Reglas para la imagen en minimalismo:
- no debe contaminar el diseno: una simple foto / graficos sin pequenos detalles, elementos;
- el esquema de color puede ser cualquiera, lo principal es que contraste con el fondo y presente su producto de manera ventajosa;
- las imagenes deben ser del mismo estilo;
- utilice mas a menudo imagenes sin fondo para enfatizar aun mas el producto.
Espacio
La regla basica aqui es que menos es mejor que mas. El disenador elimina elementos innecesarios y deja solo lo principal. El espaciado correcto le permite llamar la atencion sobre las cosas correctas en el sitio. Una persona no tiene que digerir la informacion por mucho tiempo, busque lo que necesita. Como si una foto/grafico/texto colgado en el espacio ayudara al futuro cliente a no perderse en el flujo de informacion, se crea una atmosfera tete-a-tete.
Tambien es importante comprender que esta ligereza debe crearse como todo lo demas con la mente. Preste especial atencion a la parte superior del diseno. La mayoria de los usuarios dan su primera impresion de una empresa desde los primeros elementos del sitio. El segundo punto es como la adicion de espacios en blanco y espacio afectara el tamano del diseno. No a todos los usuarios les gusta desplazarse por mucho tiempo. La tercera tarea para el disenador y los desarrolladores es como se vera dicho sitio en un dispositivo movil. Si el texto es demasiado pequeno y la foto o las imagenes estan en pantalla completa.
3. Tema oscuro
?Has notado que no solo las redes sociales han comenzado a ofrecer ir al "lado oscuro"? Los sitios tambien ayudaran a ahorrar bateria en su dispositivo movil. Y esto no es solo una nueva tendencia, gigantes como Apple, Mercedes-Benz, Instagram, Telegram, WhatsApp, VKontakte, ASOS llevan mucho tiempo complaciendo a la vista, literal y figurativamente, de sus consumidores.
Es importante tener en cuenta que aqui, tambien, las empresas eligen la adaptacion, si una persona se sienta en un telefono, puede elegir un tema oscuro en el sitio o en la aplicacion. Es cierto que no todos los sitios tienen esta funcion en las versiones de escritorio. Entonces, por ejemplo, el sitio web de ASOS en su PC tendra un fondo blanco e imagenes estandar, pero en el dispositivo movil y en la aplicacion, puede elegir el "lado oscuro".
En realidad, ?por que los disenadores y desarrolladores web decidieron traer un poco de oscuridad a nuestras vidas? Primero, es mas saludable para sus ojos que la luz blanca brillante que lo rodea. Ademas, el negro es conveniente en la oscuridad. Hay que anadir que en una investigacion del 2020 se arrojaron datos en los que se concluia que la persona promedio pasa mas de 6 horas en Internet todos los dias, los ojos definitivamente se cansaran durante este tiempo. En segundo lugar, contra un fondo oscuro, las soluciones graficas pueden verse visualmente diferentes y mas ventajosas que las claras, lo que da rienda suelta a la creatividad. En tercer lugar, aumenta la relacion de contraste.
Ademas, los temas oscuros son excelentes para pantallas OLED (no solo televisores, sino tambien telefonos inteligentes Samsung), ya que ahorran energia y aumentan la vida util de la pantalla. Los tonos oscuros te permiten crear elementos creativos con brillo de neon, que tambien es una de las tendencias de diseno grafico de 2021.
4. Inteligencia artificial
La inteligencia artificial (IA) ya esta profundamente arraigada en nuestra vida en Internet. Cualquier chatbot que aparezca en el sitio web de una clinica medica o articulos para el hogar tambien forma parte de la inteligencia artificial.
En el estudio de Artemy Lebedev, una red neuronal funciono durante mas de un ano bajo la apariencia de un disenador real. Durante este tiempo, IA ha trabajado en 20 proyectos comerciales y con bastante exito. Un empleado remoto, Nikolai Ironov, fue creado bajo la etiqueta de secreto . Crearon una pagina de portafolio para el, y ninguno de los clientes habria pensado que los logotipos creados eran obra de la inteligencia de diseno artificial. Segun el estudio de Lebedev, la IA gana a los humanos en un indicador muy importante: a diferencia de un empleado de carne y hueso, una red neuronal no se basa en ver y ver el trabajo de sus colegas, es capaz de crear soluciones verdaderamente nuevas.
Segun las previsiones, cada vez mas veremos busquedas por voz en los sitios. Esto se debe al ritmo de vida de una persona, en el que dedicar tiempo a escribir tu solicitud es un lujo. En el futuro, alcanzar tal nivel de uso de IA que el sitio, conociendo a sabiendas las preferencias del cliente de acuerdo con los datos de BIG Data, construira la plataforma mas comoda para un usuario especifico (hola a los fanaticos de la serie Black Mirror). Pero esto todavia esta en el futuro, que no tiene un marco de tiempo.
5. Foto + graficos = amor
Un hibrido de fotos y graficos es otra tendencia en el diseno web del 2020 saliente y el proximo 2021. Este collage es un homenaje a los amantes del arte pop, creando no solo un estado de animo ludico, sino tambien una cierta superposicion. Esto agrega interes a su producto y servicio. Desafortunadamente, no todos los creadores y disenadores favorecen esta historia, prefiriendo soluciones estandar. Los competidores occidentales, por el contrario, estan incorporando facilmente fotografias y graficos en sus sitios, desde sitios de medios hasta comida y ropa. El uso de esta tecnica en el segmento mas reciente de productos puede indicar no solo que su empresa se mantiene al dia, sino tambien sobre el producto en si, sobre su publico objetivo. Por cierto, DePlace Maison utiliza otra caracteristica de "2021": animacion fluida. En el sitio web de la marca, su mouse sera una mancha negra, con la que definitivamente querra jugar, lo que significa que su tiempo de visita sera mas largo. Y esta es una garantia de que estudiara el sitio y sus productos sin siquiera saberlo.
6. Disenos asimetricos
A pesar de la tendencia de diseno al estilo de las redes sociales, tambien existe una tendencia natural para romper los limites y comprender el marcado de la pagina.
La cuadricula habitual, como la de las tiendas online o los recursos de noticias, se esta desvaneciendo. Aparecen nuevas formas que son diferentes entre si. Los limites estan realmente borrados y la ubicacion habitual de "Menu", "Contactos", "Acerca de nosotros", etc. puede parecer completamente poco convencional. Un diseno asimetrico al menos despertara la curiosidad del usuario, lo que significa que comenzaran a explorar su sitio y luego su producto. Mantendra al cliente en el sitio mas tiempo que la cuadricula cuadrada y clara habitual.
Cuando utilice la asimetria, no se olvide del equilibrio y la composicion, de modo que una parte de la pagina no “supere” a otra. Por ejemplo, la imagen no debe ser mas grande que el bloque de texto.
Resumamos quien deberia usar la asimetria y con que proposito:
- revivir la pagina de venta, centrando inicialmente la atencion de los usuarios en las cosas mas importantes;
- facilitar la percepcion visual de la informacion;
- uso mas rentable del espacio en la pagina;
- la propia situacion de asimetria se adapta bien al diseno emocional, el uso de imagenes / informacion de caracter publicitario, bienes que potencian los motivos emocionales;
- Se crea una sensacion de dinamismo, el sitio deja de ser aburrido.
Que no hacer en 2021:
1. Utilice muchas fuentes diferentes, tanto en tamano como en estilo.
?Para que sirve el texto del sitio? Para leerlo, aprenda sobre usted, su producto o servicio. Pero hay un gran "PERO": letra pequena o uso de un estilo de fuente complejo.
Una persona moderna mantiene la atencion durante 8 segundos; durante este tiempo, solo puede leer 18 palabras. Si su texto es mas grande y tambien en letra pequena, lo mas probable es que el usuario simplemente se desplace hacia abajo en la pagina. Modos de optimizacion: use video o animacion + voz para darle vida a su producto.
Los diferentes estilos de fuente tambien distraen y, a veces, molestan al usuario. Vieja escuela: la informacion en la que vale la pena enfocarse esta resaltada en negrita y el tamano del texto es mas grande, pero al mismo tiempo el desorden y la variabilidad hacen que la percepcion visual sea mas pesada. El consumidor primero intenta leer el nombre de la empresa, luego ve el numero de telefono y luego intenta leer el texto translucido y pequeno.
2. Usa controles deslizantes
Quien haya intentado abrir el sitio web MVideo o Zara desde el telefono al menos una vez, asiente con la cabeza en comprension. Los controles deslizantes no solo hacen que el sitio sea mas pesado, sino que tambien lo desactualizan.
Segun un estudio de Nort Dam University, solo el 1% de los encuestados hizo clic en el control deslizante. Al mismo tiempo, el 84% de los clics fueron solo en la primera diapositiva. El principio de la publicidad de banner en los sitios de motores de busqueda funciona aqui, por regla general, se ve como un control deslizante y se coloca en el costado del sitio, por lo que nadie le presta atencion.
3. Fuentes de bajo contraste
Esperamos que nadie haga esto mas, pero si entiende que este punto es sobre usted, llame/ escriba a los profesionales para corregir el error.
El editor de una revista australiana, Colin Wheeldon, decidio preguntar a sus lectores que color de fondo y texto consideraban aceptable:
- Texto negro sobre blanco: 70% bueno, 19% regular, 11% malo;
- Texto blanco sobre negro: 0% bueno, 12% regular, 88% malo;
- Texto blanco sobre violeta: 2% bueno, 16% regular, 82% malo;
- Texto blanco sobre azul real: 0% bueno, 4% regular, 96% malo.