Οι σχεδιαστικές και στυλιστικές τάσεις επηρεάζουν έντονα τον σχεδιασμό ιστοσελίδων, τα γραφικά, βίντεο και φωτογραφίες και αυτό φαίνεται και από τις νέες ή επανασχεδιασμένες παρουσίες γνωστών ιστοτόπων όσο και από τα downloads των χρηστών από γνωστές πηγές όπως το envato.
Από τα σκοτεινά backgrounds και το dark mode στην κίνηση και το animation.
Εδώ στη Longtail παρακολουθούμε την εξέλιξη των σχεδιαστικών τάσεων στον ιστό γιατί χρόνο με το χρόνο ο συδυασμός νέων τεχνολογιών και εργαλείων με τις καλλιτεχνικές αναζητήσεις παρουσιάζουν συναρπαστικά αποτελέσματα. Κυρίαρχες αλλά και πιο περιθωριακές τάσεις, αισθητικό mainstream αλλά και άκρα, στυλιστικές αναζητήσεις, ριζοσπαστικές προτάσεις, όλα συνυπάρχουν μέσα στο σώμα του web που είναι ζωντανό, δυναμικό και εξελίσσεται.
Πίνακας Περιεχομένων
Όταν δημιουργείτε ένα website σκεφτείτε αυτό: Έχετε μία ευκαιρία να θαμπώσετε τους επισκέπτες σας με μία μοναδική πρώτη εντύπωση που θα αντανακλά πάνω στην επιχείρησή σας και τη φίρμα της. Στον Ιστό υπάρχει ένα τεράστιο πλήθος πληροφοριών και η σελίδα σας πρέπει να ξεχωρίζει για να τραβήξει την προσοχή των χρηστών.
Σε ότι αφορά τον σχεδιασμό ιστοσελίδων (web design) υπάρχουν 2 πυλώνες, ο σταθερός και ο “περαστικός”.
Στις σταθερές ορίζονται αρχές όπως η εμπειρία χρήστη, η προσβασιμότητα και διαδραστικότητα, η ασφάλεια των δεδομένων, η γρήγορη φόρτωση κα. Από την άλλη, τα στυλ, το ύφος, τα διάφορα εφέ, η τεχνοτροπία αλλάζουν, εξελίσσονται, προσαρμόζονται όπως πάντοτε κάνει η τέχνη, ως ένας ζωντανός οργανισμός.
Έχοντας υπόψη μας τις σύγχρονες και επικρατέστερες τάσεις στον σχεδιασμό ιστοσελίδων, μπορούμε να φροντίσουμε ώστε και η δική μας σελίδα να ξεχωρίζει ανάμεσα στον όγκο των σελίδων του ανταγωνισμού.
Παρακάτω θα δούμε τις πιο hot τάσεις στο σύγχρονο design και πως αυτές ανταποκρίνονται στις απαιτήσεις και προσδοκίες του κοινού μας.
1) Ασύμμετρα σχέδια
Ένα από τα πρώτα πράγματα που μαθαίνουμε στο web design είναι η σημασία του σχεδίου, της χωροταξίας, με ποιον τρόπο θα τοποθετηθούν τα διάφορα σχεδιαστικά στοιχεία πάνω στον καμβά.
Ο κανόνας φυσικά είναι η συμμετρία. Η σειρά, η ιεραρχία, η τάξη, η σταθερότητα. Και όμως, οι τολμηροί σχεδιαστές πάντα “πατούσαν” στην ασυμμετρία. Τα αποτελέσματα συχνά είναι πιο συναρπαστικά, το σχέδιο μπορεί να πειραματιστεί με διάφορους βαθμούς ελευθερίας, να σπάσει αυτό που βλέπουμε συχνά στο web design, τις σειρές από μικρά ή μεγάλα κουτάκια.
Ασυμμετρία δεν σημαίνει ανισορροπία – έλλειψη ισορροπίας. Αυτό το καθορίζουν όλα τα σχεδιαστικά στοχεία ανάλογα με το οπτικό “βάρος” τους και πώς αυτό θα εκμεταλλευτεί το χώρο.
2) Σκοτεινά backgrounds
Είναι το γνωστό dark mode που αντιστρέφει την κυρίαρχη τάση για λευκά backgrounds με μαύρη γραμματοσειρά όπως μία σελίδα χαρτί. Εδώ έχουμε ακριβώς το αντίθετο με τη χρήση κυρίως μαύρου background και λευκής γραμματοσειράς.
Τα παλιότερα χρόνια του web το dark mode ήταν ο “σκοτεινός εαυτός”, το εκτός του mainstream. Hacker sites, black hat seo forums, torrent sites κλπ ήταν τα μέρη που απευθύνονταν σε πιο μικρές και “περιθωριακές” ομάδες και είχαν την άνεση να σπάνε τη mainstream τάση του λευκού. Πλέον κάτι τέτοιο δεν ισχύει το dark mode έχει έρθει στο προσκήνιο με σφοδρότητα και ήρθε για να μείνει. Εξακολουθεί να κουβαλάει την αύρα του ανατρεπτικού και απευθύνεται σε πιο νεανικά κοινά όπως στο gaming και γενικά τον χώρο της τεχνολογίας.
Βλέπουμε το σκοτεινό mode να το χρησιμποιούν μεγάλα brands όπως η Apple ή σε ασπρόμαυρα μοτίβα όπως η Hublot (ακριβά ρολόγια) και ακόμη πολύ πιο έντονα στο χώρο της τέχνης όπως ενδεικτικά οι σελίδες των Saturday Night Live και του Ozzy Osbourne (τι άλλο θα μπορούσε να είναι η σελίδα του Ozzy;).
Από την άλλη πλευρά το σκοτεινό look προσδίδει σε μία σελίδα την αίσθηση του βελούδου και ειδικά σε ότι αφορά προϊόντα την αίσθηση του ακριβού και του σικ.
Στην πλοήγηση και την εμπειρία χρήστη υπάρχει θετική και αρνητική πλευρά.
Για την ανάγνωση κειμένου και συνεπώς για ιστοτόπους περιεχομένου όπως blogs, ειδησεογραφικά δεν κάνει.
Όλες οι έρευνες έχουν δείξει ότι για το μάτι είναι σαφώς πιο εύκολο να διαβάζει σκούρη γραμματοσειρά σε ανοιχτό background απ’ ότι το αντίθετο (dark mode).
Παρόλα αυτά και με τη χρήση σωστού κοντράστ σύμφωνα με τις απαιτήσεις προσβασιμότητας, φαίνεται ότι η σκοτεινή λειτουργία είναι πιο επιεικής στα μάτια, μέσα από τη μείωση της φωτεινότητας και του μπλε φωτός.
3) Μινιμαλισμός
Μια τάση σχεδιασμού που τείνει να γίνει διαχρονική, ο μινιμαλισμός, ειδικά κατά την τελευταία δεκαετία είναι το ψωμοτύρι πολλών σχεδιαστών.
Τι είναι όμως ο μιμαλισμός; Όχι τόσο ένα οπτικό στυλ αλλά μία γενικότερη αρχή σχεδιασμού που έχει ως θεμέλιο της την απλότητα.
ο μινιμαλιστικός σχεδιασμός βασίζεται στη χρήση μόνο των βασικών στοιχείων – όπως βασικά σχήματα, καθαρό κείμενο, περιορισμένες χρωματικές παλέτες και κενό διάστημα – για τη δημιουργία κάτι απλού, λειτουργικού και μοναδικού.
4) Κολάζ
Στον σχεδιασμό τύπου κολάζ αναμειγνύονται μέσα όπως φωτογραφίες, εικονογραφήσεις, διάφορα γραφικά, κίνηση και κείμενο με τρόπο ώστε να δημιουργούν ένα πρωτότυπο και καλαίσθητο τελικό αποτέλεσμα που να “τραβάει” το μάτι.
Σε πιο προχωρημένο επίπεδο το κολάζ έχει να κάνει με τη μίξη μέσων όπως κινούμενα σχέδια, ειδικές ακόμη και κινούμενες γραμματοσειρές, καλλιτεχνικές πινελιές για τη δημιουργία μιας εμπνευσμένης και εντυπωσιακής αισθητικής.
Τώρα που έχει μετακινηθεί στον ψηφιακό χώρο, η τάση του κολάζ έχει εξελιχθεί σε μικτά μέσα όπως κινούμενο κολάζ, μεγάλες διακοσμητικές γραμματοσειρές, καλλιτεχνικές υφές (όπως πινελιές πινέλου) και ακόμη και κινούμενο παραμορφωμένο κείμενο, που παράγει μερικά εξαιρετικά μοναδικά αποτελέσματα.
Πολλοί άνθρωποι μπορούν πλέον και χρησιμοποιούν εφαρμογές σχεδίασης σε iPad με ψηφιακές βούρτσες που μιμούνται παραδοσιακά μέσα βαφής (όπως ακουαρέλες και λάδια), επαναπροσδιορίζοντας τα όρια της ψηφιακής τέχνης. Επίσης, η να μπορούμε να κάνουμε ψηφιακή τέχνη στη συσκευή μας σημαίνει ότι είναι πιο εύκολο από ποτέ να μοιραζόμαστε την έμπνευσή μας online.
5) Εικονογράφηση
Η χρήση εικονογραφημένων σχεδίων παρουσίαζει έκρηξη και στη γραφιστική και στα social media και στο σχεδιασμό ιστοσελίδων. Η εικονογράφηση αποτελεί μία διαχρονική σταθερά με μεγάλη δημοτικότητα. Τη βλέπουμε σε εφαρμογή σε πολλές σχεδιάσεις από γνωστά eshops μέχρι δημοφιλείς μάρκες προϊόντων.
6) Επιστροφή στη φύση – παστέλ
Μία από τις μεγαλύτερες τάσεις σχεδιασμού για το 2020, ο φυσικός σχεδιασμός έχει να κάνει με τη χρήση της φύσης και του κόσμου γύρω μας ως έμπνευσης. Αν και εμφανίζεται συχνά στη σχεδίαση προϊόντων, στη διακόσμηση εσωτερικού χώρου και στη γραφιστική, αυτή η τάση αρχίζει τώρα να κερδίζει δυναμική και στον σχεδιασμό ιστοσελίδων.
Κυριαρχείται από ζεστά, γήινα χρώματα, φυσικά σχήματα και ακατέργαστες οργανικές υφές
7) Κίνηση και αλληλεπίδραση
Το βίντεο έχει αποδειχθεί ότι είναι η πιο ελκυστική μορφή περιεχομένου στο διαδίκτυο, επομένως δεν αποτελεί έκπληξη το γεγονός ότι η κίνηση έχει γίνει επίσης μια μεγάλη τάση στον σχεδιασμό ιστοσελίδων.
Η κίνηση όπως βίντεο, διαδραστικά παιχνίδια, κινούμενα σχέδια στο σχεδιασμό ιστοσελίδων είναι ένας απλός τρόπος για να κάνετε μια κατά τα άλλα συνηθισμένη ιστοσελίδα πιο συναρπαστική και ελκυστική.
Με παρόμοιο τρόπο, πολλές μάρκες και επιχειρήσεις – όπως το YouTube Rewind – έχουν αρχίσει να προσθέτουν πιο διαδραστικά στοιχεία στους ιστότοπούς τους, όπως κουίζ, παιχνίδια, δημοσκοπήσεις και έρευνες.
Εκτός από τη διασκεδαστική προσθήκη στην διαδικτυακή εμπειρία, η διαδραστικότητα είναι ένας πολύ καλός τρόπος για να προσελκύσετε τους επισκέπτες σας, μαθαίνοντας επίσης περισσότερα για αυτούς. Ωστόσο, είναι σημαντικό να επιτύχετε ισορροπία και να διασφαλίσετε ότι η κίνηση ή τα διαδραστικά σας στοιχεία δεν κυριαρχούν ή αποσπούν την προσοχή από τον σκοπό του ιστότοπού σας.
8) Γεωμετρία και 3D
Γεωμετρικά σχέδια και στοιχεία χρησιμοποιούνται συχνά στον κόσμο του σύγχρονου σχεδιασμού ιστοσελίδων – συμπεριλαμβανομένων κλασικών επίπεδων σχημάτων όπως πολύγωνα, ρόμβοι, ορθογώνια, τρίγωνα. Ωστόσο, η γεωμετρική τάση σχεδιασμού ιστοσελίδων έχει εξελιχθεί ώστε να περιλαμβάνει και πιο σύγχρονα στοιχεία όπως τρισδιάστατα σχήματα, αντικείμενα floating και ορατές γραμμές grid.
Η χρήση τρισδιάστατων σχημάτων και αντικειμένων floating στον γεωμετρικό σχεδιασμό συνδυάζει την σουρεαλιστική κίνηση με ρεαλιστικά αντικείμενα, δημιουργώντας ένα μαγευτικό, φουτουριστικό αποτέλεσμα – ένα στυλ που διαδίδεται από την ανεσταλμένη, περιστρεφόμενη κίνηση που χρησιμοποιείται συχνά σε διαφημίσεις τεχνολογίας για να αναδείξει νέα προϊόντα.
Αυτό είναι ιδανικό για την προσθήκη ενός άλλου επιπέδου ή διάστασης στη σχεδίαση μίας ιστοσελίδας, που θα διασφαλίζει ότι ο ιστότοπός σας θα σαγηνεύσει τους επισκέπτες σας – όπως φαίνεται από τον παραπάνω ιστότοπο (φωτό), που συνδυάζει γεωμετρικά στοιχεία με μινιμαλιστικές, απλές γραμμές πλέγματος.
9) Αντί_web_design – Μαξιμαλισμός
Προειδοποίηση: αυτή η τάση δεν είναι για όλους! Παρατεταμένη χρήση αυτών των ιστοσελίδων μπορεί να επιφέρει βλάβες στην υγεία :))
Εάν τα τελευταία χρόνια έχουν κάτι να μας διδάξουν, είναι να πετάξουμε όλους τους κανόνες και τις προσδοκίες κυριολεκτικά στα σκουπίδια. Το anti-design ή μαξιμαλισμός είναι μια τάση που ενισχύθηκε από την πρόσφατη αναβίωση του Brutalism, και το αμφιλεγόμενο στυλ έχει πρόσφατες αναφορές στα ΜΜΕ και την ποπ κουλτούρα, καθώς και στο web και το γραφικό σχεδιασμό.
Οι ρίζες του είναι στο brutalism – brutalist websites μία νεανική τάσει με απόλυτη περιφρόνηση προς τους κανόνες “ευπρέπειας” στον σχεδιασμό ιστοσελίδων, δηλαδή αρχές όπως η τάξη, η ιεραρχία και η άνεση του χρήστη.
Ο μαξιμαλιστικός σχεδιασμός δεν είναι τόσο επιθετικός αλλά η προσέγγιση του εξακολουθεί να προάγει την καλλιτεχνική έκφραση και ελευθερία σε σχέση με την τάξη.
Μερικά χαρακτηριστικά του μαξιμαλισμού είναι οι παραλλαγές γραμματοσειρών, υπερβολικά μεγάλες γραμματοσειρές, αλληλοεπικαλυπτόμενα γραφικά, χωροταξική ελευθερία.
10) Scroll εφέ
Από την εμφάνιση της τεχνικής του parallax scrolling, της τεχνικής που συνέδεσε τεχνικές και εφέ με τη λειτουργία του scrolling καθώς διαβάζουμε μία ιστοσελίδα, έχει περάσει ήδη μία δεκαετία. Και όμως μέσα σ’ αυτή τη δεκαετία συνεχίζουμε να εξερευνούμε τις δυνατότητες του scrolling για να βελτιώσουμε και να εξελίξουμε την εμπειρία browsing του χρήστη.
Το scrolling περιλαμβάνει συμμετοχή, μετάβαση και αλληλεπίδραση. Κάθε μία από αυτές τις ενέργειες μπορεί να ενισχυθεί με τον συνδυασμό των στοιχείων μίας ιστοσελίδας με δυναμικά εφέ, πχ ενδεικτικά: μεγένθυνση, σμίκρυνση φωτογραφιών, οριζόντιο scrolling, εντυπωσιακές μεταβάσεις από ένα τμήμα της σελίδας σε ένα άλλο.
Όπως θα δούμε και από τα παραδείγματα αυτές οι τεχνικές μερικές φορές δημιουργούν εκπληκτικά story telling και παρουσιάσεις.
Το parallax scrolling είναι η πιο δημοφιλής τεχνική. Είναι ο χωρισμός κατά βάση της ιστοσελίδας σε layers background και foreground και η διαφορετική ταχύτητα κύλησης των δύο κατά τη διάρκεια του scrolling. Συνήθως το background κινείται πιο αργά ενώ “σκρολάρουμε” τη σελίδα. Αυτό δίνει την αίσθηση της τρισδιάστατης κίνησης, σαν να βλέπουμε προς τα έξω από το παράθυρο ενός τραίνου που κινείται.
