Hvordan lage et organisk webdesign
(og Showcase)
Organisk design brukes vanligvis på produkter som stoler, elektronisk utstyr, bøker og hjemmedekorasjon.
Etter de samme prinsippene har organisk webdesign nylig kommet fram som en trend.
Profesjonelle designere og bedrifter har tatt en mer naturlig tilnærming til å lage sine nettsider, logoer og emballasje, og etterlater den åpenbare teknologiske glansen i begynnelsen av 2000-tallet.
Ja, andre designere, det er trygt å si at den nye tiden for organisk design for nettsteder og bedriftslogoer har tatt i bruk.
Enten åpen eller subtil, om skannede elementer eller grafikk som etterligner natur, har organisk webdesign tatt på mange former. Men hva er organisk design? Hva gjør det vellykket? La oss finne det ut…
Hva lager et organisk webdesign?
Selv om navnet antyder at en slags økologisk erklæring blir gjort, handler organisk webdesign om å bringe naturlige elementer inn i et teknologisk miljø.
Disse elementene kan være representasjon av naturlige materialer i et design (trekorn, tekstiler, jordartet teksturer) eller noe mer abstrakt som fanger ebb og flyt av naturen (elementer, materialer, farger, former). Organisk webdesign er et bredt konsept og kan deles inn i fire kategorier.
- Bruke materialer, teksturer og stoffer som hint på organiske elementer
Objekter som muslin, burlap, papyrus, papir, tape og tre. Disse elementene kommer fra det naturlige miljøet og gir dermed et opplegg en naturlig appell. - Bruke abstrakte naturens essenser
Farger, former, grafikk, materialer og børster som etterligner "flyt" av naturen. Disse er subtilere enn trekorn og musliner, og er ment å gi et snev av organisk essens. Vi ser dette på nettsteder som har moderne strømlinjeformet grafikk og en myk naturlig berøring. Merkelig, plast er de vanligste materialene som brukes til å oppnå et organisk utseende: usannsynlig materiale er rettferdig spill i webdesign. - Opprette en helhet som er større enn summen av dens deler
Hvis et bilde er opprettet som bare bruker pensler eller grafikk for å skape et annet bilde, kan vi si at vi får mer ut av bildet som helhet enn summen av delene: penslene eller grafikken. Dette kommer oftere i negativ plass, da pensler kan brukes til å skissere eller fylle ut et annet bilde. Når vi legger opp delene, får vi en ting - børsten - men når vi ser på det hele, får vi to ting: børsten og bildet opprettet. Dette er vanlig blant typografier, da vi kan bruke dem til å skape et helt annet bilde, det være seg ved å spille med den negative plassen eller legge til børster. - En løsere tolkning av "organisk" webdesign
Vi definerer generelt organisk som noe som kommer rett fra naturen, men det kan også være noe som er skapt (og deretter forsømt) av mennesker, for eksempel et forlatt treverk fra en bygning eller materialer som en gang har dekorert et hjem og er farget. Organisk i denne forstand betyr noe helt annet: det tar over gjenstander som blir etterladt av samfunnet. Gamle fotografier, rippede kluter, urolig tapet: alle disse kan være like organiske som et stykke tre eller blad.
I de senere år har organisk design tatt på seg en "essensialistisk" kvalitet. Essentialistisk organisk design er et mer minimalistisk ideal: bruk bare det du trenger for å oppnå det du er ute etter.
For eksempel, hvis vi ønsket å lage et bilde av negativ plass og børster, kunne vi bare bruke mengden pensel som er nødvendig for å skape det bildet. Essentialist organisk design fører til et mer moderne utseende og sprer seg i webdesignfeltet.
Disse fire kategoriene kan spilles med og manipuleres for å få den følelsen som passer for deg og din klient. Bland og matche noen av disse: de kan alle jobbe sammen med hell.
Tips for vellykket organisk webdesign
- Jordfarger kan være levende
Brent appelsiner, dype gråpurper og oliven kan være like spennende som lyse gulger og lyse røde. Dessuten fungerer de bedre sammen, og fordi du vil sannsynligvis bruke nøytrale toner i din organiske design, kan du bruke flere av disse fargene uten å overvelde designen. - Levende farger kan også være organiske
Brannbil rød eller koboltblå kan være like jordisk og organisk som brun og grå. Finn disse fargene i et vintagebilde eller et naturlig mønster eller angrep et mønster som har disse tonene. De kan være forfriskende når de brukes med en dempet palett. - Balanse, balanse, balanse
Miljøet forblir stabilt gjennom en forsiktig balanse mellom elementer, og design er ikke annerledes. Dette er enda viktigere i organisk design. Balanse de grå nyansene med mer fargerike. Rolig den trebakken med flate, store eller enkle bord eller div-lag, eller til og med en monokrom papirstruktur. En felle med organisk design, som med all design, er at du kan ha for mye av en god ting, og linjen mellom vellykket og overdrevet kan være bra. - Økologisk betyr ikke å skrape det moderne
Bare fordi du ønsker en organisk design betyr det ikke at du må forlate dine moderne påvirkninger. Du kan beholde din kromsete bakgrunn, lilla komplementære farger eller ikke-organiske skrifter. Å myke et moderne design tar ikke mye, og det trenger heller ikke en floral vektor. En enkel krøll av en grafikk, børste eller vektor kan bare oppnå en naturlig essens. - Tenk annerledes
Det er mye mer til naturen enn det åpenbare. Velg usannsynlige elementer som er naturlige, men er mindre vanlige, som lys. - Byområder er også miljøer
Bare fordi det er fjernet fra skogen, betyr det ikke at det ikke lenger er et "miljø". Tenk betong eller damast.
For å se organisk webdesign i aksjon, sjekk ut de følgende nettstedene. Disse nettstedene illustrerer alt, eller noen av de fire kategoriene av organisk webdesign som er forklart ovenfor.
Moois bakgrunn, et intrikat tremønster, er hoved- og naturelementet her. Til dette tilføyer Mooi en levende rød nyanse, bare en av de få moderne detaljene i dette designet som ikke fjerner sin organiske følelse.
30A Guide spiller med den mer abstrakte tolkningen av organisk design, med rustikke papirer, gamle fotografiske negativer og frimerker. I tillegg gjør 30A oss at vi har snublet over et allerede eksisterende, ikke-digitalt miljø.
Jeg elsker støv inneholder mange moderne elementer, men det har økologiske hint: det animerte tårefallet, de sirkulære skrifttyper og de blomsterformede vektorene.
Mens innflytelsen ikke er åpenbar, inntar Entry 5 Productions 'layout organisk design: Vi får avrundede kanter på topptekstene og logoen, samt en god mengde myke, naturlige toner. Mens de er subtile, tar disse organiske egenskapene kanten av Entry 5 Productions moderne utseende.
Vi kan typisk tenke på papir, skog og kluter for å skildre organisk design, men materialer som lær er like naturlige og mindre vant i webdesign. I tillegg gir Saddleback Leather oss en organisk følelse ved å bruke gamle kart, merker og polstring.
Web Maremma er et godt eksempel på hvordan en helhet er mer enn summen av delene. Hvis vi ser på logoen, ser vi hva som er ment: en 'W' og en 'M.' Men når vi bryter hele inn i sine individuelle deler, får vi ufullstendige brev. Således, det vi får som en helhet er, du gjettet det, mer enn delene kombinert.
Dette moderne stykket inneholder en sementbakgrunn, avrundede kanter og organisk utseende bakgrunner for de nederste tekstområdene. Disse typer tillegg er typiske i organisk design.
Ikke bare er bakgrunnen en grov papirstruktur, men Lorelei Web Design inkorporerer et rødt drypp eller spill av noe slag. Et usannsynlig element, ja, men det er naturlig.
Hubens hvite murstein står her ute, men det som er viktigere å merke seg er dropshadow på bildene og den myke bevegelsen av disse bildene når du svinger over dem. Skyggen får oss til å føle seg som om bildene alltid har vært der, og bevegelsen av bildene når de svinger på, etterligner naturens strømning. Den grønne, men levende, er også klart organisk.
Det som skiller seg ut for Kulturbanause er den ødelagte veggen, noe som betyr at denne veggen har smuldret bort over tid. I tillegg har vi vann som siver inn fra den andre siden til øyene. Dette bruker to former for organisk design på en gang: bruken av åpen naturlige bilder og innstillinger og bruk av noe som er slitt og forfall.
Pixel Umbrellas naturlige appell er i sin knapt derbakgrunn - en teksturert gråvegg som peker på betong eller gips - og de myke kurver av skrifttypen (nemlig "b" i paraplyen).
Fuglen kan være et godt tillegg for å få organisk bluss, men fargene på font er det som driver Janic Designs layout. CSS er et fokus i denne typen layout, og Janic Design legger til økologisk appell ved å bruke forskjellige nyanser av greener, teal, gule, brun og dyp gråblå.
Når alt annet føles moderne, legg til litt naturlig følelse i logoen din. Josh Pucketts regndråplogo er åpenlyst organisk, og fargestoffet av dråpen øker bare sin naturlige essens.
Hva er ikke organisk om I Love Colors 'nettsteddesign? Fargene, vektorene, de rippede papirene og den teksturerte bakgrunnen bidrar alle til den organiske appellen til dette oppsettet.
Greydient bruker en rotasjon i de store bildene, men hver har en økologisk appell, med tillegg, inkludert forfalskede gjenstander, som det du ser her, og blomsterbørster.
Blomster, fugler og skylignende bilder. En organisk design som er så åpenbar du kan ikke gå glipp av det.
Globebildet er fint, men Oypro-logoen - som ser ut som et par bladblader - og de myke kantene på koblingene er det som fullfører den organiske følelsen. Naturens hvirvler hjelper selvfølgelig også.
Orange Labels layout har mange moderne kvaliteter, med bruk av kvadrede tekstområder og en enkel fargevalg. Men oransje etikett legger til økologisk design med bruk av konturer av naturlige objekter, myke kanter og mest, tekstområder som føles som om de er laget av negativ plass.
Et annet eksempel på åpen organisk design, VixMLs layout består av vannaktig og overskyet bilder, en byinnstilling og avrundede kanter i massevis.
Brown Blog Films kan ha en stor bruk av tre i sin design, men treplankene som koblinger og "hengt" bildet av logoen er det som er toppen av den organiske sjarmen her.
Bortsett fra treet og den kurvede fonten på logoen, er det to organiske elementer å merke seg: Den håndskrevne fonten på navigasjonen og hovedbakgrunnen.
Det som gjør Got Aqua et spesielt eksempel på organisk design er ikke bildet av skallen eller håndskriftet, men heller korkbakgrunnen. Det er et interessant valg for en naturlig følelse, men det er naturlig og en stor nøytral tekstur.
Hva er gøy å huske om naturen er at den ikke bare består av bark og fugler (og lignende). Den består også av lyse bølger, gasser, gnister, lys, blant (tydelig) andre ting. Noe Design spiller med disse usannsynlige inspirasjonskildene, noe som gir oss forsterkede bånd av farger og tekst som virker opplyst.
Bell 2 Lodge skiller seg ut fra at grafikken er stor og er en åpenbar kombinasjon av vektor og foto. Vi kan se at treet er et bilde av virkelige tre, mens bladene som brukes er tydelig grafikk som ble bygget i et program. Det er et eksempel på hva som er menneskeskapt og hva det egentlig ikke er.
DJ Folios logo er den viktigste organiske komponenten på nettstedet, ved hjelp av forenklede, avrundede former som har en naturlig følelse. Også, gjennom de separate sirkler og grafiske biter av 'J' får vi et produkt som er mer enn summen av de enkelte figurene.
Kodingen er det som er lagt merke til her, bortsett fra de åpenbare organiske tilleggene som farge, blader og himmel. Koding som brukes til å kjøre Mathieu Furnons portefølje gjør overgangen fra bilde til bilde sømløst og naturlig.
Kombinasjonen av mørke toner med kulere blues og kremer, samt "trukket" effekten på halvparten av logoen, legger til subtile organiske berører til de åpenbare skogene og papirene.
Tillegget av "håndskrevet," off-kilter font flankerer mer grafisk skrift er bare ett aspekt av organisk design her.
Naturlige auburns, appelsiner, meloner og browns myke den skarpe, moderne hvite i dette oppsettet.
Se utover trærne; vannfargene og de dype, jordiske nyansene i topptekstbildet gir en dramatisk, men økologisk appell.
Skrevet utelukkende for WDD av Sarah Thompson.
Hvilke teksturer og toner foretrekker du når du lager en organisk følelse? Som en bruker, hvilken tror du er mer tiltalende: subtile eller åpenbare organiske temaer?