Άρθρα

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 6o . Σχεδιασμός Αφής

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 6o . Σχεδιασμός Αφής

  • Σχεδιασμός Αφής. Τι είναι;

  • Στοιχεία Σχεδιασμού “Borderless”

  • Multilayer Σχεδιασμοί

  • Κίνηση και Animation με Νόημα

  • Φωτογραφία με Λεπτομέρειες

  • Φυσικός Φωτισμός

  • Συνδυασμός όλων μαζί

Σχεδιασμός Αφής

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

Η τάση ξεκίνησε με την εμφάνιση του Material Design, των οδηγιών σχεδίασης της Google που υπαγορεύουν τον τρόπο εμφάνισης και εργασίας των interface τους.

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

Τι είναι;


Ο σχεδιασμός αφής δεν είναι ο ίδιος με τους σκευομορφικούς τρόπους που αποτελούσαν το πρότυπο στις αρχές του 2010. Βασίζεται περισσότερο σε επίπεδα ή σχεδόν επίπεδα στοιχεία, διατηρώντας σκιές και εφέ για να τα “ανυψώνουν” από την οθόνη.

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

Οι οδηγίες Material Design της Google παρέχουν μια καλή σύνοψη για το τι πρέπει να είναι ο σχεδιασμός αφής: «Το υλικό στηρίζεται στην απτική πραγματικότητα, εμπνευσμένη από τη μελέτη του χαρτιού και του μελανιού, αλλά τεχνολογικά προηγμένη και ανοιχτή στη φαντασία και τη μαγεία.

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

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

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

Στοιχεία Σχεδιασμού “Borderless”


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

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

Είτε αφορά την κατασκευή μιας ιστοσελίδας ή την κατασκευή ενός ηλεκτρονικού καταστήματος (e-shop) και κάθε προωθητική ενέργεια για αυτά δεν στηρίζονταιστην χρήση borderless σχεδιασμού; Η ψευδαίσθηση της απεραντοσύνης ενός κόσμου χωρίς όρια αποτελεί την γραφιστική βάση για νοητική προβολή όλων των προσπαθειών μας για διαφήμιση στο internet . Πλάθουμε ιστορίες στοχεύοντας στο συναίσθημα μέσω των εικόνων στοχεύοντας στον μεταιχμιακό εγκέφαλο στον οποίο εδράζουν τα συναισθήματα και από τον οποίο λαμβάνονται οι αποφάσεις ενώ με τον λόγο – κείμενο στοχεύουμε στο νεοφλοιό του εγκεφάλου που ενώ αυτός είναι υπεύθυνος για την γλωσσική μας ικανότητα και τον χειρισμό της αναλυτικής ορθολογικής σκέψης δεν είναι αυτός που λαμβάνει τις αποφάσεις.

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

Λόγω της ιδέας ότι το ψηφιακό και το πραγματικό είναι ένα, αυτά τα σχέδια δεν μπορούν να κλειστούν σε κουτί. Όπως και η σκέψη μας δεν πρέπει να κλείνεται σε κουτιά. Οι λύσεις τις περισσότερες φορές εξάλλουν δεν είναι out of the box ;

Multilayer Σχεδιασμοί


Ένα βασικό συστατικό της απτικής είναι η έννοια της δημιουργίας layers με σημασία. Στοιχεία που βρίσκονται πάνω από το ένα πάνω στο άλλο ή σε καμβά.

Οι περισσότεροι σχεδιαστές εφαρμόζουν αυτή την ιδέα με σκιές. Ακόμα και η Apple δοκίμασε ένα πιο απτό μοτίβο σχεδίασης με το iOS 11, το οποίο κυκλοφόρησε αρχές Σεπτεμβρίου.

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

Το Material Design χρησιμοποιεί την ίδια φιλοσοφία σχεδίασης με κουμπιά και στοιχεία UI που φαινομενικά αιωρούνται πάνω από αντικείμενα και layers, συχνά σε ένα διάστημα μεταξύ αντικειμένων και στρωμάτων. Σημειώστε το ξεχωριστό layering των αντικειμένων σε κάτι τόσο απλό όσο ένας χάρτης Google.

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

Κίνηση και Animation με Νόημα


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


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

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

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

Φωτογραφία με Λεπτομέρειες


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

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

Φυσικός Φωτισμός

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

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

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

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

