Αν δεν είσαι μπροστά από την εποχή σου, τότε σίγουρα είσαι πίσω. Αυτή η φράση, που μπορεί να ταιριάζει και σε άπειρες άλλες περιπτώσεις, συνοψίζει εξαιρετικά τη σύγχρονη διαδικτυακή εμπειρία. Στο Ίντερνετ όποιος δεν είναι μπροστά από τον ανταγωνισμό, μένει πολύ πίσω. Γι΄ αυτό ακριβώς, το Web Design είναι ένας τομέας όπου η μόδα έχει τον πρώτο και τον τελευταίο λόγο!
Το Responsive Design ήρθε για να μείνει!
Τα τελευταία χρόνια έχουν αυξηθεί οι χρήστες που σερφάρουν στο διαδίκτυο από το smartphone και οι τάσεις της εποχής, ακολουθώντας όπως πάντα τις ανάγκες, απαιτούν επιτατικά και επιτακτικά responsive design. Αυτή η τεχνολογία επιτρέπει στην εκάστοτε ιστοσελίδα να εμφανίζεται το ίδιο είτε πρόκειται για Full HD Home Cinema οθόνη είτε πρόκειται για την πιο μικρή οθόνη smartphone της αγοράς. Και καλά κάνει, καθώς οι “κινητοί χρήστες” του Ίντερνετ ανέρχονται στο 60%, ποσοστό διόλου ευκαταφρόνητο, ενώ φαίνεται να έχει εγκαταλειφθεί η τάση δημιουργίας ξεχωριστής έκδοσης για tablet ή κινητό, μην τα ξαναλέμε! Η δύσκολη δουλειά για τους web designers, βέβαια, θα αρχίσει όταν θελήσει ο κόσμος να χρησιμοποιεί Ίντερνετ στο smartwatch…
Το μέγεθος (στο banner) μετράει…
Η άλλη μεγάλη τάση είναι η εξίσου μεγάλη (ε, όχι και μεγάλη, απλά… τεράστια!) εικόνα στην αρχική σελίδα. Είπαν οι σχεδιαστές “Πρέπει κάπως να τραβήξουμε την προσοχή του επισκέπτη και να μην την αφήσουμε να φύγει”, και σίγουρα κατάφεραν το αποτέλεσμα να εντυπωσιάζει… Δεν ήθελε και πολύ. Κομψότητα και λειτουργικότητα μπορούν έτσι να συνδυαστούν άψογα και γι’ αυτό άρεσε και στον κόσμο. Ειδικά όταν προσφέρεται στον επισκέπτη η ψευδαίσθηση βάθους και τριών διαστάσεων, η δουλειά τα βγάζει τα λεφτά της χωρίς πολύ μπλα-μπλα. Εγώ απλά λατρεύω την επίσημη ονομασία της: Hero Image!
Αυτό που κάποτε ήταν η εύκολη δουλειά και γινόταν στα γρήγορα, τώρα, στις περισσότερες περιπτώσεις, απαιτεί ξεχωριστό σχεδιαστή, ή ακόμη και ειδικό καλλιτέχνη! Με τόσο μεγάλη εικόνα, είναι απαραίτητη και η αντίστοιχη γραμματοσειρά, για να μας βοηθήσει να επικεντρωθούμε εκεί που πρέπει. Η πρωτότυπη γραμματοσειρά, όμως, δεν είναι μόνο προνόμιο των ισχυρών. Και για τις μικρομεσαίες ιστοσελίδες υπάρχουν δυνατότητες, καθώς πολλές γραμματοσειρές κοστίζουν λίγο, ειδικά για αυτό που προσφέρουν. Αρκετές ιστοσελίδες, μάλιστα, χρησιμοποιούν 2 είδη, συχνά από την ίδια οικογένεια, και κάνουν το παιχνίδι πιο πλούσιο.
Που πήγε το Μενού;
Ένα ακόμη στοιχείο που… εξαφανίστηκε από σχεδόν κάθε αρχική σελίδα είναι το Μενού. Όσο περισσότερο εξοικειώνονται οι χρήστες με το Ίντερνετ (όχι εσύ, μπόμπιρα, μάλλον αναφερόμαστε στη γιαγιά σου!) τόσο πιο κομψή και μοντέρνα μπορεί να γίνεται κάθε ιστοσελίδα. Στις μέρες μας, το μενού είναι κάτι στο οποίο πολλοί αναφέρονται ως burger (!), δηλαδή 3 παράλληλες γραμμούλες οι οποίες, όταν τις πατάμε, απλώνουν τις επιλογές σε όλη την οθόνη, δίνοντας έτσι χώρο για πιο μεγάλη εικόνα στην αρχική σελίδα. Κρυμμένο και elegant μενού για τους απαιτητικούς της διακόσμησης με τεράστια γράμματα για όσους ξέχασαν τα γυαλιά τους.
Κάρτες, κάρτες, κάρτες!
Αλλαγές, όμως, ήρθαν (και έρχονται ακόμη) και στη μορφή της ιστοσελίδας. Κυρίαρχη τάση αποτελεί η επαναφορά του design σε στυλ card/tiles, με πρότυπο το Pinterest. Ένα τέτοιο layout επιτρέπει στο χρήστη να παρακολουθήσει εύκολα τις ενότητες της ιστοσελίδας, μιας και χωρίζονται ξεκάθαρα από το σχεδιαστή, φαίνονται όπως πρέπει στο responsive design, ενώ ταιριάζουν και με την άλλη επιταγή της μόδας, το parallax scrolling (βλ. παρακάτω). Συχνά, προτιμάται και διαφορετικό χρώμα σε κάθε block, κάτι που βοηθά το χρήστη να εστιάσει σε αυτό που τον ενδιαφέρει.
Επιστροφή στις δύο διαστάσεις
Ένα ακόμη σχεδιαστικό τρικ αποτελεί η (επανα)στροφή στο flat design, που δίνει μινιμαλιστική αισθητική σε κάθε ιστοσελίδα. Μπορεί νωρίτερα (βλ. παραπάνω) να μας βόλευε το 3D, τώρα όμως κάνουμε τα πράγματα απλά και σε δύο διαστάσεις, θυσία απαραίτητη για να κερδίσουμε σε κομψότητα και χρηστικότητα, προκειμένου να ξεχωρίσουν τα επιλέξιμα στοιχεία. Η επιλογή εξαρτάται από το σκοπό και τους επισκέπτες μιας ιστοσελίδας. Αν σε αυτό το στυλ προσθέσουμε τη χρήση εφέ και μορφοποιήσεων σε κάθε επιλογή και μετάβαση (όπως, χονδρικά, περιγράφεται το material design και χρησιμοποιεί διακριτικά φως και κίνηση) τότε ο συνδυασμός με το flat και τις κάρτες γίνεται και εντυπωσιακός. Ολόκληρη Google και Apple έδειξαν το δρόμο, εμείς δε θα ακολουθήσουμε;
Σταδιακά, μάλιστα, ανάλογος σχεδιασμός κάνει την εμφάνισή του και σε πολλές εφαρμογές του συστήματος Android, επομένως καταλαβαίνουμε εύκολα πως πρόκειται για το design του μέλλοντος.
Η μοντέρνα ροή της ιστοσελίδας
Νωρίτερα, αναφέραμε κάτι για parallax scrolling και ήρθε η ώρα να ρίξουμε κι άλλο φως σε αυτήν τη σχεδιαστική τακτική που προήλθε από την ανάγκη των χρηστών να μην ξυπνάνε τη μάνα τους κάθε βράδυ κάνοντας πολλά κλικς. Οι ιστοσελίδες, πλέον, έχουν αρχίσει να αποκτούν ροή και να ξετυλίγονται κάθετα, αντί να παρέχουν κουτιά και βελάκια για να κλικάρει ο επισκέπτης. Αυτή η νίκη του scrolling απέναντι στο clicking γίνεται μόδα και λόγω της ευκολίας που παρέχει σε όσους χρησιμοποιούν smartphones. Πολλοί πιστεύουν πως τα κλικαρίσματα θα μειωθούν κι άλλο στο μέλλον και πως τα καλύτερα του parallax δεν έχουν έρθει ακόμη! Παράλληλα (see what I did there?) ευνοεί και τη μοντέρνα δομή μιας ιστοσελίδας, η οποία ξετυλίγεται σαν ιστορία. Το storytelling θεωρήθηκε αμέσως ιδανικό για την προώθηση προϊόντων και υπηρεσιών με μια ευχάριστη αλληλεπίδραση που αυξάνει τη διαδραστικότητα. Γενικά, προσφέρει πολλά πλεονεκτήματα, καθώς μπορεί να προσδώσει ψευδαίσθηση βάθους στην ιστοσελίδα, με τα δύο επίπεδα, το προσκήνιο και το παρασκήνιο, να κινούνται σε διαφορετικές ταχύτητες.
Δώσε χρώμα στην ιστοσελίδα σου!
Ορισμένες λεπτομέρειες που κερδίζουν τις εντυπώσεις αφορούν -φυσικά- και τη βελτίωση της εμπειρίας του χρήστη. Πολλοί επιλέγουν να καθοδηγήσουν τον επισκέπτη στην πλοήγησή του και να τον βοηθήσουν με χρώματα στα κουμπιά και highlight στις επιλογές ή animations, που δείχνουν και πιο ζωντανά. Σε αυτήν την περίπτωση ένα loading animation -ίσως με το δικό σας λογότυπο- μπορεί να απαλύνει λίγα δευτερόλεπτα αναμονής, σίγουρα καλύτερα από οποιαδήποτε μπάρα loading. Επίσης, κάνουν όλο και συχνότερα την εμφάνισή τους τα έντονα χρώματα, σε διάφορες βαθμίδες και αποχρώσεις. Το παν είναι να εστιάσει ο επισκέπτης την προσοχή του εκεί που θέλει ο σχεδιαστής.
Η ταχύτητα της ιστοσελίδας πάντα προέχει
Και παραλίγο να ξεχάσουμε την ανάγκη για ταχύτητα, για την οποία μας βοηθούν το flat design και η προτίμηση του scrolling. Βέβαια, εδώ τα πράγματα “παίζουν” λίγο, γιατί ορισμένοι σχεδιαστές βλέπουν την ταχύτητα που γλιτώνουν από άλλα στοιχεία ως ευκαιρία να “ανοίξουν την παράσταση” με ένα βίντεο στην αρχική σελίδα. Ένα loop 5-30 δευτερολέπτων κάνει αρκετά καλά τη δουλειά του και ίσως καταλήξει να αποτελεί τον κανόνα για κάθε Αρχική Σελίδα, πολύ πιο σύντομα απ’ ότι περιμένουμε, σίγουρα όσο βελτιώνονται οι ταχύτητες σύνδεσης μεγαλύτερου αριθμού χρηστών.
Γενικά, τα στοιχεία που θεωρούνται μοντέρνα χρειάζονται λιγότερη ώρα για να φορτώσουν, κάτι που εξυπηρετεί αφάνταστα το μέσο χρήστη. Είμαστε βιαστικοί, τί να κάνουμε;
Πως θα ξεχωρίσει η ιστοσελίδα μου;
Βέβαια, πολλοί -κυρίως ιδιοκτήτες ή διαχειριστές ιστοσελίδων- ανησυχούν μήπως η ιστοσελίδα τους δυσκολευτεί να ξεχωρίσει ανάμεσα σε χιλιάδες ίδιες. Καταρχήν, ας γίνει ξεκάθαρο πως όλες αυτές οι παράμετροι εξασφαλίζουν με απόλυτη σιγουριά την ανομοιότητα δύο ιστοσελίδων. Το γεγονός πως το UI θα μοιάζει παρόμοιο έχει το εξής -σημαντικό- θετικό πως εξοικειώνει το χρήστη και τον βοηθά στην πιο γρήγορη και αποτελεσματική πλοήγηση στα πλαίσια κάθε ιστοσελίδας, βασικό ζητούμενο από όλους, ειδικά με λειτουργίες όπως το hamburger menu ή το card layout. Τα χρώματα και η διάταξη κάνουν τη δική σας ιστοσελίδα ξεχωριστή, τη στιγμή που ενσωματώνονται στοιχεία οικεία στον επισκέπτη. Όλα τα αυτοκίνητα έχουν ρόδες, αλλά δεν είναι όλα ίδια…
Όπως και να ‘χει, η πιο χρήσιμη συμβουλή που δίνουμε πάντα είναι να κοιτάτε τις τάσεις, αλλά να μην παρασύρεστε εύκολα. Οι ιστοσελίδες που θέλουν να είναι συνεχώς επίκαιρες χρειάζεται να ανανεώνονται κάθε -περίπου- 3 χρόνια, χωρίς αυτό να ισχύει και για όλες τις υπόλοιπες. Αν η ιστοσελίδα έχει σχεδιαστεί σωστά και εξυπηρετεί όπως πρέπει τους πελάτες σας και δεν υπάρχει κανένα πρόβλημα ή παράπονο, δεν έχετε κανέναν απολύτως λόγο να προχωρήσετε σε αλλαγές. Ομάδα που κερδίζει δεν αλλάζει!
