4 Βασικές τάσεις διάταξης για το 2015
Ο ιστός έχει αλλάξει πολύ την τελευταία δεκαετία και ταυτόχρονα δεν έχει αλλάξει καθόλου. Αν κοιτάξουμε πίσω 10 χρόνια, θα διαπιστώσουμε ότι ο ιστός είχε ένα πολύ συνηθισμένο μοτίβο διάταξης στο χώρο εργασίας σε όλο το μεγαλύτερο μέρος των τοποθεσιών. Αυτό το πρότυπο go-to συνίστατο σε μια κεφαλίδα, υποσέλιδο, πλευρική γραμμή και περιοχή περιεχομένου. Ήταν η αναμενόμενη διάταξη για τον ιστό. Ταυτόχρονα, δημιουργήσαμε το Macromedia Flash το οποίο έδωσε τη θέση του σε μια εποχή εναλλακτικών σχεδίων. Διατάξεις που δεν έμειναν σε αυτή την αυστηρή φόρμουλα. Και φυσικά με τη φραγή του Flash αυτή η προσέγγιση ξεθωριάσει για λίγο ... Λέω για λίγο, γιατί είναι πίσω με μια εκδίκηση.
Εάν εξετάσετε μια από τις πολλές δημοφιλείς γκαλερί που παρουσιάζουν το σημερινό σχεδιασμό ιστοσελίδων, θα διαπιστώσετε ότι η βασική δομή των ιστοσελίδων είναι οτιδήποτε άλλο εκτός από σταθερό. Μπορεί να κάμπτεται και να αλλάζει σε οτιδήποτε χρειάζεται. Αυτό κατά τη γνώμη μου είναι μια από τις καλύτερες ανεπιθύμητες παρενέργειες που έχει δημιουργήσει το web design. Ο νέος κανόνας, όπως ήταν, είναι ότι δεν υπάρχει καθόλου σταθερός τύπος.
Όλα αυτά είπαν ότι μπορούμε να παρατηρήσουμε αρκετές τάσεις υψηλού επιπέδου στο σχέδιο διάταξης που αντιπροσωπεύουν αυτό που θεωρώ ασυνήθιστες διατάξεις. Ασυνήθιστο επειδή δεν ακολουθεί μια αυστηρή φόρμουλα ή ένα προκαθορισμένο σύστημα. Αλλά είναι τάσεις στο ότι μπορώ να δώσω δεκάδες, αν όχι εκατοντάδες παραδείγματα που συμπληρώνουν καθεμιά από αυτές τις κατηγορίες.
Αυτό που βρίσκετε εδώ είναι ένα ενδιαφέρον μείγμα τάσεων και ασυνήθιστων σχεδιαγραμμάτων που ελπίζουμε να σας εμπνεύσει για να αξιολογήσετε τις θεμελιώδεις δομές που εφαρμόζετε στο web design. Ας σκεφτούμε και ρίχνουμε μια ματιά ...
Διαχωρισμένες οθόνες
Σε αυτή την κατηγορία βρίσκουμε μια επιλογή ιστότοπων που χωρίζουν όλη την οθόνη χρησιμοποιώντας ένα κατακόρυφο χάσμα. Υπάρχουν ίσως πολλοί λόγοι για να το κάνουμε αυτό, και στην τοποθέτηση πολλών δειγμάτων αυτού του τύπου έχω βρει δύο κύριους λόγους.
Το πρώτο είναι ότι ορισμένες φορές ένα σχέδιο μπορεί να έχει δύο βασικά στοιχεία ίσης σημασίας. Μια κοινή προσέγγιση στο σχεδιασμό ιστοσελίδων είναι να ταξινομούν τα πράγματα κατά σειρά σπουδαιότητας. Αυτή η σημασία στη συνέχεια αντανακλάται στην ιεραρχία και τη δομή του σχεδίου. Τι γίνεται όμως αν έχετε δύο πράγματα που πρέπει να προωθήσετε; Αυτή η προσέγγιση σάς δίνει τη δυνατότητα να δίνετε προτεραιότητα και στα δύο και να επιτρέπετε στον χρήστη να επιλέξει γρήγορα μεταξύ τους.
Ο δεύτερος λόγος που έχω βρει για αυτήν την προσέγγιση είναι ότι μερικές φορές πρέπει να μεταφέρετε μια σημαντική δυαδικότητα. Εξετάστε τον ιστότοπο Οκτώ και Τέταρτο, για παράδειγμα. Εδώ θέλουν να μεταδώσουν το γεγονός ότι οι βασικές τους δυνάμεις είναι οι ψηφιακές τους ρίζες και το ταλαντούχο προσωπικό τους. Αυτό το ζεύγος είναι αυτό που τους καθορίζει. Η διαχωρισμένη οθόνη είναι ένας πολύ καλός τρόπος για να παρουσιάσετε αυτό το θέμα. Και μου αρέσει ιδιαίτερα το πώς η ampersand ενοποιεί τις δύο πλευρές.
Χωρίς χρώμιο!
Ένα από τα κύρια στοιχεία που χρησιμοποιούνται στον σχεδιασμό ιστοσελίδων είναι τα εξής: κουτιά, περιγράμματα, σχήματα και δοχεία όλων των τύπων που χρησιμοποιούνται για τη διάσπαση του περιεχομένου μιας σελίδας. Εξετάστε μια στερεότυπη κεφαλίδα όπου τα στοιχεία είναι καθαρά περιεχόμενα και διαχωρίζονται από το περιεχόμενο. Μια κοινή τάση τώρα είναι να αφαιρέσετε όλα αυτά τα επιπλέον χρώμιο.
Πρόκειται για μια μινιμαλιστική προσέγγιση, αλλά πηγαίνει ένα βήμα παραπέρα και έχει κάποιες ενδιαφέρουσες ανατροπές στην πορεία.
Σε αυτό το παράδειγμα, έχουν εξαλείψει την έννοια μιας κεφαλίδας και υποσέλιδου όλοι μαζί. Αισθάνεται περισσότερο σαν ένα διαδραστικό περίπτερο αντί. Η ιεραρχία του περιεχομένου πραγματοποιείται κατά κύριο λόγο μέσω μιας οργάνωσης από αριστερά προς τα δεξιά, η οποία βοηθάει στη διαμόρφωση της διαμόρφωσης πολύ διαισθητική. Και το chrome για να ξεχωρίσετε την πλοήγηση από το περιεχόμενο δεν χρειάζεται απλά. Αντ 'αυτού, τα όμορφα προϊόντα λάμπουν μέσα.
Εδώ διαπιστώνουμε ότι το περιεχόμενο υπογραμμίζεται σε μεγάλο βαθμό αφαιρώντας κάθε αίσθηση μιας κεφαλίδας ή υποσέλιδου. Αντί να διαβάζετε πρώτα μια κεφαλίδα, διαβάζετε το όνομα της εταιρείας και μια σαφή δήλωση για το τι κάνουν (και πού το κάνουν). Ακολουθεί η κύρια πλοήγηση. Ποιος είναι ένας πολύ καλός τρόπος για να δώσετε έμφαση στη μάρκα, προτού να προσεγγίσετε τους ανθρώπους. Κάνει μια κομψή ροή. Είναι ενδιαφέρον ότι κατά την κύλιση της σελίδας παίρνετε μια κεφαλίδα και ένα άγγιγμα χρωμίου. Μια όμορφη και αποτελεσματική διάταξη που χρησιμοποιεί το σχέδιο με έναν εμπνευσμένο τρόπο.
Αρθρωτό ή με βάση το δίκτυο
Στη συνέχεια, έχουμε σχεδιαγράμματα που είναι χτισμένα σε δομοστοιχειωτές δομές ή δομές που μοιάζουν με πλέγματα. Σε αυτά τα σχέδια κάθε δομοστοιχείο προορίζεται να συρρικνωθεί με βάση το μέγεθος της οθόνης. Αυτό δεν είναι ακριβώς μια νέα προσέγγιση, αλλά η εισαγωγή του ανταποκρινόμενου σχεδιασμού ιστοσελίδων το έκανε ακόμα πιο χρήσιμο. Αυτό υποδηλώνει το είδος προσαρμόσιμων σχεδιαγραμμάτων που μπορεί κανείς να δημιουργήσει με plugins όπως Masonry.
Αυτό το παράδειγμα δείχνει απόλυτα την ιδέα. Ο σχεδιασμός ανταποκρίνεται πλήρως. Καθώς το μέγεθος της οθόνης αλλάζει, κάθε μονάδα προσαρμόζεται και τα μεγέθη προσαρμόζονται στο χώρο. Με τον ομοιόμορφο διαχωρισμό του χώρου είναι ευκολότερο να προσαρμοστεί ο σχεδιασμός. Και παίρνουν πόντους μπόνους για την εισαγωγή ενός στοιχείου (σε μεγαλύτερα μεγέθη οθόνης) που σπάζει τα άκαμπτα εμπόδια μεταξύ των ενοτήτων.
Αυτό το παράδειγμα είναι μια μάλλον έντονη εκδοχή του σχεδίου. Φυσικά αγκαλιάζει την αρθρωτή προσέγγιση, η οποία τους επιτρέπει να μεταφέρουν εύκολα το περιεχόμενο μέσα και έξω, όπως απαιτείται. Αλλά υπάρχει εδώ ένα σημαντικό στοιχείο σχεδίασης, το οποίο δεν είχε το προηγούμενο παράδειγμα. Το μέγεθος των ενοτήτων ποικίλλει ανάλογα με τη σειρά σπουδαιότητας και τη θέση της στην ιεραρχία. Ένας κίνδυνος αυτής της σπονδυλωτής προσέγγισης καθιστά τα πάντα το ίδιο μέγεθος, πράγμα που σημαίνει ότι δεν τονίζετε τίποτα. Αντίθετα, το παράδειγμα αυτό δίνει σαφώς σημασία στο πρωταρχικό στοιχείο.
Συμπλήρωση μιας μόνο οθόνης
Τέλος, έχουμε τοποθεσίες που χρησιμοποιούν μια προσέγγιση όπου ο σχεδιασμός προσαρμόζεται για να γεμίσει εντελώς την οθόνη. Πρόκειται για ένα υποσύνολο σχεδιασμού που ανταποκρίνεται στο ότι προσαρμόζεται στο μέγεθος της οθόνης. Αλλά σε αυτή την θέση, τα σχέδια προσαρμόζονται με τέτοιο τρόπο ώστε να γεμίζουν εντελώς την οθόνη και να μην παράγουν ράβδους κύλισης. Αυτή η έλλειψη κύλισης σημαίνει ότι το περιεχόμενο πρέπει να είναι εξαιρετικά εστιασμένο και ότι η ιεραρχία του περιεχομένου είναι σαφώς καθορισμένη. Θεωρώ ότι η εστίαση και η σαφήνεια αυτών των χώρων είναι αναζωογονητική.
συμπέρασμα
Ενώ έχω διαχωρίσει καθεμία από αυτές τις τάσεις εδώ μεμονωμένα, η πραγματικότητα είναι ότι αντιπροσωπεύουν δομικά στοιχεία. Και αυτά τα δομικά στοιχεία μπορούν να συναρμολογηθούν με πολλούς διαφορετικούς τρόπους. Στην πραγματικότητα, πολλά από τα δείγματα που παρουσιάστηκαν εδώ θα μπορούσαν να μετακινηθούν σε πολλές από τις κατηγορίες που συζητήσαμε. Η ποικιλία των σχεδίων στο μοντέρνο ιστό και το γεγονός ότι είναι χρησιμοποιήσιμα καθιστά τον ιστό ένα συναρπαστικό μέσο για να συνεργαστεί.