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

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

1. Το βίντεο είναι ένα λειτουργικό στοιχείο

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

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

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

2. Κινηματογράφοι αντί για βίντεο

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

Προσεκτικά! Τα σινεγκράμ κολλάνε τρομερά.

3. Γραφικά γραμματοσειράς

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

4. Οι εικόνες είναι το κύριο διακοσμητικό στοιχείο

Γιατί χρειάζεστε εικόνες, βίντεο και ανατροπές γραμματοσειράς, εάν μπορείτε να προσθέσετε "wow" στα εικονίδια που θα υπάρχουν ήδη στον ιστότοπο; Σοβαρά, προσθέστε κάποιο προσαρμοσμένο κινούμενο σχέδιο και καλέστε το μια μέρα. Θα είσαι η πιο trendy.

5. Κολλώδη infographics

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

Το πρόβλημα κάθε χρόνο χειροτερεύει. Ως εκ τούτου, το καθήκον του σχεδιαστή είναι να γαντζώσει τον χρήστη και να τον αναγκάσει να αλληλεπιδράσει με το περιεχόμενο, ακόμα κι αν πρόκειται για βαρετά στατιστικά στοιχεία. Ειδικά (!) αν πρόκειται για βαρετά στατιστικά.

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

6. Συνδυασμένη πλοήγηση

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

7. Αποφυγή του μενού χάμπουργκερ

Στο 99,9% των προβλέψεων σχεδιασμού ιστοσελίδων για το 2015 και το 2016, οι συγγραφείς υπόσχονται ότι φέτος οι σχεδιαστές σίγουρα θα εγκαταλείψουν το μενού των χάμπουργκερ. Έτσι ακριβώς. Λοιπόν, ας υποστηρίξουμε την παράδοση και ας πούμε επίσης: το 2017, το μενού χάμπουργκερ δεν θα είναι στην τάση, μην το κάνετε αυτό, ουφ!

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

Ας είμαστε ρεαλιστές: είναι απίθανο να μπορέσετε να εγκαταλείψετε εντελώς το μενού χάμπουργκερ. Αλλά προτού το κολλήσετε, αναζητήστε μια πιθανή εναλλακτική για κάθε έργο.

studio-spoon.co.jp

8. Πλαίσιο γύρω από την τοποθεσία

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

teletype.online

9. Περισσότερα emoji

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

10. Σχεδιασμός υλικού

Ναι, είναι ακόμα μαζί μας.

11. Περισσότερα Mobile First

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

12. Περισσότερες μικροαλληλεπιδράσεις

Οι ιστότοποι θα απορροφήσουν περισσότερες δυνατότητες από εφαρμογές για κινητές συσκευές. Το 2017 θα υπάρξουν εκπληκτικές μικροαλληλεπιδράσεις που θα κάνουν τα δάχτυλά σας να τρέμουν. Σαν μια καρδιά στο Twitter - λοιπόν, είναι έργο τέχνης! Θέλω να τον πιέζω για πάντα. Θα υπάρχουν περισσότερα από αυτά σε έργα Mobile First και κλασικά έργα.

13. Τα CTA είναι ακόμα πιο παρεμβατικά

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

strv.com

14. Νοσταλγία για τα 80s

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

retrominder.tv

15. Αποφύγετε στοκ φωτογραφίες

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

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

16. Πράσινοι

Τα παιδιά από την Pantone πιστεύουν ότι το χρώμα του 2017 είναι αυτό το μικρό πράσινο Greenery. Ας το ακούσουμε και ας το προσθέσουμε στη λίστα μας.

17. Μια νέα προσέγγιση στην κατασκευή πρωτοτύπων

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

