Τι είναι δημοφιλές σε ιστοσελίδες το 2018: 7 σημαντικές τάσεις στο web design

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

Κινούμενα σχέδια

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

Βιομηχανικοί Τροχοί

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

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

Ασφαλιστική εταιρεία

Στο διαφημιστικό site της ασφαλιστικής εταιρείας "Arsenal" με τη βοήθεια του animation SVG παρουσιάζονται τα πιο κοινά ασφαλισμένα γεγονότα. Και το ισομετρικό στυλ στο οποίο απεικονίζονται επιτρέπει μια πιο ακριβή αναπαράσταση της αρχιτεκτονικής και των αυτοκινήτων, δημιουργώντας ένα 3D εφέ.

Εξοπλισμός και χημικές ουσίες Κατασκευαστής

Η Medlex κατασκευάζει και προμηθεύει χημικά αντιδραστήρια, ιατρικό εξοπλισμό και απορρυπαντικά. Οι οθόνες στην κύρια σελίδα του ιστότοπου εμφανίζουν τις υπηρεσίες και η κινούμενη εικόνα κάνει τις εικόνες πιο ζωντανές.

Για περισσότερα παραδείγματα σχεδιασμού υπηρεσιών, ανατρέξτε στο άρθρο του Alexey Alexandrov "Πώς να σχεδιάσετε τη σελίδα υπηρεσιών: ένα παράδειγμα 14 εταιρειών από διαφορετικούς επιχειρηματικούς τομείς".

Ηλεκτρονική δημοπρασία

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

Διαδραστική

Τα τελευταία δύο χρόνια άρχισαν να εμφανίζονται όλο και περισσότερες διαδραστικές τοποθεσίες. Ο χρήστης έχει την ευκαιρία να έρθει σε επαφή με τα στοιχεία της σελίδας: push, stretch, connect, draw, κλπ. Τέτοιες λύσεις πάντα βοηθούν να ξεχωρίζουν και να προσελκύουν την προσοχή.

Διαύλου ψυχαγωγίας

Το κολύμπι ενηλίκων είναι ένα μπλοκ στο κανάλι του Cartoon Network. Σε αυτό από τις 11 μ.μ. έως 6 π.μ. δείχνει και γελοιογραφίες για ενήλικες. Στην πρώτη οθόνη της ιστοσελίδας αφιερωμένη σε αυτό το κανάλι, μπορείτε να κολλήσετε για περίπου πέντε λεπτά, τεντώνοντας το ελαστικό πρόσωπο του κύριου χαρακτήρα από το κινούμενο σχέδιο "Ricky and Morty".

Στούντιο στο Web

Στην ιστοσελίδα του AERO web studio, ο δρομέας μιμείται τον θερμικό χάρτη "Yandex.Metrica" ​​- ένα από τα βασικά εργαλεία για την ανάλυση των εμπόρων στο διαδίκτυο. Αυτό είναι ίσως το μόνο που χρειάζεται να γνωρίζετε για αυτή τη σελίδα. Μετακινηθείτε περαιτέρω.

Οργανισμός επωνυμίας

Το όνομα του πρακτορείου μάρκας Revelé που μεταφράζεται από τη λατινική σημαίνει να αποκαλύψει το άγνωστο.

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

Η προσωπική τοποθεσία του εικονογράφου

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

Παιχνίδια και δοκιμές

Όσον αφορά τον θόρυβο της πληροφορίας, μόνο οι πιο παρακινημένοι επισκέπτες βυθίζονται στο περιεχόμενο. Ως εκ τούτου, η ίδια η συμπεριφορά του σύγχρονου χρήστη ώθησε τους σχεδιαστές και τους σχεδιαστές σε αυτή την τάση. Πράγματι, σε αντίθεση με την ανάγνωση, ο καθένας αγαπά να παίζει και να κάνει δοκιμές στο Διαδίκτυο. Αυτό αυξάνει τη συμμετοχή, καθώς το αποτέλεσμα μοιράζεται με τους φίλους και μοιράζεται στα κοινωνικά δίκτυα.

Εταιρεία προσλήψεων

Για το Παγκόσμιο Κύπελλο της FIFA στη Ρωσία, η Ancor προσέλαβε εθελοντές και εργαζόμενους χρησιμοποιώντας το HR-Landing για να συγκεντρώσει τις αιτήσεις για κενές θέσεις εργασίας. Και για να αυξήσουν την κάλυψη, εφάρμοσαν μηχανική παιχνιδιών.