Συνδυασμός όλων μαζί

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

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

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

Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 5o . Απλά homepages

  • 5 Στοιχεία-Κλειδιά του Homepage

  • Μινιμαλισμός

  • Επίπεδος/Σχεδόν Επίπεδος Σχεδιασμός

  • Ήπιο Animation

  • Όμορφη Φωτογραφία ή Βίντεο

  • Σχεδιασμός για Ανάγνωση

  • Χρήση Έντονης Γραμματοσειράς

  • Συνδυασμός όλων μαζί

 

Απλά Homepages

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

Όπως όμως λένε και οι Αμερικανοί KISS ( Keep It Simple Stupid). Επειδή το εγώ σας μπορεί να ζορίζεται με αυτή την δήλωση παρακαλώ σκεφθείτε μόνο το εξής. Αν κάποια σχεδιαστική ή λειτουργική λεπτομέρεια που προτάξατε στην ιστοσελίδα ή στο ηλεκτρονικό σας κατάστημα δεν γίνει αντιληπτή από τον υποψήφιο πελάτη – επισκέπτη θα θεωρήσει αυτός ότι αφείλεται στην δική του απειρία ή και αργοστροφία ή θα το χρεώσει ως λάθος δικό σας με προφανή αποτέλεσμα να ματαιώσετε μια πώληση; Βλέπετε τα ΕΓΩ έχουν την τάση να συγκρούονται πολλές φορές γιατί δεν έχουν την τάση να παραδέχονται ότι έσφαλλαν…

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

5 Στοιχεία-Κλειδιά του Homepage

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

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

• Κεφαλίδα: Το κύριο κείμενο που λέει στους χρήστες τι είναι ο ιστότοπός σας

• Πλοήγηση: Σύνδεσμοι σε άλλο περιεχόμενο που προσθέτει στα μηνύματα

• Λογότυπο ή branding: Βεβαιωθείτε ότι οι χρήστες γνωρίζουν ποιος κατέχει τον ιστότοπο και δημιουργήστε εμπιστοσύνη

• Οπτικό Στοιχείο: Εικόνα, βίντεο ή απεικόνιση που υποστηρίζει μηνύματα

• Διέγερση: Ένα κουμπί, φόρμα ή σύνδεσμος που δίνει στους χρήστες κάτι να κάνουν

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

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

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

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

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

Επίπεδος/Σχεδόν Επίπεδος Σχεδιασμός

 


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

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

Οι πιο αποτελεσματικές επίπεδες αρχικές σελίδες έχουν ένα κεντρικό σημείο εστίασης προς το οποίο όλα τα στοιχεία σχεδιασμού «τείνουν». Αυτό μπορεί να είναι ένα κουμπί ή μια εικόνα ή ένα στοιχείο κειμένου που ελκύει χρήστες.

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

Ήπιο Animation

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

Υπάρχουν δύο μέθοδοι για χρηση απλού animation στο homepage:

• Αυτοματοποιημένο animation, στο οποίο ένα στοιχείο μετακινείται με χρονισμένο τρόπο από μόνο του (όπως το περιστρεφόμενο κείμενο και εικόνες στην αρχική σελίδα των ετικετών Royston Labels)

Royston Labels

• Animation με κύλιση ή κλικ που ελέγχεται από τo χρήστη (όπως τα κινούμενα πολύγωνα στην αρχική σελίδα του Ditto)

Ditto

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

Όμορφη Φωτογραφία ή Βίντεο


Μια φωρογραφία (ή βίντεο) ισούται με 1000 λέξεις.

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

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

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

Η χρήση βίντεο δεν είναι τυχαία ένα από τα βασικότερα όπλα στην φαρέτρα τόσο στην διαδικασία προώθησης ιστοσελίδων όσο και σε αυτή της διαφήμισης στο internet μέσω του Google Ads (πρώην Google Adwords) , Facebook Ads και αλλού ενώ δεν είναι τυχαίο η δυναμική είσοδος του Instagram στον χώρο του βίντεο με το  IGTV που φιλοδοξεί να αποτελέσει την επόμενη γενιά στα βίντεο. Μια διαδικασία που δεν απαιτεί ιδιαίτερες τεχνικές γνώσεις αλλά μεράκι όπως και κάθετι στην ζωή όμως εξάλλου αν θέλεις τουλάχιστον να το κάνεις επιτυχημένα.

Σχεδιασμός για Ανάγνωση

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

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

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

