6 cool διαδραστικές ιστοθέσεις ιστοχώρου και πώς να τις κάνετε

Ζητήστε από τους επισκέπτες σας να παραμείνουν κατά 25% περισσότερο στη σελίδα σας, να μειώσουν το ποσοστό εγκατάλειψης και να κάνουν τους ανθρώπους να επιστρέφουν στον ιστότοπό σας, χάρη στο φόντο ενός διαδραστικού ιστοτόπου.

Ο ιστότοπός σας είναι η κύρια βιτρίνα σας και θα πρέπει να αντανακλά τον πολιτισμό σας με τον καλύτερο δυνατό τρόπο. Επιπλέον, είναι επίσης ο κύριος στόχος σας να προσελκύσετε την προσοχή των επισκεπτών, να τους εμπνεύσετε, να τους ενδιέφερε στην επιχείρησή σας, ενώ εισάγετε τα προϊόντα και / ή τις υπηρεσίες σας. Πολλοί τρόποι να γίνει αυτό και ένας από αυτούς είναι να παρέχει ένα διαδραστικό ιστορικό ιστοχώρου. Πράγματι, αυτό το είδος επίδρασης έχει πολλαπλά πλεονεκτήματα: αυξάνοντας το 25% του χρόνου που αφιερώνεται σε μια σελίδα, μειώνοντας κατά μέσο όρο το 35% του μέσου όρου εγκατάλειψης και, συνεπώς, κάνοντας τους ανθρώπους να επιστρέφουν στον ιστότοπό σας (+ 40% ποσοστό επιστροφής χρηστών).

Σε αυτό το άρθρο, εστιάζουμε σε 6 παραδείγματα χρησιμοποιώντας εξαιρετικά και αποτελεσματικά αλληλεπιδραστικά υπόβαθρα για ιστοσελίδες και δημιουργώντας με διαφορετικές μεθόδους. Ας τα ανακαλύψουμε!

1. Veritystudios, φωτεινά σωματίδια

Η δημιουργία ενός σύμπαντος μάρκας είναι μια από τις κορυφαίες προτεραιότητες τόσο για τις επιχειρήσεις B2C όσο και για τις επιχειρήσεις B2B σήμερα, και προτού ξοδέψετε πάρα πολύ σε μια αντιπροσωπεία, μπορείτε να δώσετε στο σύμπαν σας κάποια ουσία με απλό υπόβαθρο.

Ιστοσελίδα Veritystudios με χρήση του Three.js

Η Verity δεν πωλεί μόνο εσωτερικές λύσεις, αλλά μαγική. Σχεδίαζαν ένα διαδραστικό φόντο χρησιμοποιώντας προσαρμοσμένο κώδικα για να κάνουν τους επισκέπτες να το αισθάνονται, με τα σωματίδια να κινούνται και να συγχρονίζονται με φωτισμό, δίνοντας ένα δροσερό αποτέλεσμα βάθους και μια μικρή κίνηση στο φόντο όταν μετακινείται το ποντίκι. Η χρήση γλωσσών κώδικα όπως BabylonJS ή Three.js επιτρέπει τη δημιουργία της δικής σας εμπειρίας που ταιριάζει απόλυτα με την ατμόσφαιρα που θέλετε να προσφέρετε αλλά απαιτεί περισσότερες τεχνικές ικανότητες.

2. Η βροχή HD καθιστά τη βροχή ️

Συνήθως, τα υπόβαθρα είναι αφηρημένα, κομμάτια τέχνης και σχήματα. Αλλά μερικές φορές παίρνει πιο πραγματική, και όταν ταιριάζει με αυτό που κάνει η εταιρεία, δημιουργεί μια καταπληκτική εμπειρία.

Το HD-Rain προσφέρει ένα βρώμικο αποτέλεσμα στην ιστοσελίδα του με το Naker.Back

Το HD Rain είναι μια εκκίνηση για τις καιρικές συνθήκες που βασίζεται στο StationF στο Παρίσι και θέλησε να δώσει μια βιωματική ώθηση στον ιστοχώρο τους, ώστε να γίνει καιρός και πάλι δροσερός!

Χρησιμοποιώντας το Naker.Back, το δωρεάν εργαλείο μας για τη δημιουργία διαδραστικών φόνων από ένα μόνο εικονίδιο, το έκαναν βροχή σε λιγότερο από 5 λεπτά από τη δημιουργία έως την ενσωμάτωση, με αποτέλεσμα να αυξηθεί ο χρόνος που ξοδεύετε και να επιστρέφετε χρήστες!

3. Τα δίκτυα του Fabio Lamanna

