Εγκαταλείποντας το χάμπουργκερ. Τι επηρεάζει τις τάσεις σχεδιασμού ιστοσελίδων

Ο Διευθύνων Σύμβουλος της Empirical Proof Chris Lake έχει συγκεντρώσει τις τάσεις σχεδιασμού ιστοσελίδων του 2016 σε ένα άρθρο.

Ομογενοποίηση

Σύμφωνα με τον Chris Lake, η τάση του σχεδιασμού «ντρίμπλα» αντικαθίσταται από την τυποποίηση. Όλοι οι ιστότοποι το 2016 θα είναι όλο και περισσότερο παρόμοιοι μεταξύ τους.

Μοτίβα αντί για σελίδες

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

Κινουμένων σχεδίων

Σύμφωνα με τη λίμνη, το CSS, το HTML5 και το jQuery σάς επιτρέπουν ήδη να δημιουργήσετε πλήρη εφέ κίνησης - όχι χειρότερα από ό, τι στο Flash. Δεν έχουν μάθει ακόμη όλοι οι σχεδιαστές πώς να χρησιμοποιούν κινούμενα σχέδια σε διεπαφές, έτσι ώστε να μην παρεμβαίνει στην εμπειρία του χρήστη.
Ωστόσο, το 2016, θα υπάρχουν περισσότερα καλά παραδείγματα εφέ κινούμενων σχεδίων.

Πλούσια χρώματα και παλέτες

Πλούσια χρώματα και παλέτες νέον θα είναι η τάση για το 2016. Ένα παράδειγμα είναι ο ιστότοπος του Bloomberg.

Ένα άλλο παράδειγμα είναι ο επανασχεδιασμός λογότυπου Medium που παρουσίασε η ομάδα εξυπηρέτησης το 2015. Οι σχεδιαστές χρησιμοποίησαν μια φωτεινή πράσινη παλέτα.

Ένα άλλο παράδειγμα είναι το Spotify.

Θαμπάδα εικόνας

Οι μηχανικοί του Facebook χρησιμοποιούν εφέ θόλωσης και ζουμ κατά τη φόρτωση εικόνων σελίδας. Έτσι, ο χρήστης μπορεί να δει την εικόνα ακόμη και πριν ολοκληρωθεί η λήψη του στον υπολογιστή. Σύμφωνα με τους προγραμματιστές του Facebook, αυτό επιταχύνει τους χρόνους φόρτωσης σελίδας κατά 30%.

Φόρτωση της δομής της σελίδας

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

Αυτή η τεχνική θα γίνει πιο διαδεδομένη το 2016.

Τζόκινγκ κύλισης

Το Scrolljacking είναι μια τεχνική όπου το περιεχόμενο αλλάζει καθώς μετακινείται το ποντίκι. Για παράδειγμα, ο ακόλουθος μηχανικός χρησιμοποιείται στον ιστότοπο της Apple:

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

Παθητικά-επιθετικά αναδυόμενα παράθυρα

Παρά τη δυσαρέσκεια των σχεδιαστών και των ειδικών της UX, τα αναδυόμενα παράθυρα έχουν συμπληρώσει ξανά το Διαδίκτυο - φόρμες συνδρομής μέσω email, προσφορές για εγγραφή σε κοινωνικά δίκτυα εταιρειών, εκπτώσεις και πολλά άλλα.
Το 2016, σύμφωνα με τη λίμνη, η κατάσταση δεν θα βελτιωθεί - οι έμποροι θα εξακολουθούν να χρησιμοποιούν συχνά αυτήν την τεχνική για δικούς τους σκοπούς.

Εγκατάλειψη χάμπουργκερ

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

Οι βαριές σελίδες θα γίνουν βαρύτερες

