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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Σύμφωνα με το Internet Live Stats, υπάρχουν περισσότεροι από 1,2 δισεκατομμύρια ιστότοποι στον κόσμο. Κάθε δευτερόλεπτο αυτή η τιμή γίνεται υψηλότερη κατά περίπου 10 μονάδες. Ανεξάρτητα από τον κλάδο στον οποίο εργάζεστε, ο ιστότοπός σας πρέπει να είναι ενημερωμένος τόσο στην τεχνολογία όσο και στον σχεδιασμό. Σε αυτό το άρθρο θα επικεντρωθούμε στην εμφάνιση του ιστότοπου - πώς θα πρέπει να φαίνεται το 2017. Οι γραμματοσειρές που είναι πολύ φωτεινές, πολύχρωμες και επιτηδευμένες θεωρούνται ξεπερασμένες εδώ και πολύ καιρό. Τα εικονίδια αντικαθιστούν τις εικόνες για να διευκολύνουν τους χρήστες να πλοηγούνται στα στοιχεία μενού. Ωστόσο, αυτά τα γεγονότα είναι γνωστά στους περισσότερους ειδικούς που ασχολούνται με το μάρκετινγκ Διαδικτύου. Από αυτό το άρθρο θα μάθετε πώς πρέπει να μοιάζει ο σύγχρονος σχεδιασμός ιστοσελίδων.

1. Ο σχεδιασμός ιστοσελίδων επικεντρώνεται κυρίως σε κινητές συσκευές.

Η λεγόμενη προσέγγιση mobile-first για την ανάπτυξη ιστοσελίδων υπάρχει εδώ και περισσότερα από 5 χρόνια. Αν και αυτή δεν είναι μια νέα τάση, σίγουρα αξίζει να σημειωθεί, καθώς έχει γίνει απαραίτητο για κάθε ιδιοκτήτη επιχείρησης, αν θέλει να αυξήσει τις πωλήσεις χρησιμοποιώντας αυτό το κανάλι μάρκετινγκ.

Τι σημαίνει προσέγγιση με προτεραιότητα το κινητό; Πρόκειται για ανάπτυξη ιστού που εστιάζει στην ανταπόκριση σε κινητά. Η χρήση του responsive design είναι απολύτως λογική, ειδικά αν λάβετε υπόψη τα επίσημα στατιστικά στοιχεία που δημοσιεύονται από το StatCounter, μια ανεξάρτητη εταιρεία ανάλυσης ιστού. Σύμφωνα με τον ίδιο, το μερίδιο χρήσης του Διαδικτύου μέσω φορητών συσκευών είναι 51,3%. Αυτός είναι ο λόγος που η Google σταμάτησε να υποστηρίζει την υπηρεσία Instant Search. Αυτή η δυνατότητα ήταν διαθέσιμη σε χρήστες επιτραπέζιων υπολογιστών και προσέφερε αποτελέσματα αναζήτησης ενώ ένα άτομο εισήγαγε μόλις το ερώτημά του. Με αυξημένη επισκεψιμότητα, οι ιδιοκτήτες επιχειρήσεων θα μπορούν να έχουν περισσότερες πωλήσεις. Επομένως, η εστίαση σε ένα ευρύτερο κοινό είναι απολύτως λογικό.

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

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

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

3. Ευρύχωρη πρώτη οθόνη

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

4. Ειδικές περιοχές πλοήγησης

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

5. Ανάπτυξη σχεδίασης ιστοσελίδων σε στυλ Material Design Lite

Το Material Design έχει γίνει μια σημαντική επέκταση του λεγόμενου flat design, μιας τάσης που χρησιμοποιείται ευρέως τα τελευταία χρόνια. Το Android design δημιουργήθηκε ως διεπαφή για φορητές συσκευές, αλλά πλέον έχει κατακτήσει πλήρως και τους επιτραπέζιους υπολογιστές. Αυτή η οπτική προσέγγιση καθιστά τη χρηστικότητα βασικό συστατικό ολόκληρου του σχεδιασμού. Το Material Design Lite (MDL) είναι η επόμενη γενιά του Material Design. Περιλαμβάνει οδηγίες, σετ διάταξης και μια συνολική δομή με εργαλεία που επιτρέπουν σε κάθε σχεδιαστή να δημιουργήσει γρήγορα και εύκολα έναν ιστότοπο MDL χρησιμοποιώντας μια βολική επιλογή παλετών.