• Το μέγεθος κειμένου είναι λίγο μεγαλύτερο από το αναμενόμενο, συχνά ξεκινώντας από 16 σημεία για το σώμα του κειμένου

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

• Τα μπλοκ κειμένου περιβάλλονται από μεγάλα διάκενα με άφθονο λευκό χώρο

• Η τυπογραφία είναι σκοτεινή σε ανοιχτό φόντο με έγχρωμο τύπο μόνο για ευδιάκριτους τόνους

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

Χρήση Έντονης Γραμματοσειράς

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


Αλλά τι κάνει την τυπογραφία έντονη?

• Η έντονη τυπογραφία δημιουργεί αντίθεση με το παρασκήνιο

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

• Η έντονη τυπογραφία μπορεί να είναι υπερμεγέθης (ή μικροσκοπική)

• Η έντονη τυπογραφία μπορεί να είναι χρωματιστή

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

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

Συνδυασμός όλων μαζί

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

Και έτσι θα έπρεπε να είναι.

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

Καταργήστε το “θόρυβο” και το μονοπάτι δράσης αποκαλύπτεται με φυσικότητα στους χρήστες. Γιατί όπως συνηθίζουμε να λέμε. Η κατασκευή ιστοσελίδων απαιτεί ολιστική προσέγγιση εκ μέρους του web designer

Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 3o . Πολυγωνικά Σχήματα και Γεωμετρικά Layers

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 3o . Πολυγωνικά Σχήματα και Γεωμετρικά Layers

Πολυγωνικά Σχήματα και Γεωμετρικά Layers στην κατασκευή ιστοσελίδων για το 2018

  • Πολύγωνα Παντού
  • Απλή Γεωμετρία
  • Οι Έντονες Γραμμές Τραβούν την Προσοχή
  • Γεωμετρικά Divots και Λεπτομέρειες
  • Εικονική Πραγματικότητα και Παιχνίδια
  • Συνδυασμός όλων μαζί

Πολυγωνικά Σχήματα και Γεωμετρικά Layers

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

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

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

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

Πολύγωνα Παντού

Anakin


Absolut

Η τάση των πολύγωνων έχει πιθανώς ρίζες στο πειραματικό τρισδιάστατο animation, την εικονική πραγματικότητα και τα παιχνίδια (όπου τα τρίγωνα χρησιμοποιούνται συχνά για τη δημιουργία και το render αντικειμένων γρήγορα). Πολυμορφικά σχήματα αποδίδουν επίσης φόρο τιμής σε μερικά από τα πιο ρετρό μοτίβα σχεδίασης που ήταν δημοφιλή και το 2017. Αυτή η τάση στην κατασκευή ιστοσελίδων είναι κυρίαρχη και στο 2018

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

Απλή Γεωμετρία


ESPN


Minus 99

Τα γεωμετρικά μοτίβα δε χρειάζεται να είναι περίπλοκα για να είναι καλαίσθητα.

Καθαρές απλές γραμμές, όπως το λοξό σχήμα που χρησιμοποιεί το ESPN για το σχεδιασμό του Body Issue, καθώς και τα πλωτά τετράγωνα από το Minus 99 παρουσιάζουν το περιεχόμενο με το κάτι παραπάνω.

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

Οι Έντονες Γραμμές Τραβούν την Προσοχή


Mountainde Dew


Bailey And French

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

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

Αυτό που κάνει κάθε ένα από αυτά τα σχέδια επιτυχές είναι οι επιλογές χρωμάτων και οι διασταυρώσεις των γραμμών. Σημειώστε πως το “X” στο site του Mountain Dew συνέρχεται σε πολύχρωμες και pixel – perfect γραμμές. Το γωνιακό τρίγωνο από Bailey & French θυμίζει τη χρυσή αναλογία και το χρώμα συμπληρώνει τη φωτογραφία για να τραβήξει πραγματικά τους χρήστες πίσω στην εικόνα. (Το πολυγραμμικό περίγραμμα συνεχίζεται επίσης κάτω από την κύλιση για να κάνει τους χρήστες να τρέχουν με το ποντίκι.)

Γεωμετρικά Divots και Λεπτομέρειες


Woodwork


Chop Chop Agency

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

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

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

Όταν εργάζεστε με μικρά πολυμορφικά σχήματα, ένα μικτό animation μπορεί να είναι ο καλύτερος φίλος του web designer. Χρησιμοποιήστε μικροσκοπικές αλληλεπιδράσεις, όπως ένα φαινόμενο hover, απαλή κίνηση ή αλλαγή σχήματος για να τραβήξετε το μάτι και να δείξετε στους χρήστες ότι πρέπει να αλληλεπιδρούν με το αντικείμενο.

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