Το 2010, το μέσο μέγεθος σελίδας ήταν 702 KB, το 2015 - 2219 KB. Περισσότερο από τριπλάσιο. Και κανείς δεν φαίνεται να σκέφτεται να περιορίσει αυτήν την ανάπτυξη. Για παράδειγμα, η αρχική σελίδα του Daily Mail ζυγίζει 8,8 MB.
Αυτό, όπως γράφει η Lake, έχει αρνητικές επιπτώσεις στους χρήστες κινητής τηλεφωνίας - η ταχύτητα του Διαδικτύου για κινητά δεν επιτρέπει πάντα την προβολή τέτοιων "βαρέων" ιστότοπων.

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

Εάν δεν είστε μπροστά από το χρόνο σας, είστε αναπόφευκτα πίσω.

Καλώς ορίσατε στον Οδηγό Τάσεων Σχεδιασμού Ιστού 2016!

Καθώς περιγράφουμε κάθε τάση, θα εξηγήσουμε γιατί λειτουργεί και πώς μπορείτε να την κυριαρχήσετε προσωπικά. Θα παράσχουμε επίσης περισσότερα από 40 παραδείγματα ιστότοπων από εταιρείες όπως η Intercom, η Google, η Beoplay, η Sennheiser και άλλες.

Το περίγραμμα της κριτικής μας έχει ως εξής:

1. Εισαγωγή

2. Μικρο αλληλεπιδράσεις

4. Μινιμαλιστικός σχεδιασμός

5. Ένα υβρίδιο επίπεδου και σχεδιαστικού υλικού

6. Ζουμερά κινούμενα σχέδια

7. Τυπογραφία

8. Φωτεινά χρώματα

9. Μεγάλη κύλιση

10. HD γραφικά

11. Εικόνες

12. Συμπεράσματα

Ας ξεκινήσουμε αμέσως εξετάζοντας πώς οι μικροσκοπικές αλληλεπιδράσεις μπορούν να δημιουργήσουν μια αξέχαστη εμπειρία για τους επισκέπτες σας.

Μικρο αλληλεπιδράσεις

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

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

Οφέλη από τον ποιοτικό σχεδιασμό μικρο-αλληλεπιδράσεων

• Μπορείτε να εκπαιδεύσετε γρήγορα τους χρήστες να αλληλεπιδρούν με το προϊόν σας.
• Η σχέση της κατάστασης, των αλλαγών και της ικανότητας να τραβήξει την προσοχή σε ορισμένους τομείς.
• Παροχή σχολίων σχετικά με τα αποτελέσματα των ολοκληρωμένων ενεργειών.
• Προσθήκη ευχάριστων στοιχείων που δεν θα αποσπάσουν την κύρια εμπειρία της αλληλεπίδρασης με το προϊόν.
• Ενίσχυση της θέσης της μάρκας με την αποκλειστικότητα της διεπαφής ·
• Η ικανοποίηση των προσδοκιών των χρηστών (οι μικρο-αλληλεπιδράσεις είναι ο κανόνας για πολλούς ιστότοπους και εφαρμογές). Σίγουρα, θα αναμένονται επίσης στο προϊόν σας.

1. Διαμόρφωση συνήθειας μεταξύ των χρηστών.

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

• Σήμα (μικρο-αλληλεπίδραση) - μια σκανδάλη που ξεκινά μια ενέργεια.
• Οι επαναλαμβανόμενες ενέργειες είναι μια οικεία διαδικασία για τον χρήστη.
• Η ανταμοιβή είναι το αποτέλεσμα της ολοκλήρωσης των ενεργειών.

Για παράδειγμα, ένα κόκκινο ορθογώνιο και ένα λευκό εικονίδιο (σκανδάλη) στο Facebook υποδηλώνουν ένα νέο μήνυμα. Ο χρήστης εκτελεί μια συνηθισμένη ενέργεια κάνοντας κλικ στο εικονίδιο για να συνομιλήσει με τον φίλο του (ανταμοιβή). Μετά από λίγο, ο χρήστης, βλέποντας τέτοια πράγματα, εκτελεί αυτόματα τις ενέργειες που απαιτούνται από αυτά. Όσο υψηλότερη είναι η ανταμοιβή (κίνητρο), τόσο ισχυρότερη γίνεται η συνήθεια.

