25+ Agtergrondontwerptendense & Style vir 2023

Een van die belangrikste vroeë ontwerpbesluite wat jy sal neem, is watter soort agtergrond 'n projek sal dra. Moet dit 'n enkelkleur, kleurloos wees, gebruik nuwerwetse elemente soos geometriese vorms, gradiënte of houtnerfpatrone? Of sal 'n stewige agtergrondontwerp help om 'n projek te laat skyn?

Om op die hoogte te bly met agtergrondontwerpstyle is ook belangrik. 'n Modieuse agtergrondkeuse wys dat 'n webwerf-ontwerp modern is en die inhoud nuut is. 'n Moderne visuele raamwerk kan selfs 'n gebruiker aandui dat jy aan hul behoeftes dink en die beste gebruik maak van die gereedskap wat hul ervaring beter sal maak.

So hoe doen jy dit? Hier is 'n blik op agtergrondontwerpneigings en -style, met 'n paar wonderlike opsies om te probeer.

Verken agtergrondteksture

3D-illustrasie

Driedimensioneel enigiets is 'n groot neiging vanjaar. Illustrasies met 'n 3D-gevoel is funky en lig vir 'n ontwerp wat 'n sekere gevoel het.

Die truuk van hierdie agtergrondstyl is om 3D-elemente te kies wat werklik met jou inhoud werk. Illustrasies kan 'n volledige toneel wees of 3D-ikone gebruik wat tekstuur of 'n soort herhalende patroon skep.

Hierdie styl gee 'n sekere gevoel van die begin af. Dit is ligter en minder ernstig as sommige ander style, so jy wil seker maak jy gebruik dit met net die regte tipe inhoud. Andersins,meeste van hierdie agtergrondneiging skep 'n subtiele bietjie beweging. In die voorbeeld hierbo het die prent 'n bietjie weiering wanneer dit geaktiveer word.

Een om te probeer

Animatief is 'n versameling beeldsweef-effekte wat jy op jou webwerf kan gebruik.

Gelaagde, toneelillustrasies

Nog 'n agtergrondneiging wat besig is om te ontwikkel, is die gebruik van illustrasies. Terwyl ontwerpers al 'n geruime tyd illustrasies op die agtergrond gebruik, is hierdie illustrasies meer uitgebrei met gelaagde tonele en selfs 'n bietjie animasie.

'n Illustrasie kan aandag trek en onvergeetlik wees. Die ding wat moeilik is van 'n illustrasie, is dat hierdie agtergrondontwerpe taamlik besig kan wees, en jy sal die plasing en styl van ander elemente noukeurig moet beplan.

Die gebruik van die illustrasie in die voorbeeld hierbo is amper perfek. Met 'n off-senter plasing en wenke van animasie, dit komplementeer die teks en die res van die ontwerp goed.

Een om te probeer

Kreatiewe platontwerpbesigheidskonsep het 'n gewilde plat ontwerp met 'n kleurpalet en style wat hoogs bruikbaar is. Die skepper het verskeie illustrasie-opsies beskikbaar in hierdie styl.

Kleurbloklae

Kleurblokkering was 'n ontwerpneiging wat dissiplines oorskry. Jy sal dit vind in mode, huisversiering en webwerfontwerp.

Wat wonderlik is van hierdie styl vir ontwerpagtergronde, is dat dit kan weeshelder, en met gelaagdheid, visueel interessant. Dit werk met 'n verskeidenheid kleurpalette - wat wonderlik vir handelsmerke kan wees - en skep nie 'n agtergrond wat te kompleks of moeilik is om te bereik nie.

Gebruik 'n kleur-geblokkeerde laag met 'n helder of ligte agtergrond en voeg dan 'n tweede "agtergrond" in 'n ander kleur by. U kan dit sien in die portefeuljewebwerfvoorbeeld hierbo met 'n wit agtergrond en dan individuele elemente in blou bokse.

Plat kleur

Een van die dele van plat ontwerp wat nog nooit regtig weggegaan het nie, is die kleure van die styl. Hierdie kleure kom terug as agtergrondkleure.

Nie net is die styl om sterker skakerings vir die agtergrond te gebruik nie, maar om dit plat te gebruik. Geen gradiënte, geen variasie nie, net 'n soliede kleur agtergrond in 'n enkele kleur.

Hierdie agtergronde het dikwels realistiese lae bo-op en soms 'n rand of 'n ander agtergrond agter hulle om diepte te skep. (Jy kan hierdie volle effek uit die voorbeeld hierbo sien met wit rand rondom 'n beige agtergrond met 'n prent bo-op.)