Μια στατική διάταξη μόλις και μετά βίας μπορεί να αντεπεξέλθει σε αυτήν την εργασία, επομένως το 2017 πρέπει να βελτιώσετε τις δεξιότητές σας παρουσίασης. Έτσι ώστε αμέσως, πριν από τη διάταξη, ο πελάτης να δει όλα τα επινοημένα στασίδια και να μην τα φανταστεί στο μυαλό του. Διαφορετικά, θα φανταστεί κάτι λάθος για τον εαυτό του, δημιουργώντας προσδοκίες που οι προγραμματιστές δεν θα μπορέσουν να δικαιολογήσουν.
Τώρα δεν είναι λογικό για έναν σχεδιαστή να σχεδιάζει και να δείχνει απλώς μια εικόνα. Πρέπει να είστε σε θέση να χειριστείτε είτε ένα από τα εργαλεία δημιουργίας πρωτοτύπων για να δημιουργήσετε ένα διαδραστικό πρότυπο είτε να βελτιώσετε τις δεξιότητές σας στο κινούμενο σχέδιο.
Εδώ είναι το οπλοστάσιό σας για την επόμενη χρονιά, συνάδελφοι. Αλλά μην τσακώνεστε με έναν πελάτη που θέλει βιντεοτηλέφωνο. Μην σπρώχνετε στοιχεία pixel και emoji όπου χρειάζεστε καθαρό, μινιμαλιστικό ηλεκτρονικό εμπόριο. Και μην βομβαρδίζετε απρόθυμους πελάτες στο Skype με συνδέσμους σε αυτό το άρθρο. Χρησιμοποιήστε τις τάσεις με σύνεση - ή μην τις χρησιμοποιείτε καθόλου. Τέλος πάντων, σε τρία χρόνια θα ενημερωθούν πλήρως :)

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

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

1. Μη τυποποιημένο «αφηρημένο» σχέδιο

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

Η μη τυπική διάταξη στοιχείων παρέχει πιο ενδιαφέρουσες δυνατότητες: σας επιτρέπει να χρησιμοποιήσετε ολόκληρο τον χώρο της σελίδας, να προσθέσετε στρωματοποίηση αντικειμένων και μια αίσθηση βάθους στη διάταξη. Θα μπορείτε να εφαρμόσετε ένα σχέδιο που θα εντυπωσιάσει τους χρήστες ακόμη και χωρίς πολύχρωμα βίντεο πλήρους οθόνηςή κινούμενα σχέδια. Με εκατοντάδες χιλιάδες κλασικές διατάξεις στον Ιστό, τα αφηρημένα, μοναδικά σχέδια θα ξεχωρίζουν σχεδόν πάντα και θα προσελκύουν την προσοχή των επισκεπτών του ιστότοπου (όπως ο παράγοντας WOW). Και πρέπει να το χρησιμοποιήσετε!

2. Νέες επιλογές πλοήγησης

Για ένα μη τυποποιημένο έργο - ένα προηγμένο μενού. Σήμερα δεν χρειάζεται να τοποθετήσετε μια οριζόντια στην κεφαλίδα. Λόγω της αυξανόμενης δημοτικότητας των προσαρμοστικών διατάξεων, πολλοί χρήστες έχουν ήδη συνηθίσει το εικονίδιο του μενού Hamburger (αποτελείται από τρεις οριζόντιες λωρίδες), το οποίο εμφανίζεται όλο και περισσότερο στο κανονικές εκδόσειςτοποθεσίες. Η γραμμή μεταξύ της σχεδίασης κινητών και επιτραπέζιων υπολογιστών σταδιακά θολώνει. Φέτος θα δούμε πολλά πειράματα με την τοποθέτηση και το σχήμα των μενού - αυτό θα μπορούσε να γίνει μια από τις κύριες τάσεις σχεδιασμού ιστοσελίδων του 2017.

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

3. Κάρτες σε σχέδιο

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

Αυτή η προσέγγιση χρησιμοποιείται από πολλά δημοφιλή έργα στο δίκτυο: Facebook, Pinterest, Netflix. Η τελευταία επιλογή είναι γενικά ένα εξαιρετικό παράδειγμα επιτυχημένης εφαρμογής καρτών σε ένα σχέδιο που συνδυάζει μινιμαλισμό, δυνατότητες πλοήγησης και αποτελεσματικότητα.