6. Μεγάλα εικονίδια

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

Οι κύριες απαιτήσεις για τη χρήση εικονιδίων στο σχεδιασμό ιστοσελίδων:

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

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

7. Απλές γραμματοσειρές και απαλή χρωματική παλέτα

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

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

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

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

Κάθε χρόνο μαθαίνουμε κάτι νέο για το 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; Valery Gurkov

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

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

Τα Cinemagraphs δεν είναι εκείνα τα κινούμενα σχέδια 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. Καινοτόμο Scrolling και Parallax

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

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

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

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

10. Περιήγηση σε κινητά (Σχεδίαση με απόκριση)

Το 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. Γραμμή τέχνης

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

Συγγραφείς: Sam Healy; 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.

———————————

Αφιερωμένο στον σχεδιασμό ιστοσελίδων και τις ψηφιακές τάσεις το 2018. Η Olga είναι μέλος της κριτικής επιτροπής του Awwwards και καθημερινά εξετάζει εκατοντάδες νέους ιστότοπους που αναπτύσσονται από πρακτορεία και σχεδιαστές από όλο τον κόσμο. Αυτό της επιτρέπει να παρακολουθεί τις τελευταίες εξελίξεις και τάσεις στην ανάπτυξη και το σχεδιασμό ιστού.

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

Διαδραστική κύλιση

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

Η ιστοσελίδα Volcan είναι ένα αγαπημένο παράδειγμα. Ο δρομέας του διαμαντιού γίνεται ένας υπαινιγμός του τι σας περιμένει όταν κάνετε κλικ. Υπάρχει ένα διαδραστικό στοιχείο. Ως αποτέλεσμα, το αιώρημα δεν χρειάζεται· ο κέρσορας εκτελεί το ρόλο του.

Ένα παράδειγμα διαδραστικής κύλισης στον ιστότοπο του Volcano

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

Μάσκες SVG

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

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

Καμβάς

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

Ο ιστότοπος Climachill από την Adidas, για παράδειγμα.

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

3D+WEBGL

Η κατεύθυνση θα αναπτυχθεί. Όταν κάνετε έστω και ένα μικρό αλλά υψηλής ποιότητας βίντεο για 1 λεπτό, αυτό σημαίνει τουλάχιστον 10 άτομα στην ομάδα. Όταν είναι σε 3D - είναι 1 σχεδιαστής. Και το webgl είναι προγραμματιστής +1. Το 3D μπορεί να είναι κλασικό, όπως στον ιστότοπο του Globekit. Φαίνεται φανταστικό, μοναδικό. Αν και αποτελείται από 6 διαφάνειες συνολικά.

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

VR

Τον Μάρτιο του 2017, εμφανίστηκε ο πρώτος ιστότοπος σε VR. Υπάρχουν περισσότερα από αυτά. Πρόσφατα φτιάξαμε την πρώτη πίστα VR σε γήπεδο ποδοσφαίρου. Ένας άντρας βάζει μάσκα και του φαίνεται ότι βρίσκεται σε πίστα.

Συσκευή για εικονικούς αγώνες από την Audi.

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

AR

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

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

Ενα πλαίσιο

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

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

Google

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

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

WebVj

Ένα πολύ νέο κόλπο. Η σελίδα είναι χτισμένη βάσει δεδομένων. Υπάρχει ένας Ιάπωνας, ο Masatatsu Nakamura, ο οποίος είναι ιδιαίτερα σοβαρός για αυτό. Τα γραφικά του γίνονται εξ ολοκλήρου από προγραμματιστή, όχι από σχεδιαστές. Κάνει πολλά για τα Πειράματα Google.

Παράδειγμα γραφικών Masatatsu Nakamura κατασκευασμένα με χρήση WebVJ

Τρεντοσική

Η πιο συχνή ερώτηση είναι «Ποιο χρώμα/γραμματοσειρά/μοτίβο θα είναι μοντέρνο το επόμενο έτος;» Αυτό το ονομάζω «τάσεις».

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

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