Hoe een organisch webontwerp te maken
(en Showcase)
Organisch ontwerp wordt vaak toegepast op producten zoals stoelen, elektronische apparatuur, boeken en interieurinrichting.
Volgens dezelfde principes is organisch webdesign recentelijk als een trend naar voren gekomen.
Professionele ontwerpers en bedrijven hebben een meer natuurlijke benadering gekozen voor het maken van hun websites, logo's en verpakkingen, waardoor de openlijke technologische glans van de vroege jaren 2000 achterhaald is.
Ja, collega-ontwerpers, het is veilig om te zeggen dat het nieuwe tijdperk van organisch ontwerp voor websites en bedrijfslogo's van kracht is geworden.
Of het nu openlijk of subtiel is, of het nu gaat om gescande elementen of afbeeldingen die de natuur nabootsen, organisch webontwerp heeft vele vormen aangenomen. Maar wat is biologisch ontwerp? Wat maakt het succesvol? Laten we het uitzoeken…
Wat maakt een organisch webontwerp?
Hoewel de naam suggereert dat een soort van ecologische verklaring wordt gemaakt, gaat organisch webontwerp meer over het brengen van natuurlijke elementen in een technologische omgeving.
Deze elementen kunnen de weergave zijn van natuurlijke materialen in een ontwerp (houtkorrels, stoffen, aardachtige texturen) of iets abstracts dat de eb en vloed van de natuur vastlegt (items, materialen, kleuren, vormen). Organisch webontwerp is een breed concept en kan worden onderverdeeld in vier categorieën.
- Materialen, texturen en stoffen gebruiken die verwijzen naar organische elementen
Voorwerpen zoals mousseline, jute, papyrus, papier, tape en hout. Deze artikelen komen uit de natuurlijke omgeving en geven daarmee een lay-out een natuurlijke uitstraling. - Abstracte essenties van de natuur gebruiken
Kleuren, vormen, afbeeldingen, materialen en penselen die de "stroom" van de natuur nabootsen. Deze zijn subtieler dan houtkorrels en muslins en zijn bedoeld om slechts een hint van een organische essentie te geven. We zien dit op websites met moderne, gestroomlijnde afbeeldingen en een zachte, natuurlijke uitstraling. Vreemd genoeg zijn kunststoffen de meest voorkomende materialen die worden gebruikt om een organische look te krijgen: onwaarschijnlijke materialen zijn een rechtvaardig spel in webdesign. - Een geheel maken dat groter is dan de som van de delen
Als een afbeelding wordt gemaakt die alleen penselen of afbeeldingen gebruikt om een andere afbeelding te maken, kunnen we zeggen dat we meer uit de afbeelding als geheel halen dan de som van de delen: de penselen of afbeeldingen. Dit komt vaker voor in de negatieve ruimte, omdat penselen kunnen worden gebruikt om een ander beeld te schetsen of in te vullen. Wanneer we de delen optellen, krijgen we één ding - het penseel - maar als we naar het geheel kijken, krijgen we twee dingen: het penseel en het gemaakte beeld. Dit is gebruikelijk bij typografieën, omdat we ze kunnen gebruiken om een totaal ander beeld te creëren, of het nu gaat om spelen met de negatieve ruimte of het toevoegen van penselen. - Een lossere interpretatie van 'organisch' webdesign
In het algemeen definiëren we organisch als iets dat rechtstreeks uit de natuur komt, maar het kan ook iets zijn dat door mensen is gemaakt (en vervolgens verwaarloosd), zoals een verlaten stuk hout uit een gebouw of materialen die ooit een huis hebben ingericht en nu worden gekleurd. Organisch betekent in deze zin iets heel anders: het neemt objecten over die door de samenleving zijn achtergelaten. Oude foto's, gescheurde doeken, bedroefd behang: deze kunnen allemaal zo organisch zijn als een stuk hout of blad.
In de afgelopen jaren heeft organisch ontwerp een "essentialistische" kwaliteit aangenomen. Essentialistisch organisch ontwerp is een meer minimalistisch ideaal: gebruik alleen wat u nodig hebt om te bereiken wat u zoekt.
Als we bijvoorbeeld een afbeelding van negatieve ruimte en penselen willen maken, kunnen we alleen de hoeveelheid penseel gebruiken die nodig is om die afbeelding te maken. Essentialistisch organisch ontwerp leidt tot een meer eigentijdse uitstraling en verspreidt zich op het gebied van webontwerp.
Deze vier categorieën kunnen worden gespeeld en gemanipuleerd om het gevoel te krijgen dat geschikt is voor u en uw klant. Mix en match één van deze: ze kunnen allemaal succesvol samenwerken.
Tips voor succesvol organisch webontwerp
- Aardse kleuren kunnen levendig zijn
Verbrande sinaasappels, diep grijze purpels en olijven kunnen net zo spannend zijn als lichtgeel en felrood. Bovendien werken ze beter samen en omdat je waarschijnlijk neutrale tinten in je organische ontwerp zult gebruiken, kun je meer van deze kleuren gebruiken zonder het ontwerp te overbelasten. - Levendige kleuren kunnen ook organisch zijn
Brandweerwagen rood of kobaltblauw kan net zo aards en organisch zijn als bruin en grijs. Zoek deze kleuren in een vintage afbeelding of natuurlijk patroon of kies een patroon dat deze tonen heeft. Ze kunnen verfrissend zijn wanneer ze worden gebruikt met een gedempte palet. - Evenwicht, balans, balans
De omgeving blijft stabiel door een zorgvuldige balans van elementen, en design is niet anders. Dit is zelfs nog belangrijker in organisch ontwerp. Breng die grijze tinten in evenwicht met meer kleurrijke. Kalmeer die houten achtergrond met platte, grote of eenvoudige tabellen of div-lagen, of zelfs een zwart-wit papiertextuur. Een valstrik met organisch ontwerp, zoals bij elk ontwerp, is dat je te veel van het goede kunt hebben en dat de grens tussen succesvol en overdreven goed kan zijn. - Organisch betekent niet het schrappen van het moderne
Alleen omdat je een organisch ontwerp wilt, hoef je niet te stoppen met je moderne invloeden. U kunt uw chroomachtige achtergrond, paarse complementaire kleur of niet-organische lettertypen behouden. Het verzachten van een modern ontwerp kost niet veel en het heeft ook geen florale vector nodig. Een eenvoudige krul van een afbeelding, penseel of vector kan een natuurlijke essentie prima bereiken. - Denk anders
Er is veel meer in de natuur dan het voor de hand liggende. Kies onwaarschijnlijke items die natuurlijk zijn maar minder vaak voorkomen, zoals licht. - Stedelijke gebieden zijn ook omgevingen
Alleen omdat het uit het bos is verwijderd, betekent nog niet dat het niet langer een 'omgeving' is. Denk aan beton of damast.
Als u organisch webontwerp in actie wilt zien, bekijkt u de volgende websites. Deze websites illustreren alle, of sommige van de vier categorieën van organische webdesign hierboven uitgelegd.
De achtergrond van Mooi, een ingewikkeld houtpatroon, is hier het hoofd- en natuurlijke element. Hier voegt Mooi een levendige rode tint aan toe, slechts een van de weinige moderne details in dit ontwerp die het organische gevoel niet wegnemen.
30A Guide speelt met de meer abstracte interpretatie van organisch ontwerp, met rustieke papiersoorten, oude fotonegatieven en stempels. Bovendien geeft 30A ons het gevoel dat we een reeds bestaande, niet-digitale omgeving zijn tegengekomen.
I Love Dust bevat veel moderne elementen, maar het heeft organische hints: de geanimeerde traanval, de cirkelvormige lettertypen en de bloemvormige vectoren.
Hoewel de invloed niet vanzelfsprekend is, bevat de lay-out van Entry 5 Productions wel degelijk organisch ontwerp: we krijgen afgeronde hoeken op de headerlinks en het logo, evenals een goede hoeveelheid zachte, natuurlijke tonen. Hoewel subtiel, halen deze organische kwaliteiten de moderne look van Entry 5 Productions uit de verf.
We denken meestal aan papier, hout en kleding om organisch ontwerp te portretteren, maar materialen zoals leer zijn even natuurlijk en worden minder vaak gebruikt in webdesign. Bovendien geeft Saddleback Leather ons een organisch gevoel door oude kaarten, labels en stoffering te gebruiken.
Web Maremma is een goed voorbeeld van hoe een geheel meer is dan de som der delen. Als we naar het logo kijken, zien we wat is bedoeld: een 'W' en een 'M.' Wanneer we echter het geheel in zijn afzonderlijke delen breken, krijgen we onvolledige brieven. Dus, wat we winnen als geheel is, je raadt het al, meer dan de delen samen.
Dit moderne stuk bevat een cementen achtergrond, afgeronde randen en organisch ogende achtergronden voor de onderste tekstgebieden. Dit soort toevoegingen zijn typisch in organisch ontwerp.
Niet alleen is de achtergrond een ruwe papiertextuur, maar Lorelei Web Design bevat ook een rode druppel of morsen. Een onwaarschijnlijk element, ja, maar het is natuurlijk.
De witte stenen van Hub vallen hier op, maar wat nog belangrijker is om op te merken, is de slagschaduw op de afbeeldingen en de zachte beweging van deze afbeeldingen wanneer je eroverheen beweegt. De schaduw doet ons voelen alsof de beelden er altijd al geweest zijn, en de beweging van de beelden wanneer ze zweven, bootst de stroom van de natuur na. Het groene, hoewel levendige, is duidelijk ook biologisch.
Wat opvalt voor Kulturbanause is de gebroken muur, wat impliceert dat deze muur in de loop van de tijd is afgebrokkeld. Bovendien hebben we water van de andere kant naar de eilanden. Dit maakt gebruik van twee vormen van organisch ontwerp tegelijk: het gebruik van openlijke natuurlijke afbeeldingen en instellingen en het gebruik van iets dat versleten en rottend is.
De natuurlijke aantrekkingskracht van Pixel Umbrella zit in de nauwelijks-er achtergrond-getextureerde grijze muur die verwijst naar beton of gips- en de zachte rondingen van het lettertype (namelijk de 'b' in 'paraplu').
De vogel kan een goede aanvulling zijn om organische gloed te krijgen, maar de kleuren van het lettertype vormen de basis voor de lay-out van Janic Design. De CSS is een focus in dit soort lay-out, en Janic Design voegt een organische aantrekkingskracht toe door verschillende tinten groen, teal, geel, bruin en diep grijsblauw te gebruiken.
Wanneer al het andere modern aanvoelt, voegt u een beetje natuurlijk aan in uw logo. Het regendruppellogo van Josh Puckett is duidelijk organisch en de inkleuring van de druppel verbetert alleen de natuurlijke essentie.
Wat is niet biologisch over het siteontwerp van I Love Colors? De kleuren, de vectoren, het geripte papier en de gestructureerde achtergrond dragen allemaal bij aan de organische aantrekkingskracht van deze lay-out.
Greydient gebruikt een rotatie in de grote afbeeldingen, maar elke afbeelding heeft een organische aantrekkingskracht, met toevoegingen zoals vervallen items, zoals wat u hier ziet, en bloemkwasten.
Bloemen, vogels en wolkenachtige beelden. Een organisch ontwerp dat zo open is dat je het niet kunt missen.
De afbeelding in de wereld is leuk, maar het Oypro-logo - dat eruitziet als een paar blaadjes - en de zachte randen aan de schakels maken het organische gevoel helemaal af. De wervelingen van natuurlijke kleuren helpen natuurlijk ook.
De lay-out van Orange Label heeft veel moderne kwaliteiten, met gebruik van vierkante tekstgebieden en een eenvoudig kleurenschema. Orange Label voegt echter een organisch ontwerp toe met het gebruik van contouren van natuurlijke objecten, zachte randen en, met name, tekstgebieden die aanvoelen alsof ze zijn gemaakt op basis van negatieve ruimten.
Een ander voorbeeld van open organisch ontwerp, de lay-out van VixML, bestaat uit waterige en bewolkte beelden, een stadsomgeving en afgeronde randen in overvloed.
Brown Blog Films heeft mogelijk een zwaar houtgebruik in zijn ontwerp, maar de houten planken als schakels en de 'opgehangen' afbeelding van het logo vormen hier de top van de organische charme.
Afgezien van de boom en het ronde lettertype op het logo, zijn er twee organische items om op te merken: het handgeschreven lettertype op de navigatie- en hoofdachtergrond.
Wat Got Aqua tot een bijzonder voorbeeld van organisch ontwerp maakt, is niet het beeld van de schedel of het handschrift, maar eerder de kurkachtergrond. Het is een interessante keuze voor een natuurlijk gevoel, maar het is natuurlijk en een geweldige neutrale textuur.
Wat leuk is om te onthouden over de natuur is dat het niet alleen uit schors en vogels (en dergelijke) bestaat. Het bestaat ook uit lichtgolven, gassen, vonken, licht, tussen (duidelijk) andere dingen. Noe Design speelt met deze onwaarschijnlijke bronnen van inspiratie, waardoor we geïntensiveerde kleuren- en tekstlinten krijgen die verlicht lijken.
Bell 2 Lodge onderscheidt zich doordat de afbeeldingen groot zijn en een voor de hand liggende combinatie van vector en foto vormen. We kunnen zien dat het hout een afbeelding is van echt hout, terwijl de gebruikte bladeren duidelijk afbeeldingen zijn die in een programma zijn ingebouwd. Het is een voorbeeldspel op wat door de mens gemaakt is en wat, in wezen, niet is.
Het logo van DJ Folio is de belangrijkste organische component op de site, met vereenvoudigde, afgeronde vormen die een natuurlijk gevoel hebben. Ook krijgen we via de afzonderlijke cirkels en grafische bits van de 'J' een product dat meer is dan de som van de individuele vormen.
De codering is wat hier opvalt, afgezien van de openlijke organische toevoegingen zoals kleur, bladeren en lucht. De codering die wordt gebruikt om het portfolio van Mathieu Furnon te beheren, maakt de overgang van beeld naar beeld naadloos en natuurlijk.
De combinatie van donkere tinten met koelere blauwtinten en crèmes, evenals het 'getekende' effect op de helft van het logo voegen subtiele organische accenten toe aan de voor de hand liggende houtsoorten en papier.
De toevoeging van 'handgeschreven', off-kilter lettertype naast het meer grafische lettertype is slechts een aspect van organisch ontwerp hier.
Natuurlijke kastanjebruine sinaasappels, meloenen en browns verzachten het frisse, moderne wit in deze lay-out.
Kijk verder dan de bomen; de waterkleuren en de diep-maar-aardachtige tinten in de afbeelding van de kop geven een dramatische maar organische aantrekkingskracht.
Exclusief geschreven voor WDD door Sarah Thompson.
Welke texturen en tonen heeft u het liefst bij het creëren van een organisch gevoel? Als een gebruiker, waarvan denk je dat die aantrekkelijker is: subtiele of openlijke organische thema's?