En av de vanligaste frågorna vi får är en variant av vilken typ av bakgrund någon ska använda för sin webbplats. Dessa designers har det grundläggande innehållet och layouten är ganska nypa, men bakgrunden är antingen för tråkig eller för upptagen och de vet inte hur man fixar den.
Idag ska vi ta en titt på några levande webbplatser för att få lite inspiration om hur man effektivt lägger till intressanta bakgrunder på en webbsida. Bokmärk den här artikeln och kom tillbaka till den nästa gång du fastnar på ett bakgrundsbeslut.
# 1 Sketch It
Denna typ av bakgrund blev populär för några år sedan och kvarstår fortfarande idag. Det springer från tanken på en anteckningsbok full av klotter, som den typiska tonåren i engelskklassen. Allt har ett grovt, snabbt skisserat utseende och sidan är en ganska slumpmässig samling av idéer som alla är utspridda och placerade vid olika rotationer.
NotchStudio drar den här idén bra ut och på ett ganska dämpat sätt.
Även om du inte kan rita, är det här utseendet ganska lätt att dra av som klotterna är vanligtvis super grundläggande. Om du har en Wacom eller iPad, är det ganska lätt att spåra några av dina egna foton eller tryckt text på ett sätt som speglar denna stil. Det finns också massor av fria teckensnitt som Pointy som hjälper dig att dra bort fantastisk skisserad text med nollansträngning.
# 2 Subtila Perkament
Pappersstrukturer har alltid fascinerat designers och vi kommer troligen att använda dem under de kommande åren. Den nuvarande trenden är inte så mycket den intensiva grungen för några år sedan men snarare en mycket mer subtil effekt som du lätt kan missa om du inte letade efter den.
Lägg märke till hur texturen som används på Beautiful Type hemsida nedan inte är distraherande eller överdriven men istället bara ger en fin finish till en webbplats som redan ser bra ut utan det.
Kolla in förlorade och tagna för massor av bra texturer som du kan använda i alla dina mönster.
# 3 En radial gradient
Gradienter har fått en dålig rap på senare tid från designers som tycker att de är överanvändna. Jag tror personligen att de lätt missbrukas och dåligt utförda, men kan aldrig se en tid när alla mönster överallt använder rena solida färger med absolut inga graderingar. Eftersom gradienterna speglar verkligheten (vi ser aldrig rena, oförstörda solfärger i den naturliga världen) kommer konstruktörer att fortsätta använda dem för att göra deras mönster mer verkliga.
Med gradienter är det ofta bäst att bara hålla sakerna enkla. Blanda inte galna färger och skapa leriga övergångar, välj istället för en enkel gradient. En av mina favoriter är den goda gamla grå till svart (eller mörkare grå) radial gradient. Det är rent och enkelt att implementera och ser riktigt snyggt ut.
Du kan se detta i praktiken på webbplatsen 177themes som visas nedan.
# 4 Tvåfärgad det!
En annan lösning som jag tycker är särskilt elegant eller djärv (beroende på utförandet) är att göra en hård övergång direkt genom sidan. Detta görs oftast horisontellt men kan känna sig mer unikt och iögonfallande om det görs vertikalt.
Tanken här är att utnyttja kontrastens magi. Våra ögon är naturligt drabbade av kontrast, vi kan helt enkelt inte låta bli att se! Nyckeln till att dra av den här metoden är att se till att dina två färger verkligen kontrasterar. Välj inte någonting som strider mot eller kolliderar, istället prova en riktigt mörk färg och sedan en riktigt ljus nyans av samma färg.
Mitt favoritverktyg för att bygga dessa typer av kombinationer är 0 till255, vilket gör att du snabbt och enkelt kan fånga webvärden för variationer av vilken färg som helst.
# 5 Full Screen-bilder
Jag nämner den här tanken så mycket att du är förmodligen sjuk av det, men jag fortsätter att borra den i ditt huvud så länge jag kan: bra fotografering gör för en bra design. Det är enkelt och enkelt. Vi älskar alla att titta på ett bra foto så att arbeta i din design skapar en webbplats som alla älskar att titta på. Lätt rätt?
Bilder ger inspiration till hela webbplatsdesignen. Du kan fånga färger, texturer och till och med typografi inspiration från ett foto och skapa ett trevligt sammanhängande tema.
Kolla in hur den mörka naturen hos de designade elementen på webbplatsen nedan speglar utseendet på många av de bilder som används på hemsidans bildspel.
Om du undrar hur du kodar en webbplats så här, kolla in vår senaste artikel, enkelt skapa en fullskärmsfotospelningshemsida utan Flash.
# 6 Texture to Color blekna
Ett knep som jag verkligen tycker om, jag har sett mycket på sistone, är att använda ljuseffekter eller något liknande att kasta in en liten bit textur på toppen av en sida, vilket snabbt bleknar till en fast färg.
Texturer kan enkelt minska läsbarheten hos din text och lägga onödigt visuellt ljud på en annars användbar sida. Hintning på en textur på en plats gör det möjligt att skörda fördelarna med det extra ögonhudet utan att offra den övergripande estetiska och / eller läsbarheten på webbplatsen.
Vi känner oss ofta för att välja en textur, vi måste översvämma bakgrunden med den med hjälp av en CSS-bakgrundsrepetition. Försök att vara mer selektiv med var din textur går och du hittar dina mönster omedelbart snyggare.
# 7 Slå upp
Himlen är en konstant och fantastisk distraktion för människor. Moln, strålning av solljus, stjärnor, planeter, månen; alla dessa föremål håller en slags magisk plats i våra sinnen som gör dem oemotståndliga för ögat.
Var försiktig när du införlivar dessa element i din bakgrund, det är super lätt att skapa något fult och / eller kliché. Denna teknik bör endast användas av designers som har en verklig känsla för estetik och hur man tar en idé som? Utrymme? och gör inte det som något från en gammal Windows skärmsläckare.
Webbplatsen nedan är ett bra exempel på en riktigt vacker himmelsk plats som används som en stark hemsidabakgrund. Planeterna görs vackert med en vintagefärgssvibe och en subtil struktur som tillhandahålls av diagonala linjer. Det här är den typ av uppmärksamhet på detaljer som du borde vara bekant med innan du slänger en himmelbakgrund på din webbplats.
# 8 Argyle
Jag kan höra dig nu? Argyle? Är du galen?? Innan du går på mig i kommentarerna kan diamantmönster ge några riktigt attraktiva resultat. Men som med föregående tips bör de inte försökas av någon utan erfarna designers som vet hur man använder ett galet mönster utan att skapa en riktigt ful webbplats.
Kolla in den riktigt fina användningen av denna idé på hemsidan nedan. Det modifierade argyle-stilmönstret finns bara där för att lägga till några fina färgstarka accenter och går inte riktigt för att fånga din uppmärksamhet.
# 9 Abstract & Crazy
Är du sjuk på mina förslag att vara försiktig? och? ta det lugnt med subtila designrör? Tja, så är det här tipset för dig. Ibland är den bästa bakgrunden något galet och djärvt som inte behöver ge mening med innehållet på sidan, det drar bara och håller din uppmärksamhet.
Jag trodde att båda sidorna nedan drog det här väldigt snyggt ut. Lägg märke till hur den andra ser ut som en målade akvarellbit. Detta är en mycket populär teknik som du kan hitta massor av resurser på nätet för att efterlikna.
Sök iStock med termen "abstrakt vattenfärg? för att se vad du kan hitta. Det finns många billiga bilder i den här kategorin som verkligen kommer att öka visuellt intresse för din sida.
# 10 Var inte rädd för soliga färger
Allt råd ovan är tänkt att uppfylla dina krav på bra idéer på webbplatsen. Men det är väldigt viktigt för dig att förstå som en formgivare att det inte finns något fel på det solfärgade vita utrymmet. Det är en viktig ingrediens i många av mina favoritartister på heltid och lär dig hur du ska hantera det är en viktig del av att bli designer.
Kolla in den underbara Fuzion Ads hemsidan nedan. Designen är verkligen en typografisk fest och båda håller din uppmärksamhet och kommunicerar effektivt trots att bakgrunden bara är en vanlig gammal tråkig solid färg!
Var noga med att kolla Piknik, ett gratis verktyg som du måste lägga till i din designarsenal. Den här webbplatsen gör det super lätt att förhandsgranska och välja färger för att fylla din skärm med. Du flyttar helt enkelt musen och bakgrunden ändrar färg.
Slutsats
Bakgrunden du väljer ställer in tonen och personligheten för hela din webbplats. Jag arbetade just nu med en formgivare som ville ha sin hemsida i vårt galleri, men hade helt enkelt valt en riktigt dålig bakgrundsbild. Webbplatsens design och layout var bra, men jag kunde inte komma över den fula bakgrunden. När jag pekade på det kom han överens och bytte till något mycket enklare som verkligen tog platsen till en helt ny nivå.
Som jag sa i de inledande punkterna, nästa gång du fastnar i en designrut och inte kan välja en bra bakgrund för din webbplats, kom tillbaka till det här inlägget och prova några av de idéer jag lagt fram här. Förr eller senare är du tvungen att landa på en som bara är perfekt för ditt projekt.
Som alltid tack för att du läste! Om du tyckte om artikeln, ge oss en tweet, Stumble, Like eller något annat du är med!