4. Διαχωρίστε τις διατάξεις με την οθόνη χωρισμένη σε 2 μέρη

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

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

5. Μεγάλη και πρωτότυπη τυπογραφία

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

Ταυτόχρονα, πολλοί ιστότοποι απαλλάσσονται από τυπικές γραμματοσειρές συστήματος, γεγονός που τους επιτρέπει να διαφοροποιούν σημαντικά την εμφάνισή τους. Με την άνοδο των δωρεάν υπηρεσιών πρωτότυπων γραμματοσειρών ιστού ( Γραμματοσειρές Google, Typekit), η δημοτικότητά τους θα αυξηθεί ακόμη περισσότερο. Φαίνεται ότι το 2017 θα δούμε και πειράματα στον τομέα της τυπογραφίας ιστοσελίδων. Το κύριο πράγμα σε αυτό το θέμα είναι να μην το παρακάνετε - θυμηθείτε ότι το κείμενο πρέπει να είναι καλά ευανάγνωστο. Παρεμπιπτόντως, εάν εργάζεστε με το WordPress, τότε το άρθρο Πώς να συνδέσετε μια γραμματοσειρά στο WordPress (συμπεριλαμβανομένων των γραμματοσειρών Google) μπορεί να σας φανεί χρήσιμο.

6. Διαβαθμίσεις και έντονα χρώματα

Μια άλλη τάση σχεδιασμού ιστοσελίδων για το 2017 είναι η χρήση φωτεινών παλετών χρωμάτων για ντεγκραντέ (και όχι μόνο). Έναρξη εποχής επίπεδη σχεδίασηέφερε στο διαδίκτυο ενδιαφέροντα χαρακτηριστικά, αλλά πρέπει να δουλέψετε σε αυτό το στυλ πολύ προσεκτικά, γιατί μπορεί να συμβάλει στην αποπροσωποποίηση του ιστότοπου. Για να λύσουν το πρόβλημα, ορισμένοι ειδικοί άρχισαν να πειραματίζονται με φωτεινά χρώματα και λύσεις ντεγκραντέ. Φέτος, η τάση θα συνεχίσει να αναπτύσσεται και όχι μόνο στον Ιστό (σίγουρα όλοι έχουν ήδη προσέξει την πρόσφατη ενημέρωση του Instagram).

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

7. Κινούμενα σχέδια και μικροαλληλεπιδράσεις

Το animation σε έναν ιστότοπο δεν είναι καινούργιο, αλλά οι σχεδιαστές μαθαίνουν κάθε χρόνο να το εφαρμόζουν πιο όμορφα και αποτελεσματικά. Τα διακριτικά οπτικά εφέ για εικόνες/αντικείμενα/περιεχόμενο μπορούν όχι μόνο να ζωντανέψουν το έργο σας, αλλά και να προσθέσουν πρόσθετο εργαλείο ανατροφοδότησημε τον χρήστη. Στις σύγχρονες διεπαφές UI/UX, διάφορες μικρο-αλληλεπιδράσεις μετατρέπουν τις διαδικασίες ρουτίνας σε πιο διασκεδαστικούς τρόπους απόκτησης πληροφοριών + επιτρέπουν στον χρήστη να δει και να κατανοήσει πώς λειτουργεί αυτό ή εκείνο το στοιχείο σελίδας (μενού, πλοήγηση, κουμπιά).

8. Φαινόμενο παράλλαξης

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

9. Σχεδόν εικονική πραγματικότητα