Από τη δεύτερη οθόνη προσφέρεται να πάει στο κλειστό τμήμα με το παιχνίδι, το οποίο είναι ένα κανονικό 2D arcade. Και δίνουν τη δυνατότητα να πιάσουν ένα γυμνό ανεμιστήρα ποδοσφαίρου που τρέχει στο γήπεδο, να πηδάει πάνω από τα εμπόδια κατά μήκος του δρόμου (ειλικρινά, δεν θα μπορούσα να τα πιάσω.) Εάν πετύχετε, γράψτε στα σχόλια τι συμβαίνει.

Πλύσιμο αυτοκινήτου

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

Πάρκο νερού

Και το τελευταίο παράδειγμα είναι τα μίνι-παιχνίδια στο χώρο του πάρκου. Στους επισκέπτες δίνεται η ευκαιρία να περπατήσουν γύρω από την περιοχή με διαφάνειες, πισίνες και βόλτες στην παραλία. Και έτσι ήταν βαρετό, οι προγραμματιστές ήρθαν με πολλά ενδιαφέρον interaktivov. Μπορείτε να κατεβείτε από τον υψηλότερο λόφο, να πυροβολήσετε ένα κανόνι νερού ή να κολυμπήσετε σε μια διαφανή μπάλα. Τέτοιες αποφάσεις δεν αφορούν μόνο τους επισκέπτες, αλλά και ότι το πιο σημαντικό πράγμα μεταφέρεται από τα συναισθήματα.

Εφέ παράλλαξης

Πιθανότατα έχετε δει χώρους όπου, κατά την κύλιση, τα αντικείμενα στο προσκήνιο και το υπόβαθρο κινούνται με διαφορετικές ταχύτητες, δημιουργώντας την εμφάνιση της τριάδας. Στην πραγματικότητα, αυτό είναι το φαινόμενο παράλλαξης. Έγινε ευρέως διαδεδομένη με την εμφάνιση των τεχνολογιών CSS3 και HTML5, επιτρέποντάς σας να δημιουργήσετε πιο ενδιαφέροντα και ζωντανά εφέ. Τώρα, άρχισαν να εμφανίζονται όλο και περισσότερες τοποθεσίες, στις οποίες δεν χρησιμεύουν μόνο για διακόσμηση, αλλά και για να αποκαλύψουν τα πλεονεκτήματα ή να μεταδώσουν πληροφορίες.

Νύχι

"K2 Expert" - σύνδεσμοι ηλεκτρονικού καταστήματος και υλικό. Προκειμένου να πουλήσουν με επιτυχία το προϊόν της ναυαρχίδας, ξεκίνησαν ένα site προώθησης για πριτσίνια. Και το πριτσίνι σε αυτό κατά την κυριολεκτική και εικαστική έννοια είναι στο προσκήνιο. Σε ολόκληρη τη σελίδα, παραμένει στατική, ενώ το υπόλοιπο περιεχόμενο κυλούν. Αυτή η τεχνική προσεγγίζει κυριολεκτικά την προσοχή του επισκέπτη στη σελίδα, χωρίς να τον αφήσει στην τελευταία οθόνη.

Παρακολουθήστε σήμα

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

Καλλυντική εταιρεία

Πάνω από μία φορά εμφανίστηκε στην υποψηφιότητα "Website of the Day" στην εταιρεία καλλυντικών Awwwards Mowellens. Στην ιστοσελίδα της, η παράλλαξη δημιουργεί μια συμβίωση με ομαλές μεταβάσεις και ζωηρόχρωμο animation. Αυτό κάνει τον πόρο μοναδικό και αξέχαστο.

Εικονική πραγματικότητα

Αυτή είναι η πιο δύσκολη στην εφαρμογή υποδοχή από ολόκληρο τον κατάλογο, αλλά ένα από τα πιο κοινά. Για να δημιουργήσουν ένα εικονικό χώρο στον ιστότοπο, χρησιμοποιούν μια ολόκληρη σειρά τεχνολογιών, όπως το WebGL και το WebVR, το 3D μοντέλο και την υφή.

Ψηφιακό στούντιο

Studio Little Workshop ασχολείται με τη χρήση της τεχνολογίας VR για τις επιχειρήσεις. Για να επιδείξουν τις υπηρεσίες τους, δημιούργησαν μια ιστοσελίδα με ένα εικονικό δωμάτιο, όπου αποκάλυψαν όλες τις δυνατότητες των προτεινόμενων τεχνολογιών.

VR cinema

