Πώς να δημιουργήσετε ένα βιολογικό σχεδιασμό ιστοσελίδων
(και Showcase)
Ο βιολογικός σχεδιασμός εφαρμόζεται συνήθως σε προϊόντα όπως καρέκλες, ηλεκτρονικό εξοπλισμό, βιβλία και διακόσμηση στο σπίτι.
Σύμφωνα με τις ίδιες αρχές, ο βιολογικός σχεδιασμός ιστοσελίδων εμφανίστηκε πρόσφατα ως μια τάση.
Οι επαγγελματίες σχεδιαστές και εταιρείες έχουν υιοθετήσει μια πιο φυσική προσέγγιση για τη δημιουργία των ιστοτόπων, των λογοτύπων και της συσκευασίας τους, αφήνοντας πίσω τους την απροκάλυπτη τεχνολογική λάμψη των αρχών της δεκαετίας του 2000.
Ναι, συναδέλφους σχεδιαστές, είναι ασφαλές να πούμε ότι η νέα εποχή οργανικού σχεδιασμού για ιστοσελίδες και εταιρικά λογότυπα έχει τεθεί σε ισχύ.
Είτε εμφανείς είτε λεπτές, είτε σαρωμένα στοιχεία είτε γραφικά που μιμούνται τη φύση, ο βιολογικός σχεδιασμός ιστοσελίδων έχει πάρει πολλές μορφές. Αλλά τι σημαίνει οργανικό σχέδιο; Τι το κάνει επιτυχημένο; Ας ανακαλύψουμε…
Τι κάνει ένα βιολογικό σχεδιασμό ιστοσελίδων;
Αν και το όνομα υποδηλώνει ότι γίνεται κάποια οικολογική δήλωση, ο βιολογικός σχεδιασμός ιστοσελίδων αφορά περισσότερο την εισαγωγή φυσικών στοιχείων σε ένα τεχνολογικό περιβάλλον.
Αυτά τα στοιχεία θα μπορούσαν να είναι η αναπαράσταση φυσικών υλικών σε ένα σχέδιο (ξύλινοι κόκκοι, υφάσματα, γήινες υφές) ή κάτι πιο αφηρημένο που καταγράφει την απότομη και ροή της φύσης (αντικείμενα, υλικά, χρώματα, σχήματα). Ο οργανικός σχεδιασμός ιστοσελίδων είναι μια ευρεία έννοια και μπορεί να χωριστεί σε τέσσερις κατηγορίες.
- Χρησιμοποιώντας υλικά, υφές και υφάσματα που υπαινίσσονται οργανικά στοιχεία
Αντικείμενα όπως μουσελίνα, λινάτσα, πάπυρος, χαρτί, ταινία και ξύλο. Αυτά τα στοιχεία προέρχονται από το φυσικό περιβάλλον και έτσι δίνουν μια διάταξη μια φυσική έκκληση. - Χρησιμοποιώντας αφηρημένα αποστάγματα της φύσης
Χρώματα, σχήματα, γραφικά, υλικά και βούρτσες που μιμούνται τη "ροή" της φύσης. Αυτά είναι λεπτότερα από τους κόκκους ξύλου και τα μουσελίνα και προορίζονται να δώσουν μόνο έναν υπαινιγμό μιας οργανικής ουσίας. Αυτό το βλέπουμε σε ιστότοπους που διαθέτουν σύγχρονα βελτιωμένα γραφικά και απαλή φυσική αφή. Παραδόξως, τα πλαστικά είναι τα πιο συνηθισμένα υλικά που χρησιμοποιούνται για να επιτευχθεί μια οργανική εμφάνιση: απίθανο τα υλικά είναι δίκαιο παιχνίδι στο σχεδιασμό ιστοσελίδων. - Δημιουργώντας ένα σύνολο μεγαλύτερο από το άθροισμα των τμημάτων του
Εάν δημιουργηθεί μια εικόνα που χρησιμοποιεί μόνο βούρτσες ή γραφικά για να δημιουργήσει μια άλλη εικόνα, μπορούμε να πούμε ότι θα βγούμε περισσότερο από την εικόνα ως σύνολο από το άθροισμα των τμημάτων της: τις βούρτσες ή τα γραφικά. Αυτό έρχεται πιο συχνά σε αρνητικό χώρο, καθώς οι βούρτσες μπορούν να χρησιμοποιηθούν για να περιγράψουν ή να συμπληρώσουν μια άλλη εικόνα. Όταν προσθέτουμε τα μέρη, παίρνουμε ένα πράγμα - το πινέλο - αλλά όταν κοιτάζουμε το σύνολο, παίρνουμε δύο πράγματα: το πινέλο και η εικόνα που δημιουργήθηκε. Αυτό είναι συνηθισμένο στις τυπογραφίες, καθώς μπορούμε να τις χρησιμοποιήσουμε για να δημιουργήσουμε μια εντελώς διαφορετική εικόνα, είτε παίζοντας με τον αρνητικό χώρο είτε προσθέτοντας βούρτσες. - Μια χαλαρότερη ερμηνεία του "οργανικού" σχεδιασμού ιστοσελίδων
Γενικά ορίζουμε το βιολογικό ως κάτι που έρχεται κατευθείαν από τη φύση, αλλά μπορεί επίσης να είναι κάτι που δημιουργείται (και στη συνέχεια παραμελείται) από ανθρώπους, όπως ένα εγκαταλελειμμένο κομμάτι ξύλου από ένα κτίριο ή υλικά που κάποτε διακοσμούσαν ένα σπίτι και τώρα χρωματίζονται. Η βιολογική με αυτή την έννοια σημαίνει κάτι εντελώς διαφορετικό: αναλαμβάνει αντικείμενα που παραμένουν πίσω από την κοινωνία. Παλιές φωτογραφίες, σχισμένα υφάσματα, ταπετσαρίες ταπετσαρίας: όλα αυτά μπορούν να είναι τόσο οργανικά όσο ένα κομμάτι ξύλου ή φύλλων.
Τα τελευταία χρόνια, ο οργανικός σχεδιασμός έχει υιοθετήσει μια «ουσιώδη» ποιότητα. Το Essentialist Organic Design είναι ένα πιο μινιμαλιστικό ιδεώδες: χρησιμοποιήστε μόνο αυτό που χρειάζεστε για να πετύχετε αυτό που ακολουθείτε.
Για παράδειγμα, εάν θέλαμε να δημιουργήσουμε μια εικόνα αρνητικού χώρου και βούρτσες, θα μπορούσαμε να χρησιμοποιήσουμε μόνο το ποσό της βούρτσας που απαιτείται για τη δημιουργία αυτής της εικόνας. Essentialist οργανικό σχεδιασμό οδηγεί σε μια πιο σύγχρονη εμφάνιση και εξαπλώνεται στον τομέα του web design.
Αυτές οι τέσσερις κατηγορίες μπορούν να παιχτούν με και να χειραγωγούνται για να πάρουν την αίσθηση που είναι κατάλληλη για εσάς και τον πελάτη σας. Αναμειγνύετε και ταιριάζει με όλα αυτά: μπορούν όλοι να συνεργαστούν με επιτυχία.
Συμβουλές για την επιτυχή βιολογική σχεδίαση ιστοσελίδων
- Τα γήινα χρώματα μπορούν να είναι ζωντανά
Τα καμένα πορτοκάλια, τα βαθιά γκρίζα πορφύρα και οι ελιές μπορούν να είναι εξίσου συναρπαστικά με τους ελαφρούς κίτρινους και τα έντονα κόκκινα. Επιπλέον, λειτουργούν καλύτερα μαζί και επειδή πιθανότατα θα χρησιμοποιείτε ουδέτερους τόνους στο οργανικό σας σχέδιο, μπορείτε να χρησιμοποιήσετε περισσότερα από αυτά τα χρώματα χωρίς να κατακλύσετε το σχέδιο. - Τα ζωντανά χρώματα μπορούν να είναι και βιολογικά
Το πυροσβεστικό κόκκινο ή το μπλε κοβαλτίου μπορεί να είναι εξίσου γήινο και οργανικό όπως τα καφέ και τα γκρι. Βρείτε αυτά τα χρώματα σε μια vintage εικόνα ή φυσικό μοτίβο ή αγωνία ένα μοτίβο που έχει αυτούς τους τόνους. Μπορούν να αναζωογονηθούν όταν χρησιμοποιούνται με μια παγωμένη παλέτα. - Ισορροπία, ισορροπία
Το περιβάλλον παραμένει σταθερό μέσω μιας προσεκτικής ισορροπίας στοιχείων και ο σχεδιασμός δεν διαφέρει. Αυτό είναι ακόμα πιο σημαντικό στο βιολογικό σχεδιασμό. Ισορροπίστε αυτές τις γκρίζες αποχρώσεις με πιο πολύχρωμες. Χαλαρώστε το φόντο από ξύλο με επίπεδες, μεγάλες ή απλές τράπεζες ή div στρώματα, ή ακόμα και μονόχρωμη υφή χαρτιού. Μια παγίδα με οργανικό σχεδιασμό, όπως και με όλα τα σχέδια, είναι ότι μπορείτε να έχετε πάρα πολλά από ένα καλό πράγμα, και η γραμμή μεταξύ της επιτυχίας και υπερβολική μπορεί να είναι μια χαρά. - Η βιολογική δεν σημαίνει κατάργηση του σύγχρονου
Απλά επειδή θέλετε ένα οργανικό σχέδιο δεν σημαίνει ότι πρέπει να εγκαταλείψετε τις σύγχρονες επιρροές σας. Μπορείτε να διατηρήσετε το φόντο που φαίνεται σε χρώμιο, μοβ συμπληρωματικό χρώμα ή μη-οργανικές γραμματοσειρές. Η απαλότητα ενός μοντέρνου σχεδιασμού δεν απαιτεί πολλά, ούτε χρειάζεται ένα floral φορέα. Μια απλή μπούκλα ενός γραφικού, πινέλου ή φορέα μπορεί να επιτύχει μια φυσική ουσία απλά μια χαρά. - Σκεφτείτε διαφορετικά
Υπάρχουν πολλά περισσότερα στη φύση από τα προφανή. Επιλέξτε απίθανες αντικείμενα που είναι φυσικά αλλά είναι λιγότερο κοινά, όπως το φως. - Οι αστικές περιοχές είναι επίσης περιβάλλοντα
Ακριβώς επειδή αφαιρείται από το δάσος δεν σημαίνει ότι δεν είναι πλέον «περιβάλλον». Σκεφτείτε σκυρόδεμα ή δάφκα.
Για να δείτε το βιολογικό σχεδιασμό ιστοσελίδων σε δράση, ανατρέξτε στους παρακάτω ιστότοπους. Αυτές οι ιστοσελίδες απεικονίζουν όλες, ή μερικές από τις τέσσερις κατηγορίες οργανικού σχεδιασμού ιστοσελίδων που εξηγούνται παραπάνω.
Το υπόβαθρο του Mooi, ένα πολύπλοκο μοτίβο ξύλου, είναι το κύριο και φυσικό στοιχείο εδώ. Σε αυτό, ο Mooi προσθέτει μια ζωντανή κόκκινη απόχρωση, μια από τις λίγες σύγχρονες πινελιές σε αυτό το σχέδιο που δεν απομακρύνει την οργανική του αίσθηση.
Ο Οδηγός 30Α παίζει με την πιο αφηρημένη ερμηνεία του οργανικού σχεδιασμού, που περιλαμβάνει ρουστίκ χαρτιά, παλιές αρνητικές φωτογραφίες και σφραγίδες. Επιπλέον, το 30Α μας κάνει να αισθανόμαστε ότι έχουμε σκοντάψει σε ένα ήδη υπάρχον, μη ψηφιακό περιβάλλον.
Το I Love Dust περιλαμβάνει πολλά σύγχρονα στοιχεία, αλλά έχει οργανικές συμβουλές: την κινούμενη πτώση των δακρύων, τις κυκλικές γραμματοσειρές και τους φορείς με σχήμα λουλουδιών.
Παρόλο που η επίδραση δεν είναι προφανής, η διάταξη του Entry 5 Productions έχει ενσωματωμένο οργανικό σχεδιασμό: Παρέχουμε στρογγυλεμένες άκρες στους συνδέσμους της κεφαλίδας και το λογότυπο, καθώς και μια καλή ποσότητα μαλακών, φυσικών τόνων. Ενώ οι λεπτότερες, αυτές οι οργανικές ιδιότητες απολαμβάνουν την αίσθηση της σύγχρονης εμφάνισης της Entry 5 Productions.
Μπορούμε συνήθως να σκεφτόμαστε χαρτιά, ξύλα και υφάσματα για να απεικονίσουμε οργανικό σχεδιασμό, αλλά υλικά όπως το δέρμα είναι εξίσου φυσικά και λιγότερο χρησιμοποιούμενα στο σχεδιασμό ιστοσελίδων. Επιπλέον, το Leather Saddle μας δίνει μια οργανική αίσθηση χρησιμοποιώντας παλιούς χάρτες, ετικέτες και ταπετσαρίες.
Το Web Maremma είναι ένα καλό παράδειγμα του πώς ένα σύνολο είναι κάτι περισσότερο από το άθροισμα των τμημάτων του. Αν κοιτάξουμε το λογότυπο, βλέπουμε τι προορίζεται: ένα 'W' και ένα 'M.' Ωστόσο, όταν σπάμε το σύνολο στα μεμονωμένα μέρη του, παίρνουμε ελλιπή γράμματα. Έτσι, αυτό που κερδίζουμε στο σύνολό του είναι, το μαντέψατε, περισσότερο από ότι τα μέρη συνδυάζονται.
Αυτό το μοντέρνο κομμάτι περιλαμβάνει ένα σκηνικό τσιμέντου, στρογγυλεμένες άκρες και βιολογικά σχεδιασμένα υπόβαθρα για τις περιοχές κειμένου κάτω. Αυτοί οι τύποι προσθηκών είναι χαρακτηριστικοί στο βιολογικό σχεδιασμό.
Δεν είναι μόνο το φόντο μια τραχιά υφή χαρτιού, αλλά Lorelei Web Design ενσωματώνει ένα κόκκινο σταγόνες ή διαρροή κάποιου είδους. Ένα απίθανο στοιχείο, ναι, αλλά είναι φυσικό.
Τα λευκά τούβλα του Hub ξεχωρίζουν εδώ, αλλά αυτό που είναι πιο σημαντικό να σημειωθεί είναι το dropshadow στις εικόνες και η απαλή κίνηση αυτών των εικόνων όταν περάσετε πάνω από αυτά. Η σκιά μας κάνει να αισθανόμαστε ότι οι εικόνες ήταν πάντα εκεί, και η κίνηση των εικόνων όταν κηλιδώνονται μιμείται τη ροή της φύσης. Το πράσινο, αν και ζωντανό, είναι σαφώς οργανικό επίσης.
Αυτό που ξεχωρίζει για το Kulturbanause είναι ο σπασμένος τοίχος, υπονοώντας ότι αυτό το τείχος έχει καταρρεύσει με την πάροδο του χρόνου. Επιπλέον, έχουμε το νερό που διαρρέει από την άλλη πλευρά στα νησιά της γης. Αυτό χρησιμοποιεί δύο μορφές οργανικού σχεδιασμού ταυτόχρονα: τη χρήση αληθινών φυσικών εικόνων και ρυθμίσεων και τη χρήση κάτι που φοριέται και αποσυντίθεται.
Η φυσική ομορφιά του Pixel Umbrella είναι στο φόντο του - ένα γκρι τείχος με υφή που υποδηλώνει σκυρόδεμα ή γύψο - και τις απαλές καμπύλες της γραμματοσειράς (δηλαδή την ομπρέλα «β»).
Το πουλί μπορεί να είναι μια καλή προσθήκη για να κερδίσει οργανική φλόγα, αλλά τα χρώματα της γραμματοσειράς είναι αυτό που οδηγεί τη διάταξη του Janic Design. Το CSS είναι μια εστίαση σε αυτό το είδος διάταξης και η Janic Design προσθέτει την οργανική έκκληση χρησιμοποιώντας διαφορετικές αποχρώσεις από πράσινα, καραβίδες, κίτρινα, καφέ και βαθιά γκρίζα μπλε.
Όταν όλα τα άλλα αισθάνονται μοντέρνα, προσθέστε μια μικρή φυσική αίσθηση στο λογότυπό σας. Το λογότυπο της βροχής του Josh Puckett είναι απόλυτα οργανικό και ο χρωματισμός του σταγονιδίου ενισχύει μόνο τη φυσική του ουσία.
Τι δεν είναι οργανικό για το σχεδιασμό ιστοσελίδας I Love Colors; Τα χρώματα, τα διανύσματα, τα σχισμένα χαρτιά και το υφή φόντου προσδίδουν στο βιολογικό ενδιαφέρον αυτής της διάταξης.
Το Greydient χρησιμοποιεί μια περιστροφή στις μεγάλες εικόνες, αλλά ο καθένας έχει οργανική ελκυστικότητα, με προσθήκες όπως ερειπωμένα αντικείμενα, όπως αυτά που βλέπετε εδώ, και φυτικά πινέλα.
Λουλούδια, πουλιά και εικόνες που μοιάζουν με σύννεφο. Ένα οργανικό σχέδιο που είναι τόσο εμφανές δεν μπορείτε να το χάσετε.
Η εικόνα του πλανήτη είναι ωραία, αλλά το λογότυπο Oypro - το οποίο μοιάζει με λίγα πέταλα φύλλων - και οι μαλακές άκρες των ζεύξεων είναι αυτό που τελειώνει την οργανική αίσθηση. Οι στροφές του φυσικού χρώματος βοηθούν επίσης, φυσικά.
Η διάταξη του Orange Label έχει πολλές σύγχρονες ιδιότητες, με τη χρήση τετράγωνων κειμένων και απλού χρώματος. Ωστόσο, η Orange Label προσθέτει σε οργανικό σχεδιασμό με τη χρήση περιγραμμάτων φυσικών αντικειμένων, μαλακών ακμών και, κυρίως, περιοχών κειμένου που αισθάνονται σαν να προέρχονται από αρνητικό χώρο.
Ένα άλλο παράδειγμα εμφανούς οργανικού σχεδιασμού, η διάταξη του VixML αποτελείται από εικόνες με υγρασία και θόλωση, μια πόλη και στρογγυλεμένες άκρες.
Το Brown Blog Films μπορεί να έχει μια βαριά χρήση ξύλου στο σχεδιασμό του, αλλά οι ξύλινες σανίδες ως συνδέσεις και η 'κρεμασμένη' εικόνα του λογότυπου είναι αυτό που ξεπερνά την οργανική γοητεία εδώ.
Εκτός από το δέντρο και την καμπύλη γραμματοσειρά στο λογότυπο, υπάρχουν δύο οργανικά στοιχεία που πρέπει να σημειώσετε: τη χειρόγραφη γραμματοσειρά στην πλοήγηση και το κύριο φόντο.
Αυτό που κάνει το Got Aqua ένα ιδιαίτερο παράδειγμα οργανικού σχεδιασμού δεν είναι η εικόνα του κρανίου ή του χειρογράφου, αλλά το φόντο του φελλού. Είναι μια ενδιαφέρουσα επιλογή για μια φυσική αίσθηση, αλλά είναι φυσικό και μια μεγάλη ουδέτερη υφή.
Αυτό που είναι διασκεδαστικό να θυμάστε για τη φύση είναι ότι δεν αποτελείται μόνο από φλοιό και πουλιά (και τα παρόμοια). Επίσης, αποτελείται από φωτεινά κύματα, αέρια, σπινθήρες, φως, ανάμεσα σε (ξεκάθαρα) άλλα πράγματα. Η Noe Design παίζει με αυτές τις απίθανες πηγές έμπνευσης, δίνοντάς μας εντατικές κορδέλες χρώματος και κειμένου που φαίνονται φωτισμένες.
Το Bell 2 Lodge ξεχωρίζει στο ότι τα γραφικά είναι μεγάλα και είναι ένας προφανής συνδυασμός φορέων και φωτογραφιών. Μπορούμε να δούμε ότι το ξύλο είναι μια εικόνα του πραγματικού ξύλου, ενώ τα φύλλα που χρησιμοποιούνται είναι καθαρά γραφικά που χτίστηκαν σε ένα πρόγραμμα. Πρόκειται για ένα παραδειγματικό έργο για το τι είναι κατασκευασμένο από τον άνθρωπο και τι ουσιαστικά δεν είναι.
Το λογότυπο του DJ Folio είναι το κύριο οργανικό στοιχείο του site, χρησιμοποιώντας απλοποιημένα, στρογγυλεμένα σχήματα που έχουν φυσική αίσθηση. Επίσης, μέσα από τους ξεχωριστούς κύκλους και τα γραφικά κομμάτια του 'J', έχουμε ένα προϊόν που είναι περισσότερο από το άθροισμα των μεμονωμένων σχημάτων.
Η κωδικοποίηση είναι αυτό που έχει σημασία εδώ, εκτός από τις εμφανείς οργανικές προσθήκες όπως το χρώμα, τα φύλλα και ο ουρανός. Η κωδικοποίηση που χρησιμοποιείται για να τρέξει το χαρτοφυλάκιο του Mathieu Furnon κάνει τη μετάβαση από την εικόνα στην εικόνα απρόσκοπτη και φυσική.
Ο συνδυασμός των σκούρων αποχρώσεων με τα πιο δροσερά μπλουζάκια και τις κρέμες, καθώς και η «εφελκυστική» επίδραση στο μισό λογότυπο προσθέτουν λεπτές οργανικές πινελιές στα προφανή ξύλα και χαρτιά.
Η προσθήκη γραμματοσειράς "χειρόγραφου", off-kilter που συνοδεύει την πιο γραφική γραμματοσειρά είναι μόνο μία πτυχή του οργανικού σχεδιασμού εδώ.
Τα φυσικά ανάγλυφα, πορτοκάλια, πεπόνια και καφέ μαλακώνουν το τραγανό, μοντέρνο λευκό σε αυτή τη διάταξη.
Κοιτάξτε πέρα από τα δέντρα. τα χρώματα του νερού και οι βαθιές αλλά γήινες αποχρώσεις στην εικόνα κεφαλίδας προσθέτουν μια δραματική αλλά οργανική έκκληση.
Γράφτηκε αποκλειστικά για WDD από τη Sarah Thompson.
Ποιες υφές και ήχους προτιμάτε όταν δημιουργείτε μια οργανική αίσθηση; Ως χρήστης, ποιο πιστεύετε ότι είναι πιο ελκυστικό: λεπτές ή εμφανείς οργανικές θεματικές ενότητες;