Εταιρική ταυτότητα: λογότυπο, χρώματα, γραμματοσειρές και μενού

Ενότητα 4: Σελίδες, εμφάνιση και λειτουργίες · Χρόνος ανάγνωσης: 8 λεπτά

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

Βασικές έννοιες: εταιρική ταυτότητα, στυλ (look), λογότυπο, σύμβολο λογοτύπου, λεκτικό λογότυπο, favicon, μπάρα μενού, κύριο χρώμα, αντίθεση, λόγος αντίθεσης, WCAG, άδεια χρήσης για web, σκοτεινή λειτουργία, κίνηση

Γιατί η εταιρική ταυτότητα είναι κάτι περισσότερο από ωραία εμφάνιση

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

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

Το πάνελ έχει τα εξής τμήματα: Στυλ, Χρώματα, Γραμματοσειρές, Μπάρα μενού, Όνομα και λογότυπο, Εικόνες, Σχήμα και αποστάσεις, Γραφή και μεγέθη, Σκοτεινή λειτουργία και Κίνηση.

Όνομα, λογότυπο και favicon

Στο Όνομα και λογότυπο βρίσκεται το όνομα του site σας, όπως εμφανίζεται στην κεφαλίδα και στο υποσέλιδο. Από κάτω βρίσκεται το λογότυπο:

• Ανεβάστε το δικό σας λογότυπο: PNG με διάφανο φόντο, SVG, JPG ή WebP, έως 2 MB. Ένα οριζόντιο λογότυπο ταιριάζει καλύτερα σε μπάρα μενού.
• Αν δεν έχετε λογότυπο, ο AI Builder έχει δημιουργήσει ένα λεκτικό λογότυπο: το όνομά σας με τη δική σας γραμματοσειρά και τα δικά σας χρώματα. Προσαρμόζεται αυτόματα όταν τα αλλάζετε.
• Αφήστε το AI να σχεδιάσει ένα λογότυπο: περιγράφετε σύντομα την επιχείρησή σας και την ατμόσφαιρα ("ελαιοχρωματιστές σε χωριό, παραδοσιακή τέχνη και αξιοπιστία") και κάνετε κλικ στο Σχεδιασμός τριών λογοτύπων. Λαμβάνετε τρία σύμβολα λογοτύπου (ένα σήμα χωρίς κείμενο) στα χρώματά σας, με το όνομά σας δίπλα στη γραμματοσειρά σας. Όλα μαζί κοστίζουν 1 επεξεργασία. Επιλέξτε ένα με τη Χρήση ή γράψτε τι μπορεί να βελτιωθεί ("το πρώτο, αλλά πιο στρογγυλό") και κάντε κλικ στο Σχεδιασμός τριών νέων λογοτύπων· αυτό είναι ένας ακόμη γύρος των 1 επεξεργασίας.
• Εμφάνιση σε μενού και υποσέλιδο: Λογότυπο και όνομα, Μόνο λογότυπο ή Μόνο όνομα, καθώς και το Μέγεθος (Μικρό, Κανονικό, Μεγάλο).

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

Ελέγξτε μόνοι σας ένα λογότυπο που δημιούργησε το AI: μήπως μοιάζει υπερβολικά με το λογότυπο άλλης επιχείρησης;

Το favicon είναι το μικρό εικονίδιο στην καρτέλα του browser και στους σελιδοδείκτες. Επιλέξτε Αυτόματα: αρχικό γράμμα στα χρώματά σας, Το λογότυπό σας ή Δικό σας αρχείο (τετράγωνο, PNG, SVG ή ICO, έως 512 KB).

Στυλ και μπάρα μενού

Ένα στυλ (στον AI Builder και look) καθορίζει με ένα κλικ γραμματοσειρές, σχήματα, κουμπιά, κάρτες, μενού και διακόσμηση. Υπάρχουν δώδεκα, όπως Φρέσκο, Ζεστό, Επαγγελματικό, Φύση, Ατελιέ και Νύχτα. Τα δικά σας χρώματα διατηρούνται όταν αλλάζετε στυλ· αν θέλετε και τα χρώματα του στυλ, κάντε κλικ στο Και τα χρώματα αυτού του στυλ. Το στυλ Νύχτα είναι πάντα σκοτεινό.

Στη Μπάρα μενού επιλέγετε τη μορφή της μπάρας στο επάνω μέρος κάθε σελίδας, ανάμεσα σε δεκαπέντε σχέδια: πλήρους πλάτους, κεντραρισμένη, διαιρεμένη, δύο γραμμών, χρωματιστή μπάρα, με περίγραμμα, σε σχήμα κάψουλας, με επάνω μπάρα, διάφανη, μινιμαλιστική, αιωρούμενη, με κατηγορίες, τμηματική, πλήρους οθόνης και πλευρικό μενού. Το περιεχόμενο του μενού (μάθημα 4.1) παραμένει το ίδιο. Μερικά σημεία προσοχής από τις επεξηγήσεις μέσα στον ίδιο τον AI Builder:

• Το Διάφανο δείχνει ωραίο μόνο αν κάθε σελίδα έχει σκούρο hero ή hero με φωτογραφία.
• Το Μινιμαλιστικό δείχνει μόνο το όνομά σας και ένα κουμπί· οι σύνδεσμοι των σελίδων βρίσκονται τότε στο υποσέλιδο.
• Το Με επάνω μπάρα βάζει το τηλέφωνο και το ωράριο σε μια στενή μπάρα από πάνω. Είναι σωστός ο αριθμός τηλεφώνου;

Στο Χρώμα της μπάρας μενού επιλέγετε Αυτόματα (ακολουθεί το στυλ), Λευκό, Ανοιχτό γκρι, Σκούρο ή Χρώμα έμφασης. Ένα άλλο χρώμα το ζητάτε στη συνομιλία.

Χρώματα και αντίθεση

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

Εδώ μπαίνει στο παιχνίδι η αντίθεση: η διαφορά φωτεινότητας ανάμεσα στο κείμενο και στο φόντο. Την εκφράζουμε ως λόγο αντίθεσης, από 1:1 (καμία διαφορά) έως 21:1 (μαύρο σε λευκό). Η διεθνής οδηγία για προσβάσιμους ιστότοπους, οι WCAG του W3C, απαιτεί στο επίπεδο AA τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (περίπου 18 pt, ή 14 pt έντονα). Τα κουμπιά και τα άλλα στοιχεία χειρισμού πρέπει να φτάνουν τουλάχιστον το 3:1 σε σχέση με το περιβάλλον τους.

Ο AI Builder το παρακολουθεί αυτό για εσάς. Αν επιλέξετε ένα χρώμα πάνω στο οποίο το κείμενο δεν διαβάζεται καλά, το προσαρμόζει και σας ενημερώνει τι άλλαξε, για παράδειγμα: "Το χρώμα κειμένου ... έγινε ..., γιατί αλλιώς το κείμενο δεν διαβάζεται καλά." Αν θέλετε να κρατήσετε ακριβώς τα δικά σας χρώματα, ενεργοποιήστε το Διατήρηση ακριβώς αυτών των χρωμάτων: τα χρώματά σας παραμένουν και το κείμενο πάνω τους παίρνει αυτόματα ένα ευανάγνωστο χρώμα. Και στις ενότητες σελίδας που δημιουργεί το AI με δική του μορφοποίηση, ο AI Builder διορθώνει χρώματα κειμένου που πέφτουν κάτω από 4,5:1 (μεγάλο κείμενο 3:1).

Τι δεν αξιολογεί ο AI Builder: κείμενο μέσα σε φωτογραφία ή στο λογότυπό σας, και μια επικεφαλίδα πάνω σε φωτογραφία με πολλές λεπτομέρειες. Ελέγξτε τα αυτά μόνοι σας, σε κινητό. Αν έχετε αμφιβολίες για έναν συνδυασμό χρωμάτων, εισαγάγετε τους δύο κωδικούς χρωμάτων σε έναν ελεγκτή αντίθεσης (δείτε την Περαιτέρω ανάγνωση).

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

Γραμματοσειρές και δική σας γραμματοσειρά

Στις Γραμματοσειρές επιλέγετε μία γραμματοσειρά για τις Επικεφαλίδες και μία για το Κυρίως κείμενο. Οι γραμματοσειρές βρίσκονται ως αρχεία στο δικό σας site· δεν γίνεται σύνδεση με υπηρεσία γραμματοσειρών τρίτου. Στο Γραφή και μεγέθη ρυθμίζετε με ρυθμιστικά για ολόκληρο το site: διάστιχο και απόσταση χαρακτήρων για κείμενο και επικεφαλίδες, χαρακτήρες ανά γραμμή, πλάτος του περιεχομένου και πάχος των επικεφαλίδων. Το Όπως το στυλ επαναφέρει ένα ρυθμιστικό. Στο Μέγεθος κειμένου επιλέγετε Κανονικό, Μεγάλο ή Πολύ μεγάλο· αυτό γίνεται και στη συνομιλία ("μεγαλώστε τα γράμματα").

Μπορείτε επίσης να χρησιμοποιήσετε μια δική σας γραμματοσειρά: ανεβάστε την στις Γραμματοσειρές ή με τον συνδετήρα στη συνομιλία, ως .woff2, .woff, .ttf ή .otf, έως 2 MB ανά αρχείο (επιτρέπονται περισσότερα πάχη). Στη συνέχεια επιλέγετε πού θα χρησιμοποιηθεί: επικεφαλίδες, κείμενο ή και τα δύο. Δεν κοστίζει τίποτα. Μια γραμματοσειρά από υπηρεσία όπως το Adobe Fonts δεν είναι δυνατή.

