Ιεραρχία
Το Spaceship Design System είναι δομημένο σε επίπεδα, το καθένα προσθέτει σαφήνεια, δομή και σκοπό. Αυτά σχηματίζουν μια ιεραρχία που καθοδηγεί τον τρόπο με τον οποίο σχεδιάζουμε, κατασκευάζουμε και αναπτύσσουμε προϊόντα — από τη μικρότερη οπτική απόφαση έως το ευρύτερο ταξίδι του χρήστη.
Ακολουθώντας τις αρχές του Atomic Design, έχουμε οργανώσει τους βασικούς μας πόρους στις παρακάτω κατηγορίες, ώστε να είναι πιο εύχρηστοι για όλες τις ομάδες.
Foundations
Ορίζουν τους βασικούς κανόνες της οπτικής μας γλώσσας — χρώματα, τυπογραφία, αποστάσεις, πλέγματα, κίνηση και tokens. Μας προσφέρουν μια συνεπή βάση για να εργαζόμαστε.
Components
Δίνουν ζωή στους βασικούς κανόνες μέσα από επαναχρησιμοποιήσιμα στοιχεία διεπαφής που λύνουν καθημερινά προβλήματα σχεδιασμού.
Templates
Δείχνουν πώς τα components και τα patterns συνεργάζονται μέσα στο εκάστοτε περιβάλλον, παρέχοντας έτοιμες δομές για ολοκληρωμένες σελίδες και εμπειρίες.
Patterns
Αποτυπώνουν αποδεδειγμένες λύσεις και βέλτιστες πρακτικές, διασφαλίζοντας ότι η δουλειά μας παραμένει συνεπής, προσβάσιμη και προσανατολισμένη στον χρήστη σε κάθε σημείο επαφής.
Foundations
Τα βασικά άτομα του Spaceship Design System. Ορίζουν τους οπτικούς και δομικούς κανόνες πάνω στους οποίους βασίζεται κάθε component και pattern.
Color
Ορίζει παλέτες επωνυμίας και λειτουργικές παλέτες που εξασφαλίζουν αρμονία, προσβασιμότητα και ευελιξία σε όλα τα προϊόντα.
Typography
Καθιερώνει ιεραρχία και σαφήνεια με μια κλίμακα τυπογραφίας που κάνει το περιεχόμενο εύκολο στην ανάγνωση και τη σάρωση.
Spacing
Παρέχει μια συστηματική κλίμακα για περιθώρια, εσωτερικά περιθώρια και ρυθμό διάταξης, ώστε να διατηρούνται συνεπείς διεπαφές.
Grids
Δημιουργεί αποκρινόμενες διατάξεις που προσαρμόζονται σε όλες τις συσκευές, διατηρώντας παράλληλα τη δομή και τη στοίχιση..
Motion
Χρησιμοποιεί μεταβάσεις και κινούμενα σχέδια για να κατευθύνει την προσοχή, να επικοινωνεί την κατάσταση και να κάνει τις αλληλεπιδράσεις να φαίνονται φυσικές.
Design Tokens
Μετατρέπουν τις θεμελιώδεις τιμές σε κώδικα, λειτουργώντας ως μοναδική πηγή αλήθειας και διευκολύνοντας παράλληλα τις γρήγορες και εύκολες ενημερώσεις.
Οι σαφείς βάσεις σημαίνουν λιγότερα εμπόδια, μεγαλύτερη συμπερίληψη και περισσότερο χρόνο αφιερωμένο στην επίλυση πραγματικών προβλημάτων αντί να ξεκινάμε από το μηδέν.
Στοιχεία
Αυτά είναι τα επαναχρησιμοποιήσιμα στοιχεία του Spaceship Design System. Το καθένα λύνει ένα συγκεκριμένο πρόβλημα διεπαφής — από κουμπιά και πεδία εισαγωγής έως πλοήγηση και μηνύματα ανατροφοδότησης. Κάθε στοιχείο είναι προσβάσιμο, προσαρμόσιμο και εύκολα προσαρμόζεται σε διαφορετικά περιβάλλοντα ή συσκευές.
Τα επαναχρησιμοποιήσιμα στοιχεία διασφαλίζουν ότι κάθε προϊόν που δημιουργούμε κυκλοφορεί ταχύτερα και συνδέεται με τη συνολική εικόνα.
Πρότυπα
Τα πρότυπα είναι η γέφυρα ανάμεσα στα δομικά στοιχεία και την εμπειρία χρήστη. Συνδυάζουν foundations και components σε πλήρη περιβάλλοντα σελίδων, δείχνοντας πώς λειτουργεί το σύστημα στην πράξη.
Product Page Templates
Δομές σελίδων υψηλού επιπέδου για landing και σελίδες προϊόντων, όπου οι σχεδιαστές κυρίως ενημερώνουν το περιεχόμενο και προσαρμόζουν τα modules ώστε να ταιριάζουν σε κάθε περιβάλλον.
Shareable components
Πιο σύνθετες, επαναχρησιμοποιήσιμες δομές, όπως πίνακες σύγκρισης ή κάρτες τιμολόγησης, έχουν σχεδιαστεί ώστε να διαχειρίζονται συγκεκριμένα σενάρια με συνέπεια σε όλα τα προϊόντα.
Με έτοιμες δομές ως αφετηρία, οι ομάδες μπορούν να εστιάζουν λιγότερο στις αποφάσεις διάταξης και περισσότερο στην κάλυψη πραγματικών αναγκών των χρηστών.
Μοτίβα
Τα μοτίβα αποτυπώνουν όσα έχουμε μάθει από δοκιμές, ανατροφοδότηση και χρήση στον πραγματικό κόσμο, μετατρέποντάς τα σε επαναχρησιμοποιήσιμες, τυποποιημένες λύσεις. Κάθε μοτίβο βασίζεται στην πρόθεση του χρήστη, είτε πρόκειται για την απλοποίηση της διαδικασίας checkout, τη διαχείριση σφαλμάτων ή την καθοδήγηση των χρηστών μέσα από φόρμες.
Ορίζοντας αποδεδειγμένες λύσεις, τα μοτίβα κάνουν τη δουλειά μας ουσιαστική, διασφαλίζοντας ότι κάθε εμπειρία δεν είναι απλώς λειτουργική αλλά και προσεκτικά σχεδιασμένη.