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

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

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

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

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

"Τα στυλ έρχονται και πηγαίνουν. Ο καλός σχεδιασμός είναι μια γλώσσα, όχι ένα ύφος. "-Massimo Vignelli

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

Εισαγωγή στο σύστημα σχεδιασμού μας - QUIK

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

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

Και με αυτό, ξεκινήσαμε να δημιουργούμε το νέο μας σύστημα σχεδιασμού, το οποίο ονομαζόταν QUIK - Qstream User Interface Kit.

Βήμα 1: Αντιφάσεις

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

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

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

Ένα απόσπασμα του Ελέγχου UI που καταβάλλει την ασυνέπεια μεταξύ του UI των πλατφορμών.

Βήμα 2: Δημιουργία των στοιχείων

Καταρρίψαμε το σύστημά μας σε 3 διαφορετικές οντότητες.

  1. Μάρκα - Η ταυτότητα του σήματος ενός προϊόντος αποτελείται από βασικά στοιχεία που δημιουργούν την οπτική ταυτότητα. Τα χρώματα, η τυπογραφία και η εικονογραφία είναι βασικά για κάθε πλατφόρμα.
  2. Στοιχεία - Τα Στοιχεία αποτελούνται από τα μικρότερα επαναχρησιμοποιούμενα μέρη του συστήματος. Αυτά τα στοιχεία ανακυκλώνονται συνεχώς σε όλες τις περιοχές του συστήματος. (Κουμπιά, είσοδοι)
  3. Συστατικά - Ένα στοιχείο είναι μια συλλογή στοιχείων, τα οποία χρησιμοποιούνται συνήθως παράλληλα μεταξύ τους για τον εντοπισμό ενός κοινού σχεδίου μέσα σε μια ροή. (Ειδοποιήσεις, πίνακες, κάρτες κ.λπ.)

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

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

Μια επισκόπηση των οφθαλμών των πτηνών ολόκληρου του Συστήματός μας μέχρι σήμερα.

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

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

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

Βήμα 3: Εφαρμογή

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

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

"Ένα σύστημα σχεδιασμού δεν είναι έργο. Είναι προϊόν που εξυπηρετεί προϊόντα "- Nathan Curtis

Συγκέντρωση των Συστημάτων

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

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

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

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

Προχωράμε μπροστά

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

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

// Twitter // Dribbble // Behance // Τοποθεσία χαρτοφυλακίου //