Web Design Τάσεις για το 2010
Οι καθαροί θα πούμε ότι ο εξαιρετικός σχεδιασμός είναι διαχρονικός. Ναι, σε έναν ιδανικό κόσμο, θα πρέπει να αγνοήσουμε τις τάσεις.
Πρακτικά, όμως, έχει μεγάλη αξία η παρακολούθηση και η ενσωμάτωση των τάσεων σχεδιασμού, ειδικά όσον αφορά τους δικτυακούς τόπους.
Ας το παραδεχτούμε: ο ιστός αλλάζει ταχύτατα. Σε αντίθεση με άλλα μέσα, οι σχεδιαστικές τάσεις στο διαδίκτυο δεν κατευθύνονται μόνο από την αισθητική.
Η τεχνολογία αλλάζει και μπορεί να αλλάξει δραματικά τις δυνατότητες του μέσου.
Το 2010, βλέπουμε τους σχεδιαστές να συνεχίζουν να πιέζουν τα όρια του σχεδιασμού ιστοσελίδων, θέτοντας τις ακόλουθες σαφείς τάσεις ...
Σχεδιασμός εκτύπωσης
Ο σχεδιασμός εκτύπωσης ήταν πάντα πηγή έμπνευσης για τον ιστό. Ο σχεδιασμός ιστοσελίδων έχει περάσει αρκετό καιρό τώρα για να καλλιεργήσει έναν ισχυρό πυρήνα σχεδιαστές που ποτέ δεν δούλεψαν. Ως αποτέλεσμα, βλέπουμε περισσότερη έμπνευση από την εκτύπωση, καθώς αυτοί οι σχεδιαστές κοιτάζουν πέρα από τον ιστό.
Γραμματοσειρές Serif
Ένα από τα πιο σημαντικά θέματα της τυπογραφίας είναι η αναγνωσιμότητα. Οι σχεδιαστές εκτύπωσης πάντα προτιμούσαν τις γραμματοσειρές serif επειδή οι άκρες βελτιώνουν την ορατότητα και κάνουν πιο εύκολα τις αναγνωρίσεις των γραμματοσειρών.
Οι γραμματοσειρές Sans-serif έχουν γενικά θεωρηθεί ευκολότερο να διαβαστούν στην οθόνη. Αλλά με περισσότερους χρήστες που περιηγούνται σε υψηλή ανάλυση και τις βελτιώσεις στην τεχνολογία εξομάλυνσης γραμματοσειρών, οι γραμματοσειρές serif έχουν γίνει πολύ ευανάγνωστες για το κείμενο του σώματος.
Μεγάλες επικεφαλίδες
Οι σχεδιαστές εκτύπωσης έχουν χρησιμοποιήσει μεγάλες επικεφαλίδες για να τραβήξουν την προσοχή τους για αιώνες. Το υλικό εκτύπωσης έπρεπε να έχει μεγάλη επίδραση αν αναμενόταν να διαβάσει καθόλου. Εάν είδες ένα θαμπό φυλλάδιο που κάθεται σε ένα γραφείο, θα τον ενοχλείς να το πάρεις; Πιθανώς όχι.
Αυτή η τάση ξεκίνησε το 2009 και έχει αυξηθεί μόνο στη δημοτικότητα. Μεγάλες επικεφαλίδες έχουν αποδειχθεί ότι προσελκύουν την προσοχή και επικοινωνούν με σαφήνεια.
Διατάξεις πολλαπλών στηλών
Οι σχεδιαστές πρέπει να εργάζονται μέσα στους περιορισμούς του μέσου τους. Σε αντίθεση με τον ιστό, η εκτύπωση δεν προσφέρει επιλογή για κύλιση, καθώς δεσμεύεται από τις διαστάσεις του χαρτιού. Η χρήση πολλών στηλών σάς επιτρέπει να τοποθετήσετε περισσότερο περιεχόμενο στον ίδιο χώρο.
Τώρα, με τις αυξημένες αναλύσεις οθόνης και την εμφάνιση των σχεδίων πλέγματος, περισσότεροι σχεδιαστές προσαρμόζουν αυτή τη μέθοδο στο διαδίκτυο για να κάνουν τους δικτυακούς τόπους ευκολότερους στη χρήση και να ταιριάζουν σε περισσότερο περιεχόμενο.
Μεγάλη Εικόνα Μολύβδου
Μια εικόνα αξίζει όσο χίλιες λέξεις. Παρόλο που μπορεί να είναι μια στιγμή πριν μια φωτογραφία να έχει τον ίδιο αντίκτυπο στον ιστό όπως και στην εκτύπωση (η οποία έχει πολύ υψηλότερη ανάλυση), η υιοθέτηση της ευρυζωνικής πρόσβασης έχει κάνει τις μεγάλες φωτογραφίες πιο εφικτές.
Βλέπουμε ότι περισσότεροι ιστότοποι χρησιμοποιούν μεγάλες εικόνες υψηλής ανάλυσης για να προσελκύσουν χρήστες και να δημιουργήσουν μια εντυπωσιακή εμπειρία.
Διαγράμματα και Infographics
Οι σχεδιαστές εκτύπωσης χρησιμοποιούν γραφικά για να μεταφέρουν σύνθετες πληροφορίες εδώ και χρόνια. Αυτό παρατηρείται συνήθως στα περιοδικά και στις ετήσιες εκθέσεις.
Τα γραφικά μπορούν να επικοινωνούν περίπλοκες σχέσεις και αναλογίες με τρόπο που είναι πολύ δύσκολο να γίνει με απλό κείμενο. Τα Infographics τείνουν να έχουν μια απλή αλλά οπτικά πλούσια εμφάνιση, και περισσότεροι σχεδιαστές υιοθετούν infographics ή μιμούνται το στυλ στα σχέδιά τους.
Απλότητα
Ο Antoine de Saint-Exupery είπε κάποτε: "Η τελειότητα δεν επιτυγχάνεται όταν δεν υπάρχει τίποτα περισσότερο να προσθέσει, αλλά όταν δεν υπάρχει τίποτα που να απομακρύνει". Τα πλεονεκτήματα της απλότητας στο σχεδιασμό είναι πολλά.
Ο νόμος του Hick μας λέει ότι ο χρόνος που απαιτείται για την λήψη απόφασης αυξάνεται με κάθε επιλογή. Επιπλέον, η θεωρία σήματος προς θόρυβο μας λέει ότι οτιδήποτε δεν προσθέτει στο μήνυμα ή τη λειτουργία μιας ιστοσελίδας (το σήμα) παρεμποδίζει και καθιστά λιγότερο αποτελεσματικό τον σχεδιασμό (τον θόρυβο).
Τα απλά σχέδια είναι ευκολότερα χρήσιμα και κατανοητά και επιτρέπουν μεγαλύτερη σαφήνεια στην επικοινωνία μηνυμάτων.
Μινιμαλιστική και Σχεδίαση πλέγματος
Ο μινιμαλισμός είναι ισχυρός αλλά δύσκολος να κυριαρχεί. Δεν περιέχει τίποτα άλλο παρά τα βασικά. Όλα τα υπόλοιπα αφαιρούνται, με αποτέλεσμα τη μέγιστη επίδραση των στοιχείων που υπάρχουν.
Οι μινιμαλιστικοί σχεδιασμοί απαιτούν ένα ισχυρό σύστημα πλέγματος για να είναι αποτελεσματικό. Φυσικά, θα έχουν άφθονο λευκό χώρο, και έτσι χωρίς αυτό το πλέγμα, ένα μινιμαλιστικό σχέδιο θα αισθάνεται αποσυνδεδεμένο και αδύνατο. Το πλέγμα δίνει την οργάνωση και τη δομή.
Διαμορφώσεις μιας σελίδας
Υπάρχουν διάφοροι τρόποι απλοποίησης. Μια διάταξη μιας σελίδας παρουσιάζει δύο από αυτούς τους τρόπους: απόκρυψη και αφαίρεση.
Οι αποτελεσματικές διατάξεις μιας σελίδας αποκρύπτουν τα στοιχεία που δεν αποτελούν προτεραιότητα. Εάν ένας χρήστης θέλει να δει ένα από αυτά τα στοιχεία, μπορεί να κάνει κλικ για να το αποκαλύψει. Αυτό είναι πολύ πιο αποτελεσματικό από το να αφήνει οτιδήποτε ορατό, γεγονός που θα καθιστούσε τη σελίδα περίπλοκη και συντριπτική.
Ομοίως, η αρχή πίσω από τις σελίδες μιας σελίδας καθιστά περιττές επιπλέον σελίδες. Με τη διαθεσιμότητα ισχυρών βιβλιοθηκών JavaScript και ταχύτερων συνδέσεων, πολλοί ιστότοποι δεν χρειάζονται πλέον αρκετές σελίδες. Οι σχεδιαστές μπορούν εύκολα να χωρέσουν πληροφορίες σε μία σελίδα, χωρίς να ενοχλούν τον χρήστη με ιεραρχία.
Μαζικός Λευκός Χώρος
Στις πρώτες ημέρες του σχεδιασμού ιστοσελίδων, δεν είχαμε πολύ χώρο στην αγορά ακινήτων για να δουλέψουμε, και έτσι δεν δείξαμε πολύ λευκό χώρο. Εάν έχετε δοκιμάσει ποτέ να σχεδιάσετε έναν ιστότοπο με ανάλυση 640 × 480, θα ξέρετε ακριβώς τι μιλάω.
Τώρα που έχουμε υψηλότερα ψηφίσματα και την ικανότητα να κρύβουμε και να αποκαλύπτουμε στοιχεία με JavaScript, η αξιοποίηση του λευκού χώρου είναι πολύ πιο εύκολη.
Ο λευκός χώρος είναι κρίσιμος για τον καλό σχεδιασμό. Δίνει στο μάτι μια θέση για να ξεκουραστεί. Φυσικά βελτιώνει την ποιότητα ενός σχεδίου. Και δείχνει ποια στοιχεία σχετίζονται μεταξύ τους μέσω της εγγύτητας.
Τυπογραφικές διατάξεις
Ενώ περιοριζόμασταν σε μερικές επιλεγμένες "γραμματοσειρές ασφαλείς στον ιστό", με ελάχιστο έλεγχο για τον τρόπο εμφάνισής τους, διαθέτουμε τώρα ένα ευρύ φάσμα εργαλείων για να εμπλουτίσουμε την τυπογραφία μας.
Οι σχεδιαστές ιστοσελίδων έχουν από καιρό απολαμβάνουν τη χρήση τύπου ως ένα λεπτό εργαλείο για την επικοινωνία μηνυμάτων. Με αυξανόμενο έλεγχο και δυνατότητες, βλέπουμε περισσότερους σχεδιαστές να επικεντρώνονται στη τυπογραφία ως το κύριο στοιχείο σχεδίασης.
Τεχνικές CSS3
Δεν είστε σίγουροι ότι μπορείτε να επωφεληθείτε από το CSS3 ακόμα; Ξανασκέψου το. Οι πρωτοπόροι στο Web, όπως οι Andy Clarke και Jeremy Keith, έχουν από καιρό κήρυξει για "προοδευτική ενίσχυση" στο σχεδιασμό ιστοσελίδων.
Η προοδευτική βελτίωση αφορά στο σχεδιασμό ιστότοπων έτσι ώστε να μπορούν να χρησιμοποιηθούν σε παλαιότερα προγράμματα περιήγησης, ενώ είναι "ενισχυμένα" για χρήστες που δεσμεύονται στην πιο σύγχρονη τεχνολογία.
Ο σχεδιασμός σε αυτό το στρατόπεδο σάς επιτρέπει να επωφεληθείτε από τις ιδιότητες του CSS3, όπως στρογγυλεμένες γωνίες, φόντο των συνόρων και σκιές κειμένου και κουτιού. Οι χρήστες σε σύγχρονα προγράμματα περιήγησης θα δουν την ωραιότερη έκδοση, και εκείνοι με παλαιότερη τεχνολογία ( βήχας | IE6 | βήχας ) θα δουν τη βασική έκδοση.
CSS3 Animation
Η κίνηση στο διαδίκτυο έχει περάσει από πολλά στάδια. Αρχικά, θα μπορούσαμε μόνο να ζωντανέψουμε με αρχεία εικόνας GIF. Τότε, περιοριζόμαστε λίγο στο Flash. Τώρα, μπορούμε να επιλέξουμε από το Flash, το Silverlight, το GIF, το JavaScript και ακόμα και το CSS3. Η λεπτή κινούμενη εικόνα μπορεί να είναι αξέχαστη και το CSS3 το καθιστά ελαφρύ και εύκολο.
Στρογγυλεμένες γωνίες
Το στυλ Web 2.0 του 2005 και του 2006 έκανε στρογγυλεμένες γωνιές λαϊκές, σε σημείο που ήταν ενοχλητικές. Εκείνη τη στιγμή, η δημιουργία τους ήταν δύσκολη. Δεν υπήρχε καθορισμένος τρόπος για να δημιουργηθούν πραγματικά στρογγυλεμένες γωνίες. Αντ 'αυτού, προσομοιώθηκαν με CSS, hacks JavaScript και αρχεία εικόνας.
Το CSS3 τώρα μας επιτρέπει να δημιουργούμε στρογγυλεμένες γωνίες απευθείας στο πρόγραμμα περιήγησης, καθιστώντας τους όχι μόνο πιο εύκολο να δημιουργηθούν αλλά και πολύ πιο αποδοτικές, επειδή ο χρήστης δεν χρειάζεται να κατεβάσει πρόσθετες εικόνες ή αρχεία JavaScript.
Οι σχεδιαστές εκμεταλλεύονται όλο και περισσότερο αυτήν τη νέα δυνατότητα πλοήγησης το 2010.
Κουτιά και σκιές κειμένου
Χρησιμοποιώντας σκιές για να δημιουργήσετε μια αίσθηση βάθους έχει γίνει (και μερικές φορές υπερβολική) από τις πρώτες μέρες του ιστού. Αλλά δεν ήταν πάντα πρακτικό. Για να προσθέσετε σκιές στο κείμενο, χρειάστηκε να χρησιμοποιήσετε εικόνες, οι οποίες αύξησαν το χρόνο φόρτωσης και καθιστούσαν δυσκολότερη τη συντήρηση. Οι σκιές του κουτιού απαιτούσαν αρκετές εικόνες και CSS τεχνάσματα όπως "συρόμενες πόρτες".
Το CSS3 διαθέτει εξαιρετικά προσαρμόσιμες δυνατότητες σκιάς, οι οποίες επιτρέπουν ένα ευρύ φάσμα δημιουργικών εφέ, συμπεριλαμβανομένων όχι μόνο των σκιών, αλλά και των εσωτερικών σκιών. Οι δημιουργοί σχεδίασης έχουν ήδη χρησιμοποιήσει αυτά τα εφέ CSS3 για την προσομοίωση τόσο των ανάγλυφων όσο και των εκτυπωμένων εφέ.
RGBa και αδιαφάνεια
Για χρόνια, η εργασία με την αδιαφάνεια και τη διαφάνεια στο διαδίκτυο ήταν σχεδόν αδύνατη. Είχατε τρεις επιλογές: προσομοιώστε τη διαφάνεια χρησιμοποιώντας επίπεδες εικόνες, ασχολείστε με τις ασυμβατότητες πολλαπλών περιηγητών του PNG ή αγωνίζεστε με τους βασικούς επιλογείς και φίλτρα διαφάνειας της CSS.
Το CSS3 δίνει στους σχεδιαστές πολύ μεγαλύτερη συνέπεια και ελευθερία στη χρήση της αδιαφάνειας με την ιδιότητα RGBa. Ενώ μπορείτε να επωφεληθείτε από τη διαφάνεια σε αμέτρητους τρόπους, ένας τομέας που βοήθησε ιδιαίτερα είναι με πολύπλοκα υπόβαθρα επικαλυμμένα με ημι-διαφανή χρώματα. Προηγουμένως, το αποτέλεσμα αυτό ήταν ανέφικτο ή αδύνατο να δημιουργηθεί χωρίς να καταφεύγουμε σε πολύπλοκες εικόνες PNG.
Κινητό-συμβατό σχέδιο
Ο κινητός ιστός έχει δώσει τη δυνατότητα σε εκατομμύρια χρήστες να ελέγχουν τον τραπεζικό λογαριασμό τους ενώ περιμένουν στη σειρά, αναζητούν τις τελευταίες βαθμολογίες στο μετρό και ενημερώνουν την κατάσταση του Twitter κατά την οδήγηση. (Ποιο από αυτά είναι μια επικίνδυνη συνήθεια;) Και ο κινητός ιστός συνεχίζει να αναπτύσσεται γρήγορα.
Έχουμε φτάσει στο σημείο ότι κάθε εταιρεία πρέπει να εξετάσει εάν ο ιστότοπός της θα χρησιμοποιηθεί εν κινήσει και, αν ναι, πώς. Οι καινοτόμες εταιρείες έχουν ήδη επενδύσει σε χρήσιμες και φιλικές προς τον χρήστη εκδόσεις κινητών εκδόσεων των ιστοτόπων τους.
Δημιουργικότητα
Η εκρηκτική ανάπτυξη της χρήσης των κοινωνικών μέσων αποτελεί απόδειξη ότι οι άνθρωποι θέλουν να συνδεθούν και να μοιραστούν τα πράγματα που είναι παθιασμένα.
Στον τομέα του σχεδιασμού, παρατηρήσαμε μεγάλη αύξηση στην ανταλλαγή και την περιήγηση στο έργο άλλων ανθρώπων. Ως σχεδιαστές, είμαστε τώρα βομβαρδισμένοι από τη δημιουργικότητα όλων των άλλων. Όχι μόνο αυτό αυξάνει το επίπεδο ποιότητας του σχεδιασμού, αλλά ενθαρρύνει την ανταλλαγή ιδεών, γεγονός που συμβάλλει στην καλλιέργεια δημιουργικότητας και καινοτομίας.
Καθαρίστε εικονογραφήσεις
Αν είσαι σαν εμένα, μεγάλες βλέποντας ταινίες της Disney, θαυμάζοντας όλη την προσπάθεια που δημιουργήθηκε σε κάθε κινούμενη εικόνα. Έχουμε ξεπεράσει τις ημέρες που η εικονογράφηση έγινε με μελάνι και δείκτες και αυτή η εξέλιξη στα εργαλεία έχει οδηγήσει σε κάποιες πολύ δημιουργικές προσεγγίσεις στο σχεδιασμό.
Πολλοί σχεδιαστές μαθαίνουν ότι οι ομαλές, καθαρές, τραγανές απεικονίσεις δημιουργούν μια ξεχωριστή αίσθηση που δεν μπορεί να αναπαραχθεί από τη φωτογραφία ή απλά clip art. Το αποτέλεσμα είναι ένα ευρύ φάσμα επαγγελματικά εικονογραφημένων σχεδίων που εμπλέκονται και προσκαλούν.
Textured φόντο
Τα υφή φόντου δεν είναι κάτι καινούργιο στο διαδίκτυο. Αλλά αυτή η τεχνική έχει δει μια ενδιαφέρουσα διακύμανση τους τελευταίους μήνες. Αναφέρομαι σε αυτό ως "μικρο-υφές" που είναι λεπτές, μόλις παρατηρήσιμες υφές στο παρασκήνιο.
Μικρογραφίες
Μπορεί να λέτε, "Οι μικρογραφίες ήταν γύρω από την αυγή του ιστού. Πώς είναι αυτή η τάση; "Είναι αλήθεια ότι έχουν χρησιμοποιηθεί πάντα, αλλά μόνο πολύ απλά. Θα έχετε μια μικρογραφία που μπορείτε να κάνετε κλικ για να πάρετε μια μεγαλύτερη εικόνα. Έκανε τη δουλειά αλλά ήταν βαρετή.
Τους τελευταίους μήνες, οι σχεδιαστές άρχισαν να ρωτούν: "Πώς μπορούμε να κάνουμε τις μικρογραφίες πιο συναρπαστικές;" Αυτό έχει οδηγήσει σε μια ανάκαμψη σε μικρογραφίες που είναι τόσο έξυπνες και χρησιμοποιήσιμες.
Ακουαρέλα
Καθώς ο ιστός εξελίσσεται, βλέπουμε περισσότερους σχεδιαστές να εμπνέονται από μια ποικιλία πηγών και μέσων ενημέρωσης. Δεν αποτελεί έκπληξη ότι οι καλές τέχνες είναι μεταξύ αυτών των πηγών.
Ένα από τα στυλ που προέκυψε είναι η προσομοίωση των ακουαρέλων. Η απαλή κομψή εμφάνιση αυτού του στυλ είναι ξεχωριστή και ηρεμία.
Γραφικός χαρακτήρας
Οι χειρόγραφες γραμματοσειρές και οι γραμματοσειρές χειρογράφων κακοποιούνται περισσότερο. Για το λόγο αυτό, πολλοί σχεδιαστές απομακρύνονται και από τους δύο τύπους είτε από αηδία είτε εξαιτίας ενός φόβου να κοιτάξουν ερασιτεχνικά. Αλλά πρόσφατα, πολλοί σχεδιαστές διαπίστωσαν ότι, όταν χρησιμοποιούνται σωστά, το χειρόγραφο στυλ μεταφέρει μια αίσθηση της τέχνης και του σχεδιασμού. Χρησιμοποιείται στο σωστό πλαίσιο, είναι ένας ισχυρός τρόπος επικοινωνίας.
Μεσα ΚΟΙΝΩΝΙΚΗΣ ΔΙΚΤΥΩΣΗΣ
Με τους ανθρώπους που ξοδεύουν περισσότερο χρόνο στο Facebook από το Google τώρα, κανένας σχεδιαστής δεν αναζητά καινοτόμους τρόπους για την ενσωμάτωση των κοινωνικών μέσων ενημέρωσης στις ιστοσελίδες τους.
Κάποιοι σχεδιαστές έχουν προχωρήσει τόσο πολύ ώστε να δημοσιεύσουν το περιεχόμενό τους στα δίκτυα κοινωνικών μέσων και στη συνέχεια να χρησιμοποιήσουν τις ιστοσελίδες τους για να το συγκεντρώσουν.
Είναι ασφαλές να πούμε ότι καθώς το 2010 εξελίσσεται, θα δούμε περισσότερους σχεδιαστές να βρουν δημιουργικούς τρόπους για την ενσωμάτωση των κοινωνικών μέσων στις ιστοσελίδες τους, προκειμένου να εμπλακούν καλύτερα οι χρήστες.
Σταθερά στοιχεία
Τώρα που τα προγράμματα περιήγησης υποστηρίζουν καλύτερα το position: fixed στοιχείο, βλέπουμε τις πιο έξυπνες χρήσεις του.
Υπάρχουν πολλές καταστάσεις στις οποίες ένα σταθερό στοιχείο (όπως η επίμονη πλοήγηση) μπορεί να εξυπηρετήσει τους επιχειρηματικούς στόχους του κατόχου και να καταστήσει τον ιστότοπο πιο χρησιμοποιήσιμο.
Σταθερά στοιχεία είναι αξέχαστα και βελτιώνουν την εμπειρία του χρήστη. Έχουν αμέτρητες δημιουργικές χρήσεις και θα συνεχίσουμε να βλέπουμε τους σχεδιαστές να τους εκμεταλλεύονται.
Αυτή η θέση φιλοξενουμένων είναι μια συνεργασία μεταξύ των καλών ανθρώπων στο Web Hosting Search και σχεδιαστής και developer Ross Johnson. Δείτε το Web Hosting Αναζητήστε σωστά web hosting και 3point7designs για περισσότερο awesomeness σχεδιασμού ιστοσελίδων από τον Ross
Ποια από τις τάσεις αυτές ακολουθείτε περισσότερο; Ποιες είναι μερικές άλλες αναδυόμενες τάσεις;