Sådan oprettes en organisk webdesign
(og Showcase)
Økologisk design anvendes almindeligvis på produkter som stole, elektronisk udstyr, bøger og hjemindretning.
Efter de samme principper har organisk webdesign for nylig været en trend.
Professionelle designere og virksomheder har taget en mere naturlig tilgang til at skabe deres hjemmesider, logoer og emballage, hvilket efterlader den åbenlyst teknologiske glans i begyndelsen af 2000'erne.
Ja, kolleger designere, det er sikkert at sige, at den nye tidsalder for organisk design til hjemmesider og firmalogoer har taget virkning.
Uanset om det er åben eller subtilt, hvorvidt scannede elementer eller grafik, der efterligner naturen, organisk webdesign har taget mange former. Men hvad betyder organisk design? Hvad gør det vellykket? Lad os finde ud af det…
Hvad laver et organisk webdesign?
Selvom navnet antyder, at der foretages en form for økologisk erklæring, handler det organisk webdesign om at bringe naturlige elementer ind i et teknologisk miljø.
Disse elementer kan være repræsentation af naturlige materialer i et design (trækorn, stoffer, jordartet teksturer) eller noget mere abstrakt, der fanger naturens ebbe og strøm (elementer, materialer, farver, former). Organisk webdesign er et bredt koncept og kan opdeles i fire kategorier.
- Brug af materialer, teksturer og stoffer, der antydes på organiske elementer
Objekter som muslin, burlap, papyrus, papir, tape og træ. Disse varer kommer fra det naturlige miljø og giver dermed et layout en naturlig appel. - Brug af abstrakte naturens essenser
Farver, former, grafik, materialer og børster der efterligner "strømmen" af naturen. Disse er subtilere end trækorn og musliner og er beregnet til at give et antydning af en organisk essens. Vi ser dette på hjemmesider, der har moderne strømlinet grafik og en blød naturlig berøring. Det er mærkeligt, at plast er de mest almindelige materialer, der bruges til at opnå et organisk udseende: usandsynlige materialer er fair game i webdesign. - Opret en hel, der er større end summen af dens dele
Hvis der oprettes et billede, der kun bruger børster eller grafik for at skabe et andet billede, kan vi sige, at vi får mere ud af billedet som helhed end summen af dets dele: børster eller grafik. Dette kommer oftere i negativt rum, da pensler kan bruges til at skitsere eller udfylde et andet billede. Når vi tilføjer delene, får vi en ting - børsten - men når vi ser på det hele, får vi to ting: penslen og billedet er skabt. Dette er almindeligt blandt typografier, da vi måske bruger dem til at skabe et helt andet billede, det være sig ved at spille med det negative rum eller tilføje pensler. - En løsere fortolkning af "organisk" webdesign
Vi definerer generelt organisk som noget, der kommer direkte fra naturen, men det kan også være noget skabt (og derefter forsømt) af mennesker, såsom et forladt stykke træ fra en bygning eller materialer, der en gang indrettede et hjem og nu farves. Organisk i denne forstand betyder noget helt anderledes: Det tager over objekter, der efterlades af samfundet. Gamle fotografier, revne klud, nødtryk tapet: alle disse kan være lige så økologiske som et stykke træ eller blad.
I de senere år har økologisk design påtaget sig en "essentiel" kvalitet. Essentialist organisk design er et mere minimalistisk ideal: brug kun det, du har brug for for at opnå det, du leder efter.
For eksempel, hvis vi ønskede at skabe et billede af negativt rum og børster, kunne vi kun bruge den mængde pensel, der var nødvendig for at skabe det billede. Essentialistisk økologisk design fører til et mere moderne udseende og spredes i webdesignfeltet.
Disse fire kategorier kan spilles med og manipuleres for at få den fornemmelse, der passer til dig og din klient. Bland og match nogen af disse: De kan alle arbejde sammen med succes.
Tips til vellykket organisk webdesign
- Jordfarver kan være levende
Brændte appelsiner, dybe gråpurer og oliven kan være lige så spændende som lyse gule og lyse røde. Plus, de arbejder bedre sammen, og fordi du med større sandsynlighed vil bruge neutrale toner i dit økologiske design, kan du bruge flere af disse farver uden at overvælde designet. - Levende farver kan også være økologiske
Brandbiler, rød eller koboltblå, kan være lige så jordiske og organiske som brune og grå. Find disse farver i et vintagebillede eller et naturligt mønster eller nød et mønster, der har disse toner. De kan forfriskende, når de bruges med en dæmpet palette. - Balance, balance, balance
Miljøet forbliver stabilt gennem en omhyggelig balance af elementer, og design er ikke anderledes. Dette er endnu vigtigere i økologisk design. Balance de grå nuancer med mere farverige. Rolig den træ baggrund med flade, store eller enkle tabeller eller div lag eller endda en monokrom papirstruktur. En fælde med organisk design, som med alt design, er at du kan have for meget af en god ting, og linjen mellem succesfuld og overdreven kan være fint. - Økologisk betyder ikke at skrabe det moderne
Bare fordi du ønsker et organisk design betyder det ikke, at du skal opgive dine moderne påvirkninger. Du kan holde din chrome-look baggrund, lilla komplementære farve eller ikke-organiske skrifttyper. Blødgør et moderne design tager ikke meget, og det behøver heller ikke en blomstret vektor. En simpel krølle af en grafik, børste eller vektor kan kun opnå en naturlig essens. - Tænk anderledes
Der er meget mere til naturen end det indlysende. Vælg usandsynlige varer, der er naturlige, men er mindre almindelige, som lys. - Byområder er også miljøer
Bare fordi det er fjernet fra skoven, betyder det ikke, at det ikke længere er et 'miljø'. Tænk konkret eller damast.
For at se økologisk webdesign i aktion, tjek de følgende hjemmesider. Disse websites illustrerer alle eller nogle af de fire kategorier af organisk webdesign, der er forklaret ovenfor.
Mooi's baggrund, et indviklet træmønster, er det vigtigste og naturlige element her. Til dette tilføjer Mooi en levende rød nuance, blot et af de få moderne detaljer i dette design, der ikke fjerner dets organiske følelse.
30A Guide spiller med den mere abstrakte fortolkning af organisk design, der involverer rustikke papirer, gamle fotografiske negativer og frimærker. Derudover gør 30A os til at føle, at vi har snuble over et allerede eksisterende, ikke-digitalt miljø.
Jeg elsker støv indeholder mange moderne elementer, men det har økologiske hints: det animerede tåredråbe, de cirkulære skrifttyper og de blomsterformede vektorer.
Mens indflydelsen ikke er indlysende, indgår Entry 5 Productions 'layout organisk design: Vi får afrundede kanter på headerforbindelserne og logoet samt en god mængde bløde naturlige toner. Selvom de er subtile, tager disse organiske kvaliteter kanten af Entry 5 Productions moderne udseende.
Vi kan typisk tænke på papirer, skov og klæder for at skildre organisk design, men materialer som læder er lige så naturlige og mindre almindeligt anvendt i webdesign. Derudover giver Saddleback Leather os en økologisk følelse ved at bruge gamle kort, tags og polstring.
Web Maremma er et godt eksempel på, hvordan en helhed er mere end summen af dens dele. Hvis vi ser på logoet, ser vi hvad der er beregnet: en 'W' og en 'M.' Men når vi bryder hele i sine individuelle dele, får vi ufuldstændige breve. Således, hvad vi vinder som en helhed er det, du gættede det, mere end de samlede dele.
Dette moderne stykke omfatter en cement baggrund, afrundede kanter og organisk udseende baggrunde til de nederste tekstområder. Disse typer af tilsætninger er typiske i økologisk design.
Ikke alene er baggrunden en hård papirstruktur, men Lorelei Web Design inkorporerer et rødt dråbe eller et spil af en slags. Et usandsynligt element, ja, men det er naturligt.
Hubs hvide mursten står her ud, men det er vigtigere at bemærke er dropshadow på billederne og den bløde bevægelse af disse billeder, når du svæver over dem. Skyggen får os til at føle, at billederne altid har været der, og bevægelsen af billederne, når de svæves, efterligner naturens strømning. Den grønne, men levende, er også klart økologisk.
Hvad der skiller sig ud for Kulturbanause er den ødelagte mur, hvilket indebærer, at denne mur har smuldret væk over tid. Derudover har vi vand, der siver ind fra den anden side til landets øer. Dette bruger to former for økologisk design på én gang: brugen af åbenlyse naturlige billeder og indstillinger og brugen af noget, der bæres og forfalder.
Pixel Paraplyens naturlige appel er i sin knap-der-baggrund - en tekstureret grå mur, der tyder på beton eller gips- og de bløde kurver af skrifttypen (nemlig 'b' i 'paraply).
Fuglen kan være et godt supplement til at få økologisk flare, men skrifttyperne er det, der driver Janic Designs layout. CSS er et fokus i denne form for layout, og Janic Design tilføjer økologisk appel ved at bruge forskellige nuancer af grønne, teal, gule, brun og dyb gråblå.
Når alt andet føles moderne, tilføj en lille naturlig følelse i dit logo. Josh Puckett's regndråblogo er åbenlyst organisk, og dråbens farvning øger kun dets naturlige essens.
Hvad er ikke økologisk om I Love Colors 'site design? Farverne, vektorerne, de rippede papirer og den strukturerede baggrund tilføjer alle til den organiske appel af dette layout.
Greydient bruger en rotation i de store billeder, men hver har økologisk appel, med tilføjelser, herunder forfaldne genstande, som det du ser her og blomsterbørster.
Blomster, fugle og skylignende billeder. Et organisk design, der er så åbenbart, kan du ikke gå glip af.
Globusbilledet er godt, men Oypro-logoet - som ligner et par bladblader - og de bløde kanter på linkene er, hvad der afslutter den organiske følelse. Naturens hvirvler hjælper selvfølgelig også.
Orange Label's layout har mange moderne kvaliteter, med brugen af kvadrede tekstområder og et simpelt farveskema. Orange etiket tilføjer imidlertid i økologisk design med brug af konturer af naturlige genstande, bløde kanter og især tekstområder, der føles som om de er lavet af negativt rum.
Et andet eksempel på åben organisk design, VixMLs layout består af vandigt og overskyet billedsprog, en byindstilling og afrundede kanter i vid udstrækning.
Brown Blog Films kan have en stor anvendelse af træ i sit design, men træplankerne som links og 'hængt' af logoet er det bedste af den organiske charme her.
Bortset fra træet og den kurvede skrifttype på logoet er der to økologiske genstande, der skal bemærkes: Den håndskrevne skrifttype på navigationen og hovedbakgrunden.
Hvad gør Got Aqua et bestemt eksempel på organisk design er ikke billedet af kraniet eller håndskriftet, men snarere korkbakgrunden. Det er et interessant valg for en naturlig følelse, men det er naturligt og en stor neutral tekstur.
Hvad er sjovt at huske om naturen er, at det ikke kun består af bark og fugle (og lignende). Det består også af lyse bølger, gasser, gnister, lys, blandt (klart) andre ting. Noe Design spiller med disse usandsynlige inspirationskilde, hvilket giver os forstærket farvebånd og tekst, der virker oplyst.
Bell 2 Lodge adskiller sig selv i, at grafikken er stor og er en oplagt kombination af vektor og foto. Vi kan se, at træet er et billede af det egentlige træ, mens de anvendte blade er tydeligt grafik, der blev bygget i et program. Det er et eksempel på, hvad der er menneskeskabt, og hvad der i det væsentlige ikke er.
DJ Folios logo er den vigtigste organiske komponent på stedet, ved hjælp af forenklede, afrundede former, der har en naturlig følelse. Også gennem de separate cirkler og grafiske bits af 'J' får vi et produkt, der er mere end summen af de enkelte former.
Kodningen er det, der er noteret her, bortset fra de åbenlyse økologiske tilsætninger som farve, blade og himmel. Kodningen, der bruges til at køre Mathieu Furnons portefølje, gør overgangen fra billede til billede sømløs og naturlig.
Kombinationen af mørke toner med køligere blues og cremer samt den 'trukket' effekt på halvdelen af logoet tilføjer subtile organiske detaljer til de indlysende skove og papirer.
Tilføjelsen af 'håndskrevet' off-kilter skrifttype flankerer den mere grafiske skrifttype er kun et aspekt af organisk design her.
Naturlige auburns, appelsiner, meloner og brune blødgør den skarpe, moderne hvide i dette layout.
Se ud over træerne; vandfarverne og de dybe-jordiske nuancer i headerbilledet giver en dramatisk, men økologisk appel.
Skrevet udelukkende til WDD af Sarah Thompson.
Hvilke teksturer og toner foretrækker du, når du skaber en økologisk følelse? Som en bruger, som synes du, er mere tiltalende: subtile eller åbenlyse økologiske temaer?