Σύγχρονη κατασκευή ιστοσελίδων. Απτική, φυσική σχεδίαση. Γραμματοσειρές από το Google Fonts

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

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

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

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 θα ανοίξει σε νέο παράθυρο. Εκεί, κάντε κλικ στη λέξη Λήψη στα δεξιά της εικόνας και αποθηκεύστε την εικόνα στον υπολογιστή σας.

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

Προσοχή, περιεχόμενο

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

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

Το τέλος της εποχής του flat design

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

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

Γεωμετρικά σχήματα, γραμμές και σχέδια

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

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

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

Εκτεταμένη χρήση κινουμένων σχεδίων

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

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

Απλοποιημένη πλοήγηση

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

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

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

Προσαρμοσμένα γραφικά

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

Η αυξανόμενη σημασία των σελίδων προορισμού

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

Αντί για συμπέρασμα

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

» του John Moore Williams, Επικεφαλής Στρατηγικής Περιεχομένου στο Webflow.

Το τέλος του τρέχοντος έτους είναι προ των πυλών και κάθε σχεδιαστής ιστοσελίδων έχει αναρωτηθεί τουλάχιστον μία φορά σημαντικό θέμα: Τι θα καθορίσει το web design το ερχόμενο 2017; Αποφάσισα να βρω την απάντηση σε αυτή την ερώτηση και ρώτησα τους σχεδιαστές του WebFlow ποιες τάσεις πίστευαν ότι θα κυριαρχούσαν τις επόμενες 365 ημέρες. Έδωσα και τα δικά μου σχόλια στις σκέψεις τους.

Πρώτα απ 'όλα, ας πάρουμε τη γνώμη του επικεφαλής σχεδιαστή του Webflow Sergie Magdalin.

1. Σχεδιασμός με γνώμονα το περιεχόμενο

"Η διάταξη των στοιχείων σχεδίασης μέσα σε μια δεδομένη δομή θα πρέπει να είναι τέτοια ώστε ο αναγνώστης να μπορεί εύκολα να κατανοήσει την κύρια ιδέα χωρίς να μειώσει την κανονική του ταχύτητα ανάγνωσης" -Χέρμαν Ζαπφ

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

Ήταν πολύ ενδιαφέρον να παρακολουθούμε τις μεταμορφώσεις που συμβαίνουν με αναπτυξιακές προτεραιότητες.

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

Αυτός είναι ένας από τους λόγους για τη μετάβαση από τον «σκευόμορφο» σχεδιασμό (όπου τα στοιχεία απεικονίζονται όσο το δυνατόν πιο παρόμοια με τα αντίστοιχα στον πραγματικό κόσμο) στον επίπεδο, μινιμαλιστικό σχεδιασμό. Από αυτές τις σκέψεις, η Google δημιούργησε το Material Design.

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

2. Αλληλεπίδραση υψηλής ποιότητας μεταξύ σχεδιαστών και προγραμματιστών και σχεδιαστών μεταξύ τους

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

Αυτή η ανησυχία για αλληλεπίδραση με τους σχεδιαστές έχει προκύψει εν μέρει λόγω του τεράστιου όγκου εφαρμογών για κινητά και web που αναπτύσσονται σήμερα. Επιπλέον του γεγονότος ότι τέτοιες γιγάντιες εταιρείες όπως η Google, το Facebook, το Twitter και το LinkedIn απαιτούν την τιτάνια δουλειά μιας ομάδας σχεδιασμού με απολύτως διαφορετικές πλευρές, οι σχεδιαστές πρέπει να είναι πάντα στην ίδια σελίδα μεταξύ τους. Αυτό σημαίνει ότι απαιτείται μεγαλύτερη επικοινωνία σχετικά με το έργο και πώς να συνεργαστείτε πιο αποτελεσματικά.

Για να διευκολυνθεί αυτή η εργασία, έχουν δημιουργηθεί πολλά εργαλεία, από πρότυπα και πίνακες συνεργασίας στο Webflow's Team μέχρι το Figma, ένα πρόγραμμα επεξεργασίας γραφικών διεπαφής που εμφανίζει αλλαγές σε πραγματικό χρόνο. Είμαι σίγουρος ότι το 2017 αυτές οι πλατφόρμες θα βελτιωθούν και θα συμπληρωθούν.

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

Ο Carson Miller στάθηκε σε αυτό στο πρόσφατο άρθρο του "The Future of Front-End Design" στο TechCrunch:

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

