Har du märkt alla flytande, gränslösa former i designprojekt nyligen? Användningen av bubblor och blobs är trending. Från enkla cirklar för att koppla samman slingor, till helskärmsblock som rör sig och flyttar, till enkla blobby? animationer, den här trenden dyker upp överallt.
Det fina är att medan du använder bubblor och blobs är ett trendigt designelement, finns det så många olika sätt att göra det, och du kommer inte sluta med en design som ser ut som om du bara försöker lägga till ett fashionabelt element. Här har vi en samling mini case-studier av webbdesign med bubbla och blob design trend.
Wed'ze
Vi använder coola färgade blobs - definieras av något avrundade element utan definierad form - för att markera produkter. Blossan ger fokus åt varje enskild uppsättning skidglasögon med en distinkt färgförändring, även om formen blir densamma.
Användning av intressant form och färg på en skarp vit bakgrund skapar en kontaktpunkt och gör en produkt som inte är allt det visuellt intressanta någonting att faktiskt engagera sig i.
Tack vare storleken skapas varje riktningsflöde också riktningsflöde från vänster till höger på skärmen, där användaren tittar på formen, skyddsglasögonen och sedan beskrivningen av objektet.
Liber Finance Group
Liber Finance Group använder en serie animerade bubblor för att skapa ett konstelement. Bubblor (definierad mer som ett runt och bouncy designelement) inkluderar solida och fyllda cirklar med still och rörliga delar.
Bubblor i denna design tjänar som en visuell tråd och ansluter delar av webbplatsen genom hela designen. Formen används under scrollen för att hjälpa till att dra i ögonen mot text och klickbara element samt skapa ett tema för en design som inte har mycket annan högvisuell information.
Användning av animering är ett effektivt sätt att skapa intresse med enkla former.
Drip Pop
Drop Pop använder en blob som logotypen på en alltför upptagen bakgrund. (Akta dig för rörelsens hastighet om du klickar på länken.)
Märket är ett behållarelement för ordmärket och fungerar med designalternativet som presenteras eftersom det gör att varumärket kan ses på en upptagen och färgstark design.
Medan denna logotypbehandling är intressant här kan det vara svårare att använda en teknik som denna långsiktiga.
Josh Dring
En serie överlappande blobs skapar ett visuellt collage för John Drings portföljwebbplats.
Tack vare användningen av färg och intressanta former känns webbplatsen varm och inbjudande. Medan du kanske inte är 100 procent säker på vilken typ av arbete han gör, bjuder den abstrakta designen in klick.
När du använder en bakgrund med blobs, tänk på lagringselement för att skapa en djupeffekt. Detta kan hjälpa till att dra ögat och göra designen mer engagerande.
Andy Patrick
Andy Patrick använder också blobs för hans portföljwebbplats, men med en helt annan inställning. I det föregående exemplet finns statiska blobs, förskjutningarna i denna design flyttas med små animeringar.
Varje blob har en nästan tredimensionell känsla för det också tack vare gradient färgval som betonar den rundade naturen hos varje blob. Det känns nästan som att du kan nå ut och röra på dessa element. (Jag föreställer mig att de har den mjuka, kladdiga strukturen av en bra stresskula.)
Iqor
Iqor använder långsträckta bubblor som en del av himnescenen och tillåter användare att se bortom molnen och se vad företaget gör.
Medan dessa bubblor är statiska i naturen, ger de riktningsrörelse tack vare en association med något som rör sig (moln på himlen). De fungerar exceptionellt bra tack vare informationen i den, som fungerar som en konst och ett informativt element.
Studio Volbloed
Studio Volbloed använder en annan statisk bubbla för bilderna i sidfotens sidfot för att visa kvinnorna bakom företaget.
Medan de flesta ursprungligen tänker på bubblor som dekorativa former, kan de också fungera som behållarelement för bilder. Vad som gör dessa bubblor fungerar är det vackra sättet som formerna förenar för att bilda en enda bild.
Den cirkulära formen speglas också på andra ställen i hela konstruktionen för en ljusbubbla närvaro som är synligt harmonisk.
Unter Freiem Himmel
Unter Freiem Himmel använder två animerade bubblor som ser ut som bubblor som skärmen laddar. Animationen slutar snabbt att lämna till nästan perfekt runda former ovanför platsnamnet.
Markören är också en enkel bubbla.
Den enkla skönheten hos de animerade bubblorna i denna design är imponerande och vacker. Detta exempel visar att du inte behöver lägga till många element och tekniker för att få en ändamålsenlig design. Det finns medfödd skönhet i enkelhet som den här webbplatsen visar.
Hashworks
Det sista exemplet i denna samling är från Hashworks. Vid första anblicken kanske du inte ens ser blobben; De är en ansluten enhet som fungerar som logotyp för företaget. Men den stora versionen av logotypen till höger innehåller en cool - och mycket blobby - animering. (Klicka igenom för att se den i åtgärd.)
Den animerade blob innehåller en massa bitar som fungerar som droppar olja i vatten med en flytande design med tydlig separation. De flyttar och vikar och studsar tills varje enskild blob i rörelse bildar den anslutna single blob-logotypen.
Det är en av de enkla och lysande animationer som du kan titta på om och om igen eftersom det är så bra gjort. Detta exempel - även om det inte är ett komplett designprojekt - är ett utmärkt exempel på denna trend i aktion.
Varje bubbla är annorlunda
Det är bra när en design trend har en teknik som du kan göra själv. Till skillnad från en färg trend där? Alla? använder en enda nyans eller avstånd eller grupperingstrender, som har en liknande känsla, med hjälp av bubblor och blobs kan vara ganska annorlunda för varje projekt.
Några av exemplen i mini-fallstudierna ovan liknar varandra, de representerar olika typer av branscher och är från olika platser runt om i världen. Och de har alla brukar använda bubblor och blobs gemensamt.
Bakgrundsstrukturer
Att välja rätt bakgrundsstruktur för din webbplats eller designprojekt kan vara svårt. Vår serie lär dig hur du ska arbeta med och integrera bakgrundsstruktur, samt var du kan hitta fantastisk grafik att arbeta med.