Detta är inte din typiska förteckning av texturer som ska användas för bakgrundswebbplatser. Om du letar efter en specifik struktur, har vi de här. Men vad händer om du vill skapa din egen? Eller hitta ett sätt att anpassa en struktur som passar ditt projekt? Det är vad vi ska fokusera på idag.
Medan det finns många sätt att använda texturer i webbdesign, får du mycket mer körsträcka ur bakgrunden om du tar ett modernt tillvägagångssätt och följer några enkla regler. Här är sju tips som hjälper dig att använda bakgrundsstruktur i webbdesign väl (och i linje med 2018 designmönster och trender).
1. Gå Enkel och Understated
En bra bakgrundsstruktur kan inte ens märkas av många användare. Det bör vara ett nästan osynligt element som bidrar till övergripande läsbarhet och användbarhet samtidigt som djup eller visuellt intresse ges.
Enkel och diskret bakgrundsstruktur är det perfekta sättet att göra detta. För en händelse i slutet av förra året använde Githubs universekonferens en design som innehöll en enkel svart bakgrund med vita prickar. Natthimmelseffekten faller verkligen in i bakgrunden, så att logotypen och händelsesinformationen är rolig att hitta.
Enkel bakgrundstekstur tenderar att ha små eller snäva repeterande mönster och kan vara nästan vilken som helst färg. Tanken är att dessa bakgrundsstruktur inte är en kontaktpunkt. De tjänar till att ge uppmärksamhet åt resten av designen.
2. Gå stor och fet
Kanske subtil är inte din sak. Om så är fallet, välj en stor och djärv bakgrundsstruktur eller ett mönster.
Dessa större än livsstilar fungerar för mönster där förgrunden är mer text- eller användargränssnitt-tung, och det finns inga andra konkurrerande bilder att hantera. Genom att använda denna typ av bakgrund kan textur bli svårt, från att skapa ett kakelmönster som är osynligt för användaren för att hålla bakgrunden från att oavsiktligt bli huvudfokuspunkten för hela designen.
För att säkerställa att din överdimensionerade bakgrundsstruktur fungerar, håll ögonen på analys och användarvanor en gång för att göra ändringen. En kraftig minskning av trafik eller omvandlingar är ett tecken på att du inte kan ansluta bilder och användare.
3. Inkorporera en trend
En bakgrundsstruktur med en trend kan få din design att känna sig supermodern och fräsch.
Med geometriska former som all raseri just nu är det inte konstigt att Apacios hemsida är tilltalande. Med en mix av ljusfärgad geometri på en mörk bakgrund skapar mönstret en fin struktur och djup som hjälper användaren att fokusera på den stora texten och uppmaningen till handling eftersom dessa element står i kontrast till bakgrunden. Texten - enkel sans serif bokstäver - verkar lyftas precis utanför de gröna formerna.
Layering av texturer bidrar också till denna övergripande effekt. Observera att färg skiljer två lager av bakgrunder med mörkare element? Bakom? ljusare element.
4. Använd en bild
En bakgrundsstruktur behöver inte vara ett repeterande mönster som du drar från en nedladdningssida. Några av de bästa bakgrundstexturerna är bilder som relaterar till varumärket eller huvudmeddelandet för att lägga till en annan nivå av visuellt intresse och engagemang.
Tricket är att tona bilden i bakgrunden effektivt. (Och det betyder inte nödvändigtvis att använda en blekna teknik.) Att blekna i bilden innebär att den sjunker ut från huvudbildområdet och i avståndet.
I exemplet ovan gör Oxeva det på två sätt: Det mörknar fotot så att endast konturer är synliga för stadsbilden och det använder en djärv färgbehandling i förgrunden för att dra ögat naturligt. Bilden har också något av en suddighet, så att bilden är urskiljbar, men inte med en detaljnivå som gör att fina punkter på fotot är viktiga.
5. Använd färgvariationer
Blanda och matcha toner och toner från samma färgpalett för att skapa en fet textur från bokstäver eller former. Färgvariationer, även de i samma familj, kan skapa djup och visuellt intresse.
Typtyper använder en rolig kombination av färger med jätte bokstäver för att skapa bakgrundsstruktur. Även utan tekniker som gradienter eller skuggor skapar linjerna från brevformar djup och balans samtidigt som de hjälper till att dra ögat till var färgerna i bakgrunden möts och huvudrubriken är belägen.
6. Ta en Gradient
Gradienterna är trendiga och visuellt engagerande. När det gäller att använda en lutning som bakgrundsstruktur, kan du använda den ensam eller lagra den med ett foto.
Nästan alla färgkombinationer går, så att använda en gradient för att skapa textur och djup är inte svårt. Du kan hitta en gradientkombination du älskar från WebGradients om du inte redan har färgprover i åtanke att arbeta med.
Mobipaid använder flera, subtila gradienter för att skapa djup och textur i bakgrunden. Illustrerade animationer i förgrunden dyker nästan ut över gradienterna, och det mörka färgade samtalet är lätt att se. Ljusare och mörkare utrymmen i gradienttexturen hjälper dig att flytta användaren genom att flytta igenom designen en överblick.
7. animera det
Medan många tips har fokuserat på statiska bakgrundselement, finns det ingen regel som säger att en bakgrund inte kan vara dynamisk.
För att få ut det mesta av denna typ av bakgrundsstruktur bör rörelsen vara subtil så att den inte förringar huvudbilden eller meddelandet. Inklusive en dämpad eller subtil färgpalett, som lettiska alfabetet ovan, är också ett bra alternativ.
Den här animationen kan innehålla delar som rör sig eller vrider eller vänder eller video. Motion är ett bra sätt att ta tag i användarnas uppmärksamhet. Få ut det mesta av en animerad bakgrundsstruktur genom att säkerställa att denna rörelse inte överväldigar förgrunden av designen.
Slutsats
En bra bakgrundsstruktur kan ge djup och visuellt intresse för din övergripande webbdesign. Medan många designers fortfarande använder mer platta bakgrunder - som enfärgad - lägga till en antydan av konsistens kan göra att ditt projekt sticker ut.
Tricket att använda texturer är att de måste vara subtila och faller faktiskt i bakgrunden, så att förgrundselement är lätta att läsa och förstå. Det kan vara en ganska delikat balans. Kom ihåg att skapa stor kontrast mellan bakgrundsstruktur och förgrundsbilder, användargränssnitt och text för att maximera effekten av den övergripande designen.
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.