3. Απλοποιημένη διαδικασία σχεδιαστή σε προγραμματιστή

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

Οι τάσεις του σχεδιασμού ιστοσελίδων το επόμενο έτος σύμφωνα με τον σχεδιαστή προϊόντων Gadzhi Kharkharov:

4. Μεγάλος, δυνατός τίτλος

Καθώς ο κόσμος του web design αρχίζει να εστιάζει στο περιεχόμενο, οι ιστότοποι βλέπουν όλο και περισσότερο εμπνευσμένους τίτλους με αντίστοιχες γραμματοσειρές που είναι τόσο μεγάλες και τολμηρές όσο το περιεχόμενό τους.

Οι συνεργάτες #MadeInWebflow Heco

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

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

5. Σύνθετη σήμανση που προέρχεται από τα βασικά της γραφιστικής

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

Τα τελευταία χρόνια, η διάταξη ιστοσελίδων περιορίζεται σε CSS, αλλά νέες ενότητες όπως το Flexbox και το CSS Grid (που θα κυκλοφορήσουν τον Μάρτιο του 2017) θα σας επιτρέψουν να πραγματοποιήσετε τις πιο περίεργες ιδέες σας για τη διάταξη ιστού.

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

Ακολουθούν μερικά παραδείγματα για το τι να περιμένετε (υποθέτοντας ότι έχετε ένα πρόγραμμα περιήγησης που υποστηρίζει CSS Grid, όπως το Firefox Nightly, το Safari Technical Preview ή το Chrome Canary):

Εργαστήριο πειραματικής διάταξης Jen Simmons

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

Πλέγμα με Παράδειγμα

Μπορείτε να δείτε περισσότερα παραδείγματα στον ιστότοπο.

6. Περισσότερα SVG

SVG (κλιμακούμενα διανυσματικά γραφικά) Διανυσματικά γραφικά) έχει περισσότερα οφέλη για τους σχεδιαστές και τους προγραμματιστές ιστού από τις παραδοσιακές μορφές εικόνας όπως JPG, PNG ή GIF.

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

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

7. Εργαλεία για αποκριτικό σχεδιασμό βάσει κανόνων

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

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

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

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

Σχεδιαστικές τάσεις για το 2017 σύμφωνα με τον Ryan Morrison, ανώτερο γραφίστα.

8. Πιο έντονα χρώματα

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

Ρίξτε μια ματιά στο νέο site της Asana με μια βουτιά χρώματος:

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

Όλα όσα κάνει το Stripe δεν απαιτούν ξεχωριστή προβολή:

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

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

9. Μεγαλύτερη έμφαση στο animation

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

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

10. Ασυνήθιστα σημάδια

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

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

Η μέθοδος «σπασμένου» σήμανσης περιλαμβάνει στοιχεία που υπερβαίνουν το σχολαστικά ευθυγραμμισμένο πλέγμα. Τέτοιες τεχνικές μπορεί μερικές φορές να φαίνονται ακόμη και δυσάρεστες στο μάτι. Για παράδειγμα:

Κείμενα και εικόνες που συγκρούονται μεταξύ τους:

Κείμενα και εικόνες διάσπαρτα (φαινομενικά) τυχαία στη σελίδα:

Αυτό ήταν το πρώτο μέρος της μετάφρασης του άρθρου «18 τάσεις σχεδιασμού ιστοσελίδων το 2017». Συμφωνείτε με τις απόψεις των ειδικών του Webflow; Τι είδους web design πιστεύετε ότι θα είναι στη μόδα το επόμενο έτος;

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

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

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

Έτσι, πρόσφατα συναντήθηκα με την ομάδα σχεδιασμού ( Jonn Williams, Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff)και τους ζήτησε να κοιτάξουν μέσα στις κρυστάλλινες μπάλες τους VR και να δουν πώς θα ήταν το σχέδιο το 2018. 🔮

1. Σπασμένη σήμανση

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

Μερικές φορές θέλουμε απλώς να ξεφύγουμε από τη σήμανση, εντάξει;

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

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

Να συνεχίσει?

13. Σήμανση CSS

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

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

16. Κάτι άλλο σχετικά με τη μορφή βίντεο

Το βλέπεις παντού: ειδησεογραφικοί ιστότοποι που πρακτικά επιμένουν να παρακολουθείς το βίντεο αντί να διαβάζεις το κείμενο, Snapchat, μετά Instagram, Facebook. Φυσικά το Excel θα προλάβει σύντομα!

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

