Δημιουργία γλώσσας συστήματος σχεδιασμού

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

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

Γιατί λοιπόν χρειαζόμαστε μια γλώσσα σχεδιασμού;

Υπάρχουν δύο τρόποι να το εξετάσουμε, από εσωτερική και εξωτερική προοπτική.

Εσωτερικός

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

Εξωτερικός

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

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

Μια επιτυχημένη γλώσσα σχεδίασης θα:

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

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

Η οικοδόμηση των θεμελίων

Αρχές σχεδιασμού

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

Ο τόνος της φωνής

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

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

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

Οπτική ταυτότητα

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

Χρώματα: Ποια είναι η παλέτα χρωμάτων που χρησιμοποιείται στην πλατφόρμα; Εξηγήστε πώς, πού και γιατί χρησιμοποιούμε ορισμένα χρώματα.
Τυπογραφία: Τι τύπος γραμματοσειράς χρησιμοποιείται στην πλατφόρμα; Συγκεντρώνει τους κανόνες σχετικά με τη στάθμιση, το μέγεθος, την κάθετη ευθυγράμμιση κ.λπ .;
Εικονογραφία: Ποιο είναι το γενικό στυλ για εικονίδια; Θα εξηγήσει το λογικό για το λόγο που έχουμε συγκεκριμένα στυλ για διαφορετικές οικογένειες εικονιδίων.
Πλέγμα / Διάταξη: Τι σύστημα πλέγματος χρησιμοποιείται σε όλη την πλατφόρμα; Εξηγήστε τη χρήση του δικτύου και τον ιδεαλισμό υψηλού επιπέδου των σχεδίων μας.
Αλληλεπιδράσεις: Τι προσδοκούν οι άνθρωποι να δουν όταν αλληλεπιδρούν με τον ιστότοπό μας; Δώστε μια γενική εικόνα των τυποποιημένων αλληλεπιδράσεών μας.
Animations: Πώς προσεγγίζουμε κινούμενα σχέδια; Εξηγήστε τους λόγους για τα κινούμενα σχέδια στην πλατφόρμα και τους περιορισμούς μας γύρω από τη χρήση τους.
Σχεδιασμός πόρων: Ένα κεντρικό σημείο για τα στοιχεία που μπορούν εύκολα να μεταφορτωθούν για εξωτερικούς συνεργάτες. Χρωματικά δείγματα, λογότυπα, σύνολα εικονιδίων κτλ.

Τα επόμενα βήματα

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

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

Κάνετε έναν έλεγχο απογραφής UI

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

Ένα παράδειγμα ενός ελέγχου UI

Προσδιορίστε τα στοιχεία σας στο UI

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

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

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

Ξεκινήστε τις συζητήσεις με την ομάδα σχεδιασμού

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

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

Εγγράψτε όλες τις παρουσίες

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

Παράδειγμα χρήσης χρώματος.

Δείτε αν λειτουργεί

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

Κλείστε το

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

Μεταβείτε στο επόμενο στοιχείο

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

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

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

Πώς να μετρήσετε την επιτυχία

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

Παραδείγματα γλωσσών σχεδιασμού

Επίσης, εδώ είναι μια μελέτη περίπτωσης που δημιούργησα για μια πρόσφατη γενική επισκευή του σχεδίου στην οποία συμμετείχα: https://www.behance.net/gallery/34224289/Ryanair-Design-Centre

Η μεγαλύτερη υπαρξιακή απειλή για οποιοδήποτε σύστημα είναι η παραμέληση

Alex Schleifer, Αντιπρόεδρος της Design στο Airbnb

[- Αυτό το άρθρο ήταν αρχικά δημοσιευμένο στο Medium . -]

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