Το VR είναι ένα από τα πιο σχετικά θέματα σήμερα, παρά το γεγονός ότι η πραγματική κατάσταση σε αυτόν τον τομέα είναι λιγότερο αισιόδοξη από πολλές προβλέψεις. Φυσικά, αυτό το χαρακτηριστικό δεν θα μπορούσε να μην επηρεάσει τους σχεδιαστές. Σε ορισμένες διατάξεις μπορείτε να βρείτε διάφορες τεχνικές που θα δημιουργούσαν ένα «εφέ παρουσίας» για τον χρήστη: βίντεο και πανοράματα 360 μοιρών, ένθετα βίντεο «σαν ταινία», παιχνίδια κ.λπ.

10. Απτικός, φυσικός σχεδιασμός

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

11. Άλλες τάσεις σχεδιασμού ιστοσελίδων 2017

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

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

Γεωμετρικά σχήματα

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

Μοναδικές εικονογραφήσεις

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

Σύνολο

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

Τι νέο φέρνει το 2017 στον Ιστό; Ποιες είναι οι βασικές κατευθύνσεις και τάσεις στο web design που πρέπει να περιμένουμε; Τώρα θα μάθουμε τα πάντα – με τη μορφή μιας συνοπτικής ανασκόπησης των πιο εντυπωσιακών τάσεων, χρησιμοποιώντας παραδείγματα ιστότοπων TRENDY.

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

Διαβάστε επίσης: 8 τάσεις ιστού για το 2019: μοντέρνες διατάξεις

Όσον αφορά την αισθητική, το flat στυλ κυριάρχησε στο WEB για 3 συνεχόμενα χρόνια. Στη συνέχεια, η Google παρουσίασε το υλικό σχεδιασμού, το οποίο μας έβγαλε λίγο από την οπτική αφαίρεση. Το 2017, ο σχεδιασμός ιστοσελίδων θα κάνει ένα ακόμη βήμα πίσω προς τον ρεαλισμό. Είτε πρόκειται για σχήματα, επιλογή χρώματος είτε λειτουργικότητα - το 2017 θα είναι η χρονιά των υβριδίων στην οποία διασταυρώνονται οι πραγματικότητες του φυσικού κόσμου και της τεχνολογίας. Ως αποτέλεσμα, μπορείτε να περιμένετε μια καλύτερη εμπειρία περιήγησης στο web.

Ακολουθούν εννέα τάσεις σχεδιασμού ιστοσελίδων που μπορούν να καλύψουν το χάσμα.

1. Αναδυόμενη πλοήγηση

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

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

Πλεονεκτήματα:

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

Διαβάστε επίσης: 20 καλύτερα παραδείγματασχέδιο αρχική σελίδαιστοσελίδα

Βέλτιστες πρακτικές:

Έγχρωμη σχεδίαση για να ταιριάζει με τις σελίδες του ιστότοπου.Το μέγιστο αποτέλεσμα κατά την απλοποίηση μιας ιστοσελίδας με αυτόν τον τρόπο επιτυγχάνεται με ένα μονοχρωματικό φόντο ή μια μονόχρωμη δομή μενού slide-out.
Μην αποσπάτε την προσοχή του χρήστη στην πλοήγηση - είναι καλύτερα να αφήσετε τα χαρακτηριστικά και τις διακοσμήσεις για τις ίδιες τις σελίδες. Φυσικά, ένας όμορφος μοντέρνος σχεδιασμός και ένα κομψό μενού δεν θα βλάψουν:

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

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

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

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

2. Σε αντίθεση με τα παραδείγματα πλοήγησης - εναλλακτικές

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

Πλεονεκτήματα της μη τυπικής πλοήγησης:

• Μοναδικός σχεδιασμός
• Οι καινοτομίες προσελκύουν
• Βελτιωμένη εμπειρία χρήστη (UX)
• Για σχεδιαστές - νέες δυνατότητες για σχεδιασμό ιστοσελίδων

Βέλτιστες πρακτικές:

Διαβάστε επίσης: 11 δημιουργικές ιστοσελίδες εγχώριων στούντιο σχεδιασμού ιστοσελίδων

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