Και οι προοπτικές μπορεί να μην είναι τόσο καλές για τα μέσα ενημέρωσης. Σύμφωνα με το Columbia Journalism Review:

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

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

Αξίζει να θυμηθούμε δυνάμειςκείμενο:

• Είναι γρήγορο;
• Είναι φθηνό;
• Το κείμενο εξακολουθεί να είναι η κύρια μορφή για τα περισσότερα μηνύματα στο διαδίκτυο.

Εκπληκτος? Θα σας παροτρύνω να εξετάσετε οποιαδήποτε κύρια μεσα ΚΟΙΝΩΝΙΚΗΣ ΔΙΚΤΥΩΣΗΣ. Αν δεν επιλέξετε Instagram, Pinterest ή Snapchat, πιθανότατα θα δείτε πολύ κείμενο. Και ακόμη και σε αυτές τις πλατφόρμες που αναφέρονται, το κείμενο εξακολουθεί να παίζει σημαντικό υποστηρικτικό ρόλο.

Ακόμα κι αν μια εικόνα «αξίζει όσο χίλιες λέξεις», σπάνια καλύπτει το πλαίσιο: ποιος, τι, πότε, πού, γιατί και πώς. Αυτό μας φέρνει στο επόμενο σημείο:

17. Η ανάπτυξη του κειμένου UX συνεχίζεται

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

Άγγιξα λίγο αυτό το θέμα πέρυσι, αλλά σήμερα θα ήθελα να εστιάσω ακόμη περισσότερο στην ανάπτυξη του κλάδου που ονομάζεται text UX.

Με απλά λόγια, ένας συγγραφέας UX εστιάζει στο περιεχόμενο των διεπαφών χρήστη, κυρίως για μεγαλύτερα ψηφιακά προϊόντα και εφαρμογές Ιστού. Τώρα, όταν εξηγώ στους ανθρώπους ότι γράφω περιεχόμενο για προϊόντα από εταιρείες όπως το Webflow και, στο παρελθόν, το LinkedIn, συνήθως λένε "τι;"

Να είστε σίγουροι: οι διεπαφές χρήστη είναι γεμάτες με γραπτό περιεχόμενο. Και αυτό το περιεχόμενο συχνά παίζει βασικό ρόλο στην κατανόηση:

• Τι μπορείτε να κάνετε στο UI;
• Πως να το κάνεις;
• Ποιους περιορισμούς και δυσκολίες θα συναντήσετε στην πορεία;

Αλλά το κείμενο στο UX μπορεί να κάνει πολλά περισσότερα. Οι λέξεις σε μια διεπαφή μπορούν επίσης να είναι ένα ισχυρό εργαλείο για τη διαμόρφωση των αντιλήψεων της επωνυμίας. Σκεφτείτε όλα τα tweets που έχετε δει ή όλες τις 404 σελίδες με πνευματώδη one-liners.

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

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

18. Σχεδιασμός. Συστηματοποίηση

Πώς μπορούν οι επιτυχίες σχεδιασμού να συστηματοποιηθούν, να κλιμακωθούν και να ενοποιηθούν σε πολλά προϊόντα και περιβάλλοντα επωνυμίας;

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

Και οι μάρκες, κατά κανόνα, ακολουθούν την τάση. Το UXPin κυκλοφόρησε το Systems, ένα εργαλείο για τη δημιουργία και τη συντήρηση συστημάτων σχεδιασμού. Το Shopify κυκλοφόρησε το Polaris. Το UX Power Tools κυκλοφόρησε μια βιβλιοθήκη που προσπαθεί να κάνει το Sketch βιώσιμο εργαλείο (θα δούμε).

19. Οι αρχές προηγούνται

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

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

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

Θα πρέπει να ξεκινήσει με αρχές.

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

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

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

Γι' αυτό άφησα έξω μερικά προφανή - όπως το AR και το VR, που έχουν περιορισμένη επίδραση στο διαδίκτυο μέχρι σήμερα. Τι θα προσθέτατε σε αυτή τη λίστα;

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

Δημοσιεύτηκε νέο άρθρο →← Διαβάστε και εμπνευστείτε!

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

Ποιες τάσεις στο web design μας περιμένουν το 2017

01. Semi Flat Design

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

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

Εργο: Πόρων | Εργαλείο UI/UX για υπηρεσίες Web
Συγγραφείς: Ruslan Latypov; LS Graphics; Anton Mishin; Βαλέρι Γκούρκοφ

