Ασύμμετρη ισορροπία στο σχεδιασμό ιστοσελίδων
Όταν κάλυψα για πρώτη φορά την ιδέα του συμμετρικά σχέδια σχεδίασης εδώ στο Webdesigner Depot δεν είχα την πρόθεση να κτυπώ στην έννοια του ασυμμετρικού σχεδιασμού.
Ωστόσο, όσο περισσότερο το σκέφτηκα, τόσο περισσότερο αισθάνθηκα υποχρεωμένος να καλύψω το θέμα για να αντικρούσω μερικές από τις ιδέες που περιστρέφονται γύρω από τα συμμετρικά σχέδια.
Σε ασύμμετρη σχεδίαση βρίσκουμε σχέδια που περιέχουν στοιχεία που δεν δημιουργούν κατοπτρική εικόνα. Τις περισσότερες φορές, αυτά τα ασυμμετρικά σχέδια είναι στην πραγματικότητα ισορροπημένα, αλλά απλώς όχι μέσα από τέλεια παρόμοια μισά.
Αυτό το είδος σχεδιασμού είναι στην πραγματικότητα πολύ πιο εύκολο να έρθει, δεδομένου ότι το μεγαλύτερο μέρος του περιεχομένου δεν προσφέρεται για τέλεια συμμετρία.
Ας εξετάσουμε μια ποικιλία ιστότοπων που θέτουν αυτήν την προσέγγιση σχεδιασμού στην εργασία και ίσως ανακαλύψουν κάποιες ιδέες που μπορούν να επηρεάσουν τη δουλειά σας στο σχεδιασμό.
Εισαγωγή στη χρήση ασυμμετρίας
Bully Entertainment
Ως εισαγωγή στην έννοια της ασύμμετρης σχεδίασης, αυτό το δραματικό σχέδιο προσφέρει ένα πολύ ωραίο σημείο εκκίνησης. Ενώ δεν υπάρχει κανένας λόγος, ο σχεδιασμός αυτός δεν θα μπορούσε να αναδιαμορφωθεί για να παράγει τέλεια συμμετρία, δεν θα λειτουργούσε σχεδόν εξίσου καλά. Τα μεγάλα, πλούσια εικονογραφημένα σχέδια αντισταθμίζουν όμορφα το κείμενο της αρχικής σελίδας. Το μέγεθός τους διασφαλίζει ότι είναι εξαιρετικά ορατά και αποτελούν την κύρια οπτική κινητήρια δύναμη του σχεδιασμού. Αυτή η φυσική ισορροπία μεταξύ ενός μεγάλου στοιχείου και μιας πιο πυκνά συσκευασμένης εναλλακτικής είναι μια πολύ κοινή προσέγγιση.
Jorge Rigabert
Αυτή η διάταξη παρουσιάζει μια αρκετά πρότυπη διάταξη ιστού. Μία μικρή πλευρική στήλη που περιέχει πλοήγηση κλειδιού, σε συνδυασμό με μια πολύ μεγαλύτερη στήλη για το περιεχόμενο των ιστότοπων. Αυτό είναι ίσως ένα από τα χούφτα των τυποποιημένων διατάξεων που χρησιμοποιούνται καθημερινά από τους σχεδιαστές. Πιστεύω ότι μεγάλο μέρος της διαδικασίας σχεδιασμού συμβαίνει αυτόματα αυτόματα. Εξετάστε την πλευρική γραμμή σε αυτήν την περίπτωση, η οποία ισορροπεί ασύμμετρα τη στήλη περιεχομένου. Η πλευρική γραμμή έχει πιο σκούρο χρώμα, γεγονός που την βοηθά να αντισταθμίσει το ανοιχτότερο κανάλι περιεχομένου. Χωρίς το πιο σκούρο φόντο, η πλαϊνή μπάρα θα χάσει πιθανότατα και δεν ξεχωρίζει σχεδόν εξίσου καλά.
Εικόνες για ισορροπία κειμένου
Μια άλλη αρκετά τυπική προσέγγιση στο σχεδιασμό ιστοσελίδων που καταλήγει να είναι ένα ασύμμετρο στοιχείο σχεδιασμού είναι η αντιστοίχιση του κειμένου με εικόνες. Όπως θα δείτε στα παρακάτω δείγματα, το καθένα έχει μια μεγάλη εικόνα. Αυτή η εικόνα έχει αντιστοιχιστεί κατά κάποιο τρόπο με ένα μπλοκ κειμένου. Αυτός ο συνδυασμός είναι εξαιρετικά κοινός.
Το τέχνασμα είναι αρκετά προφανές, απλώς εξασφαλίστε ότι οι δύο αλληλοσυμπληρώνονται με τον άλλο τρόπο. Δεδομένου ότι αυτά τα δύο στοιχεία συνήθως δημιουργούν ένα βρόχο για τα μάτια, είναι σημαντικό να συνεργάζονται με κάποιο τρόπο. Η πιο προφανής προσέγγιση είναι να απεικονίσει η εικόνα κυριολεκτικά ή να δείξει τι μιλάει το κείμενο. Μια άλλη κοινή τακτική είναι να έχει η εικόνα να επεκτείνει την ιδέα που παρουσιάζεται στο κείμενο.
Ακολουθούν μερικά δείγματα που πρέπει να λάβετε υπόψη.
Κέικ Γλυκό κέικ
Αυτός ο σχεδιασμός είναι σίγουρα καλά ισορροπημένος, αλλά κάνει χρήση πολλών ασύμμετρων στοιχείων για να επιτευχθεί αυτό. Παρατηρήστε τη μεγάλη εικόνα ενός κέικ σε συνδυασμό με το κείμενο. Η εικόνα είναι αρκετά προφανής, αλλά ουσιαστικά σημαντική. Σε αυτή την περίπτωση το κέικ όχι μόνο μας ενημερώνει ότι πρόκειται για ένα κατάστημα κέικ, αλλά τι συγκεκριμένο στυλ μπορεί να προσφέρει. Συνδυάστε αυτό με το διευκρινιστικό κείμενο που σχετίζεται με αυτό και έχετε μια αρκετά χαριτωμένη πίσσα πωλήσεων. Αυτό δεν είναι για να αναφέρουμε ακόμη και το απίστευτα νόστιμο σχεδιασμό αυτού του site είναι τυλιγμένο μέσα.
Περισσότερα σόδα
Το παράδειγμα αυτό χρησιμοποιεί επίσης ασύμμετρα στοιχεία σχεδιασμού βασισμένα σε μια μεγάλη εικόνα σε συνδυασμό με ένα μπλοκ κειμένου. Σε αυτή την περίπτωση, η σύνδεση δεν είναι σχεδόν τόσο ξεκάθαρη. Δεν υπάρχει προφανές στοιχείο πωλήσεων. Αντ 'αυτού, η εικόνα γίνεται πιο διακοσμητική και δημιουργεί μια γενική αίσθηση στυλ για τον ιστότοπο. Κατά τη γνώμη μου, είναι ελαφρώς λιγότερο λειτουργική, αλλά είναι πραγματικά δύσκολο να πούμε χωρίς να γνωρίζουμε πόσο αποτελεσματικός είναι ο ιστότοπος. Φαίνεται ότι ένα οπτικό όπως αυτό έχει έναν μοναδικό στόχο να σας δελεάσει να σκάψετε λίγο περισσότερο για να δείτε τι είναι όλα αυτά. Ένα είδος teaser, αν θέλετε.
Προσαρμοστικός σχεδιασμός ιστοσελίδων
Όπως πιθανότατα έχετε ήδη καταλάβει, αυτό το μοτίβο είναι τόσο κοινό όσο το μπλε χρώμα. Θα τολμούσα να υποθέσω ότι σχεδόν κάθε τοποθεσία καταλήγει να βάζει ένα τέτοιο οπτικό εργαλείο για να δουλέψει κάποια στιγμή. Νομίζω ότι αυτή η κοινή φύση το κάνει ένα θέμα που αξίζει να συζητηθεί. Συχνά βρίσκω τις περισσότερες έμπνευση και φρέσκες ιδέες από την επανεξέταση των πράξεων που κάνω ξανά και ξανά χωρίς σκέψη.
Αυτός ο απλός ιστότοπος προωθεί ένα βιβλίο. Και φυσικά το κύριο στοιχείο που προσγειώνεται σε αυτό είναι μια μεγάλη εικόνα του βιβλίου. Συνδυάστε το με το μεγάλο μπλοκ κειμένου και έχετε μια καλά ισορροπημένη περιοχή που περιέχει όλα τα κρίσιμα στοιχεία. Το πιο σημαντικό είναι ότι τελειώνει με μια ματιά που προσελκύει τη δράση. Η συνέχεια αυτής της περιοχής είναι απλή και επί τόπου. Τα μάτια εύκολα ρέουν μέσα από αυτό και καταναλώνουν τις κρίσιμες πληροφορίες. Δεν είναι συγκεχυμένη ή περίπλοκη ή έξυπνη ή δύσκολη. Η προσέγγιση είναι απλή και ξεκάθαρη.
Στοιχεία προσκηνίου και φόντου
Μια νέα προσέγγιση στον ασύμμετρο σχεδιασμό είναι να χρησιμοποιηθούν στοιχεία φόντου που αντισταθμίζουν ασύμμετρα τα στοιχεία των νέων. Αυτός ο τύπος προσέγγισης δημιουργεί μια ενδιαφέρουσα δυναμική, όπου το φόντο εξυπηρετεί περισσότερο ως λειτουργικό ρόλο ως μέρος του περιεχομένου και, ωστόσο, εξακολουθεί να αποτελεί μέρος του ιστορικού του ιστότοπου. Τις περισσότερες φορές αυτό γίνεται μέσω απλών επικαλύψεων που δημιουργούν την ψευδαίσθηση του βάθους. Ακολουθούν μερικά δείγματα που πρέπει να λάβετε υπόψη.
Peter McLeavey Gallery
Οι ιστοσελίδες αυτής της συλλογής είναι μια τέλεια επίδειξη αυτής της ιδέας. Εδώ το στοιχείο φόντου εξυπηρετεί πολλούς ρόλους. Πρώτον, μέχρι το σημείο αυτής της ενότητας δημιουργεί μια ασύμμετρη ισορροπία με τον μεγάλο γκρίζο κύκλο στο προσκήνιο. Αυτός ο οπτικός συνδυασμός δημιουργεί δύο περιοχές που προκαλούν τα μάτια να αναπηδούν εμπρός και πίσω. Αυτό, κατά τη γνώμη μου, είναι καλό.
Το στοιχείο στα αριστερά περιέχει την κύρια επωνυμία και συνδέσμους στο περιεχόμενο του ιστότοπου, ενώ το στοιχείο φόντου σας ενημερώνει για το περιεχόμενο του ιστότοπου. Εξετάζετε έναν ιστότοπο γκαλερί και αυτό γίνεται άκρως εμφανές μέσα σε λίγα δευτερόλεπτα από την προσγείωση στον ιστότοπο. Λατρεύω ότι ένα τέτοιο πληροφοριακό στοιχείο, όπως το υπόβαθρο, μπορεί επίσης να διαδραματίσει σημαντικό ρόλο στο σχεδιασμό και στο γενικό στυλ του χώρου. Ειδικά όταν αυτό αντανακλά τόσο τέλεια με το πλαίσιο του προϊόντος που προσφέρει η περιοχή. Μια τέτοια απλή προσέγγιση, αλλά πολύ αποτελεσματική.
Αλεξάνταρ Γκρικίνιτς
Αυτό είναι απλό σχετικά με μένα σελίδα επίσης αγκαλιάζει αυτή την απλή ιδέα, όπου ένα στοιχείο φόντου εξισορροπεί ασυμμετρικά ένα ασπρόμαυρο. Σε αυτή την περίπτωση όμως, το φόντο δεν είναι απολύτως σαφές. Και αυτό μου αρέσει πραγματικά. Η ψευδαίσθηση του βάθους είναι τελείως εκεί, και χωρίς καμία αλληλεπικάλυψη, είναι πραγματικά δύσκολο να αποφασίσουμε ποιο είναι το φόντο. Υποθέτω ότι θα μπορούσαμε να υποστηρίξουμε ότι το άλμα δεν είναι στο παρασκήνιο. Ανεξάρτητα από αυτό, η ασύμμετρη ισορροπία είναι ξεκάθαρη. Και χωρίς τον όμορφο συνδυασμό διαφορετικών στοιχείων, η σελίδα δεν θα υπήρχε. Ο σχεδιασμός, με πολλούς τρόπους, βασίζεται αποκλειστικά στην έννοια της ασύμμετρης ισορροπίας. Συχνά, φαίνεται ότι εξαιρετικά απλά σχέδια μπορεί να φαίνονται εξαιρετικά με όμορφες αντιθέσεις όπως αυτό.
Ρόμπερτ Ντάμπι
Σε αυτή την περίπτωση, το φόντο παίζει ένα ενδιαφέρον ρόλο στο σχεδιασμό, αλλά δεν παράγει τα ασύμμετρα στοιχεία που έχουμε δει μέχρι στιγμής. Κατά τη γνώμη μου, το μεγάλο οπτικό είναι σαφώς στοιχείο πρωτοποριακού σχεδιασμού. Αυτό που αγαπώ, είναι το πώς υπονομεύει μελαγχολικά αυτή τη γραμμή με κάτι τόσο απλό όσο η σκιά κάτω από την εικόνα. Αυτό συνδυάζει αποτελεσματικά με το φόντο και δημιουργεί μια όμορφη δυναμική. Προφανώς, η μεγάλη εικόνα είναι ασύμμετρα ισορροπημένη με το αντίγραφο δίπλα της. Βήμα μέσα από τις σελίδες του ιστότοπου και θα διαπιστώσετε ευχάριστα ότι το φόντο αλλάζει και συγχωνεύεται με τα γραφικά με πολύ ενδιαφέροντα τρόπους. Ένα εκπληκτικό σχέδιο που αισθάνεται φρέσκο, καθαρό και εξαιρετικά ομαλό. Φαίνεται σαν μια κακή παρουσίαση για ένα site χαρτοφυλακίου σε με.
Δέκα ακόμα σχέδια
Παρακάτω έχω δώσει δέκα επιπλέον σχέδια που χρησιμοποιούν ασύμμετρα στοιχεία. Όπως ήδη ανέφερα, θα μπορούσα να τοποθετήσω πολλές ιστοσελίδες σε αυτή την κατηγορία. Έτσι, για τους σκοπούς αυτού του άρθρου έχω επιλέξει προσεκτικά τα σχέδια που αισθάνομαι να κάνουν χρήση της προσέγγισης με ελαφρώς άτυπα και δημιουργικούς τρόπους. Εξετάστε κάθε σχέδιο υπό το πρίσμα αυτού του θέματος και ελπίζω ότι θα αποκτήσετε μερικές νέες ιδέες για να εμπνεύσετε το επόμενο σχέδιό σας.
Greenluv
Andersson Wise
Πρόβλεψη
13 συζύγους
Το Ίδρυμα Raffles
Urban Svensson
Στροβιλοδρόμιο
Purlize
Λεωφορεία στη Ζυθοποιία
Humaan
συμπέρασμα
Η ισορροπία αποτελεί βασικό στοιχείο της διαδικασίας σχεδιασμού και η χρήση ασύμμετρων στοιχείων είναι εξίσου βασική. Πάντα αγαπώ να ανακαλύπτω τα βασικά του σχεδιασμού καθώς βρίσκω ότι το καταλαβαίνω πάντα με έναν νέο τρόπο που έχει αντίκτυπο στην εργασία που κάνω. Υπάρχουν αμέτρητοι τρόποι προσέγγισης των πραγμάτων και το σπάσιμο των προτύπων μας μπορεί συχνά να οδηγήσει σε φρέσκα και νέα σχέδια που αναζωογονούν το πάθος μας για τις δουλειές μας.
Ποια είναι τα αγαπημένα σας ασύμμετρα σχέδια ιστοσελίδων; Ποιος κάνει κάτι διαφορετικό με ασυμμετρία; Ενημερώστε μας στα σχόλια!