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

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

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

1. Η χρηστικότητα θα γίνει εμπόρευμα.

Ένα παράδειγμα βελτίωσης της χρηστικότητας του ιστότοπου http://www.telemirspb.ru/

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

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

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

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

2. Τα μεγάλα κείμενα θα εξαφανιστούν

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

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

Κοιτάξτε το κοινό του ιστότοπού σας, για παράδειγμα, στο Yandex.Metrica στην αναφορά Περίληψη → Τύπος συσκευής και δείτε το ποσοστό των πελατών που προέρχονται από τηλέφωνα και tablet. Λάβετε υπόψη αυτό το κοινό όταν δημοσιεύετε περιεχόμενο.

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

6. Χρήση κινηματογραφικών ή «ζωντανών» εικόνων

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

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

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

7. Αποφύγετε τις «τυπικές» στοκ φωτογραφίες

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

9. Πρώτα το κινητό

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ο Ryan McCready, συντάκτης περιεχομένου για την υπηρεσία σχεδίασης infographic Venngage, μιλά για το τι είναι δημοφιλές στη γραφιστική αυτή τη στιγμή και ποιες τεχνικές έχουν καταργηθεί φέτος.

Έντονα και ζωηρά χρώματα

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

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

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

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

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

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

Μαύρα γράμματα

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

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

Απλά ρίξτε μια ματιά:

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

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

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

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

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

Γραμματοσειρές από το Google Fonts

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

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

Στον ιστότοπό μας χρησιμοποιούμε γραμματοσειρές Roboto και Open Sans.

Πρωτότυπες φωτογραφίες

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

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

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

Και η ανάγκη χρήσης καθαρών και τέλειων φωτογραφιών μόνο χειροτέρεψε την κατάσταση.

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

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

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

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

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

Χειροποίητες εικόνες και εικονίδια

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

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

Το Dropbox χρησιμοποιεί εικονογραφήσεις με το χέρι. Έγιναν μέρος του brand της εταιρείας και την έκαναν αναγνωρίσιμη.

Τέτοιες εικονογραφήσεις δημιουργούν μια χαλαρή διάθεση και χαροποιούν το παιδί που ζει στην ψυχή του καθενός μας. Κάνουν το προϊόν να φαίνεται πιο προσιτό. Είναι ιδιαίτερα αποτελεσματικά σε μεγάλες εταιρείες τεχνολογίας όπως το Dropbox.

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

Η τάση επικράτησε επίσης από την υπηρεσία MailChimp. Στην έκθεση του 2016, δείχνει επίσης παρόμοια σχέδια.

Η Moz, μια εταιρεία που αναπτύσσει λογισμικό μάρκετινγκ, εισάγει εικόνες στην κεφαλίδα των άρθρων:

Μερικές φορές η αγάπη μας για τα σχέδια εκδηλώνεται σε άλλα έργα:

Επιστροφή στις ρίζες του μινιμαλισμού

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

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

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

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

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

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

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

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

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

Χρήση GIF

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

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

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

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

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

Δίχρωμες εικόνες

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

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

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

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

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

Οι σκιές δημιουργούν ένα εκπληκτικά ευέλικτο εφέ, όχι μόνο ανεβάζοντας την αισθητική της σελίδας σε υψηλότερο επίπεδο, αλλά συμβάλλουν επίσης στη ρευστότητα της Εμπειρίας Χρήστη (UX) μέσω της χρήσης τονισμού. Για παράδειγμα, η χρήση απαλών, ανεπαίσθητων σκιών στην Κατάσταση Hover για να υποδείξετε έναν σύνδεσμο δεν είναι νέα ιδέα, αλλά ο συνδυασμός τους με έντονες χρωματικές διαβαθμίσεις (περισσότερα για αυτό παρακάτω), όπως στα παραπάνω παραδείγματα, ενισχύει το 3D εφέ των σκιών.

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

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

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

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

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

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

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

5.Πρώτα το κινητό

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

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

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

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

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

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

8. Ενσωματωμένο animation

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

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

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

Τάσεις 2018

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