Εικονική Πραγματικότητα και Παιχνίδια


The Musical Forest


My Most Beautiful Nightmare

Παρόλο που δεν μπορούμε να το πούμε με βεβαιότητα, φαίνεται ότι η πολυμορφική τάση έχει προκύψει ακριβώς καθώς άρχισαν να διαμορφώνονται περισσότερα σχέδια βασισμένα σε VR. Η λογική αιτία είναι μια σύνδεση μεταξύ interface και rendering. (Πολλά σχέδια 3D και VR διαθέτουν κινούμενα σχέδια με πολυ-σχήμα.)

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

Συνδυασμός όλων μαζί


Xbox Gift Card


Ditto

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

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

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

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

Όπως λέμε πάντα στην DreamWeaver.Gr. Ολιστική προσέγγιση στην διαδικασία κατασκευής μιας ιστοσελίδας. Κάτι που δεν έχει αλλάξει σε εμάς από το 2001 όταν εμφανιστήκαμε στον χώρο.

 

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 1ο Component-Based Websites

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018.

Μέρος 1ο

  Component-Based Websites φτιαγμένα με Design Systems

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

Τα design systems καθίστανται ως κάτι περισσότερο από μια τάση – είναι μια βέλτιστη πρακτική που θα εκτείνεται πολύ πέραν του 2018. Στα επόμενα χρόνια, μπορούμε να αναμένουμε βελτίωση της σχεδιαστικής συνοχής στο διαδίκτυο.

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

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

  • Ταχύτερα στην αγορά: Τα design systems δημιουργούν μια διαδικασία τύπου “Lego”, όπου όλα είναι επαναχρησιμοποιήσιμα, ελαχιστοποιώντας τον χρόνο που απαιτείται για την ανασυγκρότηση των ίδιων στοιχείων.
  • Συνεκτικό UX σε πλατφόρμες και προϊόντα: Τα τυποποιημένα στοιχεία δημιουργούν ένα πολύ πιο συνεκτικό “look and feel”.
  • Λιγότερα ζητήματα ελέγχου έκδοσης: Εάν ενημερώσετε ένα στοιχείο σε ένα design system, οι αλλαγές εφαρμόζονται σε όλες τις περιπτώσεις. Το design system είναι η τελική καταγραφή της αλήθειας.
  • Ευκολότερη συνεργασία και επικοινωνία: Τα design systems δημιουργούν μια κοινή γενική βάση γνώσεων και συστατικών στοιχείων για σχεδιαστές, PM και μηχανικούς.

Αυτός είναι ο λόγος για τον οποίο το 69% των 3157 σχεδιαστών που συμμετείχαν στην έρευνα δήλωσαν ότι δημιουργούν το δικό τους design system, αν δεν είχαν ήδη ένα.

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

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

Τι ακριβώς είναι ένα design system;

Αρχικά, ας δούμε τους ορισμούς.

  • Design System – το πλήρες σύνολο προτύπων σχεδιασμού, εγγράφων και αρχών μαζί με την εργαλειοθήκη (μοτίβα UI και στοιχεία κώδικα) για την επίτευξη αυτών των προτύπων.
  • Pattern Library – Μια υποκατηγορία στο design system, αυτό είναι το σύνολο των μοτίβων σχεδιασμού για χρήση σε μια εταιρία.
  • Οδηγός Στυλ – Μια άλλη υποκατηγορία στο design system, αυτή η στατική τεκμηρίωση περιγράφει το ίδιο το design system: πώς πρέπει να φαίνονται και να αισθάνονται τα προϊόντα, να χρησιμοποιούν περιπτώσεις για μοτίβα διεπαφής χρήστη, σωστές τυπογραφικές κλίμακες κλπ.

Σημείωση: Τα pattern library (π.χ. σύνολο συμβόλων και στοιχείων στο Sketch) και οδηγός στυλ αποτελούν απλά μέρη του πολύ πιο εύρωστου design system.

Πως συνδέονται όλα

