Designtrend: Bubble & Blob-achtergronden
Heb je onlangs alle vloeiende, grenzeloze vormen in ontwerpprojecten opgemerkt? Het gebruik van bubbels en klodders is populair. Van eenvoudige cirkels tot onderling verbonden lussen, tot blobs op volledig scherm die bewegen en verschuiven, tot eenvoudige 'blobby'-animaties, deze trend duikt overal op.
Het leuke is dat terwijl het gebruik van bubbels en klodders een trendy designelement is, er zoveel verschillende manieren zijn om het te doen, en je niet zult eindigen met een design dat eruitziet alsof je gewoon een modieus element probeert toe te voegen.
Hier hebben we een verzameling mini-casestudy's van website-ontwerpen met de bubbel- en blob-designtrend.
Achtergrond texturen
Wed'ze
Wed'ze gebruikt coole gekleurde klodders - gedefinieerd door enigszins afgeronde elementen zonder gedefinieerde vorm - om producten te markeren. De blob brengt focus op elke verschillende skibril met een duidelijke kleurverandering, hoewel de vorm hetzelfde blijft.
Het gebruik van de interessante vorm en kleur op een spierwitte achtergrond creëert een brandpunt en maakt een product dat niet zo visueel interessant is, om iets mee te doen.
Dankzij de grootte creëert elke blob ook een gerichte stroom van links naar rechts op het scherm, waardoor de gebruiker wordt getrokken om naar de vorm, de bril en vervolgens de beschrijving van het item te kijken.
Liber Finance Group
Liber Finance Group gebruikt een reeks geanimeerde bubbels om een kunstelement te creëren. Bubbels (meer gedefinieerd als een rond en veerkrachtig ontwerpelement) bevatten solide en gevulde cirkels met stilstaande en bewegende delen.
Bubbels in dit ontwerp dienen als visuele draad en verbinden delen van de website door het hele ontwerp. De vorm wordt onder de schuif gebruikt om de aandacht te trekken naar tekst en klikbare elementen, en om een thema te creëren voor een ontwerp dat niet veel andere zeer visuele informatie bevat.
Animatie is een effectieve manier om interesse te wekken met eenvoudige vormen.
Drip Pop
Drop Pop gebruikt een blob als logo-markering op een veel te drukke achtergrond. (Pas op voor de bewegingssnelheid als u op de link klikt.)
Het merk is een containerelement voor het woordmerk en werkt met de gepresenteerde ontwerpoptie omdat het de branding laat zien op een druk en kleurrijk ontwerp.
Hoewel deze logobehandeling hier interessant is, is het misschien moeilijker om een techniek als deze op lange termijn te gebruiken.
Josh Dring
Een reeks overlappende blobs creëert een visuele collage voor de portfolio-website van John Dring.
Dankzij het gebruik van kleur en interessante vormen voelt de site warm en uitnodigend aan. Hoewel je misschien niet 100% zeker weet wat voor soort werk hij doet, nodigt het abstracte ontwerp wel uit tot klikken.
Denk bij het gebruik van een achtergrond met blobs na over gelaagde elementen om een diepte-effect te creëren. Dit kan helpen om de aandacht te trekken en het ontwerp aantrekkelijker te maken.
Andy Patrick
Andy Patrick gebruikt ook blobs voor zijn portfoliowebsite, maar met een totaal andere aanpak. Waar het vorige voorbeeld statische blobs bevat, verschuiven en verplaatsen de vormen in dit ontwerp met lichte animaties.
Elke blob heeft ook een bijna driedimensionaal gevoel dankzij de kleurkeuzes met verloop die de ronde aard van elke blob benadrukken. Het voelt bijna alsof je deze elementen kunt aanraken en aanraken. (Ik stel me voor dat ze de zachte, zachte textuur hebben van een goede stressbal.)
Iqor
Iqor gebruikt langwerpige bubbels als onderdeel van de luchtscène en stelt gebruikers in staat verder te kijken dan de wolken en te zien wat het bedrijf doet.
Hoewel deze bellen statisch van aard zijn, zorgen ze voor gerichte beweging dankzij een associatie met iets dat beweegt (wolken aan de hemel). Ze werken uitzonderlijk goed dankzij de informatie die erin is vervat en dienen als een kunst- en informatief element.
Studio Volbloed
Studio Volbloed gebruikt een andere statische bel voor de afbeeldingen in de voettekst van de pagina Over om de vrouwen achter het bedrijf te laten zien.
Hoewel de meeste mensen bubbels aanvankelijk beschouwen als decoratieve vormen, kunnen ze ook dienen als containerelementen voor afbeeldingen. Wat deze bubbels laat werken, is de prachtige manier waarop de vormen zich verbinden om een enkele afbeelding te vormen.
De ronde vorm wordt ook weerspiegeld op andere locaties in het ontwerp voor een lichtbubbelaanwezigheid die visueel harmonieus is.
Unter Freiem Himmel
Unter Freiem Himmel gebruikt twee geanimeerde bubbels die op bubbels lijken terwijl het scherm wordt geladen. De animatie stopt snel om te vertrekken naar bijna perfect ronde vormen boven de sitenaam.
De cursor is ook een simpele bubbel.
De simpele schoonheid van de geanimeerde bubbels in dit ontwerp is indrukwekkend en mooi. Dit voorbeeld bewijst dat je niet veel elementen en technieken hoeft toe te voegen om een indrukwekkend ontwerp te hebben. Er is aangeboren schoonheid in eenvoud, zoals deze website laat zien.
Hashworks
Het laatste voorbeeld in deze collectie is van Hashworks. Op het eerste gezicht zie je de blobs misschien niet eens echt; ze zijn een verbonden eenheid die dient als logo voor het bedrijf. Maar de grote versie van het logo aan de rechterkant bevat een coole - en erg blobby - animatie. (Klik door om het in actie te zien.)
De geanimeerde klodder bevat een aantal stukjes die functioneren als oliedruppels in water met een vloeiend ontwerp met duidelijke scheiding. Ze bewegen en vouwen en stuiteren totdat elk van de individuele blobs in beweging het verbonden enkele blob-logo vormt.
Het is een van die simpele en briljante animaties die je keer op keer kunt bekijken omdat het zo goed is gedaan. Dit voorbeeld - hoewel niet een volledig ontwerpproject - is een goed voorbeeld van deze trend in actie.
Elke bubbel is anders
Het is geweldig als een designtrend een techniek heeft die je zelf kunt maken. In tegenstelling tot een kleurentrend waarbij 'iedereen' een enkele tint of spatiëring of groeperingstrends gebruikt, die hetzelfde aanvoelen, kan het gebruik van bubbels en klodders voor elk project behoorlijk verschillen.
Weinig van de voorbeelden in de bovenstaande mini-casestudy's lijken op elkaar, ze vertegenwoordigen verschillende soorten industrie en komen van verschillende locaties over de hele wereld. En ze hebben allemaal gemeenschappelijk gebruik van bubbels en klodders.
