Σχεδιασμός ενός οδηγού στυλ: στοιχεία που εντάσσονται στη δημιουργία συναρπαστικών προϊόντων

Αν κοιτάξετε εταιρείες όπως το Dropbox, το Google και το Twitter, θα παρατηρήσετε ότι η καθεμία έχει τη δική της μοναδική αισθητική. Σε όλα τα προϊόντα τους, τόσο για κινητά όσο και για web, υπάρχει μια αίσθηση συνέπειας και ομοιομορφίας στο σχεδιασμό τους.

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

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

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

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

Πριν ξεκινήσουμε…

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

  • Σχεδιάστε πρώτα το προϊόν σας και, στη συνέχεια, δημιουργήστε έναν οδηγό στυλ. Μην ξεκινήσετε δημιουργώντας έναν οδηγό στυλ. Πρώτα μάθετε τι λειτουργεί και τι δεν λειτουργεί. Τότε τυποποιήστε το.
  • Ποτέ δεν θα είστε απόλυτα ικανοποιημένοι με τον οδηγό στυλ σας. Είναι εντάξει. Η δημιουργία μιας καθολικής γλώσσας σχεδιασμού είναι μια επαναληπτική διαδικασία.
  • Έχετε καλή κατανόηση της φωνής και του μηνύματος που θέλετε να μεταδώσει το προϊόν σας πριν γράψετε έναν οδηγό στυλ.

Αρχές

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

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

Ας ρίξουμε μια ματιά στις Οδηγίες Ανθρώπινης Διασύνδεσης της Apple, οι οποίες έχουν μια ενότητα σχετικά με τις αρχές σχεδιασμού. Μία από τις αρχές τους είναι ο άμεσος χειρισμός .

Ο άμεσος χειρισμός του περιεχομένου στην οθόνη προσελκύει τους ανθρώπους και διευκολύνει την κατανόηση… Μέσω της άμεσης χειραγώγησης, μπορούν να δουν τα άμεσα, ορατά αποτελέσματα των ενεργειών τους.

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

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

Για περισσότερες πληροφορίες σχετικά με τις αρχές σχεδίασης, ανατρέξτε στο άρθρο του Matter of Principle της Julie Zhuo. Έχει επηρεάσει σε μεγάλο βαθμό το πώς σκέφτομαι τις αρχές του σχεδιασμού.

Τυπογραφία

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

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

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

Εάν αντιμετωπίζετε προβλήματα με τη συλλογή γραμματοσειρών, δείτε το Typewolf και το FontPair. Για το μέγεθος της γραμματοσειράς δείτε το Modular Scale και το συνοδευτικό του άρθρο.

Λάβετε επίσης υπόψη ότι οι γραμματοσειρές δεν είναι πετρόχτιστες. Μπορείτε πάντα να τα αλλάξετε αργότερα.

Εικόνες

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

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

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

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

Ακολουθεί ένα παράδειγμα του στυλ οδηγού εικόνων του Hubspot.

Παρατηρήστε πώς περιγράφουν τον τόνο και τον στόχο της φωτογραφίας πριν δώσετε παραδείγματα.

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

Πλέγματα και διαστήματα

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

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

For reading on grids, see A guide to creating grid systems that are built around your content as a primer. And follow it up with Modular Design For Grids.

Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.

Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into Sass variables.

For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:

$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;

Color

Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.

Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.

Όπως το θέτει ο Buffer στον οδηγό στυλ τους:

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

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

$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;

Παρατηρήστε πώς ο Buffer χρησιμοποιεί το πρωτογενές χρώμα αντί για ένα όνομα όπως το brandBlue . Επιλέξτε ονόματα που περιγράφουν το ρόλο του χρώματος αντί του ίδιου του χρώματος. Αυτή η προσέγγιση διευκολύνει τόσο τους σχεδιαστές όσο και τους μηχανικούς να προσαρμόσουν τις χρωματικές τους τιμές χωρίς να χρειάζεται να αλλάξουν το όνομα.

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

Συστατικά

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

If you enjoyed this article, you might enjoy Photos and stories from a designer.

Photos and stories from a designer

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

Μπορείτε να με βρείτε στο Medium όπου δημοσιεύω κάθε εβδομάδα. Εναλλακτικά, μπορείτε να με ακολουθήσετε στο Twitter, όπου δημοσιεύω μη λογικές συζητήσεις σχετικά με το σχεδιασμό, την ανάπτυξη front-end και την εικονική πραγματικότητα.

PS Αν σας άρεσε αυτό το άρθρο, θα σήμαινε πολλά αν κάνετε κλικ στο? και μοιραστείτε με φίλους.