Πώς χρησιμοποιούμε το σχεδιασμό βασισμένο σε στοιχεία

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

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

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

Ωστόσο, διαπιστώσαμε ότι ο μεταφορικός χαρακτήρας του Ατομικού Σχεδιασμού προκάλεσε κάποια σύγχυση στους πελάτες μας. Ειδικά οι αφηρημένες συμβάσεις ονοματοδοσίας μπορεί να είναι λίγο αποθαρρυντικές. Ως εκ τούτου, καθορίσαμε τη δική μας συμπεριφορά. Component Based Design, δανεισμένο σε μεγάλο βαθμό από άλλους σπουδαίους σχεδιαστές - φυσικά.

Ας σκεφτούμε: Τι είναι αυτό;

Στην ουσία, το Component Based Design είναι η πρακτική της διάσπασης του UI σε μικρότερα, πιο διαχειρίσιμα μέρη με σαφή ονόματα. Κάθε ένα από αυτά τα μέρη εμπίπτει σε μία από έξι ξεχωριστές ομάδες.

1. Ταυτότητα

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

2. Στοιχεία

Η δεύτερη ομάδα ορίζει τα μικρότερα επαναχρησιμοποιήσιμα τμήματα του έργου: στοιχεία. Μερικά γνωστά παραδείγματα στοιχείων είναι τα εξής: Κουμπιά, σύνδεσμοι, εισροές, drop-down κ.λπ. Καθένας από αυτούς ορίζεται μαζί με όλα τα κράτη τους. όπως κουμπιά αιωρήματος, εστίαση και απενεργοποίηση. Το μάντρα μας είναι: Καθορίστε μία φορά, επαναχρησιμοποιήστε σε όλο το έργο.

3. Εξαρτήματα

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

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

4. Συνθέσεις

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

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

5. Διάταξη

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

6. Σελίδες

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

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

Παράδειγμα

Ας δούμε ένα πολύ απλό παράδειγμα σχεδιασμού βασισμένου σε στοιχεία.

Πείτε ότι πωλούμε εισιτήρια σε κάποια εκδήλωση. Υπάρχουν τρία διαφορετικά εισιτήρια διαθέσιμα. Κάθε ένα από τα εισιτήρια αντιπροσωπεύεται με τον ίδιο τρόπο, με ένα περιορισμένο αριθμό στοιχείων μέσα του - στην περίπτωση αυτή ένα κουμπί και κάποιο κείμενο. Αυτό σημαίνει ότι ένα εισιτήριο πρέπει να εκπροσωπείται ως στοιχείο: το στοιχείο εισιτηρίου.

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

Δύο ημέρες μετά την έναρξη του έργου, ο πελάτης θέλει να προσθέσει κάποιο κείμενο στα εισιτήρια λέγοντας ότι είναι sold out. Αυτό σημαίνει ότι πρέπει μόνο να ενημερώσουμε το στοιχείο εισιτηρίων και να το στείλουμε στους προγραμματιστές. Γρήγορα ως κρίκετ!

Διαβάστε περισσότερα: Πώς σχεδιάζουμε σύνθετα συστήματα που χρησιμοποιούν Component Based Design.

Σκίτσο

Δεν είναι μυστικό ότι το Sketch έγινε γρήγορα η εφαρμογή go-to για σχεδιασμό UI και UX. Η χρήση των στυλ κειμένου, των συμβόλων και των πινάκων τέχνης του Sketch μας επέτρεψε να ρυθμίσουμε εξαιρετικά τη ροή εργασίας του Component Based Design. Αναπτύξαμε ένα θαυμάσιο πρότυπο Sketch που ενσωματώνει όλες αυτές τις αρχές, ώστε να ξεκινήσουμε γρήγορα ένα έργο γρήγορα.

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

Τυλίγοντας

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

Εάν σας άρεσε αυτό, παρακαλώ σκεφτείτε να μοιραστείτε αυτό το άρθρο - βοηθά πραγματικά!

Ακολουθήστε τα σχέδια που βασίζονται στα συστατικά μας στο Dribbble.
Έμπνευση και πίσω από τα σκηνικά του Instagram & Twitter.

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