Σημαντικό: ανεβάστε μόνο γραμματοσειρά για την οποία έχετε άδεια χρήσης για web. Μια γραμματοσειρά είναι λογισμικό με άδεια χρήσης. Μια άδεια για χρήση στον υπολογιστή σας (για έντυπο υλικό) δεν επιτρέπει πάντα να τοποθετήσετε το αρχείο σε ιστότοπο, όπου κάθε επισκέπτης το κατεβάζει. Ελέγξτε στους όρους της άδειας αν επιτρέπεται η χρήση στο web. Οι γραμματοσειρές με την SIL Open Font License επιτρέπεται να ενσωματώνονται και να διανέμονται.

Σκοτεινή λειτουργία και κίνηση

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

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

Στον AI Builder: πώς να το κάνετε

1. Ανοίξτε την Εταιρική ταυτότητα, τμήμα Όνομα και λογότυπο. Κάντε κλικ στο Ανεβάστε το δικό σας λογότυπο ή στο Αφήστε το AI να σχεδιάσει ένα λογότυπο.
2. Στο Favicon επιλέξτε το λογότυπό σας ή το αυτόματο αρχικό γράμμα.
3. Δοκιμάστε δύο ή τρία στυλ στο Στυλ· ελέγξτε και στο Κινητό.
4. Στη Μπάρα μενού επιλέξτε ένα σχέδιο και ένα χρώμα.
5. Στα Χρώματα ορίστε το κύριο χρώμα σας. Διαβάστε τις ειδοποιήσεις του AI Builder.
6. Ελέγξτε στη Σκοτεινή λειτουργία και στην Κίνηση τι θέλετε.
7. Κάντε κλικ στην Αποθήκευση και δημοσιεύστε ξανά το site σας.

Σύνοψη

• Το πάνελ Εταιρική ταυτότητα είναι δωρεάν· η Αποθήκευση δημιουργεί νέα έκδοση.
• Ένα λογότυπο από το AI κοστίζει 1 επεξεργασία για τρεις προτάσεις· το favicon το δημιουργεί ο AI Builder ή ανεβάζετε το δικό σας.
• Δώδεκα στυλ και δεκαπέντε σχέδια μενού· το περιεχόμενο του μενού παραμένει το ίδιο.
• Οι WCAG απαιτούν αντίθεση τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο· ο AI Builder το παρακολουθεί, εκτός από φωτογραφίες και το λογότυπό σας.
• Δική σας γραμματοσειρά μόνο με άδεια χρήσης για web· τη σκοτεινή λειτουργία και την κίνηση τις ρυθμίζετε σύμφωνα με όσα χρειάζεται ο επισκέπτης σας.

Κουίζ

Άσκηση

Άσκηση D4.2: Η εταιρική σας ταυτότητα και η αντίθεση. Ρυθμίστε την εταιρική σας ταυτότητα και μετρήστε την αντίθεση των σημαντικότερων συνδυασμών χρωμάτων σας.

Λίστα ελέγχου:

• [ ] το λογότυπο ανέβηκε ή επιλέχθηκε από τις προτάσεις του AI·
• [ ] το favicon ορίστηκε και φαίνεται στην καρτέλα του browser στο δημοσιευμένο site σας·
• [ ] επιλέχθηκαν στυλ και σχέδιο μενού και ελέγχθηκαν στο Κινητό·
• [ ] ορίστηκε το κύριο χρώμα και διαβάστηκαν οι ειδοποιήσεις του AI Builder·
• [ ] μετρήθηκε με ελεγκτή αντίθεσης η αντίθεση του χρώματος κειμένου πάνω στο φόντο και του κειμένου των κουμπιών πάνω στο χρώμα των κουμπιών·
• [ ] η σκοτεινή λειτουργία και η κίνηση επιλέχθηκαν συνειδητά·
• [ ] η εταιρική ταυτότητα αποθηκεύτηκε και το site δημοσιεύτηκε ξανά.

Ερωτήσεις:

1. Ποιους λόγους αντίθεσης μετρήσατε για το κείμενο πάνω στο φόντο και για το κείμενο των κουμπιών πάνω στο κουμπί, και φτάνουν το 4,5:1;
2. Σε ποιο σημείο του site σας υπάρχει κείμενο πάνω σε φωτογραφία, και διαβάζεται καλά σε κινητό;
3. Χρησιμοποιείτε δική σας γραμματοσειρά; Πού αναφέρεται στην άδεια ότι επιτρέπεται η χρήση στο web;

Αφού επιλέξετε "ολοκληρώθηκε", βλέπετε ένα παράδειγμα απάντησης: η Schildersbedrijf Example μέτρησε σκούρο γκρι σε λευκό 14,5:1 και λευκό κείμενο στο πράσινο κουμπί 5,1:1, και τα δύο πάνω από 4,5:1· η επικεφαλίδα πάνω στη φωτογραφία του hero διαβαζόταν δύσκολα, γι' αυτό επέλεξε μια πιο σκούρα φωτογραφία· δεν χρησιμοποιεί δική της γραμματοσειρά, άρα δεν χρειάζεται άδεια.

Περαιτέρω ανάγνωση

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, στα Αγγλικά): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, στα Αγγλικά): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, στα Αγγλικά): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, επίσημο κείμενο (στα Αγγλικά): https://openfontlicense.org/open-font-license-official-text/