2. Σχεδιασμός για συχνή χρήση.

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

3. Δημιουργήστε ένα κοινό οπτικό στοιχείο για τις ενεργοποιήσεις με τη διεπαφή προϊόντος.

Προσπαθήστε να δημιουργήσετε στοιχεία μικρο-αλληλεπίδρασης που είναι παρόμοια στο σχεδιασμό με μια κοινή διεπαφή. Για παράδειγμα, το ίδιο χρώμα, χρησιμοποιώντας τα ίδια κινούμενα σχέδια, σχήματα και ούτω καθεξής. Η συνέπεια του σχεδιασμού αυξάνει την ευαισθητοποίηση και ενισχύει την ταυτότητα της επωνυμίας. Για παράδειγμα, οι New York Times χρησιμοποιούν το δικό τους λογότυπο ως κινούμενα σχέδια εκκίνησης. Υπογραφή αναγνωρίσιμο στυλ που δεν μπορεί να συγχέεται με οτιδήποτε άλλο.

4. Χρησιμοποιήστε κινούμενες εικόνες.

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

5. Αποφύγετε τις ανεπιθύμητες αλληλεπιδράσεις.

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

• Φόρτωση οθονών.
• Κινούμενες εικόνες που ενεργοποιούνται στο ποντίκι.

Η θετική απόκριση του χρήστη στην κίνηση βασικών στοιχείων είναι ένα σήμα για την προσθήκη περισσότερων.

6. Χρησιμοποιήστε το χιούμορ στα γραπτά σας.

Οι μικρο-αλληλεπιδράσεις, όπως κουμπιά παρότρυνσης για δράση ή άλλες διαδραστικές διαφημίσεις (404 σελίδες σφάλματος, για παράδειγμα) θα είναι πιο αποτελεσματικές με ένα χιούμορ. Μπορείτε ακόμη και να χρησιμοποιήσετε ανθρώπινη ηχογράφηση σε ορισμένα μέρη.

Καρτέλλες

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

4. Η φόρτωση κινούμενων εικόνων φωτίζει την αναμονή.

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

Αντί να χρησιμοποιείτε παραδοσιακές γραμμές φόρτωσης που δείχνουν την πρόοδο φόρτωσης ως ποσοστά, δοκιμάστε να προσφέρετε στο κοινό σας κάτι πιο νόστιμο και δημιουργικό. Φυσικά, ο καλύτερος τρόπος για να ξεφύγετε από την κατάσταση είναι η βελτιστοποίηση του ιστότοπου. Η χρήση μιας γραμμής εκκίνησης είναι μια εξαιρετική επιλογή. Εάν πραγματικά δεν μπορείτε να το κάνετε χωρίς αυτό, τότε είναι καλύτερο να διακοσμήσετε τη διαδικασία ρουτίνας με κινούμενα σχέδια.

Τυπογραφία

Υψηλότερες αναλύσεις συσκευών, γρηγορότερες συνδέσεις στο Διαδίκτυο και πρόσβαση σε νέες βιβλιοθήκες γραμματοσειρών Ιστού ( Γραμματοσειρές Google , Το Adobe Typekit, κ.λπ.) κάνουν την εποχή μας τη χρυσή εποχή της τυπογραφίας.

Οφέλη της ποιοτικής τυπογραφίας

• Οι υψηλότερες αναλύσεις οθόνης παρέχουν περισσότερο χώρο για ενδιαφέρουσες τυπογραφικές ιδέες.
• Η ικανότητα να τονίζεται η μοναδικότητα της μάρκας, να την καθιστά αναγνωρίσιμη λόγω της γραμματοσειράς που χρησιμοποιείται.
• Ενίσχυση της επιρροής του περιεχομένου κειμένου ·
• Ένα εργαλείο για τη δημιουργία μιας οπτικής ιεραρχίας στοιχείων, αυτό είναι ιδιαίτερα σημαντικό για την επισήμανση εργαλείων CTA (παρότρυνση για δράση).

