Dev log

Dark-mode tokens που δεν διαλύονται σε έναν χρόνο

Το dark mode είναι εύκολο να το βγάλεις στον αέρα και εκπληκτικά δύσκολο να το κρατήσεις συνεκτικό. Να ο κανόνας των πέντε tokens που χρησιμοποιώ στο AllCars.cy και κρατάει τις νέες οθόνες να δείχνουν σαν τις παλιές, ακόμα και μετά από έναν χρόνο μικρών προσθηκών.

Κάθε dark-mode UI φαίνεται τέλειο στο version one. Στον έκτο μήνα κάποιος προσθέτει μια οθόνη με ελαφρώς διαφορετικό γκρι. Στον ένατο μήνα υπάρχει ένα κιτρινωπό accent σε μια κάρτα feature και ένα ξεχωριστό κόκκινο σε ένα alert που δεν συμφωνεί ακριβώς με το κόκκινο σε ένα κουμπί. Στο τέλος του χρόνου έχεις moodboard, όχι προϊόν.

Έχω ξανασχεδιάσει το surface του AllCars αρκετές φορές. Κάθε φορά συνέβαινε το ίδιο drift. Η λύση δεν ήταν ταλέντο ή γούστο — ήταν περιορισμοί.

Πέντε surfaces, ένα accent, τέλος συζήτησης

Αυτή είναι όλη η παλέτα για backgrounds και cards. Πέντε βήματα από την ίδια τη σελίδα μέχρι το πιο ψηλό container. Οτιδήποτε χρειάζεται βάθος επιλέγει ένα από τα πέντε. Οτιδήποτε δεν χωράει σε ένα από τα πέντε ξαναδουλεύεται μέχρι να χωρέσει. Μόνο αυτό σκοτώνει το 80% του drift.

Ένα accent — ένα lime green που έχεις δει παντού σε αυτόν τον ιστότοπο — για τα πράγματα που πρέπει να προσέξεις. Ένα warning, ένα error. Αυτό είναι. Οι νέες οθόνες δεν επινοούν χρώματα. Οι νέοι developers δεν χρειάζεται να μαντέψουν. Οι designers σταματούν να συζητούν για γκρι.

Γιατί αυτό βρίσκεται σε ένα blog για αυτοκίνητα

Επειδή η εμφάνιση του AllCars είναι μέρος της εμπιστοσύνης. Αν το badge του deal score αλλάζανε ανάμεσα σε πέντε διαφορετικά πράσινα ανάλογα με την οθόνη, υποσυνείδητα θα αναρωτιόσουν ποιο να πιστέψεις. Η βαρετή συνέπεια στο UI είναι αυτό που αφήνει το πραγματικό περιεχόμενο — τις αγγελίες, τις τιμές, το score — να είναι αυτό στο οποίο εστιάζεις.

Το token-based design είναι αδιάφορο και παλιό, και μία από τις λίγες αποφάσεις που δεν μετανιώνεις έναν χρόνο μετά.