Meetkundige vorms

Sirkels, veelhoeke en ander geometriese elemente is 'n groot deel van agtergrondontwerp in 2021.

Die vorms kan herinner aan kinderjare of net 'n prettige alternatief vir al die plat, enkelkleur agtergronde wat voorheen gewild was. Vir 'n moderne flair op meetkunde, hou by 'n eentonige kleurpalet en gebruikelemente met baie kontras om die meeste van die agtergrond te maak.

Hierdie agtergrondstyle kan ietwat spoggerig wees, soos die voorbeeld hierbo, of 'n gedempte kleurpalet met subtiele geometriese ondertone insluit.

Een om te probeer

Lineêre skadu-agtergronde sluit 10 groot en klein geo (of poli) vorms met prettige kleure en gradiënte in.

Lynpatrone

Van subtiele kurwes tot vetstrepe, lynpatrone word in gewildheid as 'n agtergrondontwerpelement.

Wat lyne laat werk, is dat dit beteken iets. Die beste lynpatrone help om die gebruiker in die ontwerp in te trek en lei die oog na ander visuele elemente, soos die pasgemaakte lynpatroon in die voorbeeld hierbo.

Lynpatrone kan groot of klein wees, en albei kan effektief wees afhangende van die doelwitte van jou projek.

Een om te probeer

Gegraveerde vektorpatrone bevat 16 herhalingspatrone vir agtergronde. Die stel bevat byna enige lynstyl waarvan jy dalk hou met reguit lyne, blokke en geboë lyne. (Herhaal van patrone is lekker want jy hoef nie bekommerd te wees oor “nate” waar patrone bymekaarkom nie.)

Gradiënte

As jy enigsins soos ek is, dan is jy een van daardie ontwerpers wat werklik 'n liefdesverhouding met gradiënte het. (Ek kan nie genoeg daarvan kry nie.)

Hierdie neiging is so buigsaam met agtergrondgradiënte wat slegs kleur is, agtergrondgradiënte wat 'n prent of video oorlê, of selfsgeanimeerde agtergrondgradiënte wat van kleur verander of skynbaar oor die ontwerp sweef.

Met soveel opsies is dit amper seker dat jy 'n werkbare oplossing kan vind wat met jou kleurpalet en ontwerpskema werk.

Borrels en knoppies

Alhoewel borrels en knoppies na geometriese vorms kan lyk, verskil hulle dikwels deurdat baie van hierdie elemente 'n mate van beweging insluit en die vorms taamlik onvolmaak is.

Hierdie neiging is geneig om op twee maniere as 'n agtergrondelement te werk:

• As 'n werklike agtergrond met borrel- of blobvormige elemente wat net daar is vir visuele belangstelling of om 'n bietjie kleur by te voeg die algehele ontwerp.
• As 'n "voorgrond" agtergrondelement, soos die voorbeeld hierbo. Borrels en knoppies is dikwels bewegende vorms wat deur die ontwerp opsweef om 'n meer gelaagde effek te skep, maar is "agtergrondelemente" omdat hulle geen funksionele rol dien behalwe om gebruikers se aandag te help trek nie.

One To Probeer

Vintage Bubble Backgrounds het 'n lewensgetroue borrelstyl-aantrekkingskrag, met 10 verbleikte borrelbeelde.

Woodgrain

Woodgrain-agtergronde is gewild wanneer dit kom by produkfotografie en toneelstylontwerpe.

Albei werk goed met hierdie element, want die houtnerf-agtergrond bied 'n natuurlike omgewing wat nie plat is nie. Dit is interessant, maar nie oorweldigend nie. Dit bied 'n interessante ligging om te help om fokus te bringna die ding wat in die agtergrond sit.

Om die meeste van houtgraanstyle te maak, probeer om die kleur van hout by voorgrondelemente te pas en kyk vir planke wat wyd of dun is, gebaseer op voorgrondelemente ook. Probeer om elemente te vermy wat in die "krake" tussen planke val.

Een om te probeer

Houtagtergronde bevat 10 verskillende opsies met kleur- en beligtingsveranderinge met prente wat meer as 3 000 pixels breed is.

Wit en Grys

Ligkleurige – wit en grys – agtergronde is 'n neiging wat aanhou vashou. Meestal afgelei van die minimalisme-tendens, hierdie agtergronde is eenvoudig en maklik vir die gebruiker. Hulle bied genoeg spasie en kontras vir ander elemente op die skerm.

