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

Δημιουργία ενός επώνυμη ταυτότητα δεν είναι εύκολο έργο. Απαιτεί σκληρή προσπάθεια, αλλά είναι επίσης ένα από τα πιο ικανοποιητικά δημιουργικά καθήκοντα. Web projects συχνά mix branding με σχεδιασμό διεπαφών. Αυτό μπορεί να προκαλέσει σύγχυση, επειδή υπάρχουν τόσα πολλά να κάνουμε και στις δύο περιοχές. Οδηγούς στυλ και στυλ πλακάκια είναι σπουδαίοι πόροι για τους σχεδιαστές ιστοσελίδων και, ενώ κάνουν ήχο παρόμοιο, επιτελούν δύο διαφορετικές εργασίες.

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

Οδηγούς στυλ για τον Ιστό

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

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

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

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

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

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

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

Η βιβλιοθήκη μοτίβου του MailChimp είναι ένα από τα καλύτερα παραδείγματα που μπορείτε να βρείτε στο StyleGuides.io. Είναι ένας σε απευθείας σύνδεση οδηγός στυλ ότι ορίζει το πλέγμα, την τυπογραφία και τα στοιχεία σελίδας του MailChimp.

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

Για να μάθετε περισσότερα σχετικά με το θέμα, δείτε αυτές τις άλλες δημοσιεύσεις στους οδηγούς στυλ:

• Οδηγός στυλ πρόσοψης (24ways.org)
• Δημιουργήστε έναν οδηγό στυλ ιστότοπου (creativebloq.com)
• Πώς να κάνετε τον τέλειο οδηγό στυλ Web Design (dtelepathy.com)

Διακλάδωση σε πλακάκια στυλ

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

Η ιστοσελίδα του Style Tiles δημιουργήθηκε από τη Samantha Warren και έχει όλα όσα θα χρειαστεί να μάθετε. Υπάρχει κανένα συγκεκριμένο πρότυπο για το σχεδιασμό ενός κεραμιδιού στυλ. Αλλά τα παραδείγματα της Samantha χρησιμοποιούν επικεφαλίδες και τύπους παραγράφων, συνδέσμους, μοτίβα, και πιθανές επιλογές χρωμάτων μαζί με ένα επώνυμο λογότυπο.

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

Τα πλακάκια πρέπει να είναι αρκετά λεπτομερή ώστε να δίνουν μια αίσθηση του την ταυτότητα και τη διάθεση της ιστοσελίδας. Η Samantha ενθαρρύνει χρησιμοποιώντας επίθετα για να περιγράψετε λεπτομερώς κάθε κεραμίδι.

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

Εδώ είναι ένα μεγάλο απόσπασμα από την ιστοσελίδα πλακάκια στυλ:

Η σύγκριση των πλακιδίων στυλ με τα εργαλεία του εσωτερικού σχεδιαστή είναι αρκετά η κατάλληλη αναλογία. Δεν θέλετε να ρίξετε προσπάθεια σε ένα pixel-τέλειο mockup μόνο για να έχει ο πελάτης συνειδητοποιήσει ότι μισούν τα περισσότερα από τα χρώματα και τις γραμματοσειρές.

Αντ 'αυτού, χρησιμοποιήστε πλακάκια στυλ για να βρείτε ένα κοινό θέμα ή οπτική γλώσσα για χρήση σε ολόκληρο τον ιστότοπο. Αυτό μπορεί να περιλαμβάνει branding / ταυτότητα αλλά μπορεί επίσης να περιλαμβάνει UI χαρακτηριστικά, όπως τα αναπτυσσόμενα μενού ή τα κουμπιά CTA.

Θα πρέπει να τα χρησιμοποιήσετε ως παράδοση περιουσιακών στοιχείων νωρίς στη διαδικασία. Μόλις ολοκληρώσετε ένα πλήρες mockup, δεν υπάρχει λόγος να αναφέρετε πάλι το πλακάκι στυλ. Παρ 'όλα αυτά στην αρχή, τα πλακάκια στυλ μπορεί να είναι ζωτικής σημασίας για τη δημιουργική διαδικασία από εξοικονομώντας χρόνο σχεδιαστή και παρέχοντας στον πελάτη πολλές επιλογές από τις οποίες μπορείτε να επιλέξετε.

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

• Πλακάκια στυλ και πώς λειτουργούν
• Πλακάκια στυλ: μια εναλλακτική λύση για το πλήρες σχέδιο Comps
• Δημιουργία πλακιδίων στυλ: μια εύκολη προσέγγιση σε μια κατεύθυνση σχεδιασμού

Οδηγός στυλ εναντίον πλακιδίων στυλ

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

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

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

Έτσι ποιο πρέπει να χρησιμοποιήσετε; Τελικά εξαρτάται από το έργο.

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

Ωστόσο, α μεγάλο έργο όπως ο επανασχεδιασμός των Times της Νέας Υόρκης θα επωφεληθούν από τα πλακάκια στυλ και τους οδηγούς στυλ.

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

Μπορείτε επίσης να πάρετε από χωρίς να δημιουργηθεί κανένα από αυτά τα περιουσιακά στοιχεία. Μερικοί σχεδιαστές πάνε από τα καλώδια προς το λεπτομερείς mockups. Και μερικοί πελάτες δεν θέλουν καν έναν οδηγό στυλ επειδή δεν θα συνηθίσουν.

Εργαστείτε σε βάση ανά έργο και αποφασίστε τι είναι καλύτερο για κάθε μία.

Ζωντανά παραδείγματα

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

Οδηγούς στυλ

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

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

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

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

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

Ο σχεδιαστής του UI Greg Dlubacz μοιράστηκε τον δικό του οδηγό στυλ UI για ένα web project. Αυτό το πράγμα είναι πολύ μεγάλο. Η προεπισκόπηση πλήρους οθόνης εκτείνεται σε 21.000 pixels!

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

Πλακάκια στυλ

Ο σχεδιαστής UI / UX Abdus Salam δημιούργησε αυτό το πλακάκι στυλ για έναν ιστότοπο βιολογικών καταστημάτων τροφίμων. Είναι πολύ βασικό με επίπεδη στοιχεία σχεδιασμού, μερικά δευτερεύοντα χαρακτηριστικά UI, και ένα παλέτα χρωμάτων.

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

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

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

Εάν μπορείτε να πάρετε μια αίσθηση για το τι μπορεί να μοιάζει με τον ιστότοπο με μια ματιά τότε το κάνετε σωστά.

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

Τελικές λέξεις

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