Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018.
Μέρος 1ο
Component-Based Websites φτιαγμένα με Design Systems
Τα 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 σημείων.
- Δημιουργήστε το απόθεμα UI: Πρώτα καταγράψτε και περιγράψτε όλα τα μοτίβα σχεδιασμού που χρησιμοποιούνται στο interface σας και σημειώστε τις ασυνέπειες που υπάρχουν.
- Λάβετε υποστήριξη από τον οργανισμό: Παρουσιάστε τα ευρήματά σας και εξηγήστε τη χρησιμότητα μιας κοινής γλώσσας σχεδιασμού σε όλους. Όπως εξηγείται στα πρότυπα μας “Evangelizing Design Systems”, εκτιμήστε τον αριθμό των ωρών σχεδιασμού και μηχανικής που χάσατε στην περιττή εργασία και πώς η συνοχή του προϊόντος μπορεί να βελτιώσει την τιμή του NPS.
- Καθιέρωση αρχών σχεδιασμού: Κωδικοποιήστε τις πρακτικές σας. Τώρα αρχίζετε να εργάζεστε στον οδηγό στυλ για το designsystem.
- Κατασκευάστε την παλέτα χρωμάτων: Όταν δημιουργήσαμε το απόθεμα UI, βρήκαμε 116 διαφορετικές αποχρώσεις του γκρι που χρειαζόταν ενοποίηση. Δημιουργήστε την παλέτα και δώστε τις κατάλληλες ονομασίες.
- Δημιουργήστε την τυπογραφική κλίμακα: Μπορείτε να βελτιστοποιήσετε την κλίμακα για να εξυπηρετήσετε τα υπάρχοντα στυλ, ή να προσπαθήσετε να δημιουργήσετε μια αρμονική κλίμακα χρησιμοποιώντας τη χρυσή αναλογία ή το major second. Κατά την κατασκευή της κλίμακας, μην ξεχνάτε ότι ορίζετε όχι μόνο το μέγεθος της γραμματοσειράς αλλά και το βάρος, το ύψος γραμμής και άλλες ιδιότητες.
- Εφαρμογή βιβλιοθήκης εικονιδίων και άλλων στυλ: Αποφασίστε ποια εικονίδια από το απόθεμα UI θα γίνουν μέρος του designsystem, στη συνέχεια τυποποιήστε την εφαρμογή.
- Ξεκινήστε να δημιουργείτε τα πρώτα σας μοτίβα: Αυτή είναι η εργασία που δεν θα τελειώσει ποτέ. Τα μοτίβα πρέπει πάντα να ανακλούν την αλήθεια για το προϊόν ή να αντικατοπτρίζουν την επιθυμητή κατάσταση του προϊόντος στο εγγύς μέλλον.
Websites φτιαγμένα με design system
Μπορείτε να βρείτε πολλές ιστοσελίδες που περιγράφουν το design system κάθε εταιρείας.
Αλλά ποια είναι η όψη και η αίσθηση ενός ιστότοπου όταν είναι κατασκευασμένος με ένα design system; Πολύ πιο λογική, σταθερή και αποδοτική χάρη στον μικρότερο κώδικα. Φανταστείτε πόσο σημαντικό είναι αυτό για την κατασκευή ενός eshop που η σταυερότητα και λειτουργικότητα του είναι κρίσιμης σημασίας.
Εδώ είναι μερικές ιστοσελίδες που χτίστηκαν με τις αρχές και τα εργαλεία των μερικών από τα καλύτερα design systems που υπάρχουν.
Κατασκευασμένο με το Predix design system
Κατασκευασμένο με το Polaris design system
Κατασκευασμένο με το Atlassian Design Guidelines
Κατασκευασμένο με το MailChimp Design System
Κατασκευασμένο με το Github Design System
Συμπέρασμα
Ένα σωστά κατασκευασμένο design system είναι ένας σύγχρονος «κανόνας χρυσού» – από τα γενικά δομικά στοιχεία κάθε τμήματος σχεδίου, μέσω των μοτίβων UI και έως τους κανόνες υψηλού επιπέδου που καθορίζουν το μέλλον του προϊόντος.
Ένα design system όμως δεν είναι άκαμπτο. Πρέπει να εξελιχθεί με την εταιρεία για να αντικατοπτρίζει την πιο πρόσφατη πραγματικότητα.
Η οικοδόμηση και η διατήρηση ενός design system είναι σίγουρα μια μεγάλη πρόκληση, αλλά αξίζει και πρέπει να αντιμετωπιστεί με την δέουσα σοβαρότητα και προσοχή.
Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.