Αρχές χρήσης

1. Σαφήνεια πάνω απ 'όλα.

Ποτέ μην θυσιάζετε την αναγνωσιμότητα για μια "καλύτερη" γραμματοσειρά - τα τυπογραφικά στυλ δεν λειτουργούν αν δεν μπορείτε να διαβάσετε αυτό που γράφετε.

2. Απλή αλλά εντυπωσιακή γραμματοσειρά.

Η απλή τυπογραφία είναι ευκολότερη στην ανάγνωση και γρηγορότερη φόρτωση, για να μην αναφέρουμε απαραίτητα για μινιμαλιστικά στυλ. Σημειώστε τα εξής:

Αύξηση του μεγέθους της γραμματοσειράς.

Αντίθεση του χρώματος της γραμματοσειράς και του περιβάλλοντος φόντου.

Χρησιμοποιήστε έντονους τύπους σε βασικές περιοχές.

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

3. Σύνθετες και απλές γραμματοσειρές: Serif έναντι Sans Serif.

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

Δημοφιλείς γραμματοσειρές sans serif:

1. Proxima Nova
2. Φουτούρα
3. Avenir
4. Άνοιγμα χωρίς
5. Helvetica neue
6. Δημοφιλείς γραμματοσειρές serif:
7. Κάσλον
8. Γκαράμοντ
9. Κείμενο φορτίου
10. Τσιράκι
11. FF Meta Serif

5. Επικάλυψη χειρόγραφων γραμματοσειρών.

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

6. Κείμενο που υπερβαίνει τον καθορισμένο χώρο.

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

7. Γραμματοσειρές από προεπιλογή.

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

Φωτεινα χρωματα

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

Οφέλη από τη χρήση ζωντανών χρωμάτων

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

1. Duotone.

• Η χρήση μιας δίχρωμης κλίμακας είναι μια τάση από μόνη της και θα συνεχίσει να είναι δημοφιλής μαζί με την εισαγωγή φωτεινών χρωμάτων.
• Είναι σαφές ότι ένας διτονός είναι ένας συνδυασμός δύο χρωμάτων. Αυτά μπορεί να είναι αποχρώσεις του ίδιου χρώματος ή τελείως αντίθετων τόνων.
• Στο σχεδιασμό ιστοσελίδων, το duotone χρησιμοποιείται συχνά για την καλύτερη αναπαράσταση εικόνων και φωτογραφιών. Φαίνεται συναρπαστικό και μοντέρνο.
• Λάβετε υπόψη τα ακόλουθα σημεία:
• Χρησιμοποιήστε απλές φωτογραφίες με έντονο κοινό θέμα. Οι εικόνες με πλούσια στοιχεία (για παράδειγμα, τοπία) μπορεί να είναι δύσκολο να προβληθούν, ειδικά σε οθόνες για κινητά.
• Η αντίθεση του διτονικού διευκολύνει τη διάκριση των λεπτομερειών της φωτογραφίας.
• Διαχωρίστε τη φωτογραφία από την υπόλοιπη περιοχή προβολής με πολύχρωμα περιγράμματα ή κύλιση πλήρους οθόνης.
• Χρησιμοποιήστε ευκρινείς εικόνες με ευδιάκριτα όρια αντικειμένων.

Ομοίως, ο διτονός χρησιμοποιείται συχνά για επικάλυψη μιας φωτογραφίας, όπως φαίνεται στο παρακάτω παράδειγμα.

2. Επικάλυψη.

Μια άλλη ενδιαφέρουσα τάση στη χρήση φωτεινών χρωμάτων είναι η επικάλυψή τους σε φωτογραφίες.

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

3. Θεαματικές κλίσεις.

