Hur man skapar en organisk webbdesign
(och Showcase)
Den organiska designen används vanligen på produkter som stolar, elektronisk utrustning, böcker och heminredning.
Efter samma principer har organisk webbdesign nyligen framträtt som en trend.
Professionella designers och företag har tagit ett mer naturligt tillvägagångssätt för att skapa sina webbplatser, logotyper och förpackningar, och lämnar bakom den överblickande tekniska glansen i början av 2000-talet.
Ja, medarbetare, det är säkert att säga att den nya tiden för organisk design för webbplatser och företagslogotyper har trätt i kraft.
Oavsett om det är öppet eller subtilt, huruvida skannade element eller grafik som efterliknar naturen, har organisk webbdesign tagit på många former. Men vad innebär organisk design? Vad gör det framgångsrikt? Låt oss ta reda på…
Vad gör en organisk webbdesign?
Även om namnet antyder att någon slags ekologiskt uttalande görs, handlar det organisk webbdesign om att föra naturliga element i en teknisk miljö.
Dessa element kan vara en representation av naturmaterial i en design (träkorn, tyger, jordartade texturer) eller något mer abstrakt som fångar naturens ebb och flöde (objekt, material, färger, former). Organisk webbdesign är ett brett koncept och kan delas in i fyra kategorier.
- Använda material, texturer och tyger som tyder på organiska element
Objekt som muslin, burlap, papyrus, papper, tejp och trä. Dessa föremål kommer från den naturliga miljön och ger en layout en naturlig överklagande. - Använda abstrakta naturens natur
Färger, former, grafik, material och penslar som efterliknar naturens "flöde". Dessa är subtilare än träkorn och musliner och är avsedda att ge en antydan till en organisk essens. Vi ser detta på webbplatser som har modern strömlinjeformad grafik och en mjuk naturlig touch. Konstigt är plast de vanligaste materialen som används för att uppnå ett organiskt utseende: osannolika material är rättvist spel i webbdesign. - Skapa en hel som är större än summan av dess delar
Om en bild skapas som bara använder penslar eller grafik för att skapa en annan bild kan vi säga att vi får mer ut av bilden som helhet än summan av dess delar: penslarna eller grafiken. Detta kommer oftare i negativt utrymme, eftersom penslar kan användas för att skissera eller fylla i en annan bild. När vi lägger upp delarna får vi en sak - borsten - men när vi ser på det hela får vi två saker: penseln och bilden skapad. Det här är vanligt bland typografier, eftersom vi kan använda dem för att skapa en helt annan bild, det vill säga genom att spela med det negativa rummet eller lägga till penslar. - En lösare tolkning av "organisk" webbdesign
Vi definierar generellt organiskt som något som kommer direkt från naturen, men det kan också vara något som skapas (och sedan försummas) av människor, såsom en övergiven bit från en byggnad eller material som en gång dekorerat ett hem och är nu färgat. Organisk i den meningen betyder något helt annat: det tar över objekt som efterlämnas av samhället. Gamla fotografier, torkade trasor, nödtryckta tapeter: alla kan vara lika organiska som trä eller löv.
De senaste åren har organisk design tagit en "essentiell" kvalitet. Essentialist organisk design är ett mer minimalistiskt ideal: använd bara vad du behöver för att uppnå det du söker efter.
Om vi till exempel vill skapa en bild av negativt utrymme och borstar kan vi bara använda den mängd pensel som behövs för att skapa den bilden. Essentialistisk organisk design leder till ett mer modernt utseende och sprider sig inom webbdesignfältet.
Dessa fyra kategorier kan spelas med och manipuleras för att få den känslan som passar dig och din klient. Blanda och matcha något av dessa: de kan alla fungera tillsammans framgångsrikt.
Tips för framgångsrik organisk webbdesign
- Jordartade färger kan vara livfulla
Brända apelsiner, djupgråpurpur och oliver kan vara lika spännande som ljusgula och ljusa röda. Dessutom fungerar de bättre tillsammans, och eftersom du med större sannolikhet kommer att använda neutrala toner i din organiska design, kan du använda flera av dessa färger utan att överväldiga designen. - Levande färger kan också vara ekologiska
Brandbilen röd eller koboltblå kan vara lika jordig och organisk som brun och grå. Hitta dessa färger i en vintagebild eller ett naturligt mönster eller oro ett mönster som har dessa toner. De kan vara uppfriskande när de används med en dämpad palett. - Balans, balans, balans
Miljön är stabil genom en noggrann balans mellan element och design är inte annorlunda. Detta är ännu viktigare i organisk design. Balansera de grå nyanserna med färgglada. Lugna den träbakgrunden med platta, stora eller enkla tabeller eller div-lager, eller till och med en monokrom pappersstruktur. En fälla med organisk design, som med all design, är att du kan ha för mycket av en bra sak, och linjen mellan framgångsrik och överdriven kan vara bra. - Organiskt betyder inte att det moderna skrotas
Bara för att du vill ha en organisk design betyder det inte att du måste överge dina moderna influenser. Du kan behålla din krom-snygga bakgrund, lila komplementära färg eller icke-organiska typsnitt. Mjukgöring av en modern design tar inte mycket, och behöver inte en blommig vektor. En enkel krullning av en grafik, borste eller vektor kan bara ge en naturlig väsen. - Tänk annorlunda
Det finns mycket mer till naturen än det självklara. Välj osannolika saker som är naturliga men är mindre vanliga, som ljus. - Urbanområden är också miljöer
Bara för att den är borttagen från skogen betyder det inte att det inte längre är en "miljö". Tänk konkreter eller damast.
För att se organisk webbdesign i aktion, kolla in följande webbplatser. Dessa webbplatser illustrerar allt, eller några av de fyra kategorierna av organisk webbdesign som förklaras ovan.
Mooi bakgrund, ett invecklat trämönster, är det huvudsakliga och naturliga elementet här. Till detta lägger Mooi en vibrerande röd nyans, bara en av de få moderna detaljerna i denna design som inte avlägsnar sin organiska känsla.
30A Guide spelar med den mer abstrakta tolkningen av organisk design, som omfattar rustika papper, gamla fotografiska negativ och frimärken. Dessutom gör 30A oss att vi har snubblat på en redan existerande, icke-digital miljö.
I Love Dust ingår många moderna element, men det har organiska tips: den animerade tåredroppen, de cirkulära typsnitten och de blomformade vektorerna.
Medan inflytandet inte är uppenbart innehåller Entry 5 Productions layout en organisk design: Vi får rundade kanter på topplänkarna och logotypen, liksom en mängd mjuka, naturliga toner. Medan subtila, tar dessa organiska egenskaper kanten av Entry 5 Productions moderna utseende.
Vi kan typiskt tänka på papper, trä och tyg för att skildra organisk design, men material som läder är lika naturliga och mindre vanligt förekommande i webbdesign. Dessutom ger Saddleback Leather oss en organisk känsla genom att använda gamla kartor, taggar och klädsel.
Web Maremma är ett bra exempel på hur en helhet är mer än summan av dess delar. Om vi tittar på logotypen ser vi vad som är tänkt: en "W" och en "M." Men när vi bryter hela in i sina enskilda delar får vi ofullständiga bokstäver. Så, vad vi får som helhet är det, gissade du det, mer än de kombinerade delarna.
Detta moderna stycke innehåller en cementbakgrund, rundade kanter och organiska bakgrunder för de nedre textområdena. Dessa typer av tillägg är typiska i organisk design.
Inte bara är bakgrunden en grov pappersstruktur, men Lorelei Web Design innehåller ett rött dropp eller spill av något slag. Ett osannolikt element, ja, men det är naturligt.
Navets vita tegel står ut här, men det som är viktigare att notera är dropshadow på bilderna och den mjuka rörelsen av dessa bilder när du svävar över dem. Skuggan får oss att känna oss som om bilderna alltid har varit där, och bildens rörelse när vi svävar efterliknar naturens flöde. Den gröna, men levande, är också organiskt också.
Vad som står ut för Kulturbanause är den trasiga väggen, vilket innebär att denna vägg har smulat bort över tiden. Dessutom har vi vatten som sipprar in från den andra sidan till öarna. Det använder sig av två former av organisk design på en gång: användningen av öppna naturliga bilder och inställningar och användningen av någonting som slits och förfallna.
Pixel Paraplyens naturliga överklagande är i sin knappt bakgrund - en texturerad gråvägg som tyder på betong eller gips - och de mjuka kurvorna av typsnittet (nämligen "b" i paraplyet).
Fågeln kan vara ett bra komplement till att få organisk flare, men färgerna på typsnitt är det som driver Janic Designs layout. CSS är ett fokus i denna typ av layout, och Janic Design lägger till organisk överklagning genom att använda olika nyanser av grönt, teal, gult, brunt och djupt grå-blues.
När allt annat känns modernt, lägg till lite naturlig känsla i din logotyp. Josh Pucketts regndroppslogotyp är öppet organiskt, och färgningen av droppen förstärker bara dess naturliga väsen.
Vad är inte organiskt om jag älskar Colors 'webbplatsdesign? Färgerna, vektorerna, de rippade papper och den texturerade bakgrunden lägger alla till den organiska överklagandet av denna layout.
Greydient använder en rotation i de stora bilderna, men alla har organisk överklagande, med tillägg inklusive förfallna föremål, som du ser här, och blomborstar.
Blommor, fåglar och molnliknande bilder. En organisk design som är så öppen du kan inte sakna den.
Världsbilden är fin, men Oypro-logotypen - som ser ut som några bladblad - och de mjuka kanterna på länkarna är vad som avslutar den organiska känslan. Naturens färg virvlar naturligtvis också.
Orange Labels layout har många moderna egenskaper, med användning av kvadrerade textområden och ett enkelt färgschema. Orange etikett lägger emellertid i organisk design med användning av konturer av naturliga föremål, mjuka kanter och framförallt textområden som känns som om de är gjorda av negativt utrymme.
Ett annat exempel på öppen organisk design, VixMLs layout består av vattnig och grumlig bild, en stadsinställning och avrundade kanter i stor skala.
Brown Blog Films kan ha en stor användning av trä i sin design, men träplankorna som länkar och "hängde" bilden av logotypen är det som är toppen av den organiska charmen här.
Bortsett från trädet och det kurviga tecknet på logotypen finns det två organiska objekt att notera: det handskrivna tecknet på navigeringen och huvudbakgrunden.
Vad som gör Got Aqua ett visst exempel på organisk design är inte bilden av skallen eller handstilen, utan snarare korkbakgrunden. Det är ett intressant val för en naturlig känsla, men det är naturligt och en stor neutral textur.
Vad är kul att komma ihåg om naturen är att den inte bara består av bark och fåglar (och liknande). Det består också av ljusvågor, gaser, gnistor, ljus, bland (tydligt) andra saker. Noe Design spelar med dessa osannolika inspirationskällor, vilket ger oss intensifierade band av färg och text som verkar upplysta.
Bell 2 Lodge sätter sig ifrån varandra eftersom grafiken är stor och är en uppenbar kombination av vektor och foto. Vi kan se att träet är en bild av själva träet, medan de använda bladen är tydligt grafik som byggdes i ett program. Det är ett exempel på vad som är konstgjorda och vad som i huvudsak inte är.
DJ Folios logotyp är den viktigaste organiska komponenten på webbplatsen, med hjälp av förenklad, rundade former som har en naturlig känsla. Också, genom de separata cirklarna och grafiska bitar av 'J' får vi en produkt som är mer än summan av de enskilda formerna.
Kodningen är det som finns här, bortsett från de öppna organiska tillägg som färg, löv och himmel. Den kodning som används för att köra Mathieu Furnons portfölj gör övergången från bild till bild sömlös och naturlig.
Kombinationen av mörka toner med kallare blues och krämer, liksom den "dras" effekten på halva logotypen, lägger till subtila organiska detaljer på de uppenbara skogen och papper.
Tillägget av "handskriven", off-kilter font som flankerar mer grafisk typsnitt är bara en aspekt av organisk design här.
Naturliga auburner, apelsiner, meloner och brunt mjuknar den skarpa, moderna vita i denna layout.
Se bortom träden; vattenfärgerna och de djupt-jordiga nyanserna i headerbilden lägger till en dramatisk men organisk överklagande.
Skriven uteslutande för WDD av Sarah Thompson.
Vilka texturer och toner föredrar du när du skapar en organisk känsla? Som en användare, som tycker du är mer tilltalande: subtila eller öppna organiska teman?