Το μοναδικό μενού του Hillsiderancho.com συνδυάζει πλοήγηση πάνω, αριστερά, δεξιά και κύλιση

Δεν υπάρχει καθόλου μενού πλοήγησης.Ο σύγχρονος χρήστης έρχεται αντιμέτωπος με πολύ περιεχόμενο και δεν χρειάζεται να του πει τι να κάνει στη συνέχεια. Πάπυρος! Η οργανική φύση αυτής της συμπεριφοράς έχει ήδη επισημανθεί σε προηγούμενες τάσεις του ιστού (οριζόντια, άπειρη κύλιση, έλεγχος πληκτρολογίου, χειρονομίες...). Ορισμένοι σχεδιαστές καταργούν εντελώς τα μενού, προσκαλώντας τον επισκέπτη να χρησιμοποιήσει/αποκτήσει μια «προηγμένη» εμπειρία έρευνας ιστότοπου. Η προσαρμογή ιστότοπων για κινητά και tablet αλλάζει επίσης το ίδιο το UX/διεπαφές και ανοίγει προοπτικές για οριζόντια κύλιση.

Ο ιστότοπος δεν έχει μενού πλοήγησης– σας ζητούν να κάνετε κύλιση για να ανακαλύψετε περιεχόμενο, μπορείτε να κάνετε κύλιση με τον κέρσορα

Διαβάστε επίσης: Οι πιο ασυνήθιστοι και πρωτότυποι ιστότοποι

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

Η πλοήγηση Pop over χρησιμοποιείται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μία από τις 6 ενότητες αλλάζει το φόντο ολόκληρου του μενού πλήρους οθόνης

3. Κάρτες - έμπνευση από φορετά ηλεκτρονικά

Ακριβώς όπως οι χρήστες κινητών έχουν αλλάξει τη σχεδίαση των σύγχρονων ιστότοπων, οι φορητές συσκευές αρχίζουν να επηρεάζουν το σχεδιασμό τους. Με δεκάδες εκατομμύρια φορητών συσκευών που έχουν πωληθεί από το 2015, οι χρήστες έμαθαν να εκτιμούν την ορθολογική αριστεία και σε άλλους τομείς. Εξοικονομώντας χώρο στην οθόνη, τα φορητά ηλεκτρονικά είδη θα διδάξουν στους σχεδιαστές ιστού να απλοποιούν τα πράγματα οπτικά και οι έμποροι θα μάθουν να προσδιορίζουν περαιτέρω και να επισημοποιούν τις εργασίες του ιστότοπου. Οι κύριοι κανόνες του σχεδιασμού ιστοσελίδων βασίζονται στην αρχή των κοντέινερ: κομψό, συνοπτικό και χωρίς σπουδαία προσπάθεια– η ιδεολογία «less is more» δεν περιορίζεται στα μεγέθη οθόνης.

Πλεονεκτήματα:

• Βελτιστοποιημένη σχεδίαση UX
• Λιγότερη ασάφεια και περισπασμούς
• Ο μινιμαλισμός επιταχύνει τη φόρτωση του ιστότοπου

Βέλτιστες πρακτικές:

Πλακίδια, η αρχή των κοντέινερ και μπλοκ στη δομή των ιστοσελίδων.Η τάση διατηρείται για περισσότερο από ένα χρόνο (2014 - 2016...) και μάλλον το 2017 θα συνεχίσει αυτή την τάση. Επί του παρόντος δημοφιλή και νέα μοντέλα gadget (έξυπνα γυαλιά, ρολόγια, βραχιόλια, μανταλάκια, αισθητήρες ενσωματωμένοι στα ρούχα...) κατασκευάζονται σε λακωνικό στυλ και ενημερώνουν εξίσου διακριτικά τον χρήστη. Αναμένεται ότι θα εισπνεύσει η φορητή τεχνολογία νέα ζωήσε ευανάγνωστες διεπαφές με πλακάκια. Το μοντέλο κοντέινερ της διεπαφής χρήστη της κάρτας έχει σχεδιαστεί για να είναι αυτόνομο και να κλιμακώνεται καλά για μεγαλύτερες οθόνες.

