Σχεδιασμός Ιστοσελίδων 2023
Σχεδιασμός ιστοσελίδων 2023: Καθώς μπαίνουμε στο 2023, ακολουθούν 11 τάσεις σχεδιασμού ιστοσελίδων που θα βοηθήσουν να ενημερωθούν και να εμπνευστούν οι web designers και οι marketers.
Μια τάση είναι κάτι πολύ περισσότερο από ένα δημοφιλές στυλ ή μια συλλογική συμπεριφορά που αγκαλιάζεται από την κυρίαρχη κουλτούρα για μια δεδομένη χρονική περίοδο.
Οι τάσεις του σχεδιασμού μπορούν να κοιτάξουν πίσω στο παρελθόν με νοσταλγία, δημιουργώντας συνδέσεις με τα στυλ και τις τάσεις της εποχής και βρίσκοντας νέους τρόπους για να τα φέρεις στο μέλλον. Οι τάσεις μπορούν να εμπνεύσουν τους σχεδιαστές να βρουν νέους τρόπους σχεδίασης με βάση τις μοναδικές τους προοπτικές και ταυτότητες. Οι τάσεις μπορούν να αναδυθούν παράλληλα με νέες τεχνολογίες όπως το Web3 ή να χρησιμοποιήσουν νέες τεχνικές για να δημιουργήσουν διαδραστικές και συναρπαστικές εμπειρίες για τους χρήστες τους.
Οι σχεδιαστές μπορούν να χρησιμοποιούν τις τάσεις για να βρίσκουν έμπνευση και να δημιουργούν ιστότοπους και πρότζεκτ για τους πελάτες τους που παραμένουν επίκαιρα και συνδέονται με το σύγχρονο κοινό. Ο σχεδιασμός ιστοσελίδων 2023, θα ξεχωρίζει καθώς θα υπάρχει στροφή προς πιο καθηλωτικές εμπειρίες. Είτε προέρχεται από την πρόοδο της τεχνολογίας κατασκευής ιστοσελίδων είτε από όλο και πιο καθηλωτικά περιβάλλοντα όπως το metavers. Είμαστε ενθουσιασμένοι να δούμε τι μας περιμένει για το επόμενο έτος.
1. Νοσταλγία και αισθητική Y2K
Φέτος, αναμένουμε να δούμε την αισθητική Y2K να συνεχίζει να αυξάνεται σε δημοτικότητα. Τα τελευταία χρόνια, υπάρχει μια αναβίωση του στυλ των αρχών της δεκαετίας του 2000 σε οτιδήποτε, από τη μόδα έως τη μουσική, την εσωτερική διακόσμηση, ακόμα και την τέχνη. Φυσικά, αυτή η τάση διαρρέει το design και το web.
Οι τάσεις της νοσταλγίας ιστορικά τρέχουν σε έναν κύκλο 40 ετών (μερικοί λένε 30, άλλοι 50). Με την άνοδο των μέσων κοινωνικής δικτύωσης, η υιοθέτηση και η κοινή χρήση νέων τάσεων έχει γίνει πιο προσιτή, με αποτέλεσμα ο κύκλος να επιταχύνεται.
Και σήμερα, 23 χρόνια μετά το Y2K, τα στυλ των αρχών της δεκαετίας του 2000 είναι και πάλι στη μόδα. Τα σχέδιά σας θα παραπέμπουν σε μια συγκεκριμένη εποχή χωρίς να ξεχωρίζουν ως πολύ θεματικά επιλέγοντας ένα χαρακτηριστικό σχεδιασμού και ερμηνεύοντάς το με μια πιο σύγχρονη προσέγγιση.
Υπάρχουν μερικές εξαιρετικές πηγές εκεί έξω για να βρείτε έμπνευση από το Y2K στο Διαδίκτυο. Χρησιμοποιήστε το Wayback Machine του Internet Archive για να μελετήσετε πραγματικά σχέδια ιστοτόπων από την εποχή ή να παρακολουθήσετε την εξέλιξη του σχεδιασμού ενός συγκεκριμένου ιστότοπου κατά τη διάρκεια των δεκαετιών. Για μια πιο επιμελημένη επιλογή, το Μουσείο Web Design (και η φανταστική ροή του στο Twitter) παρουσιάζει στιγμιότυπα οθόνης εμβληματικών σχεδίων από τα τέλη της δεκαετίας του ’90 και τις αρχές της δεκαετίας του 2000.
Γραμματοσειρές Y2K και σχέδια που βασίζονται σε κείμενο
Με τις τάσεις του Y2K, αναμένουμε ότι περισσότεροι σχεδιαστές εμπνέονται από τις γραμματοσειρές και τις διατάξεις κειμένου της εποχής το 2023. Τα σχέδια που εμπνέονται από το Y2K είναι λιγότερο μίνιμαλ και συχνά χρησιμοποιούν πυκνό κείμενο ή μικτές γραμματοσειρές για να δημιουργήσουν ένα σχέδιο που τραβάει τα βλέμματα.
Οι γραμματοσειρές που χρησιμοποιήθηκαν στη σχεδίαση ιστοσελίδων κατά την εποχή του Y2K ήταν απλές, συχνά sans serif ή μονοδιάστατες και μερικές φορές εμφανώς με pixel, όπως στον παραπάνω ιστότοπο του Christopher Nelson. Δεδομένου ότι οι εικόνες φορτώθηκαν αργά στις αρχές της δεκαετίας του 2000, το web design έτεινε προς απλές, εστιασμένες στο κείμενο διατάξεις με πολύ λευκό χώρο.
Ένας κλασικός ιστότοπος της εποχής Y2K μπορεί να έμοιαζε με το FanFiction.net περίπου το 2001 — πολύ λευκό διάστημα, μικρά εικονίδια εικόνων και πολλά Arial ή Verdana.
Το portfolio του σχεδιαστή και καλλιτέχνη Adam Ho εμπνέεται ξεκάθαρα από αυτήν την εποχή με το έντονο σχέδιο του κειμένου σε λευκό. Προσθέτει οπτικό ενδιαφέρον αναμειγνύοντας γραμματοσειρές με τρόπο που έρχεται σε αντίθεση με τη διάταξη σε τομή και το καθαρό φόντο.
Ο Adam χρησιμοποιεί επίσης μια τολμηρή, sans-serif γραμματοσειρά για να τραβήξει την προσοχή σε ορισμένα στοιχεία του σχεδιασμού του, που εξισορροπείται από ένα μείγμα light-serifs για οπτικό ενδιαφέρον. Η σχεδίαση περιλαμβάνει ακόμη και μια πινελιά αισθητικής στον κυβερνοχώρο χρησιμοποιώντας μια γραμματοσειρά με το μηδέν κομμένο (όπως το Terminal ή το Consolas) για ημερομηνίες.
Μοναδικοί κέρσορες
Αν ήσασταν συνδεδεμένοι στη δεκαετία του ’90 και στις αρχές της δεκαετίας του 2000, ίσως θυμάστε να αλλάζετε τον κέρσορά σας σε γάτα, χαμογελαστό πρόσωπο ή πράσινο κεφάλι εξωγήινων. Μπορεί να σας άρεσε να παίζετε με ατελείωτα διασκεδαστικά εφέ κέρσορα, όπως το ρολόι, τη νεραϊδόσκονη ή το ίχνος φαντασμάτων. Το Y2K ήταν μια πραγματικά διασκεδαστική περίοδος στην ιστορία των γραφικών με κέρσορα.
Ο σχεδιασμός ιστοσελίδων 2023, θα περιλαμβάνει περισσότερους προσαρμοσμένους κέρσορες. Οι κέρσορες μπορούν να χρησιμοποιήσουν μια πρωτότυπη εικόνα ως εικονίδιο ή μπορούν να χρησιμοποιήσουν κινούμενα εφέ για να δημιουργήσουν μια διαδραστική εμπειρία. Ωστόσο, αυτή τη φορά, μπορείτε να τα χρησιμοποιήσετε χωρίς να εγκαταστήσετε ένα πακέτο κέρσορα και να γεμίσετε τον υπολογιστή σας με κακόβουλο λογισμικό.
Ένα εξαιρετικό παράδειγμα αυτής της τάσης είναι οι διαδραστικοί προσαρμοσμένοι κέρσορες του Mackenzie Child στο Mac, το πρότυπο ρετρό ιστότοπου με δυνατότητα κλωνοποίησης. Οι δύο κέρσορες του Mackenzie – ένα κλασικό βέλος και ένα δάχτυλο δείκτη για συνδέσμους – είναι κωμικά υπερμεγέθη με ένα καρτουνίστικο πρόσωπο που ταιριάζει απόλυτα στα άλλα στοιχεία του σχεδίου του.
Για να συνεχίσει με το θέμα Y2K, η Mackenzie χρησιμοποιεί ένα χρωματικό σχήμα σε γκρίζες αποχρώσεις, βαριά διάταξη σε κουτιά και γραμματοσειρά sans-serif επηρεασμένη άμεσα από πρώιμο λογισμικό όπως το Apple Lisa και το Adobe PageMaker.
Pixelation
Η τύπου Pixelation σχεδίαση ιστοσελίδων, η οποία ήταν αρχικά μια τεχνολογική αναγκαιότητα στις πρώτες μέρες των υπολογιστών, έχει γίνει αισθητική καθώς το Y2K κάνει την επανεμφάνισή του. Πρόσφατα, οι σχεδιαστές χρησιμοποιούν την εικονοποίηση σε γραμματοσειρές, εικονίδια και εικόνες για να προσθέσουν οπτικό ενδιαφέρον.
Πάρτε για παράδειγμα τον ιστότοπο εορταστικού μάρκετινγκ της Attentive που είναι εμπνευσμένος από το Y2K. Δημιούργησαν ένα λογότυπο ουράνιου τόξου με εικονοστοιχεία, χρησιμοποίησαν εικονίδια με εικονοστοιχεία και έκαναν pixel στις φωτογραφίες που χρησιμοποιούνται για τα άρθρα του. Τα απλά σχήματα και τα pixelation ενοποιούν το σχέδιο και δίνουν την αίσθηση ενός αυτοτελούς ρετρό κόσμου όταν χρησιμοποιείτε τον ιστότοπό τους.
2. Προσαρμοσμένες γραμματοσειρές
Καθώς τα τελευταία χρόνια έχουν επικρατήσει τα σχέδια ιστότοπων που βασίζονται σε κείμενο, προβλέπουμε ότι ο σχεδιασμός ιστοσελίδων 2023 θα υπάρξει άνοδος των προσαρμοσμένων γραμματοσειρών και των hand-created γραμμάτων.
Έχουμε δει όλο και περισσότερους σχεδιαστές να δημιουργούν γραμματοσειρές ή προσαρμοσμένα γράμματα για προσωπικά έργα ή έργα πελατών ως έναν τρόπο να ξεχωρίζουν. Τα σχέδια που επικεντρώνονται γύρω από τον τύπο αποτελούν τάση εδώ και μερικά χρόνια, οπότε αυτό το στυλ συνεχίζει την τάση, ενώ την φέρνει σε ένα εντελώς νέο επίπεδο πρωτοτυπίας.
Και δεν υπάρχουν συγκεκριμένα σχέδια ή στυλ που θα κυριαρχήσουν παγκοσμίως. Δεδομένης της προσαρμοσμένης φύσης αυτής της τάσης, βλέπουμε σχεδιαστές να ενσωματώνουν τις δικές τους πινελιές από οτιδήποτε — σχεδιασμός αφίσας, γραφικά μυθιστορήματα, υλικά από τον πραγματικό κόσμο, ακόμη και τη δική τους ζωή.
Μπορείτε να προσεγγίσετε αυτή την τάση με διάφορους τρόπους, ανάλογα με το αποτέλεσμα που θέλετε να δημιουργήσετε και το επίπεδο εμπειρίας σας στις τεχνικές εικονογράφησης και lettering. Τα εργαλεία δημιουργίας γραμματοσειρών, όπως το BitFontMaker, το FontStruct και το Calligraphr, σας δίνουν διαφορετικούς τρόπους για την κατασκευή, τη λήψη και τη χρήση της αρχικής σας γραμματοσειράς.
Εάν έχετε κάποια ικανότητα με τα εργαλεία ψηφιακής απεικόνισης, μπορείτε να δημιουργήσετε προσαρμοσμένα γραφικά με γράμματα. Μπορείτε επίσης να ψηφιοποιήσετε τα έργα τέχνης που έχετε δημιουργήσει φυσικά με μολύβια, στυλό, μπογιές ή σχεδόν οποιοδήποτε άλλο μέσο. Χρειάζεται κάποια τεχνική ικανότητα, αλλά υπάρχει επίσης η επιλογή να τραβήξετε εικόνες και να τις διανυσματοποιήσετε για να τις μετατρέψετε σε πλήρως λειτουργικές γραμματοσειρές.
Τώρα, ας ρίξουμε μια πιο προσεκτική ματιά σε μερικά από τα αγαπημένα μας σχέδια που έχουμε δει τελευταία.
Stenciled και screen-printed σχέδια γραμματοσειρών από Tré Seals
Ο σχεδιασμός ιστοσελίδων με βάση το κείμενο λειτουργεί καλά όταν είναι bold, γραφικό και ευανάγνωστο. Αυτό το καθιστά παρόμοιο με τις πινακίδες, τις αφίσες και τα πανό που πρέπει να είναι εντυπωσιακά και ευανάγνωστα.
Ο Tré Seals είναι γραφίστας, ιδρυτής της Vocal Type Co και Black δημιουργός που εμπνέεται άμεσα για τις γραμματοσειρές του από κοινωνικά και πολιτικά κινήματα που έχουν νόημα για αυτόν.
Τα γράμματα στις πινακίδες και στις αφίσες που χρησιμοποιήθηκαν σε αυτές τις κινήσεις ήταν συνήθως ζωγραφισμένα στο χέρι, screen printed ή stenciled. Έπρεπε να περάσει το μήνυμά του. Έτσι ήταν ευδιάκριτο και εύκολο στην ανάγνωση.
Για να κάνει κάθε γράμμα να ξεχωρίζει, το Tré χρησιμοποιεί υψηλότερα βάρη γραμματοσειράς, αιχμηρές άκρες και ευθείες γραμμές. Το αποτέλεσμα είναι μια συλλογή γραμματοσειρών που μπορούν να χρησιμοποιηθούν για την παραγωγή εντυπωσιακών σχεδίων ιστού.
Πολύχρωμα χειροποίητα γράμματα από τον Leandro Assis
Από πέρυσι, τα αφηρημένα γραφικά γίνονται όλο και πιο μοντέρνα και οι τάσεις του σχεδιασμού εικονογράφησης όπως το Corporate Memphis εξακολουθούν να είναι περιζήτητες. Λαμβάνοντας υπόψη αυτό, έχουμε δει πολλούς σχεδιαστές να κλίνουν σε ενδεικτικά γράμματα που σχεδιάζονται στο χέρι ως συμπληρωματικό ζεύγος σε αυτά τα στυλ εικονογράφησης.
Ένα από τα αγαπημένα μας παραδείγματα είναι το έργο του Leandro Assis, ενός Βραζιλιάνου καλλιτέχνη γραμμάτων που δημιουργεί φωτεινές και παιχνιδιάρικες γραμματοσειρές που επηρεάζουν τα κινούμενα σχέδια και την εικονογράφηση. Το διασκεδαστικό γραφικό στυλ της δουλειάς του έχει γίνει δημοφιλές σε πελάτες όπως η Nike, η Amazon Music, ακόμη και το RuPaul’s Drag Race.
Ο Leandro χρησιμοποιεί επίπεδα κομμάτια χρώματος, καμπυλωτές γραμμές και μαύρα περιγράμματα για να κάνει τα γράμματά του να ξεχωρίζουν. Έχει δημιουργήσει ακόμη και κινούμενα εφέ με τα γράμματά του, καθιστώντας τα εντυπωσιακά.
Trompe-l’oeil από τον Aurelie Maron
Υπήρξαν μερικά εξαιρετικά παραδείγματα γραμμάτων που μοιάζουν με σχέδια με κιμωλία, σήμανση από μέταλλο και neon, ακόμη και εφέ υφασμάτων όπως κεντημένα γράμματα στο σχεδιασμό ιστοσελίδων πρόσφατα. Αυτό το στυλ ονομάζεται trompe l’oeil, που σημαίνει «χαζεύει το μάτι» στα γαλλικά. Δίνει την ψευδαίσθηση της τρισδιάστατης υφής και των πραγματικών υλικών, που σχεδόν φαίνεται σα να βγαίνει από την οθόνη.
Συγκεκριμένα, μας άρεσε η δουλειά της Aurelie Maron με τα trompe l’oeil γράμματα. Η προσαρμοσμένη γραφή της μιμείται φυσικά, καλλιτεχνικά μέσα. Αυτό το εφέ δεν είναι εύκολο να επιτευχθεί, αλλά η ίδια έχει δημιουργήσει μια σειρά μαθημάτων και σεμιναρίων για το σχεδιασμό γραμμάτων που βοηθούν τους σχεδιαστές να δημιουργήσουν τα δικά τους πρωτότυπα γράμματα.
3. Κοινόχρηστα πλαίσια
Ο σχεδιασμός ιστοσελίδων 2023, θα προκαλέσει μια έκρηξη στα πλαίσια με δυνατότητα κοινής χρήσης, καθώς οι δημιουργοί συνεισφέρουν τα εργαλεία και τις γνώσεις τους για την ενίσχυση της κοινότητας, τη βελτίωση της φήμης τους και τη βελτίωση του ιστού συνολικά.
Συγκεκριμένα, η Flowbase ανακάλυψε ότι η προσφορά δωρεάν εργαλείων είναι ένα σημαντικό κανάλι ανάπτυξης για την επιχείρησή της. Το πρακτορείο Webflow Finsweet έχτισε τη φήμη του με το να είναι ανοιχτό με τις τεχνικές του και να μοιράζεται τις γνώσεις του στον χώρο του σχεδιασμού.
Πολλοί δημιουργοί ιστού θέλουν επίσης πραγματικά να δημιουργήσουν μια καλύτερη εμπειρία ιστού για όλους. Η Alexa Heinrich μίλησε για τον προσβάσιμο Κοινωνικό Οδηγό της σε μια πρόσφατη συνέντευξη στο Webflow. Νοιάζεται να κάνει τα social media πιο προσιτό μέρος. Αντί απλώς να λέει στους ανθρώπους να δημιουργήσουν προσβασιμότητα, επέλεξε να μοιραστεί έναν πρακτικό οδηγό για να τους βοηθήσει να το κάνουν.
Οι σχεδιαστές μοιράζονται τις τοποθεσίες τους ως κλωνοποιήσιμα πρότυπα στο Made in Webflow. Έχουμε επίσης παρατηρήσει μια άνοδο στην ανταλλαγή προτύπων Notion, όπως αυτό του Trist Adlington, και στη δημιουργία συστημάτων στυλ όπως το Client-First της Finsweet. Επιπλέον, πολλοί δημιουργοί συνεισφέρουν σε βιβλιοθήκες όπως το The Noun Project.
Ένα από τα αγαπημένα μας ήταν το Knockout του Edgar Allan – ένα ολοκληρωμένο πλαίσιο ανάπτυξης που έχει σχεδιαστεί για να βοηθήσει τους σχεδιαστές και τους προγραμματιστές να συνεργαστούν στο πλαίσιο του Webflow. Περιλαμβάνει ένα πλήρες πρότυπο Figma που δίνει στο χρήστη ένα ευέλικτο πλέγμα, ένα σύστημα ονοματοδοσίας κλάσεων και έναν ενσωματωμένο ευέλικτο σχεδιασμό. Επιλύει πολλά από τα οργανωτικά κομμάτια της κατασκευής για τον ιστό, ώστε ο χρήστης να μπορεί να επικεντρωθεί στη δημιουργία εξαιρετικών σχεδίων.
4. Εικονογραφήσεις με διαστάσεις
Με την άνοδο του metaverse, οι εικονογραφήσεις που μιμούνται τον εικονικό κόσμο έρχονται στη μόδα — με τις τρισδιάστατες εικονογραφήσεις και το Claymorphism να πρωτοστατούν.
Ενώ η τρισδιάστατη απεικόνιση ήταν μια τάση τα προηγούμενα χρόνια, ήταν αποκλειστικά ένα στυλ εικονογράφησης. Οι τρέχοντες ιστότοποι αρχίζουν να προσθέτουν διαστάσεις με πιο καθηλωτικό τρόπο, τραβώντας τους χρήστες στον κυβερνοχώρο προσθέτοντας κινούμενα σχέδια, εφέ πλήρους σελίδας και εικονογραφήσεις πολλαπλών επιπέδων.
3D εικονογραφήσεις
Ο σχεδιασμός ιστοσελίδων 2023, θα προκαλέσει μια αναζωπύρωση της δημοτικότητας των τρισδιάστατων εικονογραφήσεων στον σχεδιασμό ιστοσελίδων. Με τα στυλ επίπεδης εικονογράφησης να κυριαρχούν στις τάσεις των τελευταίων ετών, ο τρισδιάστατος σχεδιασμός έχει γίνει ένας τρόπος για έργα και ιστότοπους να ξεχωρίζουν από το πλήθος.
Αυτό που φαίνεται ακόμα πιο μοντέρνο και επίκαιρο είναι η δημιουργία μιας πλήρως τρισδιάστατης οπτικής εμπειρίας σε ολόκληρο τον ιστότοπό σας, όπως έκανε η Redis Agency με τον ιστότοπό της. Αντί να χρησιμοποιήσουν το animation ως κεφαλίδα ή αυτόνομη εικονογράφηση, το τοποθέτησαν μπροστά από το περιεχόμενο του ιστότοπου. Ένα εφέ κύλισης parallax έχει προστεθεί στον ιστότοπο για να αυξήσει την ελκυστική του ποιότητα.
Η τεχνολογία συνεχίζει να βελτιώνεται και η δημιουργία τρισδιάστατων εικόνων είναι ευκολότερη από ποτέ, αλλά δεν χρειάζεται να είστε τρισδιάστατος εικονογράφος για να επωφεληθείτε από αυτή την τάση. Αναμένουμε να δούμε πολύ περισσότερους σχεδιαστές να δημιουργούν προκατασκευασμένες 3D βιβλιοθήκες που μπορούν να χρησιμοποιήσουν άλλοι για να προσθέσουν οπτικό ενδιαφέρον στους ιστότοπούς τους το επόμενο έτος.
Metaverse
Το metaverse είναι μια ιδέα, ένας διαδραστικός ψηφιακός χώρος και ένας νέος διαδικτυακός κόσμος. Μπορεί να συζητιέται έντονα, αλλά αυτό σημαίνει ότι βρίσκεται όλο και περισσότερο στην επικαιρότητα. Καθώς οι χρήστες του διαδικτύου έχουν συνηθίσει τους διαδικτυακούς χώρους και την εικονική πραγματικότητα. Ο σχεδιασμός ιστοσελίδων 2023 θα αποτελεί ολοένα και πιο σημαντικό μέρος της οπτικής γλώσσας του στυλ σχεδιασμού του metaverse.
Το metaverse είναι μια μορφή εικονικής πραγματικότητας. Οπτικά, αυτό σημαίνει ότι κάθε στοιχείο δημιουργείται για να σχηματίσει έναν συνεκτικό κόσμο. Αντί για μια μονo-τρισδιάστατη απεικόνιση ή στοιχείο σε μια ιστοσελίδα, έχουμε δει ιστότοπους που εμπνέονται από το metaverse να δημιουργούν ένα ολοκληρωμένο τρισδιάστατο στυλ για τη σελίδα τους.
Αυτό περιλαμβάνει τα πάντα, από εικονογραφήσεις, φόντα, κείμενο, ακόμη και δρομείς. Οι ιστότοποι έχουν επίσης συμπεριλάβει αλληλεπιδράσεις και κινούμενα εφέ για να βοηθήσουν στην προσέλκυση του χρήστη και να κάνουν τον ιστότοπο να μοιάζει πιο διαδραστικός.
Ένα αξιοσημείωτο παράδειγμα είναι ο ιστότοπος της Totem, ο οποίος χρησιμοποιεί κινούμενα εφέ για να δημιουργήσει μια καθηλωτική εμπειρία στον ιστότοπο. Η Offbrand, ο σχεδιαστής του ιστότοπου, χρησιμοποίησε ένα grainy εφέ και layers of luminous mist για να ενοποιήσει το περιεχόμενο του ιστότοπου, το φόντο και τα εικονογραφημένα στοιχεία.
Από την άλλη πλευρά του νομίσματος του metaverse, ο ιστότοπος Music Mania χρησιμοποιεί τα τρισδιάστατα κινούμενα σχέδια ως στοιχείο φόντου που διαχωρίζεται από τον υπόλοιπο ιστότοπο με επικαλυπτόμενα πλαίσια, κείμενο και στοιχεία με επίπεδες εικόνες. Ο διαχωρισμός βοηθά την κίνηση να φαίνεται λιγότερο συντριπτική.
Claymorphism
Το Claymorphism δημιουργεί μια δυναμική εμπειρία με διαφορετικό τρόπο, δίνοντας στον θεατή απεικονίσεις που μοιάζουν απτές και πραγματικές. Πολλοί χρήστες του διαδικτύου μπορεί να έχουν μια ισχυρή συναισθηματική προσκόλληση στα εφέ claymation αφού μεγάλωσαν με ταινίες όπως το “Wallace & Gromit” ή το “Coraline”.
Περιμένουμε να δούμε σχέδια εμπνευσμένα από το claymation να είναι δημοφιλή το 2023, καθώς συνδυάζουν τρισδιάστατα εφέ με τις καρτουνίστικες ανθρώπινες φιγούρες που είναι δημοφιλείς στο σχεδιασμό ιστοσελίδων τα τελευταία χρόνια.
Το claymorphism μια φανταστική τεχνική για την παραγωγή διασκεδαστικών τρισδιάστατων ανθρώπινων μοντέλων χωρίς να πλησιάζετε πολύ κοντά σε παράξενη κοιλάδα. Μερικά σπουδαία παραδείγματα είναι η βιβλιοθήκη κινουμένων σχεδίων της Guuulp!, η οποία διαθέτει μια μεγάλη γκάμα ανθρώπων σε στυλ claymation, και ο ιστότοπος Community Grants της Webflow, ο οποίος ενσωματώνει χαρακτήρες claymorphic για να δώσει ζωή στη σελίδα.
5. Αλληλεπιδράσεις “Just for fun”
Ο σχεδιασμός ιστοσελίδων 2023, αναμένεται να εστιάσει σε περισσότερες αλληλεπιδράσεις που είναι “απλά για διασκέδαση” και δεν εξυπηρετούν κάποιον ιδιαίτερο σκοπό εκτός από το να προσθέτουν στην εμπειρία ενός ιστότοπου.
Συνεχίζοντας την τάση των ιστότοπων που μοιάζουν με εφαρμογές από το προηγούμενο έτος, οι αλληλεπιδράσεις απλώς για διασκέδαση επιτρέπουν στους επισκέπτες να αλληλεπιδρούν με έναν ιστότοπο και να φέρνουν αυτήν την αισθητηριακή απόλαυση σε ορισμένες περιοχές ενός μεγαλύτερου ιστότοπου.
Όταν πρόκειται για κινούμενα σχέδια που είναι μόνο για διασκέδαση, δεν χρειάζεται να αποτελούν μέρος της κύριας πλοήγησης του ιστότοπού σας για να είναι αποτελεσματικά. Στην πραγματικότητα, μερικές φορές, είναι καλύτερο να μην είναι. Τα διαδραστικά κινούμενα σχέδια, όπως το Ball Pit ή το Love Button, είναι ελκυστικά και εξαιρετικά διασκεδαστικά για να παίξετε χωρίς να επηρεάζουν την προσβασιμότητα ενός ιστότοπου.
Ένα κινούμενο σχέδιο “για πλάκα” μπορεί επίσης να προσθέσει νόημα στον ιστότοπό σας, αν χρησιμοποιηθεί δημιουργικά. Η Lazarev Agency σχεδίασε τον Batumba ως μασκότ και δημιούργησε το διαδραστικό animation εφέ του ως άσκηση ομαδικής ανάπτυξης. Ο χαρακτήρας κάνει το πρακτορείο αξιομνημόνευτο και επιδεικνύει τις δεξιότητες κωδικοποίησης της ομάδας σε πιθανούς πελάτες με διασκεδαστικό τρόπο.
Φόρτωση κινούμενων εικόνων
Η φόρτωση κινούμενων εικόνων ήταν δημοφιλής στις πρώτες μέρες του διαδικτύου, αλλά έπεσε εκτός μόδας για μεγάλο χρονικό διάστημα. Πρόσφατα, είδαμε μεγάλες ομάδες σχεδιαστών να αρχίζουν να ενσωματώνουν ξανά οθόνες φόρτωσης στα σχέδιά τους και αυτή η τάση θα συνεχιστεί μέχρι το 2023.
Αυτή η αναβίωση της οθόνης φόρτωσης προέρχεται από την αυξανόμενη δημοτικότητα της αλληλεπίδρασης, των κινούμενων εικόνων και των καθηλωτικών σχεδίων ιστοτόπων. Μια οθόνη φόρτωσης είναι μια άλλη ευκαιρία να αλληλεπιδράσετε με τους θεατές και να επικοινωνήσετε την ταυτότητά σας στον ιστότοπό σας. Οι χρήστες του ιστού μισούν την αναμονή για φόρτωση σελίδων και τα κινούμενα σχέδια κάνουν την αναμονή λιγότερο σαν αγγαρεία.
Ένα από τα αγαπημένα μας που έχουμε δει είναι ο ιστότοπος του Antonio Segurado, ο οποίος χρησιμοποιεί ένα animation φόρτωσης για να παρουσιάσει τον Antonio στους επισκέπτες – δημιουργώντας ένα απλό αλλά φιλόξενο αποτέλεσμα. Ομοίως, ο Cory Runnells δημιουργεί μια πλήρη αφήγηση για τον ιστότοπό του. Ξεκινάει με ένα κινούμενο ζουμ σε μια πόλη κατά τη φόρτωση, στη συνέχεια συστήνεται ως χαρακτήρας που μοιάζει με υπερήρωα και εξηγεί την τεχνογνωσία του μέσω ενός κόμικ.
Μας άρεσε επίσης το κινούμενο σχέδιο φόρτωσης της Rachel Bavaresco, το οποίο επικεντρώνεται σε μια κινούμενη συλλογή από χειροποίητους χαρακτήρες της – ένας τέλειος τρόπος για να επιδείξει τις ικανότητές της και να παρουσιάσει στους επισκέπτες τη δουλειά της.
7. Συνεργασία
Η εργασία από το σπίτι και τα υβριδικά περιβάλλοντα εργασίας έχουν γίνει ο κανόνας από την έναρξη της πανδημίας COVID-19. Με αυτό το δεδομένο, τα ψηφιακά εργαλεία που επιτρέπουν την απομακρυσμένη συνεργασία ή τα χαρακτηριστικά που ενσωματώνουν ρητή υποστήριξη της συνεργασίας, όπως οι ρόλοι και τα δικαιώματα του Webflow, δεν είναι απλώς δημοφιλή, αλλά έχουν γίνει απαραίτητα. Θα συνεχίσουμε να βλέπουμε την τάση της προσθήκης ενσωματωμένων συνεργατικών χαρακτηριστικών στα ψηφιακά εργαλεία να συνεχίζει να αυξάνεται.
Η Adobe ανακοίνωσε τον Σεπτέμβριο ότι θα εξαγοράσει το δημοφιλές εργαλείο σχεδιαστικής συνεργασίας Figma. Η εταιρεία είναι ευρέως γνωστή για τα συνεργατικά χαρακτηριστικά της, όπως η κοινή χρήση πρωτοτύπων και τα συστήματα σχεδιασμού που διατηρούν τα κοινά περιουσιακά στοιχεία σε ένα μέρος.
Η εξαγορά αυτή σηματοδοτεί ότι οι χώροι εργασίας βλέπουν την αξία του λογισμικού που υποστηρίζει την ψηφιακή συνεργασία με πιο ουσιαστικό τρόπο. Αναμένουμε να δούμε όλο και περισσότερα ψηφιακά εργαλεία να λανσάρουν χαρακτηριστικά συνεργασίας στο εγγύς μέλλον.
8. Εμπειρίες premium περιεχομένου
Προχωρώντας προς το 2023, αναμένουμε ότι όλο και περισσότεροι δημιουργοί και επιχειρήσεις θα ανακαλύψουν την αξία των συνδρομών μέλους, του περιεχομένου με πύλες και των εμπειριών premium. Η όλη ιδέα του Web3 – η οποία έχει αποκτήσει τεράστια έλξη τον τελευταίο χρόνο – είναι η αποκέντρωση του διαδικτύου. Η ενσωμάτωση περιφραγμένου περιεχομένου σε έναν ιστότοπο σας δίνει μεγαλύτερο έλεγχο στην κοινότητά σας και σας βοηθά να πληρώνεστε για τη δημιουργία πολύτιμου περιεχομένου.
Οι δημιουργοί θα αγκαλιάζουν όλο και περισσότερο την ανεξαρτησία που συνεπάγεται η ιδιοκτησία της δικής τους πύλης περιεχομένου. Ενώ οι επιχειρήσεις – οι οποίες αναζητούν τρόπους για να είναι πιο ανθεκτικές στην ύφεση – θα στραφούν προς το premium περιεχόμενο και τις κλειστές συνδρομές που θα τους επιτρέψουν να δημιουργήσουν μια πρόσθετη ροή εισοδήματος απευθείας από τον δικό τους ιστότοπο.
Ένα εξαιρετικό παράδειγμα ενός ιστότοπου που δημιουργεί εμπειρίες περιεχομένου premium είναι το NoCode Kids, το οποίο χρησιμοποιεί συνδρομές Webflow για να δημιουργήσει μια ολόκληρη διαδικτυακή πλατφόρμα εκμάθησης για να διδάξει στους νέους πώς να χρησιμοποιούν εργαλεία no-code.
Ένας άλλος ιστότοπος, το Ladies Get Paid, διαθέτει μια πύλη επί πληρωμή που παρέχει στους χρήστες πρόσβαση σε μια ολόκληρη κοινότητα γυναικών που δραστηριοποιούνται σε επιχειρήσεις, μαζί με εκπαιδευτικούς πόρους.
Η Sequoia Ampersand χρησιμοποιεί επίσης τη λειτουργία συνδρομών του Webflow για να παρέχει πρόσβαση στο εκτεταμένο αρχείο επιχειρηματικών πόρων της. Αυτό όχι μόνο βοηθάει τη Sequoia Ampersand στην προσπάθειά της να παρέχει οφέλη στην κοινότητά της, αλλά τη βοηθάει και στην πιο άμεση συνεργασία με τους χρήστες της.
Μια πύλη περιεχομένου υψηλής ποιότητας ή μια λειτουργία συνδρομών σας επιτρέπει επίσης να κάνετε τον ιστότοπό σας πιο πολύτιμο και πιο ελκυστικό από μια απλή στατική πηγή πληροφοριών. Μπορείτε να δημιουργήσετε τις δικές σας συνδρομές μελών για τους πελάτες σας ή να προσθέσετε συνδρομές για να κερδίσετε χρήματα από τα πρότυπα και τα σχέδιά σας. Μπορείτε επίσης να προωθήσετε πύλες περιεχομένου premium σε πελάτες, προσθέτοντας αξία στη δουλειά που κάνετε για άλλους.
9. ‘Ελαφριές’, πιο αποτελεσματικές ιστοσελίδες
Τόσο οπτικά όσο και στο back end, οι ιστότοποι που είναι ‘ελαφροί’, γρήγοροι και βελτιστοποιημένοι για την εμπειρία του χρήστη θα γίνουν πιο συνηθισμένοι το 2023. Οι χρήστες δεν θέλουν να περιμένουν. Και όχι μόνο αυτό, αλλά όλο και περισσότεροι χρήστες έχουν πρόσβαση σε ιστότοπους από τις κινητές συσκευές τους ή από δίκτυα που μπορεί να είναι αργά. Η τάση των ελαφρών ιστότοπων διασφαλίζει ότι οι χρήστες παίρνουν αυτό που χρειάζονται και απολαμβάνουν την πρόσβαση στον ιστότοπό σας.
Σε όλη την ιστορία του διαδικτύου, οι σχεδιαστές συχνά περιόριζαν τις εικόνες και τα γραφικά για να αυξήσουν την ταχύτητα φόρτωσης του ιστότοπου. Παρόλο που αυτό δεν είναι πλέον απολύτως απαραίτητο, πρέπει να γνωρίζετε πόσο βαριά είναι τα αρχεία πολυμέσων στον ιστότοπό σας.
Η τεχνολογία όπως οι εικόνες WebP και οι τεχνικές όπως ο σχεδιασμός lazy load βίντεο φόντου σας επιτρέπει να προσθέσετε όλα τα πολυμέσα που θέλετε χωρίς να βλάψετε την εμπειρία του χρήστη.
10. Πιο σκόπιμη χρήση των ειδοποιήσεων
Ιστορικά, οι εταιρείες χρησιμοποιούσαν τις ειδοποιήσεις μέσω κινητών τηλεφώνων ως εργαλείο πωλήσεων. Οι ειδοποιήσεις έχουν τη δύναμη να προτρέπουν τους καταναλωτές να αγοράσουν, είτε πρόκειται για ειδοποίηση για πωλήσεις, είτε για κάτι που πρέπει να αγοράσουν, είτε για ένα νέο χαρακτηριστικό.
Περισσότερες εφαρμογές και ιστότοποι θα ενσωματώσουν ειδοποιήσεις για να συνδεθούν με τους χρήστες τους φέτος. Το κοινό θέλει οι αλληλεπιδράσεις του με τις εφαρμογές που χρησιμοποιεί να είναι πιο γνήσιες και πιο χρήσιμες.
Οι ειδοποιήσεις έχουν τη δύναμη να κάνουν τους ιστότοπους και τις εφαρμογές πιο χρήσιμες, πιο προσωπικές και πιο ενσωματωμένες στη ζωή των χρηστών. Φέτος παρατηρήθηκε μια γενική τάση προς πιο ελκυστικές εμπειρίες στον ιστό. Ειδικότερα, αναμένουμε να δούμε τις ειδοποιήσεις να χρησιμοποιούνται με πιο δημιουργικούς τρόπους για την αλληλεπίδραση με τους χρήστες και την παροχή χρήσιμων πληροφοριών.
Το Twitter πρόσθεσε πρόσφατα ειδοποιήσεις στην εφαρμογή του που υπενθυμίζουν στους χρήστες να περιλαμβάνουν κείμενο alt όταν προσθέτουν εικόνες. Το κείμενο Alt είναι εξαιρετικά σημαντικό για την προσβασιμότητα, επιτρέποντας στους χρήστες που βασίζονται σε προγράμματα ανάγνωσης οθόνης, όπως οι τυφλοί και οι άνθρωποι με χαμηλή όραση, να κατανοήσουν το περιεχόμενο μιας εικόνας. Αυτή η απλή προσθήκη έχει τη δυνατότητα να αυξήσει την προσβασιμότητα ολόκληρης της πλατφόρμας του Twitter με ουσιαστικό τρόπο.
Κάποια άλλα πρόσφατα παραδείγματα που βλέπουμε είναι το νέο iOS της Apple που περιλαμβάνει μια λειτουργία “Share Focus status” και ενημερώνει κάποιον που προσπαθεί να επικοινωνήσει μαζί του αν είναι ρυθμισμένος στη λειτουργία Focus κατά την οδήγηση ή στο Do Not Disturb μετά την ώρα του ύπνου. Η Lyft έχει επίσης ενσωματώσει απίστευτα χρήσιμες ειδοποιήσεις όπως “η διαδρομή διαρκεί περισσότερο από το αναμενόμενο” και σιωπηλή βοήθεια στο 911 όταν χρειάζεται.
Αυτά τα παραδείγματα είναι σήματα της αυξημένης επίγνωσης της ισχύος των ειδοποιήσεων. Αυτές οι δύο εξέχουσες πλατφόρμες πειραματίζονται με τη χρήση ειδοποιήσεων με πιο ολοκληρωμένο τρόπο. Δίνει ένα ισχυρό πρώιμο μήνυμα ότι είναι πιθανό να δούμε ακόμη περισσότερα χαρακτηριστικά όπως αυτό να κυκλοφορούν κατά τη διάρκεια του επόμενου έτους.
11. Προσαρμόσιμες εμπειρίες προβολής
Με την άνοδο της εξατομίκευσης στον ιστό, περισσότεροι ιστότοποι θα επιτρέπουν προσαρμόσιμες εμπειρίες προβολής. Πηγαίνοντας στο 2023, οι εμπειρίες ιστού καλύπτουν όλο και περισσότερο τις ανάγκες και τις προτιμήσεις των χρηστών τους.
Οι πλατφόρμες δημιουργίας ιστότοπων παρέχουν πλέον στους σχεδιαστές τα εργαλεία για να επιτρέπουν στους χρήστες τους να προσαρμόζουν εύκολα τα χαρακτηριστικά της εμπειρίας του ιστότοπού τους. Υπάρχει μεγαλύτερη ευαισθητοποίηση όσον αφορά την προσβασιμότητα – στην κοινωνία και στον ιστό. Χαρακτηριστικά όπως η σκοτεινή λειτουργία και ο ήχος μπορούν να κάνουν έναν ιστότοπο πιο φιλικό προς το χρήστη για άτομα με διαφορετικές ανάγκες.
Οι άνθρωποι ανταποκρίνονται καλά σε ιστότοπους που προσαρμόζουν τις προτιμήσεις τους, τις αλληλεπιδράσεις και τα σχέδια που μπορούν να προσαρμόσουν στο γούστο τους. Αυτή η τάση προς τη δημιουργία πιο προσαρμόσιμων εμπειριών προβολής είναι μια φυσική εξέλιξη από τη δημοτικότητα των ιστότοπων ως παιχνιδιών και των διαδραστικών χαρακτηριστικών που είδαμε τα προηγούμενα χρόνια.
Οι προσαρμόσιμες ρυθμίσεις μπορούν να χρησιμοποιηθούν με κάθε είδους χρήσιμους και δημιουργικούς τρόπους. Ο Timothy Ricks δημιούργησε έναν διακόπτη Persistent Dark Mode Switch που οι επισκέπτες μπορούν να χρησιμοποιήσουν για να αλλάξουν την εμπειρία προβολής τους (δοκιμάστε τη δυνατότητα κλωνοποίησης σε ένα έργο). Μια άλλη χρήσιμη λειτουργία είναι η αλλαγή καρτελών, η οποία παρέχει στον χρήστη πληροφορίες που ανταποκρίνονται στις ρυθμίσεις που επιλέγουν, όπως μια μηνιαία ή ετήσια συνδρομή προγράμματος (δοκιμάστε το εδώ).
Οι προσαρμόσιμες εμπειρίες προβολής μπορούν επίσης να χρησιμοποιηθούν για δημιουργική έκφραση. Το Happy Medium επιτρέπει στους χρήστες να αλλάζουν το χρώμα του κειμένου στον ιστότοπό τους ανάλογα με τις ιδιοτροπίες τους, γεγονός που αποτελεί μια διασκεδαστική προσθήκη στην εμπειρία του ιστότοπου.
Ο Anfernee Grant μετέτρεψε ακόμη και έναν ιστότοπο σε μια μοναδική ιστορία για ύπνο με το The Big Bed. Επιτρέπει στον χρήστη να επιλέξει να διαβάζει δυνατά τις ενότητες σε αυτόν ή να μεταβεί σε συγκεκριμένες σελίδες. Όποιος έχει διαβάσει παραμύθια σε παιδιά θα αναγνωρίσει πόσο χρήσιμο είναι να επιστρέφουν στην αγαπημένη τους σελίδα ξανά και ξανά.
Το 2023 είναι το έτος δέσμευσης των χρηστών
Ο Ιστός είναι ένα διαδραστικό μέρος, και ήταν από την ίδρυσή του. Οι σχεδιαστές πάντα αγαπούσαν να δημιουργούν καθηλωτικές εμπειρίες και δημιουργικά παιχνίδια και να κάνουν τους επισκέπτες ενεργό μέρος της εμπειρίας του ιστοτόπου τους. Αυτό που κάνει τη φετινή χρονιά να ξεχωρίζει είναι το πόσο αβίαστα έχει ενσωματωθεί η ιδέα της εμπλοκής των χρηστών.Διαθέτουμε πλέον την τεχνολογία για να δώσουμε τη δυνατότητα στους χρήστες του διαδικτύου να συμμετέχουν στη διαμόρφωση της δικής τους εμπειρίας του διαδικτύου – όχι μόνο στο metaverse ή στο Web3 ή σε όποιο ψηφιακό zeitgeist συμβαίνει, αλλά και σε μικρά αλλά σημαντικά τμήματα της καθημερινής τους χρήσης του διαδικτύου.
Μπορείτε να ενσωματώσετε την εμπλοκή στον ιστότοπό σας με ανταπόκριση, κινούμενα σχέδια και διασκέδαση. Μπορείτε να προσθέσετε λειτουργικότητα για να μετατρέψετε τον ιστότοπό σας σε παραμύθι, πηγή μάθησης, κοινόχρηστο πλαίσιο ανάπτυξης ιστοσελίδων ή απλώς σε ένα διασκεδαστικό μέρος για παιχνίδι.
Οι σύγχρονοι ιστότοποι είναι αναμφίβολα πιο ζωντανοί και δυναμικοί χώροι όπου οι χρήστες και οι σχεδιαστές συμμετέχουν σε νέες αλληλεπιδράσεις. Νομίζουμε ότι αυτός φαίνεται να είναι ένας ευχάριστος τρόπος να βιώνει κανείς τον ιστό.
Πηγή : [1] https://webflow.com/blog/web-design-trends-2023