Η ανάμειξη χρωμάτων με σταδιακό ξεθώριασμα είναι μια δημοφιλής επιλογή πολλών σύγχρονων σχεδιαστών. Δεν είναι απαραίτητο να λάβετε περισσότερα από 2 ή 3 χρώματα για ανάμιξη - αυτό δεν είναι απαραίτητο.

4. Επισημάνετε τις λέξεις-κλειδιά και τα κουμπιά.

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

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

5. Αλλαγή της κατάστασης ενός στοιχείου στο hover.

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

6. Χρησιμοποιήστε το σωστό χρώμα για να προκαλέσετε το επιθυμητό συναίσθημα.

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

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

Μεγάλη κύλιση

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

Χαρακτηριστικά της μεγάλης κύλισης

• Ιδανικό για φορητές συσκευές. Οι μικρότερες οθόνες οδηγούν στην ανάγκη για συχνή κύλιση και η ίδια η μορφή λειτουργεί καλά με τον έλεγχο αφής.
• Η βολική αφηγηματική μορφή, στην οποία το περιεχόμενο βυθίζεται με αυτόν τον τρόπο, μπορεί να ενδιαφέρει τους επισκέπτες.
• Απλοποίηση της πλοήγησης ·
• Η άπειρη κύλιση θα προσθέσει ένα στοιχείο έκπληξης στην εμπειρία του χρήστη.

1. Χρησιμοποιήστε οπτικές ενδείξεις.

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

2. Οθόνες ως σελίδες.

Η κύλιση μπορεί να είναι όχι μόνο ομαλή, αλλά και σελίδα προς σελίδα. Κύλιση - και ολόκληρη η οθόνη έχει αλλάξει. Είναι μοντέρνο και όμορφο.

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

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

3. Κολλώδες μενού πλοήγησης.

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

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

4. Τα κινούμενα σχέδια ενεργοποιούνται με κύλιση.

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

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

5. Αντιμετωπίστε τα μειονεκτήματα της σελίδας SEO με μεγάλη κύλιση.

Οι άπειροι ιστότοποι κύλισης έχουν τους δικούς τους περιορισμούς SEO. Αλλά μπορούν να μετριαστούν. Ο Neil Patel παρέχει χρήσιμες συμβουλές για αυτό το θέμα.

Γραφικά HD

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

Οφέλη από τη χρήση ποιοτικών γραφικών

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

1. Συνδυάστε φωτογραφίες και προσαρμοσμένες φωτογραφίες.

Σίγουρα, οι μοναδικές φωτογραφίες είναι καλύτερες, αλλά δεν μπορούν κάθε εταιρεία να προσλάβει έναν φωτογράφο. Ως συμβιβασμός, μπορείτε να συνδυάσετε μετοχές και πρωτότυπες φωτογραφίες για να τις κάνετε μοναδικές. Βρείτε στοκ φωτογραφίες από το θέμα που θέλετε, προσθέστε το λογότυπό σας, αλλάξτε τα χρώματα εάν χρειαστεί και τελειώσατε! Για υλικό επωνυμίας, επισκεφθείτε Unsplash, Pixabay ή Pexels.

2. Προετοιμάστε ποιοτικές εικόνες.

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

Όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης, μια εικόνα υψηλής αντίθεσης εφιστά εύκολα την προσοχή σε περιεχόμενο κειμένου που επικαλύπτεται πάνω του. Επειδή οι περισσότερες συσκευές δεν υποστηρίζουν την τυπική αναλογία διαστάσεων 1:15 για κάμερες, θα πρέπει να περικόψετε την εικόνα εκ των προτέρων για διαφορετικές αναλύσεις οθόνης. Η εικόνα πρέπει να φαίνεται εξίσου καθαρή και ευανάγνωστη σε οποιαδήποτε συσκευή.

3. SVG ή bitmap γραφικά;