Die meeste wit en grys agtergronde het een of ander element van tekstuur, soos 'n ligte gradiënt, gebruik van skaduwees om skeiding met voorgrondelemente te skep, of 'n soort van algehele patroon of tekstuur.

Een om te probeer

Vertoon-agtergronde bevat 12 agtergrondprente met 'n ligte kleurskema met slegs wit 'n ligte grys, wat dit 'n perfekte vervaag-in-die-afstand-ontwerpopsie maak.

Gevolgtrekking

Verander 'n ou ontwerp met 'n nuwe agtergrond. Iets so eenvoudig soos om die voorkoms van die ontwerpdoek te verander, kan 'n projek verfris.

Soek iets met 'n tikkie nuwerwetsheid om 'n meer moderne aanraking by jou ontwerp te voeg. Boonop al die "een om te probeer" opsieshierbo is gereed om af te laai en te gebruik.

Skep jou eie illustrasies of vind 'n UI-stel met die elemente wat jy nodig het. Voeg nog 'n vlak van visuele belangstelling by met 'n tikkie animasie, soos die voorbeeld hierbo.

Een om te probeer

Emoticon 3D Illustration is 'n prettige opsie met groot gesigte wat jy in 'n agtergrondrooster of met 'n meer ewekansige plasing kan laat val.

Pastelgradiënt

'n Pastelgradiënt-agtergrond kan sag of briljant wees, maar die neiging neig meer na sagter skakerings en subtiele graduering van kleur.

Wat lekker is van hierdie tipe agtergrond, is dat dit visuele belangstelling met 'n element van diepte byvoeg. Die styl kan met enige tipe inhoud en byna elke handelsmerkkleurkombinasie werk, wat dit 'n superpraktiese opsie maak as jy jou webwerf-ontwerp wil verfris.

Een om te probeer

1000 vierkante patrone bevat baie prettige herhalende elemente in 'n gradiëntstyl wat diepte aan enige webwerf-agtergrond kan gee.

Video

Agtergrondvideo word al hoe meer algemeen in webwerfontwerpprojekte. Dink hieraan as b-rol of video wat meer vir visuele doeleindes as storievertelling is.

Beweging kan help om die aandag 'n bietjie langer op 'n ontwerp te hou of belangstelling te skep met inhoud wat dalk 'n gebrek aan visuele spunk het.

As jy deur die voorbeeld hierbo klik, gebruik dit twee lae animasie – video in die agtergrond en bewegende teks in dievoorgrond om 'n prettige vertoning met baie impak te skep. Die video-agtergrond is 'n stylvolle bydraer tot hierdie estetika.

Een om te probeer

Goud moderne besigheidsvideo-agtergrond het eenvoudige beweging wat in enige ruimte kan werk.

Ligte vorms

Meetkundige vorms kan 'n goeie toevoeging wees as 'n subtiele laag agter ander elemente in 'n webwerf-ontwerp. Elemente met dun lyne en nie baie kleur nie, sal iets skep wat visueel interessant is en nie in die pad van die res van die ontwerp staan ​​nie.

Jy kan hierdie effekte na 'n ander vlak neem deur dit op soortgelyke maniere regdeur die ontwerp te gebruik en te verseker dat die vorm en styl wat jy gebruik relevant is vir die webwerf-inhoud as geheel.

Moenie bang wees om hulle ook op verskeie maniere te gebruik nie, soos omgekeerd, met super subtiele kleur, of effense animasies. Dit gaan alles daaroor om die regte gevoel vir die ontwerp te skep met 'n ekstra element om in die agtergrond betrokke te raak.

Een om te probeer

Simple Laine Handdrawn Patterns het dun lyne wat perfek by hierdie ontwerpneiging pas. Speel rond met grootte en plasing om dit vir jou te laat werk.

Gelaagde agtergrondprent

Dit is 'n agtergrondneiging wat ons nie verwag het nie – foto-agtergronde agter ander lae, insluitend teks, ander beelde of video's.

Hierdie beelde is geneig om wyehoekbeelde te wees wat maklik verstaanbaar is wat die verhoog vir die inhoud op diewebwerf. Hulle is die waardevolste wanneer hulle ekstra inligting verskaf om alles makliker te verstaan. Die uitdaging is dat hulle die ontwerp kan rommel of oorweldig as dit nie goed gedoen word nie.

Soek prente wat jy maklik kan vervaag en inhoud wat maklik is om met 'n oogopslag te verstaan. Oor die algemeen trek die beste opsies uit die algehele webwerfkleurpalet of sluit baie ongebruikte spasie in wat van een deel van die agtergrond na 'n ander vervaag.

