Design Trend Waves och "Soft" Lines

Det finns en mjukare designutveckling som tar över webbplatsprojekt - vågor och mjuka linjer. Var bakgrund har dominerats av singel? Platt? färg, vi ser ett skifte mot krökta linjer och vågor.

Elementen är ljusare, mjukare och framkallar en annan övergripande känsla för designen. Det som är särskilt trevligt är att vågor och mjukare linjer kan användas på många olika sätt så att varje design känns helt annorlunda. (Det är en av de trender som nästan kan smyga på dig eftersom det förekommer i så många former.)

Här är en titt på vågorna och? Mjuk? linjer trenden i webbdesign.

Design accenter

När rektanglarna och cirklarna bara inte fungerar för stämningen i ett projekt, kan blobs och vågor vara lösningen. För små splittrar för specifika delar till större element som kräver uppmärksamhet, kommer de mjukare linjerna att få användarna att hoppa runt designen.

Papillons de Nuit-festivalen gör ett bra jobb med hjälp av vågor för att belysa delar av evenemanget. Vågbaserade element separeras på en ljus bakgrund och varje innehåller något speciellt: det övre hörnet har en aning av animering, "zapping" elementet innehåller flera vågor och nedersta hörnet drar dig till sociala medier. På rullningen hjälper fler vågor och mjuka avdelningar att ansluta bilder och artister vid evenemanget.

Även om denna design kan vara för mycket för en e-handelsplats eller finansinstitut, är det en bra lösning för en händelsessida. Utseendet är roligt, engagerande och lätt (alla element som hjälper till att driva händelsestrafik.)

Rita ögat mot en CTA

Minimal stil design och platta illustrationer är fortfarande ett populärt designelement. Lägga till vågor kan hjälpa till att rita ögat mot specifika delar av konstruktionen, inklusive ett uppmaning till handling.

Medan du kan åstadkomma detta med en pil eller ett triangulärt element, ger vågen ett subtilare direktiv. Användare känner inte som att de tvingas till det klickbara elementet eller meddelandet.

Recruitz använder vågor för att skapa åtskillnad mellan uppmaningen till handling och testinformationen längst ner på skärmen. Den mjuka delaren hjälper ögat att gå fram och tillbaka mellan element med lätthet och skapar djup mellan element så designen känns inte ren. (Det ljusa färgschemat hjälper också.)

Vågillustrationer

Medan vågor kan vara ett imponerande fristående element för en bakgrund, kan de också införlivas i en illustration. Denna mjukare känsla är något annorlunda än många av de hårda linjerna och minsta ikoner som har varit populära så sent som möjligt, men resultatet är en lättvisuell bild som användare kan hoppa in i.

Vågor kan också bidra till att skapa mjukare vitt utrymme. Retrace Health använder en bakgrund med en våg för himlen som rör sig långsamt över skärmen. Vågens ebb och flöde ökar och minskar utrymmet mellan bilden och rubriken, vilket bidrar till att skjuta upp ögat genom att göra subtila förändringar i mängden vitt utrymme mellan element.

Balansera hårda linjer

Vågor kan göra mer än bara stå på egen hand; vågor kan också fungera som bakgrundsdelar för att balansera hårda linjer eller andra element i den visuella planen. Om estetiken är för hård eller behöver lite balans för att bara känna rätt, överväga en vågformig elementfix,

Ghafaris design innehåller en subtil våg som du inte ens kan se vid första ögonkastet. Ögonet är mer dragit mot den intressanta formen på fotot, ljusfärgad text och till och med guldknappen i övre hörnet. Men en gråvåg är det stycke som drar allt ihop. Vågbalansen balanserar de tyngre, hårda formerna så att konstruktionen inte känns skrynklig eller avlägsnad. Det är enkelt och faller helt i bakgrunden.

Denna teknik är viktig att överväga. Inte alla designelement finns för att berätta för användarna något. Ibland är designelementen mer osynliga och spelar en stödroll för att hjälpa projekten att upprätthålla balans och skapa den rätta känslan.

Upprätta bakgrundsskillnad

Vågor och mjuka linjer verkar vara ett element som kan göra materialbaserad skiktdesign ser lite mindre formell ut. I stället för strikta rektanglar och cirklar för lager eller kortbaserade element kan bakgrundsvågor skapa samma typ av separation.

Som med andra exempel är resultatet lite ljusare med en mindre krävande ton.

Vågor kan också fungera bra med en annan trend - gradienter. Algolia gör ett bra jobblagringselement i båda stilar. Designen, även om den använder flera effekter, känns enkelt och lätt att läsa.

Skapa engagerade animeringar

När du tänker? Våg ,? havet kommer antagligen att komma ihåg. En standardvågliknande animering sparades till sist för att hålla den här logiska föreningen från att krossa dig när det gäller denna design trend.

Men det är en perfekt användare av vågor. Animerade vågor kan efterlikna rytmen och det naturliga flödet av havet för att skapa en lugnande och harmonisk visuell.

Futuramo gör detta med Relativity of Time-webbplatsen. Bakgrundsvågorna flyter sömlöst in i varandra. De är enkla och rör sig på ett naturligt sätt. Vad som är annorlunda är att sätten faktiskt inte har något att göra med innehållet på skärmen. De ställer helt enkelt scenen för en lugnande upplevelse som användaren rör sig genom resten av innehållet.

I det här exemplet kan du fånga en publik med ett enkelt visuellt tema som bär innehållet. Det ansluter också bra på grund av tidens aspekt i berättelsen som berättas genom innehåll och design.

Slutsats

Linjer med mer krökning skapar ett annat flöde och humör för projekt. Det enkla tillägget av en kurva på en rak linje kan förskjuta känslan av ett helt projekt, vilket gör det mindre tungt och mer engagerande.

Användare verkar dra till dessa element eftersom de nästan välkomnar dem till designen. Hur känner du dig om vågor och mjuka linjer? Dela dina tankar och exempel med oss ​​på Twitter. (Se till att märka Design Shack.)