Οι μορφές γραφικών bitmap (.jpg, .gif, .png) έχουν μια αρχική ανάλυση εικονοστοιχείων, ενώ τα γραφικά γραφικά μπορούν να μεγεθυνθούν ή να μειωθούν ώστε να ταιριάζουν στην οθόνη χωρίς απώλεια ποιότητας.

Χρησιμοποιήστε το SVG για μοναδικά γραφικά και για φωτογραφίες, οι μορφές bitmap με σαφώς περιορισμένο αριθμό pixel σε ανάλυση είναι οι καλύτερες. Είναι σημαντικό να αγοράσετε φωτογραφικό εξοπλισμό με καλή ανάλυση για τέτοιους σκοπούς.

4. Ιστορικό βίντεο σε κεφαλίδες.

Με την αύξηση της μέσης ταχύτητας στο Διαδίκτυο, τα υπόβαθρα βίντεο κερδίζουν δημοτικότητα. Η χρήση τους μπορεί να επεκτείνει το χρόνο που αφιερώνουν οι χρήστες στον ιστότοπό σας. Δώστε προσοχή στα ακόλουθα σημεία:

Τα κλιπ βίντεο 10-30 δευτερολέπτων επιτυγχάνουν μια καλή ισορροπία μεταξύ ελκυστικού περιεχομένου και γρήγορης ταχύτητας φόρτωσης σελίδας.

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

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

Εικόνες

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

Οφέλη από τη χρήση εικονογραφήσεων

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

1. Ταιριάξτε την εικόνα με το συνολικό θέμα της διάταξης.

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

2. Προσθέστε δημιουργικά εφέ.

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

Κινούμενα σχέδια - πάντοτε συμβαδίζουν με εικόνες.

Επίπεδα - Λόγω της ευελιξίας τους, οι εικόνες σας επιτρέπουν να απλοποιήσετε τα εφέ εισάγοντας επίπεδα για να προσθέσετε βάθος σε μια εικόνα.

3. Χρησιμοποιήστε εικόνες σε οδηγίες και εγχειρίδια.

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

4. Χρησιμοποιήστε επίπεδη σχεδίαση σε εικόνες.

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

ευρήματα

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

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

Η φόρμα ακολουθεί τη συνάρτηση

Η λειτουργικότητα του ιστότοπου είναι πιο σημαντική από την ομορφιά και την οπτική γοητεία του. Στον τομέα της αρχιτεκτονικής, υπάρχει η άποψη: "Η φόρμα ακολουθεί τη λειτουργία." Η αρχιτεκτονική του ιστότοπου ακολουθεί επίσης αυτήν την αρχή. Αυτή η γνώμη έχει μια απλή εξήγηση: η μορφή (εμφάνιση) πρέπει να εξυπηρετεί τη λειτουργία (σκοπός) του αντικειμένου. Ο σχεδιασμός πρέπει να υπάρχει για τη συνάρτηση, και μόνο τότε για τη φόρμα, και όχι το αντίστροφο.

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

Ένας όμορφος ιστότοπος μπορεί να αποσπάσει την προσοχή του χρήστη

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

Οι ιστότοποι με χαμηλή λειτουργικότητα έχουν υψηλό ποσοστό εγκατάλειψης

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

Ένας όμορφος ιστότοπος φορτώνει συχνά αργά

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

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

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

Χρυσή τομή

Είναι προφανές ότι ομορφιά και λειτουργικότητα του ιστότοπου μπορεί να υπάρχει σε τέλεια αρμονία. Χιλιάδες ιστότοποι είναι ένα παράδειγμα αυτού. Για να βρείτε το ίδιο χρυσό μέσο, \u200b\u200bθυμηθείτε τους βασικούς κανόνες:

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

Παραγωγή

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

• ΜΕΤΑΦΟΡΑ

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