Μεγάλα εικονίδια SVG.Το εικονίδιο χρειάζεται επεκτασιμότητα, απλότητα - έτσι ώστε να φαίνεται σε συσκευές HD και να γίνεται αντιληπτό με μια γρήγορη ματιά.

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

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

4. Material Design Lite (MDL)

Διαβάστε επίσης: Τα καλύτερα σχέδια ηλεκτρονικών καταστημάτων σε στυλ Flat και Material

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

Με σεμινάρια για προϋπάρχοντα πρότυπα και στοιχεία ανοιχτού κώδικα, το MDL κάνει το σχεδιασμό υλικού ανοιχτό για εφαρμογή σε οποιονδήποτε ιστότοπο ή εφαρμογή. Τα ψευδο-3D επίπεδα, οι σκιές, τα κινούμενα σχέδια είναι στοιχεία διεπαφής του κλασικού σχεδιασμού ιστοσελίδων που φέρνουν τη χρηστικότητα πιο κοντά στην προσομοίωση του πραγματικού κόσμου.

Πλεονεκτήματα:

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

Βέλτιστες πρακτικές:

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

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

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

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

Διαβάστε επίσης: Χρώματα σε Σχεδιασμός ιστοσελίδων: χρωματικές τάσεις (φωτεινά χρώματα)

5. Vintage χρώματα

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

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

Κάθε χρόνο ο αριθμός των τοποθεσιών που εκπλήσσουν και απολαμβάνουν με νέα χαρακτηριστικά σχεδιασμού αυξάνεται. Πριν από δύο χρόνια δημοσιεύσαμε μια μετάφραση για τις τάσεις στο web design 2015. Τι έχει αλλάξει από τότε; Εξακολουθεί να δίνεται έμφαση στα ποιοτικά γραφικά και τον μινιμαλισμό, τις μεγάλες γραμματοσειρές και τα διαδραστικά στοιχεία (π. κρυφό μενού). Ωστόσο, η τεχνολογία δεν μένει ακίνητη και οι σχεδιαστές ιστοσελίδων πειραματίζονται με τη δυναμική, τα κινούμενα σχέδια και τη διάταξη των αντικειμένων στην οθόνη χωρίς να διακυβεύεται η απόδοση του ιστότοπου. Φέρνουμε στην προσοχή σας μια επισκόπηση των τάσεων που, παραδοσιακά, θέτουν οι δυτικοί συνάδελφοί μας.

1. Αρχή κινητής-πρώτα

Το όνομα της αρχής μιλάει από μόνο του: ο σχεδιασμός αναπτύσσεται, πρώτα απ 'όλα, λαμβάνοντας υπόψη την ευκολία προβολής σε οθόνες φορητών συσκευών. Αυτή η αρχή δεν είναι νέα, αλλά δεδομένου ότι πάνω από το 60% των χρηστών έχουν πρόσβαση στο Διαδίκτυο από smartphone, έχει γίνει αποφασιστική φέτος. Δεδομένου ότι οι οθόνες φορητών συσκευών είναι μικρές, οι σχεδιαστές παρέχουν την πιο ενημερωτική, αλλά ταυτόχρονα αποτελεσματική εμφάνιση περιεχομένου. Το ίδιο ισχύει και για τα κείμενα - το νερό και οι κενές φράσεις δεν έχουν θέση στην έννοια του «κινητού-πρώτα».

2. Ελεύθερη εικονογράφηση

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

Παράδειγμα εικονογράφησης από το dropbox.com

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

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

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

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

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

4. Έντονα χρώματα

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

Παράδειγμα χρήσης έντονων χρωμάτων στο spotify.com

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

