Explore las tendencias de estilo lineal inspiradas en el producto SAAS Linear
El diseño de estilo lineal se ha vuelto cada vez más popular en los últimos años y es posible que lo hayas visto en varios sitios web. Presenta un fondo oscuro con colores degradados lineales, desenfoques, serpentinas dinámicas y efectos de micromovimiento en la interfaz.
El término “Linear” proviene del producto Linear de SAAS, el cual tiene un diseño brillante que influyó en este estilo y lo convirtió en tendencia. El estilo lineal es un estilo de diseño en modo oscuro elegante y fácil de usar.
sitio web lineal
Según el fundador de Linear, Karri Saarinen, Linear está diseñado para parecer “profesional” a los ingenieros, con una fuente sans-serif de color gris oscuro llamada Inter sobre un fondo negro y una esfera violeta degradada como logotipo. Se basa en los entornos de codificación en negro que prefieren muchos ingenieros, lo que minimiza el consumo de batería y la fatiga visual.
Muchos sitios web han adoptado el estilo lineal y aquí hay cinco ejemplos:
Lineal
El color degradado de Linear, el movimiento pequeño y elegante y el fondo oscuro del tema le dan una sensación de software de trabajo profesional y severo.
2. Raycast
Raycast utiliza colores brillantes sobre un fondo oscuro, con efectos de luz lineales en la página.
3. Reflexionar
Reflect presenta un movimiento excelente, haciendo que toda la página parezca una obra de arte.
4. Puerta gemela
Twingate presta gran atención al detalle, con pequeños movimientos de aspecto profesional.
5. SAASUI
SAASUI tiene un diseño de página de destino estándar pero incorpora el estilo Lineal, dándole un aspecto profesional y moderno.
Además de los cinco ejemplos que analizamos anteriormente, muchos otros sitios web muestran el diseño de estilo lineal. De hecho, la popularidad de este estilo ha llevado a algunos chistes a sugerir cambiar el nombre del “modo oscuro” a “estilo lineal”.
Ahora, aprendamos rápidamente cómo crear un efecto de degradado lineal en Figma.
Paso 1
Agrega una elipse o cualquier forma que prefieras y selecciona “Angular” en el color de relleno.
seleccione “Angular” en el color de relleno de Figma
seleccione “Angular” en el color de relleno de Figma
Paso 2
Establezca los colores angulares usando los códigos hexadecimales a continuación.
Hexadecimal: 08AEEA(100%)-2AF598(50%)-B5FFFC(30%)-FF5ACD(80%)-FFFFFF(100%)
establecer los colores angulares
Paso 3
Agrega un efecto de desenfoque de capa a la forma.
agregar un efecto de desenfoque de capa a la forma
establecer el número de desenfoque
Etapa 4
Duplicar la elipse
duplicar la elipse
Paso 5
crear una mascara
crear una máscara
Paso 6
Ajuste el ángulo de la elipse duplicada para lograr el efecto deseado.
ajustar el ángulo de la elipse duplicada
ajustar el ángulo de la elipse duplicada
¡Voilá!
En conclusión, el estilo Linear representa el ingenio de los diseñadores y desarrolladores a la hora de crear un software excelente para los usuarios. Este estilo tiene que ver con el profesionalismo y la perfección y, como dijo Karri Saarinen, fundadora de Linear, “Cuando miro las cosas, puedo ver: 'Esto podría ser mejor'”.
Referencia:
Diseñar para los desarrolladores
Linears: una colección de sitios web inspirados en Linear
什么是 Lineal 设计风格？
El efecto lineal
Lineal: Léame
N.º 21 Diseño de producto: Karri Saarinen (lineal)