Η επίπεδη σχεδίαση θα γίνει πιο υφή, οι «κινηματογραφικές εμπειρίες» θα γίνουν πιο συχνές και η χρήση βιβλιοθηκών JavaScript θα επιτρέψει περισσότερο πειραματισμό. Είμαστε σίγουροι ότι η αυξανόμενη δημοτικότητα του WebGL και της εικονικής πραγματικότητας θα μετατρέψει τους ιστότοπους που γνωρίζουμε σε κάτι νέο με ενδιαφέρουσα αλληλεπίδραση.

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

1. WebGL (Βιβλιοθήκη γραφικών Ιστού)

Μεταξύ των τελευταίων εξελίξεων είναι η αξιοσημείωτη τεχνολογία WebGL (Web Graphics Library). Χρησιμοποιείται από πολλούς καταπληκτικούς ιστότοπους που εμφανίστηκαν πρόσφατα.

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

1.1 Διαδραστική εφαρμογή 3D WebGL

Ζήστε την περιέργεια (bit από τη NASA)

Το WebGL ήταν ένα από τα κεντρικά θέματα του συνεδρίου SIGGRAPH 2015. Μπορείτε να παρακολουθήσετε μια παρουσίαση σε 3D γραφικά και WebGL σε αυτό το κανάλι YouTube.

Σε αυτήν την ώρα και μισό βίντεο, θα μάθετε για την διαδικτυακή εφαρμογή της NASA "Experience Curiosity", η δημιουργία της οποίας σηματοδότησε την τρίτη επέτειο της προσγείωσης του Mars rover "Curiosity" στον Άρη. Η εφαρμογή επιτρέπει στους χρήστες να "οδηγούν" ένα 3D NASA rover στην επιφάνεια του Άρη και να "ελέγχουν" έναν βραχίονα χειριστή.

Για να δημιουργήσετε αυτόν τον πόρο, χρησιμοποιήθηκαν τα Blend4Web (ένα πλαίσιο για τη δημιουργία τρισδιάστατων εφαρμογών που βασίζονται σε προγράμματα περιήγησης) και το Blender (ένα πακέτο για μοντελοποίηση 3D και κινούμενα σχέδια).

Ο ιστότοπος Beloola χρησιμοποιεί το three.js (βιβλιοθήκη JavaScript)

Έργο "The Boat" από το SBS TV (Αυστραλία)

Η αυστραλιανή τηλεόραση SSB TV έχει ξανασχεδιάσει την ιστορία του συγγραφέα Nam Le “The Boat” σχετικά με τη διαφυγή του Βιετνάμ και τη μετέτρεψε σε διαδραστική ιστορία βίντεο χρησιμοποιώντας το WebGL. Η εφαρμογή αποτελείται από διάφορα μέρη με εξαιρετική ζωτικότητα και ζωγραφισμένες στο χέρι εικόνες. Χρησιμοποιεί επίσης το three.js όπως στο προηγούμενο παράδειγμα.

Επειδή Recollection

Από τεχνική άποψη, είναι ένα συνεχές 2D animation που τρέχει σε ψευδο 3D χώρο. Φαίνεται πολύ εντυπωσιακό!

2. VR (εικονική πραγματικότητα)

Η εικονική πραγματικότητα (VR) είναι μια σχετική τεχνολογία που έχει τη δυνατότητα να συγκλονίσει τον κόσμο των gadget το 2016. Ίσως τα πράγματα να γίνουν πολύ πιο ενδιαφέροντα πολύ σύντομα.

Ιστοσελίδα Timeshift165

Ετικέτες: Προσθήκη ετικετών

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

Τάσεις σχεδιασμού ιστοσελίδων 2016

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