5. Ασυνήθιστη κύλιση και παράλλαξη

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

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

6. Ασύμμετρα σχέδια

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

Παράδειγμα ασύμμετρου σχεδιασμού (isaidicanshout.com)

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

7. Σκιές

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

Βαθιές σκιές όταν αιωρούνται πάνω από εικόνες (abduzeedo.com)

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

8. Μεγάλες και έντονες γραμματοσειρές

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

Παράδειγμα χρήσης μεγάλη γραμματοσειρά(bigyouth.fr)

9. Ultraminimalism

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

Απόλυτος μινιμαλισμός (mathieuboulet.com)

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

10. Αναμείξτε οριζόντιο και κάθετο κείμενο

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

Παράδειγμα ασυνήθιστης κατεύθυνσης κειμένου (takewhatyoucancarry.com)

Λάβετε υπόψη ότι το μείγμα γίνεται καλά - δεν υπάρχουν περιττά στοιχεία που προκαλούν σύγχυση. Η λέξη "λήψη" είναι γραμμένη κάθετα - αυτό αρκεί για μια επώνυμη παρουσίαση περιεχομένου.

11. "Διαμόρφωση"

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

13. Δίχρωμη

Ο σχεδιασμός του ιστότοπου βασίζεται στο 2 βασικά χρώματα. Φαίνεται κομψό και μοντέρνο. Για παράδειγμα, ο ιστότοπος του Australian Design Radio έχει σχεδιαστεί ακριβώς με αυτό το στυλ:

14. Γεωμετρικές γραμματοσειρές

Σε αυτή την περίπτωση, οι γραμματοσειρές συνδυάζονται με μια ποικιλία γεωμετρικών σχημάτων. Γραμματοσειρές όπως Futura, ITC Avant Garde και Proxima Nova είναι κατάλληλες για αυτό το σκοπό.

Ένα παράδειγμα χρήσης «γεωμετρικών» γραμματοσειρών (hugeinc.com)

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

Ας το συνοψίσουμε

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

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

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

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

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

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

5. Κινηματογράφοι
Μια καλή εναλλακτική για βίντεο ευρείας οθόνης και φωτογραφίες μεγάλου φόντου. Οι κινηματογραφικές ταινίες είναι φωτογραφίες στις οποίες εμφανίζονται μικρές, επαναλαμβανόμενες κινήσεις. Συνήθως παρουσιάζονται σε μορφή gifκαι δίνουν στον θεατή την ψευδαίσθηση ότι βλέπει ένα βίντεο. Περισσότερες πληροφορίες για τα cinemagraphs με πολλά παραδείγματα μπορείτε να βρείτε στην επιλογή

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

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

8. Κινούμενα σχέδια αντικειμένων
Οι δυνατότητες των σύγχρονων html5 και css3 σας επιτρέπουν να χρησιμοποιήσετε ένα μεγάλο οπλοστάσιο οπτικών εφέ στον ιστότοπο. Αυτό κάνει την αλληλεπίδραση με τη σελίδα πιο ενδιαφέρουσα και συναρπαστική για τον επισκέπτη. Έτσι τη νέα χρονιά θα δούμε και τις πιο απροσδόκητες διαδραστικές μικροκινήσεις αντικειμένων, που συνήθως αντιδρούν στην κίνηση του ποντικιού. Ίσως θα δούμε παραδείγματα πιο πολύπλοκων κινούμενων σχεδίων.

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

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

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

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

13. Μονοσελίδες
Ιστότοποι μιας σελίδας, ιστοσελίδες προορισμού, οι σελίδες προορισμού έχουν γίνει αναπόσπαστο μέρος του σύγχρονου Διαδικτύου. Μπορείτε να διαβάσετε περισσότερα σχετικά με το τι είναι μια σελίδα προορισμού στο άρθρο και. Το 2017, οι σελίδες προορισμού θα δώσουν αυξημένη έμφαση σε ένα κουμπί που καλεί σε δράση - παραγγελία, κλήση, εγγραφή κ.λπ. Οτιδήποτε άλλο αποσπά την προσοχή ενός πιθανού επισκέπτη θα αποκοπεί.