Εργο: Λίστα αναπαραγωγής ακροατή

02. Κινούμενες φωτογραφίες (Cinemagraphs)

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

03. Περισσότερα 3D

Το 3D σίγουρα κινείται προς την κατεύθυνση μας και θα δούμε αυτή την επιρροή σε όλους τους τομείς του σχεδιασμού. Με τις τεχνολογίες VR/AR να επιταχύνουν γρήγορα, αυτό το πεδίο αναπτύσσεται αρκετά γρήγορα.

Εργο: LUV.IT

Εργο: Ανοιχτά Ετήσια Βραβεία

Εργο: Air Max '17

Εργο: NIKE F.C. | Τρισδιάστατες χρυσές μπάλες στον πραγματικό κόσμο

Εργο: Better You Brand

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

Τα κινούμενα σχέδια είναι ολοένα και περισσότερο παρόντα στο σχεδιασμό ιστοσελίδων, η μορφή μπορεί να είναι οποιαδήποτε - WebGL CSS, GIF, SVG ή βίντεο. Τα κινούμενα σχέδια ήταν μια από τις πιο σημαντικές τάσεις στο σχεδιασμό ιστοσελίδων του περασμένου έτους, μην ντρέπεστε να το χρησιμοποιήσετε.

Εργο: Nickelodeon Kids Pick The President

Εργο: Εφαρμογή AR Virtual Fitness Coach

Εργο: ZH OURO- Ρίο 2016

05. Ιστότοποι/σελίδες προορισμού μιας σελίδας

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

Εάν χρειάζεστε μια σελίδα προορισμού, μπορείτε να την παραγγείλετε από εμένα →

06. Γεωμετρικά σχήματα, μοτίβα, γραμμές και κύκλοι

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

Εργο:

Εργο: Επωνυμία DRAP.agency

Εργο: Pfizer - Active και 50+ για τους New York Times

07. Θαρραλέα Χρώματα

Χρησιμοποιήστε έντονα χρώματα για να ξεχωρίσετε. Το υλικό και η επίπεδη σχεδίαση συνδυάζονται υπέροχα με έντονα χρώματα. Μπορείτε να χρησιμοποιήσετε την παλέτα χρωμάτων που παρέχεται από την Google για να επιλέξετε και να συνδυάσετε τα χρώματα που θέλετε.

Εργο: Edris — Λογότυπο Σχεδιασμένο από τη MiLo

Εργο: Rendered - Αποκριτικός ιστότοπος επίδειξης για την Adobe

Εργο: b2mach

08. Καινοτόμος κύλιση και παράλλαξη

Αυτή είναι μια εξαιρετική οπτική ιδέα που θα προσθέσει μοναδικότητα σε κάθε ιστότοπο. Από την παράλλαξη πολλαπλών επιπέδων έως την παράλλαξη βίντεο, όλα είναι δυνατά με το πρόσθετο D.ex Multilayer Parallax. Αυτό το προϊόν αναπτύχθηκε εξ ολοκλήρου από το στούντιο Milothemes υπό τη διεύθυνση των Loredana Papp και Mihai Baldean. Είναι διαθέσιμο για αγορά στο Envato Market / codecanyon.net

Αυτό WordPress plugin, που σας επιτρέπει να φτιάξετε όμορφα μπλοκ Parallax με περισσότερα από ένα στρώματα. Γίνετε δημιουργικοί και συνδυάστε στρώσεις σε όποιο στυλ θέλετε. Έχουμε δημιουργήσει 12 διαφορετικά παραδείγματα στον οδηγό πρόσθετων για να κάνουμε την πρώτη σας εισαγωγή στον υπέροχο κόσμο της παράλλαξης πιο εύκολη. Παίξτε με τα layers!

09. Μεταβάσεις χρωμάτων

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

10. Περιήγηση σε κινητά (Responsive Design)

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

Εργο: Responsive Animation Ιστοσελίδας

11. Προσαρμοσμένα γραφικά και εικονογραφήσεις

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

12. Δημιουργική χρήση ουδέτερου χώρου και πλέγματος

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

13. Πείτε ιστορίες (Storytelling)

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

Περισσότερα βίντεο σχετικά με την αφήγηση από το Business of Youth:

14. Σταδιακή φόρτωση περιεχομένου (Lazy Loading)

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

15. Διαχωρίστε το περιεχόμενο