Een om te probeer

Beautiful Seascape is 'n voorbeeld van 'n foto-agtergrond wat kan werk omdat dit net 'n gevoel van ligging vestig en die kleur kan gedemp word, indien nodig. Vir hierdie ontwerpneiging kan 'n beeld wat help om 'n liggingselement te skep nuttig wees.

Driedimensionele gevoel

Driedimensionele en tasbare agtergronde trek gebruikers in omdat hulle soos iets werklik lyk en voel. Gebruikers kan amper in die ontwerp duik en deel wees van wat hulle op die skerm sien, en daar is 'n sterk visuele aantrekkingskrag daarvoor.

Die moderne 3D-agtergrondneiging is meer as net skaduwees en vorms vir diepte. Hulle sluit ook animasie en tekstuur in wat die realistiese atmosfeer verbeter.

Die sleutel tot die maak van 'n 3D-agtergrondwerk is dat dit geloofwaardig moet wees, wat beteken dat die effek die werklikheid herhaal, of dit moet so vergesog wees dat dit natuurlik denkbeeldig is. Daar is 'n delikate lyn wat oefening vergbesonder goed.

Een om te probeer

Abstrakte 3D-agtergrond meng diepte-effekte met beweging vir 'n groovy agtergrond. Die elemente van beweging kan bydra tot 'n 3D-agtergrond, maar jy moet versigtig wees sodat jy nie 'n duiselingwekkende effek het nie.

Gelaagde elemente

Agtergrond- en voorgrondelemente hoef nie meer heeltemal op die skerm geskei te wees nie. Die samevoeging van agtergrondstukke met ander dele van die ontwerp kan ongelooflike diepte skep, bydra tot 'n driedimensionele effek (soos hierbo genoem), en gebruikers help om deel van die ontwerp te voel.

Hierdie agtergrondneiging is 'n uitbreiding van die samesmelting van illustrasie en werklikheid in beelde wat ons in 2020 en 2021 gesien het. 'n manier wat minder spotprentagtig is.

Helder kleurkeuses kan help om hierdie ontwerpe vorentoe te dryf met ekstra elemente van visuele belang met skaduwees of ander diepteboutegnieke.

Een om te probeer

Agtergrond Abstract Landing Page is 'n goeie beginner om hierdie effek te skep. Om net die regte lae van vorms en elemente te kry, begin met 'n agtergrondelement wat vorms bevat waarvan jy hou en voeg dan prente by die mengsel.

Vloeibare agtergronde

Vloeibare agtergronde word toenemend gewild omdat dit net so visueel interessant is.

Jy mag dalkvind hulle op een van twee maniere:

• As 'n subtiele vloeibare beeld agter ander elemente
• As 'n vloeiende animasie in die agtergrond

Albei konsepte is netjies om na te kyk en selfs in 'n stil vloeibare agtergrond, ontlok dit gevoelens van beweging. Die wateragtige gevoel van 'n vloeibare animasie of agtergrond het dikwels ook 'n ietwat kalmerende effek as gevolg van die natuurlike vloei op die skerm.

Een om te probeer

Liquid Backgrounds sluit hoë-resolusie-agtergronde in 'n paar kleurskemas in. Elkeen het 'n interessante tekstuur en kan teen heeltemal versadigde kleur of gedemp werk.

Foto's met 'n oorleg

Achtergrondprente blyk nooit oud te word nie en ontwerpers speel met verskillende maniere om kontras by beelde te voeg met oorlegsels en effekte wat die hele toneel bymekaar bring.

Oorlêers is interessant omdat daar soveel verskillende maniere is om dit te doen, van volkleurskerms tot gedeeltelike oorleggings tot die byvoeging van kleur en ander ontwerpelemente bo-op beelde.

Die werklike sleutel om 'n foto-oorleg-agtergrond te laat werk, is om genoeg kleur te gebruik om voorgrondelemente hoogs sigbaar te maak sonder om te veel van die agtergrondprent weg te steek.

Een om te probeer

Epiese foto-oorlegsels sluit 'n paar tendens-oorlegopsies in wat beide beelde donkerder maak en 'n dromerige effek bied. (Dit is gewild op sosiale media en begin ook in meer webprojekte insluip.)

DikDeursigtige

In skrille kontras is die neiging hierbo om dik kleurdeursigtigheid oor 'n prent of video te gebruik. Alhoewel hierdie effek baie kontras skep, maak dit die agtergrondprent amper onleesbaar.