Στη σελίδα που αφιερώνεται στο εικονικό κινηματογράφο CINEVR, προσφέρεται να αγοράσετε ένα εισιτήριο για τη συνεδρία της ταινίας που σας αρέσει και να το παρακολουθήσετε με τη βοήθεια γυαλιών VR. Και για να φέρει όλα τα πλεονεκτήματα αυτής της τεχνολογίας, ο ιστότοπος έχει υλοποιήσει ένα διαδραστικό χώρο 3D κινηματογράφου.

"Kaspersky Lab"

Προς τιμήν της 20ης επετείου του "Kaspersky Lab" ξεκίνησε ένα έργο για την πρόβλεψη του μέλλοντος.

Όλοι μπορούν να μοιραστούν το όραμά τους για το τι μας περιμένει το 2050. Και οι καλύτερες ιδέες θα προσθέσουν στον ιστότοπο.

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

Προσαρμοσμένη μηχανική

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

Αυτή η τάση δεν συνδέεται με συγκεκριμένη τεχνολογία ή λήψη. Σε διαφορετικά παραδείγματα - διαφορετικές λύσεις. Όλα εξαρτώνται από την ιδέα που θέλετε να μεταφέρετε.

Ενεργειακή εταιρεία

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

Εκδότης

Οι κεκλιμένες σελίδες στον ιστότοπο του εκδοτικού οίκου Rhombus Press, που μιμούνται το αποτύπωμα από τον τυπογραφείο, σπάζουν όλα τα κανόνα χρηστικότητας. Το κλασικό μενού δεν παρέχεται: μπορείτε να μεταβείτε σε άλλη ενότητα κάνοντας κλικ στην περιοχή σε μια από τις γωνίες της οθόνης.

Παρ 'όλα αυτά, ο εννοιολογικός χαρακτήρας του ιστότοπου το καθιστά πολύ πιο ενδιαφέρον και αξέχαστο από οποιονδήποτε άλλο ιστότοπο εκδότη.

Εταιρεία Logistics

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

Εικονογραφήσεις

Αυτή η τάση επιταχύνεται από το 2017 και είναι πιθανό να συνεχιστεί το 2019. Ένα μεγάλο πλεονέκτημα των εικονογραφήσεων είναι ότι, αντίθετα με τις φωτογραφίες των αποθεμάτων, κάνουν τη σελίδα μοναδική και αξέχαστη.

Συνδιάσκεψη

Site Promo του δημιουργικού συνεδρίου Epicurrence №8, που πραγματοποιήθηκε στο Yosemite National Park. Προσφέρει σχεδιαστές, εικονογράφους, εμψυχωτές και άλλη δημιουργική γεύση. Εκεί κάνουν ό, τι θέλουν: δημιουργούν κοινά έργα, πηγαίνουν αναρρίχηση, ψάρεμα, κυνήγι θησαυρών, και τα βράδια συγκεντρώνονται γύρω από την φωτιά για εμπνευσμένες συνομιλίες.

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

Χαρτοφυλάκιο εικονογράφου

Ο Mariano Pascual είναι εικονογράφος και σχεδιαστής από την Αργεντινή. Αντί για έναν τυπικό ιστότοπο επαγγελματικών καρτών, επέστησε παρωδία του λειτουργικού συστήματος, αντιπροσωπεύοντας μια σελίδα με την επιφάνεια εργασίας, τα παράθυρα, το καλάθι και το πρόγραμμα περιήγησης. Αποδείχθηκε διασκεδαστικό και μη δείγμα για να δείξει τη δουλειά τους.

Ηλεκτρονική υπηρεσία δανεισμού

Creddy - μια υπηρεσία για τη λήψη δανείων και επενδύσεων σε τόκους. Οι εικόνες στο site είναι μια μεταφορά για τους πελάτες και τις εταιρείες. Οι εικόνες σε αυτές δημιουργούν την εντύπωση μιας πλαστικής και ανοιχτής εταιρείας. Και για να μεταδώσουν τα σωστά συναισθήματα σε κάθε ακροατήριο, χρησιμοποίησαν δύο χρώματα προφορά: κόκκινο - στο τμήμα για δανειολήπτες, γκρι - για τους επενδυτές.

Μάρκα ενδυμάτων

Η σελίδα αφιερωμένη στη νέα συλλογή Gucci Spring-Summer 2018 είναι μια συνεχής ακολουθία εικονογραφήσεων, συμπληρωμένη με κινούμενα σχέδια και διαδραστικές στιγμές. Και κάνοντας κλικ σε οποιοδήποτε πράγμα στις εικόνες, πηγαίνουμε στην κάρτα της στο ηλεκτρονικό κατάστημα.

Τι θα ακολουθήσει

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

Loading...

Αφήστε Το Σχόλιό Σας