Πρώτον, διατηρήστε ευρεία εστίαση και σκεφτείτε την ιδέα των design systems. Στο ευρύτερο επίπεδο, ένα design system είναι μια ζωντανή οντότητα που περιλαμβάνει την κοινή γλωσσολογία, τις αρχές και τα εργαλεία που βοηθούν τις ομάδες να κατασκευάζουν προϊόντα με συνοχή. Όπως λέει ο Nathan Curtis, “ένα design system δεν είναι έργο, είναι προϊόν που εξυπηρετεί προϊόντα”.

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

  • Αρχές προϊόντων – Ποιος είναι ο σκοπός και η ψυχή πίσω από όλα τα προϊόντα;
  • Γραπτό περιεχόμενο – Ποια θα έπρεπε να είναι η αίσθηση και όψη του interface του προϊόντος;

Polaris Design System του Shopify

  • Οπτικές ιδιότητες – Ποια θα έπρεπε να είναι η αίσθηση και όψη του «δέρματος» του προϊόντος;
  • Στοιχεία – Ποια είναι τα μοτίβα UI και τα στοιχεία κώδικα που απαιτούνται για τη δημιουργία προϊόντων με συνοχή σε όλες τις συσκευές;

Στην περίπτωση αυτή, το Polaris είναι το ολοκληρωμένο design system αρχών, γραπτού περιεχομένου, οπτικών ιδιοτήτων και στοιχείων. Ο οδηγός στυλ είναι απλά η στατική τεκμηρίωση στον ιστότοπο του Polaris που περιγράφει τον τρόπο χρήσης του design system. Το pattern library αποτελεί μέρος των “Στοιχείων” στο design system της Polaris.

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

Το design system τα ενώνει όλα μαζί.

Κατασκευή ενός design system

Τώρα που ξέρετε τι σημαίνουν αυτοί οι όροι και πώς συνεργάζονται, ας αναθεωρήσουμε γρήγορα πώς να οικοδομήσουμε ένα design system. Ακολουθεί μια σύντομη περίληψη του e-book μας έκτασης 50 σελίδων Δημιουργία συστήματος σχεδίασης: Η λίστα ελέγχου διεργασίας 100 σημείων.

  1. Δημιουργήστε το απόθεμα UI: Πρώτα καταγράψτε και περιγράψτε όλα τα μοτίβα σχεδιασμού που χρησιμοποιούνται στο interface σας και σημειώστε τις ασυνέπειες που υπάρχουν.

 

  1. Λάβετε υποστήριξη από τον οργανισμό: Παρουσιάστε τα ευρήματά σας και εξηγήστε τη χρησιμότητα μιας κοινής γλώσσας σχεδιασμού σε    όλους. Όπως εξηγείται στα πρότυπα μας “Evangelizing Design Systems”,    εκτιμήστε τον αριθμό των ωρών σχεδιασμού και μηχανικής που χάσατε   στην περιττή εργασία και πώς η συνοχή του προϊόντος μπορεί να βελτιώσει την τιμή του NPS.

 

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

 

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

 

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

 

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

 

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

Websites φτιαγμένα με design system

Μπορείτε να βρείτε πολλές ιστοσελίδες που περιγράφουν το design system κάθε εταιρείας.

Αλλά ποια είναι η όψη και η αίσθηση ενός ιστότοπου όταν είναι κατασκευασμένος με ένα design system; Πολύ πιο λογική, σταθερή και αποδοτική χάρη στον μικρότερο κώδικα. Φανταστείτε πόσο σημαντικό είναι αυτό για την κατασκευή ενός eshop που η σταυερότητα και λειτουργικότητα του είναι κρίσιμης σημασίας.

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

  1. GEDigital

Κατασκευασμένο με το Predix design system

  1. Shopify

Κατασκευασμένο με το Polaris design system

  1. Atlassian

Κατασκευασμένο με το Atlassian Design Guidelines

  1. MailChimp

Κατασκευασμένο με το MailChimp Design System

  1. Github

Κατασκευασμένο με το Github Design System

Συμπέρασμα

Ένα σωστά κατασκευασμένο design system είναι ένας σύγχρονος «κανόνας χρυσού» – από τα γενικά δομικά στοιχεία κάθε τμήματος σχεδίου, μέσω των μοτίβων UI και έως τους κανόνες υψηλού επιπέδου που καθορίζουν το μέλλον του προϊόντος.

Ένα design system όμως δεν είναι άκαμπτο. Πρέπει να εξελιχθεί με την εταιρεία για να αντικατοπτρίζει την πιο πρόσφατη πραγματικότητα.

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

Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.