Το διαχωρισμένο περιεχόμενο είναι πλέον δημοφιλές στο responsive web design και χωρίζει την οθόνη σε 2 ή περισσότερα μέρη. Μια τέτοια διαίρεση της οθόνης του ιστότοπου θα δείξει κάπως εξίσου στον θεατή σημαντικά μηνύματασε ένα μπλοκ του ιστότοπου. Αυτή η τάση εμφανίστηκε το 2015, αλλά το 2017 θα συνεχίσει να αυξάνεται και, πιθανότατα, θα τη δείτε σε πολλούς ιστότοπους.

16. Φόρμες πλήρους οθόνης

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

17. Βίντεο Παντού

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

Εργο: Hillsong

18. Το SEO είναι σημαντικό! (Το SEO είναι σημαντικό)

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

19. Κρυφή πλοήγηση

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

20. Μικροσκοπικές λεπτομέρειες σχεδίασης

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

Εργο: Barometa - Πλατφόρμα εργασίας επόμενης γενιάς

21. Τάσεις σχεδιασμού λογότυπου

21.1. Μινιμαλισμός

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

21.2. Σχεδιασμένο στο χέρι

Αυτή η τάση βρίσκεται στο επίκεντρο τα τελευταία χρόνια και αυτό το στυλ είναι εξαιρετικό για τις hipster επιχειρήσεις. Χρησιμοποιείται για κομμωτήρια (κουρείς), καφετέριες, εστιατόρια, είδη τέχνης και χειροτεχνίας.

21.3. Αρνητικός χώρος

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

21.4. Καλλιέργεια

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

21.5. Γεωμετρία

Αυτή η τάση είναι παλιάς σχολής, αλλά είναι ένα από εκείνα τα στυλ που δεν θα πεθάνουν ποτέ.

21.6. Γραμμή τέχνης

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

Συγγραφείς: Σαμ Χίλι; Andrea Schlaffer; Jacek Janiczak

21.7. Μοτίβα

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

Συγγραφείς: Nick Edlin; Stanislav Aleynikov; Λούκας Γκιλ-Τέρνερ

21.8. Κινούμενα λογότυπα

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

Συγγραφείς: Javier Miranda Nieto; The Work Co

21.9. Σοδειά

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

Συγγραφείς: Roman Dodonov; Mingo Ideas Up? Θα προσπαθήσω περαιτέρω

21.10. Μεταβάσεις χρωμάτων

Οι κλίσεις είναι παντού φέτος — και τα λογότυπα δεν αποτελούν εξαίρεση.

21.11. Εικονογραφήσεις σε λογότυπα

εικονογραφήσεις - καλός τρόποςφτιάξτε ένα μοναδικό και ατομικό λογότυπο για την επιχείρησή σας. Γίνονται όλο και πιο δημοφιλή φέτος.

Συγγραφείς: Bodea Daniel; Jacek Janiczak

21.12. Φωτογραφία σε λογότυπα

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

22. Τάσεις Τυπογραφίας

22.1. Μεγάλη, τολμηρή και όμορφη τυπογραφία

Η τυπογραφία μπορεί να είναι το πιο σημαντικό στοιχείο για τη δημιουργία εκπληκτικού σχεδιασμού. Φέτος η τυπογραφία θα είναι έντονη (έντονη) και μεγάλη με εμφανείς επικεφαλίδες.

Συγγραφείς: Alexander Laguta

Συγγραφείς: Quim Marin

Εργο: Σειρά Baugasm - Πακέτο 4

22.2. Διαβαθμίσεις/μεταβάσεις χρωμάτων στην τυπογραφία

Τα ντεγκραντέ είναι χωρίς αμφιβολία τάση σήμερα και θα τα βρείτε και στην τυπογραφία.

22.3. Οπτική ιεραρχία

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

22.4. Μικροσκοπική Τυπογραφία

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

Συγγραφείς: Slava Oleinik; Bahaa Samir; Witty Digital

Εργο: Σειρά Baugasm - Πακέτο 4

22.5. Κινούμενη τυπογραφία

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

Έργο: Gotham Pro Animated Typeface Free

22.6. Η τυπογραφία συναντά τη φωτογραφία

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

22.7. Γεωμετρικά σχήματα και τυπογραφία

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

22.8. Σύζευξη γραμματοσειρών

Χρησιμοποιήστε δύο ή περισσότερες γραμματοσειρές μαζί. Αυτό είναι ακόμα σε τάση το 2017.

———————————