Ιστοσελίδα που δημιουργήθηκε από τον Fabio Lamanna χρησιμοποιώντας το Particle.js

Χρησιμοποιώντας το λογότυπό σας ως έμπνευση για το φόντο σας είναι πάντα μια καλή ιδέα. Μεγάλη εμπειρία στο διαδίκτυο δεν είναι μόνο ένα σύνολο διαφορετικών στοιχείων αλλά ένας συνεπής συνδυασμός. Σε αυτή την περίπτωση, ο Fabio lamanna χρησιμοποίησε καλά την Particle.js, μια βιβλιοθήκη JS για να δημιουργήσει εφέ σωματιδίων, γνωστή για τα ωραία αποτελέσματα του δικτύου.

Είναι εξαιρετικά αποτελεσματικό, κυρίως επειδή ο Fabio εργάζεται στον τομέα των δικτύων μεταφοράς. Το διαλογικό φόντο είναι το κερασάκι στην τούρτα της ιστοσελίδας / χαρτοφυλακίου!

4. Πετάξτε στον ουρανό!

Όταν πλοηγείτε στο διαδίκτυο το 2020, χρειάζεται μερικές φορές μια παύση. Όλοι αυτοί οι lookalike ιστότοποι, όλα αυτά τα pop-up μάρκετινγκ και όλα ... Έτσι, κλείνεις τα μάτια σου, είσαι πάνω από τα σύννεφα που πετούν στον ουρανό!

Διαδραστικό ουρανό χρησιμοποιώντας Vanta.js

Αλλά μπορείτε επίσης να επισκεφθείτε τον διαδραστικό ουρανό που έγινε στο Webflow με το Vanta.js! Αυτή η εκπληκτική παράσταση είναι ένα ποιητικό διάλειμμα, για να σας δείξει πόσο μακριά μπορούμε να πάμε με φόντο. Το Vanta.js ήταν ένα έργο που έκαναν τα παιδιά από το Strikingly και είναι μια λίστα με πρότυπα όπως αυτή που ενσωματώνετε με μερικές σειρές κώδικα.

5. Οι φυσαλίδες μου, οι φυσαλίδες μου! 🧼

Εάν έχετε δει ποτέ την εύρεση Nemo, ξέρετε κάποια ψάρια (υποθέτω ότι είναι το ίδιο για τα ανθρώπινα όντα) αγάπη φυσαλίδες. Τόσο γιατί να μην τα χρησιμοποιείτε στην ιστοσελίδα σας;

Το DDNA χρησιμοποιεί προσαρμοσμένο κώδικα για το διαδραστικό του υπόβαθρο

Το DDNA είναι μια εταιρεία κοσμημάτων που αποφάσισε να παίξει με σχήματα και χρώματα για να έχει ένα πολύ μινιμαλιστικό, αλλά αποτελεσματικό υπόβαθρο ιστοχώρου. Οι φυσαλίδες, που μπορεί να αντιπροσωπεύουν με κάποιο τρόπο το πνεύμα των μελλοντικών κοσμημάτων, κυλούν γύρω από την έκσταση (έτσι ΜΗΝ STOP ME NOOOOW) με ωραία χρώματα και δροσερό σκιασμένο αποτέλεσμα. Πραγματικά δεν είναι η τυπική ιστοσελίδα κοσμημάτων που συνηθίζετε να επισκέπτεστε, γι 'αυτό θα τα θυμάστε!

6. Το σύμπαν του Δαμιανού

Συνήθως λέμε ότι η δημιουργία μιας εμπειρίας συνεπάγεται τη δημιουργία ενός σύμπαντος. Ίσως γιατί η αστρονομία είναι μια πολύ κοινή πηγή έμπνευσης για πολλούς σχεδιαστές.

Χωροταξικός σχεδιασμός για Damian Devos, διατηρώντας την εικόνα του φόντου με σωματίδια Naker.Back

Αλλά για να ξεχωρίσει, ο Damian Devos αποφάσισε να δώσει μια διαδραστική ώθηση στα αστέρια του, δημιουργώντας αμέσως ένα wow effect και δίνοντας μια βαθιά αίσθηση στην αρχική του σελίδα. Είναι επίσης ένας τρόπος, σε ένα χαρτοφυλάκιο όπως αυτό, να δείξει τις τεχνικές δυνατότητες του σχεδιαστή. Αυτό το φόντο έγινε επίσης με το Naker.Back, χρησιμοποιώντας ένα εικονίδιο αστέρι, δίνοντάς τους δύο διαφορετικές κατευθύνσεις και προσθέτοντας ευαισθησία στο ποντίκι, όλα αυτά σούπερ γρήγορα και δωρεάν.