Σχεδιασμένο για ανάπτυξη

Εικονογράφηση από τη Naomi Wilkinson
Οι εταιρείες τεχνολογίας αναμένεται να κινούνται με απίστευτο ρυθμό και το λογισμικό κατασκευής είναι περίπλοκο.

Ο Alex Schleifer, VP της Design στο Airbnb, έγραψε αυτές τις λέξεις στο άρθρο του, The Way We Build. Είναι μια θαυμάσια διαβεβαίωση για το πώς η Airbnb επανεξέτασε την προσέγγισή τους στο σχεδιασμό.

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

Αντιμετώπιση του χρέους

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

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

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

Μας επιβραδύνει πολύ.

Παρακάτω είναι μια διαφορά του έργου της Jessica Harllee όταν ενημερώνει το στυλ των κουμπιών στο etsy.com. Το κόκκινο είναι ο κώδικας που έχει διαγραφεί και το πράσινο είναι ο κώδικας που έχει γραφτεί. Έχει αγγιχτεί πάρα πολύς κώδικας για να γίνει μια απλή οπτική αλλαγή.

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

Σχεδιαστικά Συστήματα

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

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

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

Το Atomic Design είναι ένα βιβλίο που γράφτηκε από τον Brad Frost. Η ιδέα σας προκαλεί να σκεφτείτε το UI σας με τις πιο στοιχειώδεις μορφές ή "άτομα". Τα άτομα μπορούν να συναρμολογηθούν με οποιονδήποτε τρόπο για να δημιουργήσουν οτιδήποτε. Αυτό διατηρεί συνεκτικότητα επιτρέποντας ταυτόχρονα ευελιξία σε κάθε περίπτωση χρήσης.

Το Αντικειμενοστρεφές CSS ή το OOCSS αλλάζει τον τρόπο με τον οποίο γράφετε το CSS. Θεωρητικά, είναι παρόμοιο με το Atomic Design. Είναι μια ευέλικτη λύση για τη σύνταξη ελάχιστου αλλά επαναχρησιμοποιούμενου CSS. Έχει δύο βασικές αρχές: ξεχωριστή δομή από το θέμα και τα δοχεία από το περιεχόμενο.

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

Τα Design Tokens προσθέτουν ένα άλλο επίπεδο αφαίρεσης για την εύκολη τροποποίηση των μεταβλητών. Αντί να χρησιμοποιήσετε μια μεταβλητή όπως το $ πορτοκαλί για να προσθέσετε χρώμα σε ένα κουμπί, χρησιμοποιείτε ένα συμβολικό σχεδιασμό όπως το $ primary-button-background. Στη συνέχεια, σε ένα ξεχωριστό αρχείο tokens, το $ primary-button-background αναφέρει $ πορτοκαλί και $ πορτοκαλί αναφορές στο χρώμα hex.

Ο σχεδιασμός όλων είναι σχεδιασμός συστημάτων

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

Αλλά τι συμβαίνει όταν το σύστημα βρίσκεται σε έλλειψη και η διαμόρφωση είναι απαραίτητη; Αυτή είναι η εναλλαγή των παραδειγμάτων.

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

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

Τα οφέλη της ύπαρξης χρέους

Παρόλο που είμαστε πολύ μακριά από την απαλλαγή από το σχεδιαστικό χρέος, έχουμε ήδη αισθανθεί τα οφέλη από την εργασία που έχει γίνει. Κατά τη διάρκεια του καλοκαιριού, επανασχεδιάσαμε το εργαλείο convos που επιτρέπει στους αγοραστές και τους πωλητές να επικοινωνούν μεταξύ τους. Ήταν ένα αρχαίο εργαλείο που είχε πολλαπλά πρότυπα για επιτραπέζιους και κινητούς ιστούς που χρησιμοποιούσαν διαφορετικό κώδικα με διαφορετικές επεξεργασίες σχεδίασης. Ο επανασχεδιασμός κατασκευάστηκε εξ 'ολοκλήρου χρησιμοποιώντας το εργαλείο μας στο διαδίκτυο. Είναι ευαίσθητο, προσβάσιμο και συνεπές - όλα τα οφέλη που κληρονομούνται δωρεάν από το σετ εργαλείων μας. Ήταν επίσης εξαιρετικά γρήγορο να χτίσεις. Από το ξεκίνημα μέχρι την έναρξη, χρειάστηκαν 8 εβδομάδες για να επανασχεδιαστεί και να ξαναχτιστεί το προϊόν.

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