En dit is wat die ontwerper met hierdie voorkoms probeer bereik. Dit werk die beste in gevalle waar kunswerk nie sterk is nie en dien hoofsaaklik om bykomende tekstuur te verskaf sodat die agtergrond nie net 'n soliede kleurblok is nie.

Wees versigtig met beelde of video's wat agter dik deursigtigheid gebruik word. Hulle behoort nie so interessant te wees dat mense hulle probeer verstaan ​​nie. Hierdie beelde moet maklik in die agtergrond vervaag.

Een om te probeer

APPO 3.0-sjabloon is ontwerp vir aanbiedings, maar wys wat jy met 'n dik deursigtigheid kan doen. Neem jou kleur of gradiënt op om tekselemente op die voorgrond te verbeter.

Waterverf

Waterverf-agtergronde is 'n nuwe weergawe van illustrasies en tonele in webwerf-ontwerp. Hierdie tendens sluit enigiets in wat 'n bietjie van 'n handgeverfde tekstuur het.

Wat lekker is van waterverf - en waarskynlik wat hulle gewild maak - is dat die styl 'n sekere sagtheid het wat sommige strenger agtergrondopsies kort. Waterverf het ook 'n outentieke gevoel wat die uniekheid van die inhoud wat jy gaan verken kommunikeer.

Laastens spruit waterverfstyle 'n bietjie grilligheid uit. Hierdie konsep blyk 'n te weesontwerp gevoel dat meer projekte op die oomblik probeer repliseer.

Een om te probeer

Waterverf-agtergronde met moderne vorms kombineer 'n paar neigings – waterverftekstuur met geometriese vorms. Die resultaat is redelik verstommend en hierdie stel lêers kan jou help om die toneel vir 'n verskeidenheid projekte te stel.

Volskermvideo

Video is al 'n paar jaar 'n agtergrondontwerpelement, maar dit word ietwat herontdek met hierdie neiging: volskerm-agtergrondvideo.

Responsiewe vorms stel ontwerpers in staat om video te skaal om die landingskerm te vul. Soos die voorbeeld hierbo, fokus hierdie neiging op die video met minimale effekte en elemente rondom dit.

Die amper filmiese ervaring trek gebruikers in en kan baie boeiend wees met die regte videogreep. Om die meeste van hierdie agtergrondontwerpneiging te maak, soek 'n video wat baie beweging en aksie het.

Opsies om te probeer

Envato Elements het 'n stewige versameling voorraadvideo - meer as 500 000 snitte - as jy 'n video-agtergrond moet begin en niks het om mee te werk nie.

Teks in die agtergrond

Jy dink dalk nie aan teks as 'n agtergrondelement nie, maar dit kan wel wees.

Kragtige lettertipes met groot woorde kan die agtergrond dra met beeldelemente wat hulle omring of selfs die ruimte binnedring.

Dit is dalk een van die moeilikste agtergrondeneigings om te trek omdat jy 'n balans tussen letters, beelde en responsiwiteit moet handhaaf, alles terwyl jy leesbaarheid behou.

Een om te probeer

Boxer-lettertipe is 'n funky, plaatvertoon-lettertipe wat amper gemaak is vir agtergrondgebruik danksy dik lyne.

Subtiele teksture

Subtiele teksture in die agtergrond kan diepte en dimensie by 'n projek voeg.

Daar is allerhande tekstuurpatrone om te probeer, maar die dominante neiging blyk spikkels (mees algemeen wit) oor 'n soliede kleur te wees.

Hierdie styl van tekstuur verskaf 'n growwe element aan die agtergrond en voeg 'n gevoel by dat die ontwerp nie te gepoleer is nie. Die beste deel van hierdie neiging kan wees dat dit met feitlik enigiets werk en jy kan dit selfs met ander agtergrondneigings saamwerk. (Die voorbeeld hierbo gebruik video en tekstuur.)

One To Try

Procreate Texture Brushes is 'n koel byvoeging propvol subtiele sandteksture vir gebruikers van die iPad-toepassing.

Hover Animation

Wie het gesê dat agtergrondprente staties moet wees?

Perfek geplaasde sweefaksies voeg die regte hoeveelheid beweging by andersins statiese agtergronde. Hierdie tegniek werk met foto's, illustrasies en selfs patrone of teksture.

Die truuk is dat dit 'n onverwagse element van genot by die gebruikerservaring voeg. Totdat die sweefaksie homself voordoen, weet gebruikers nie eers dat dit daar is nie.

Om die