14. Γραφική διαφήμιση
Θα ήθελα επίσης να σημειώσω ένα πράγμα που θυμάμαι για την περασμένη χρονιά, και πιθανότατα η τάση θα συνεχιστεί το 2017. Λόγω της εμπορευματοποίησης του Runet και της ανάπτυξης του διαδικτυακού εμπορίου, η ζήτηση για γραφικά διαφημιστικά υλικά για διαφήμιση και προώθηση έχει αυξηθεί σημαντικά - πανό, teaser, κάρτες, φυλλάδια.

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

16. Infographics
Η γραφική αναπαράσταση με τη μορφή infographics εξακολουθεί να είναι δημοφιλής και σε ζήτηση. Συνοδεία κειμένου όμορφη εικόναή ένα εικονίδιο μαζί με κομψά σχεδιαστικά στοιχεία κάνουν το infographic αισθητικά ελκυστικό. Τα συγκριτικά γραφήματα είναι ιδιαίτερα οπτικά σαφή και ενδιαφέροντα - όπως τι συνέβη, τι συνέβη, ναι, όχι, πλεονεκτήματα και μειονεκτήματα, πρέπει και όχι κ.λπ. Μπορείτε επίσης να χρησιμοποιήσετε τα γραφήματα για να πείτε μια ιστορία βήμα προς βήμα ή να παρουσιάσετε ζωντανά βαρετά στατιστικά στοιχεία.

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

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

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

20. Κενό κουμπί
Λόγω εξοικονόμησης χώρου και χώρου κινητές συσκευέςΠριν από λίγο καιρό, εμφανίστηκε ένα κενό κουμπί - μια μεγάλη επιγραφή με ένα τετράγωνο περίγραμμα γύρω από τη λέξη. Ένα τέτοιο κουμπί δίνει μια επισκόπηση του φόντου πίσω από το κουμπί και ταυτόχρονα διατηρεί τη λειτουργικότητά του ως πλήρες κουμπί. Επιπλέον, ως στοιχείο σχεδίασης, ένα τέτοιο κουμπί φαίνεται κομψό και τακτοποιημένο.

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

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

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

24. Αυτόματη αναπαραγωγή ήχου και βίντεο
Αλλά αυτή η τάση είναι hello από τη δεκαετία του 2000. Θυμάμαι τότε ήταν της μόδας να παίζεις έναν ήχο όταν έμπαινες σε έναν ιστότοπο. Και αυτό για πολλούς. Δεν μπορώ να πω ότι η ηχητική συνοδεία με ευχαριστεί, αλλά ίσως η μέτρια χρήση να είναι διακριτική. Λοιπόν, το αυτο-παιχνίδι βίντεο είναι περισσότερο ένας φόρος τιμής στη διαφήμιση, όπως για μένα. Λοιπόν, συν την επιθυμία να κρατήσει την προσοχή του επισκέπτη στη ροή. Όχι η πιο ευχάριστη τάση, αλλά εμπορικά απαραίτητη.

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

Infographic "Τάσεις σχεδίασης ιστοσελίδων 2017"
Σας προσφέρω ένα infographic που παρουσιάζει ξεκάθαρα όλες τις τάσεις και τις τάσεις στο web design. Κατεβάστε την εικόνα στο μεγάλο μέγεθοςΜπορείτε να ακολουθήσετε αυτόν τον σύνδεσμο στο DeviantArt. Μια σελίδα στο DeviantArt θα ανοίξει σε νέο παράθυρο. Εκεί, κάντε κλικ στη λέξη Λήψη στα δεξιά της εικόνας και αποθηκεύστε την εικόνα στον υπολογιστή σας.