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

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

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

1. Παραδείγματα ταυτότητας επωνυμίας

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

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

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

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

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

βόλτα

2. Κατευθυντήριες γραμμές σχεδιασμού

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

Γιατί ο σχεδιασμός φαίνεται και λειτουργεί με κάποιο τρόπο; Ποια είναι η φιλοσοφία πίσω από αυτό;

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

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

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

netflix

3. Φωνή και προσωπικότητα

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

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

Αυτό θα σας εντοπίσει ο εξωτερικός κόσμος.

Επιπλέον, η ισχυρή φωνή και η προσωπικότητα γίνεται μέρος της οπτικής ταυτότητας. Μια καλή προσωπικότητα εμφανίζεται στα στοιχεία σχεδιασμού, επειδή οι χρήστες μπορούν σχεδόν να ταυτοποιήσουν τα στοιχεία του σχεδιασμού ακόμη και εκτός του περιεχομένου του υπόλοιπου σήματος. (Σκεφτείτε το κόκκινο Coca-Cola ή το τυπογραφικό σημάδι της υπογραφής της Disney.)

φωνή

4. Λέξεις-κλειδιά SEO

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

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

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

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

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

αστικός

5. Στυλ μοτίβων και στοιχείων

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

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

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

ollo

6. Αποσπάσματα κώδικα

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

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

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

firefox

συμπέρασμα

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

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