Για παράδειγμα, ως διευθυντής σχεδιασμού προϊόντων στο Facebook Τζούλι Ζούοπου πρόσφατα έκανε μια πρόβλεψη των τάσεων στο σχεδιασμό ιστοσελίδων για έως και 10 χρόνια ακόμη. Θα ήταν πολύ τολμηρό από την πλευρά μας να κοιτάξουμε τόσο μακριά, αλλά είναι πολύ πιθανό να προβλεφθεί η εμφάνιση ορισμένων τάσεων που αναμφίβολα θα είναι δημοφιλείς το επόμενο έτος. Ας ρίξουμε μια ματιά σε μερικές από τις πιο όμορφες τάσεις σχεδιασμού ιστοσελίδων που θα μπορούσαμε ενδεχομένως να δούμε το 2016.

Φωτεινα χρωματα

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

InJob

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

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

Σχεδιασμός υλικών

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

Μέσα Barni

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

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

Έμφαση στις γραμματοσειρές

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

Tennent καφέ

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

Μεγάλο ποικιλία δωρεάν γραμματοσειρώνΕιδικά το Google Fonts, καθιστά τα γράμματα ένα εξαιρετικό στοιχείο σχεδίασης που ανοίγει πολλές δυνατότητες για τους σχεδιαστές ιστοσελίδων. Επιπλέον, η ευρεία επιλογή δωρεάν ή φθηνών (αλλά δροσερών) γραμματοσειρών καθιστά τα σχέδια συγγραφής εύκολη, ακόμη και για περιστασιακούς χρήστες. Μαζί με την προαναφερθείσα τάση της χρήσης ζωντανών χρωμάτων, τα μεγάλα γράμματα μπορούν επίσης να δημιουργήσουν ένα εντυπωσιακό αποτέλεσμα στα σχέδια ιστότοπων. Αλλά αξίζει να ληφθεί υπόψη ότι η χρήση γραμμάτων απαιτεί βαθύτερη γνώση των γραμματοσειρών, των μεγεθών τους, των συνδυασμών τους και του συνδυασμού με τα γύρω στοιχεία σχεδίασης.

Σχέδια μίας σελίδας

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

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

Φυσικά, οι σελίδες μιας σελίδας δεν είναι κατάλληλες για κάθε ιστότοπο. Με αυτόν τον σχεδιασμό, σίγουρα θα πρέπει να σκεφτείτε τις δυνατότητες πλοήγησης (καρφιτσώστε το μενού στην κορυφή της σελίδας, προσθέστε ένα κουμπί "κορυφή" για να επιτρέψετε στους χρήστες να επιστρέψουν εύκολα στην κορυφή της σελίδας). Αλλά αυτή η τάση θα παραμείνει σίγουρα στο προσκήνιο τον επόμενο χρόνο.

Μεγάλη κύλιση

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

Κάιο Τσε

Είναι δύσκολο να πούμε αν η τεχνική κύλισης επηρέασε την εμφάνιση της θεωρίας "πάνω από την πτυχή γραμμή" ή το αντίστροφο. Τέλος πάντων, η κύλιση δεν είναι τόσο σημαντική στον σημερινό ιστό. Πολλοί κάτοχοι ιστότοπων εξακολουθούν να τηρούν την ιδέα τοποθέτησης των πιο σημαντικών στοιχείων, όπως κουμπιά παρότρυνσης για δράση, στο επάνω μέρος της οθόνης. Στην πραγματικότητα, εξαρτάται από διάφορους παράγοντες. Η προσέλκυση επισκεπτών και η μετακίνησή τους στο σημείο αγοράς είναι πολύ πιο δύσκολη από την απλή τοποθέτηση ενός κουμπιού Αγορά τώρα στα πρώτα 600 κάθετα pixel της οθόνης. Αλλά είναι πιο ευεργετικό για τον ιστότοπό σας και τη χρηστικότητα του.

Αποκριτική πλοήγηση

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

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

Ισοπαλία καλύτερα

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

Εικόνες φόντου και βίντεο

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

Πρόσκε

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

Διατάξεις: σχεδιασμός καρτών, διαχωρισμένες διατάξεις και κεντρικό περιεχόμενο

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

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

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

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

Τεχνικό: Πρωτότυπο στο πρόγραμμα περιήγησης

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

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