Μια ανασκόπηση των συνεχών σχεδίων στο διαδίκτυο
Η οπτική γλώσσα μιας ιστοσελίδας εντυπωσιάζει τον επισκέπτη πολύ πέρα από την πρώτη ματιά.
Στην πραγματικότητα, παρατηρώντας τους καλύτερους ιστότοπους, παρατηρείτε ότι οι μικρές λεπτομέρειες σας μιλούν υποσυνείδητα και ότι η συνέπεια βελτιώνει την εμπειρία σας στον ιστότοπο και ως εκ τούτου σας καθιστά πιο πιθανό να επιστρέψετε.
Σε αυτό το άρθρο θα διερευνήσουμε τι κάνει ένα σχέδιο συνεπές και θα παρουσιάσουμε μερικά από τα πιο συνεπή σχέδια ιστοσελίδων εκεί έξω.
Παρακαλούμε σχολιάστε στο τέλος του άρθρου σχετικά με τη συνέπεια αυτών των ιστότοπων και αισθανθείτε ελεύθεροι να προσθέσετε συνδέσμους σε άλλους που ακολουθούν αυτήν την αρχή.
Τι εννοούμε με συνέπεια στο σχεδιασμό; Σύμφωνα με αυτόν τον ορισμό , η συνέπεια μπορεί να οριστεί ως: "Μια αρμονική ομοιομορφία ή συμφωνία μεταξύ των πραγμάτων ή τμημάτων".
Στόχος ως σχεδιαστής είναι η δημιουργία τάξης, ώστε να είναι εύκολο για τους χρήστες να βρουν τις πληροφορίες που αναζητούν. Η συνέπεια μπορεί να σας βοηθήσει να επιτύχετε αυτόν τον στόχο.
Λίστα ελέγχου των λεπτομερειών
Κατ 'αρχάς, ας ορίσουμε τα κριτήρια βάσει των οποίων θα καθορίσουμε αν οι ιστοθέσεις που εξετάζουμε εδώ είναι συνεπείς. Ο καθορισμός κριτηρίων για τον εαυτό σας θα ωφελήσει επίσης το δικό σας καθημερινό έργο σχεδιασμού. Όπως μου αρέσει να πω, ο καλός σχεδιασμός δημιουργείται για πρώτη φορά με καλή παρατήρηση . Εδώ είναι τα κριτήρια μας:
Τυπογραφική συνοχή:
- Υπάρχει σταθερός κάθετος ρυθμός;
- Είναι συνεπής η τυπογραφική ευθυγράμμιση;
- Είναι συνεπείς οι επιλογές γραμματοσειράς;
- Είναι η τυπογραφική πλοήγηση προβλέψιμη σε όλες τις σελίδες;
Γραφική συνοχή:
- Οι εικόνες του ιστότοπου μεταδίδουν σταθερή διάθεση;
- Τα χρώματα στις εικόνες ταιριάζουν;
- Είναι συνεπείς οι υφές των εικόνων;
- Είναι τα μεγέθη των εικόνων συνεπή με τη συνολική δομή του ιστότοπου και μεταξύ τους;
Χρώμα συνοχή:
- Τα χρώματα χρησιμοποιούνται σταθερά στις σελίδες;
Εφαρμογή εικονιδίων και κουμπιών:
- Είναι τα εικονίδια της ίδιας οικογένειας του ιστότοπου;
- Τα εικονίδια ταιριάζουν με το μέγεθος;
Ένας δικτυακός τόπος δεν πρέπει να πληρούν αυτά τα κριτήρια για την τελεία, αλλά ο κατάλογος είναι ένα καλό σημείο εκκίνησης για να βοηθήσει να κάνετε τα δικά σας σχέδια συνεπή και αρμονικά.
Εντάξει, έχουμε τώρα μια ωραία μικρή λίστα με τις οποίες μπορούμε να παίξουμε. Ας εξετάσουμε τους ιστοτόπους μας, μάθουμε από αυτούς και εμπνέουμε!
52 εβδομάδες του UX
Ποιες είναι μερικές από τις σημαντικότερες στιγμές αυτής της ιστοσελίδας:
- Ο λευκός χώρος στην κεφαλίδα είναι εξίσου διαιρεμένος.
- Η τυπογραφία είναι σταθερά ευθυγραμμισμένη, ξεπλύνετε αριστερά με μια άκρη δεξιά.
- Η επίμονη πλοηγηθείσα πλοήγηση στην κορυφή είναι τόσο έξυπνη όσο και οικεία.
- Οι εικόνες για τις θέσεις είναι πάντα ασπρόμαυρες.
Τώρα, επειδή αυτό το άρθρο αφορά λεπτομέρειες, θέλω να επισημάνω δύο δευτερεύοντα ζητήματα με αυτόν τον ιστότοπο, τόσο στο υποσέλιδο: Πρώτον, παρατηρήστε πώς το κουμπί αναζήτησης "Go" έχει προβληματισμό, ενώ τα άλλα στοιχεία στον ιστότοπο δεν (συγκρίνετε, για παράδειγμα, το κουμπί RSS στην κορυφή).
Δεύτερον, παρατηρήστε ότι ο χώρος μεταξύ των επικεφαλίδων και του κειμένου είναι πολύ πιο σφιχτός στο υποσέλιδο σε σύγκριση με τον υπόλοιπο ιστότοπο.
Κορδέλες κόκκινου
- Πρώτον, το πιο σημαντικό στοιχείο της ιστοσελίδας: το κόκκινο! Χρησιμοποιείται όμορφα και σταθερά από το λογότυπο στις κεφαλίδες στις συνδέσεις στα κουμπιά.
- Στη συνέχεια, η υφή των γραφικών πλήκτρων είναι ίδια με αυτά που χρησιμοποιούνται για το λογότυπο.
- Επίσης, παρατηρήστε ότι τα κουμπιά είναι οπτικά όλης της ίδιας οικογένειας, ακόμα και τα κοινωνικά εικονίδια στο κάτω μέρος.
- Ο τύπος οθόνης είναι μια ωραία πλάκα serif-πάλι, που χρησιμοποιείται με συνέπεια από το λογότυπο στις κεφαλίδες στα κουμπιά.
- Τέλος, τα στοιχεία κειμένου σε ολόκληρη την ιστοσελίδα είναι ευθυγραμμισμένα με συνέπεια, ξεπλύνετε αριστερά και ακουμπά δεξιά.
Yaron Schoen
- Το πρώτο πράγμα που αγγίζει το μάτι είναι πώς η εικόνα στην κεφαλίδα παίζει με βάθος. Ακόμα και τα τέσσερα γραφικά στοιχεία κάτω από το pop έξω από τα δοχεία τους και παίζουν με βάθος με τον ίδιο τρόπο.
- Η τυπογραφία ευθυγραμμίζεται τέλεια σε ένα πλέγμα.
- Η γραμματοσειρά επιλέγεται και εκτελείται σωστά. Η αρχική σελίδα και άλλες σελίδες παρουσιάζουν συνέχεια.
- Τα χρώματα είναι επίσης πολύ συνεπή, παίζοντας όμορφα με το σκούρο μπλε στο γαλαζωπό πράσινο, σε όλη τη διαδρομή από την κεφαλίδα στο υποσέλιδο.
Fuzzco
- Κοιτάξτε την υφή στην επάνω πλοήγηση. χρησιμοποιείται επίσης για τις εικόνες κοντά στο κάτω μέρος.
- Ελέγξτε τον τύπο της κεφαλίδας στις σελίδες. όμορφα γίνεται με προσαρμοσμένο Flash, δίνοντάς του μια δημιουργική αίσθηση.
- Η serif είναι συνεπής σε όλη την αρχική σελίδα, αλλά σπάει λίγο στις εσωτερικές σελίδες.
- Τα χρώματα στην κορυφαία πλοήγηση ταιριάζουν με το υποσέλιδο, εναρμονίζοντας και πλαισιώντας το περιεχόμενο.
Styleboost
- Το μέγεθος σίγουρα κάνει αυτόν τον ιστοχώρο συνεπή: μεγάλο . Μεγάλα κουμπιά, μεγάλες εικόνες (όλες συνεπείς σε μέγεθος), μεγάλος τύπος, μεγάλος λευκός χώρος.
- Το χρώμα διατηρείται στο ελάχιστο και χρησιμοποιείται καλά. Το γαλάζιο διατηρεί αρμονία και το δευτερεύον γκρίζο παίζει με το βάθος και την ιεραρχία.
- Τα κουμπιά είναι όλα μεγάλα και ομοιόμορφα. Είναι επίσης ελαφρώς στρογγυλεμένες, που ταιριάζουν στο πλαίσιο αναζήτησης.
- Η δομή του δικτύου είναι απλή και σας λέει τι θα ακολουθήσει. Ακόμη και το υποσέλιδο είναι ανάλογο, το οποίο φαίνεται να είναι κοντά στη χρυσή αναλογία.
Delicious Monster
Αυτός ο ιστότοπος δεν είναι καινούργιος, αλλά είναι όμορφος για το πώς παρέμεινε συνεπής όλα αυτά τα χρόνια και δεν έχει ηλικιωθεί λίγο. Η προσοχή στη λεπτομέρεια βοήθησε.
- Παρατηρήστε τις υφές. Ο ιστότοπος πλαισιώνεται από ξύλινο ράφι, το οποίο συνδέεται με το θέμα του λογισμικού που προσφέρεται από την εταιρεία.
- Τα γραφικά στοιχεία όπως το γρασίδι και τα φυτά διατηρούν την αρμονία.
- Κάθε τμήμα έχει στρογγυλεμένες γωνίες, ακόμα και τα κουμπιά παρουσίασης.
- Το καταπράσινο-κίτρινο κυριαρχεί στη σελίδα, προσκαλώντας σας να εισέλθετε σε αυτόν τον φανταστικό και αξέχαστο κόσμο.
Richard Meier & Partners Αρχιτέκτονες.
Σχεδιάστηκε από το Massimo Vignelli , ο οποίος είναι γνωστός για την κατοχύρωση του πλέγματος και την παραγωγή σύγχρονων, συνεπών και λογικών σχεδίων.
- Παρατηρήστε την ευθυγράμμιση των γραφικών στοιχείων. Ο τύπος flush-left στο μενού ευθυγραμμίζεται με τις παρακάτω εικόνες.
- Ο οριζόντιος κανόνας κάτω από την υπο-πλοήγηση είναι επίμονος, βοηθώντας τους χρήστες να προσανατολίζονται στον ιστότοπο.
- Ο χώρος μεταξύ της πλοήγησης και του περιεχομένου του σώματος είναι συνεπής, δίνοντας στο μάτι μια σαφή πορεία που θα ακολουθήσει.
- Και η τυπογραφία είναι απλή, ξεπλύνετε αριστερά και sans-serif, πέφτοντας σταθερά στο πλέγμα.
Η ομάδα πίσω Αρχιτέκτονες Πληροφοριών έχει επίσης καταλάβει την απλότητα, το σχεδιασμό πλέγματος και τη συνέπεια.
- Παρατηρήστε πως η πλοήγηση στην κορυφή είναι ευθυγραμμισμένη με το περιεχόμενο του σώματος παρακάτω.
- Η παλέτα χρωμάτων είναι απλή και συνεπής: κόκκινη, άσπρη και μαύρη.
- Τα στοιχεία κειμένου είναι ομοιόμορφα ευθυγραμμισμένα. Παρατηρήστε πως ο χώρος μεταξύ των οριζόντιων κανόνων είναι σταθερός στη σελίδα.
Wilson Miner
- Οι ημερομηνίες και το περιεχόμενο meta ευθυγραμμίζονται στην πρώτη στήλη, ακολουθούμενη από το περιεχόμενο του σώματος.
- Παρατηρήστε πώς η πλοήγηση στο επάνω μέρος πέφτει στο πλέγμα, ευθυγραμμίζοντας το παρακάτω περιεχόμενο.
- Η τυπογραφία είναι απλή λευκή και μαύρη: άσπρη για τους τίτλους των τμημάτων, μαύρη για το σώμα αντίγραφο.
Tapbots
- Το πρώτο πράγμα που παγιδεύει το μάτι μου είναι η άριστη χρήση του λευκού χώρου, ιδιαίτερα η ισορροπία μεταξύ του λογότυπου και της πλοήγησης, τόσο πάνω όσο και κάτω.
- Τα εικονίδια όλα φαίνεται να προέρχονται από την ίδια οικογένεια, δημιουργώντας αρμονία.
- Η χρήση βάθους, από τις κορυφαίες γραφικές παραστάσεις έως τις εικόνες υποσέλιδου, είναι επίσης συνεπής.
- Τα χρώματα ταιριάζουν σε ολόκληρη τη σελίδα: το μαύρο στην κορυφή ταιριάζει με το υποσέλιδο. το κόκκινο κουμπί στην κορυφή αντιστοιχεί στο παρακάτω κουμπί αναζήτησης. και η γκρι πλοήγηση ταιριάζει με τη γκρι γραμμή στο υποσέλιδο.
Τυλίγοντας
Ο συνεπής σχεδιασμός απαιτεί πολλά εργαλεία και μπορεί να είναι δύσκολο να επιτευχθεί.
Μια άκρη που μπορώ να προσφέρω είναι να ξεκινήσετε με ένα ωραίο πλέγμα και στη συνέχεια να χτίσετε ένα wireframe επάνω του. Αυτό θα σας δώσει μια πανοραμική άποψη των γραφικών στοιχείων και του τρόπου που σχετίζονται μεταξύ τους.
Τα παραπάνω παραδείγματα θα σας δώσουν τροφή για σκέψη σχετικά με την εκτέλεση του σχεδίου σας. Η συνοχή αποτελείται από πολλά μέρη, τα οποία αποτελούν βασικά συστατικά της διαδικασίας.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Noam Almosnino, σχεδιαστή ιστοσελίδων στο Μπρούκλιν της Νέας Υόρκης. Ακολουθήστε τον Noam στο Twitter , ή επισκεφθείτε την ιστοσελίδα του hellonoam.com .
Γνωρίζετε άλλους συνεπούς ιστότοπους για να μοιραστείτε μαζί μας; Παρακαλώ δημοσιεύστε τα στα σχόλια!