Δημιουργήστε την εικόνα Perfect Hero χρησιμοποιώντας Αντίθεση
Θέλετε να κάνετε μια πρώτη μεγάλη εντύπωση; Ξεκινά με την κεφαλίδα του ιστοτόπου σας. Η εικόνα που βλέπει ένας χρήστης θα αφήσει μια καλή ή κακή εκτίμηση και θα καθορίσει εάν ο χρήστης κάνει κλικ και συνεχίζει ή αφήνει εντελώς τον ιστότοπο.
Αυτή είναι μια ψηλή τάξη για μια ενιαία εικόνα.
Το βασικό στοιχείο για τη δημιουργία μιας εικόνας ήρωας που θα τραβήξει τους χρήστες και θα τους κρατήσει να κινούνται γύρω από το σχέδιο είναι αντίθεση. (Σοβαρά, όλα πηγαίνουν πίσω στη θεωρία του σχεδιασμού 101.) Μια κεφαλή που διαθέτει στοιχεία που αντέχουν σε μέγεθος, χρώμα και κλίμακα παρέχει το σωστό μίγμα οπτικού ενδιαφέροντος και λέει στους χρήστες πώς να αλληλεπιδράσουν με το σχέδιο. Εδώ είναι μερικοί τρόποι για να μεγιστοποιήσετε την αντίθεση στο μονοπάτι για να δημιουργήσετε μια τέλεια εικόνα του ήρωα.
Crop Στρατηγικά
Η εικόνα ήρωας δεν χρειάζεται να γεμίσει την "πρώτη" οθόνη στις συσκευές. Μην πιάσετε την παγίδα.
Περικοπή της εικόνας για επιπτώσεις με βάση το περιεχόμενο σε αυτήν. Εξετάστε τα άλλα στοιχεία που είναι σημαντικά για τους χρήστες όταν προσγειώνονται στη σελίδα και κάνουν καταλύματα για αυτούς επίσης. Ανάλογα με αυτό το πλαίσιο, αυτό μπορεί να σημαίνει ότι η εικόνα του ήρωα είναι κλιμακωτή ώστε να είναι μεγαλύτερη ή μικρότερη από το παράθυρο του προγράμματος περιήγησης (ας εξετάσουμε μόνο πιο τυποποιημένα ψηφίσματα χάριν του επιχειρήματος).
Πριν μπλοκάρει την ιδέα, σκεφτείτε το για μια στιγμή.
- Μια ρηχή εικόνα θα σας βοηθήσει να κάνετε προεπισκόπηση άλλου περιεχομένου.
- Μια ασυνήθιστα βαθιά εικόνα θα ενθαρρύνει τους χρήστες να μετακινηθούν για περισσότερα.
- Κάθε ασυνήθιστο σχήμα θα τραβήξει την προσοχή.
Εξετάστε την κίνηση
Δεν χρειάζεται να δημιουργήσετε μια γεμάτη κινηματογραφική εμπειρία για να προσθέσετε κινούμενες εικόνες στην κεφαλίδα του ήρωα. Οι μικρότερες πινελιές της κίνησης δημιουργούν ακριβώς αρκετή αντίθεση για να αρπάξουν το μάτι.
Λεπτές κινήσεις, όπως το αεροπλάνο που πετάει στην εικόνα για το Bar Z Winery, παρέχουν αυτό το στοιχείο αντίθεσης χωρίς να είναι συντριπτική. Είναι μια απλή εναλλακτική λύση σε μερικές από τις πιο φανταχτερες κεφαλίδες βίντεο που έχουν γίνει δημοφιλείς. Το στοιχείο της αντίθεσης είναι διπλό: Ο σχεδιασμός είναι διαφορετικός από ότι πολλοί άλλοι που οι χρήστες εκτίθενται και η λεπτή κίνηση είναι ευχάριστη και μάλλον απροσδόκητη.
Από την άλλη πλευρά, μπορείτε να πάτε all in με κινούμενα σχέδια ή βίντεο για μια εικόνα ήρωα. Η κίνηση μπορεί να είναι ιδιαίτερα ενδιαφέρουσα και είναι μια δημοφιλής επιλογή. Χρησιμοποιήστε το με τους ίδιους τρόπους που θα κάνατε μια ακίνητη εικόνα όταν πρόκειται να προσθέσετε εφέ όπως η τυπογραφία και οι κλήσεις προς δράση.
Think Bold Τυπογραφία
Η τυπογραφία στην εικόνα του ήρωα θα πρέπει να παραπλανήσει τον χρήστη. Πρέπει να είναι τολμηρή, επιθετική και αξέχαστη.
Μπορείτε να το δημιουργήσετε τόσο με την επιλογή γραμματοσειράς όσο και με τις λέξεις στην οθόνη. (Δεν υπάρχουν κεφαλίδες Arial που λένε "Hello" εδώ.)
Ο συνδυασμός στυλ γραμματοσειράς και μηνυμάτων πρέπει να έχει άμεσο αντίκτυπο και έκκληση στον χρήστη. Έχετε ακούσει ότι οι άνθρωποι έχουν μικρότερη διάρκεια προσοχής από το χρυσόψαρο? είναι δική σας δουλειά να τα πιάσετε με όμορφα γράμματα και γλώσσα.
Όταν πρόκειται για έντονους χαρακτήρες, τα βασικά στοιχεία της αντίθεσης είναι το χρώμα και το μέγεθος.
- Ο τύπος πρέπει να είναι ένα χρώμα που ξεχωρίζει από το φόντο. Το φως στο σκοτάδι ή το σκοτάδι στο φως είναι οι καλύτερες επιλογές όταν πρόκειται για αναγνωσιμότητα.
- Η έντονη γραφή είναι μια απόκλιση από τον κανόνα. Εξετάστε υπερβολική ή μικρότερη τυπογραφία στην κεφαλίδα ήρωα για κρούση.
- Επιλέξτε λέξεις με νόημα. Εάν δεν είναι το κλειδί για το μήνυμά σας, δεν χρειάζεται μια παράγραφο στην κεφαλίδα. Επιλέξτε μερικές λέξεις-κλειδιά που προσελκύουν τους χρήστες να μάθουν περισσότερα. (Ο αριθμός των λέξεων θα επηρεάσει πόσο μεγάλα ή μικρά γράμματα μπορεί να είναι.)
Επιλέξτε χρώμα προσεκτικά
Μια εικόνα ήρωας μπορεί να μην είναι μια εικόνα καθόλου. Θα μπορούσε να είναι ένα μπλοκ χρώματος ή δροσερή υφή.
Επιλέξτε ένα χρώμα με προσοχή που απεικονίζει την ακριβή έννοια που σκοπεύετε. Μια έντονη χρωματική κεφαλίδα ήρωας μπορεί να εντυπωσιάσει τους χρήστες, αλλά το λάθος χρώμα μπορεί να είναι απενεργοποίηση.
Οι φωτεινές, μοντέρνες επιλογές είναι μια καλή εναλλακτική λύση. Το ωραίο πράγμα για αυτή την επιλογή είναι ότι μπορείτε να το ανακατεύετε από καιρό σε καιρό με την αλλαγή του χρώματος φόντου. Ένα μεγάλο έγχρωμο υπόβαθρο μπορεί επίσης να συμβάλει στην ενίσχυση της ταυτότητας της μάρκας - ιδιαίτερα εάν έχει ισχυρή σχέση χρώματος - και προσφέρεται για την αναγνωσιμότητα λόγω της απλής φύσης του σχεδίου.
Το χρώμα είναι επίσης σημαντικό στοιχείο όταν χρησιμοποιείται με άλλη εικόνα ή βίντεο. Από την έγχρωμη τυπογραφία έως τα έγχρωμα στοιχεία χρήστη, είναι σημαντικό να βεβαιωθείτε ότι οι επιλογές χρώματος στην εικόνα ταιριάζουν με το υπόλοιπο σχέδιο. Πολλά από αυτά πηγαίνουν πίσω στη θεωρία χρωμάτων και την κατανόηση του τροχού χρώματος έτσι ώστε οι εικόνες και οι επιλογές χρωμάτων να λειτουργούν μαζί στο σχεδιασμό.
Αλλά τι γίνεται αν η εικόνα του ήρωα και τα χρώματα της μάρκας δεν είναι ματιών; Σκεφτείτε δημιουργικά πώς να χρησιμοποιήσετε τα μέρη στην εικόνα του ήρωα μαζί. Δοκιμάστε μια επικάλυψη χρώματος στη φωτογραφία. θεωρήστε ασπρόμαυρη για την εικόνα ή το κείμενο. Μετακινήστε τα στοιχεία υψηλής ευκρίνειας σε μια μπάρα πλοήγησης που είναι άσπρη ή μαύρη για να τα κρατήσετε μακριά από την πραγματική εικόνα. Όταν η εικόνα και τα επιτρεπόμενα χρώματα δεν παίζουν καλά, η καλύτερη επιλογή είναι η εξάλειψη ή ο διαχωρισμός του χρώματος.
Σκεφτείτε για τους φωτεινούς και σκοτεινούς χώρους
Η καταγραφή σκοτεινών και ελαφρών χώρων σε μια εικόνα μπορεί να είναι η πιο δύσκολη εργασία κατά την προσθήκη στοιχείων που δημιουργούν αντίθεση σε μια εικόνα ήρωας. Ιδιαίτερα με ανταποκρινόμενες μορφές και σημεία διακοπής, η τοποθέτηση κειμένου ή κουμπιών σε μια εικόνα μπορεί να αλλάξει και δεν μπορείτε πάντα να βρείτε μια εξαιρετική τοποθεσία.
Τι πρέπει να κάνει ο σχεδιαστής;
- Επιλέξτε άλλη εικόνα.
- επιλέξτε διαφορετική οικογένεια, μέγεθος ή χρώμα.
- προσθέστε μια επικάλυψη χρώματος.
- κάνε το καλύτερο από αυτό.
Κάθε ένα από τα παραπάνω είναι μια βιώσιμη επιλογή. Η καλύτερη επιλογή μπορεί να διαφέρει ανάλογα με το έργο.
Η Εταιρεία Inc. η λύση στο slider της εικόνας ήρωας - με πολλές διαφορές μεταξύ φωτεινών και σκοτεινών χώρων - ήταν να περιληφθεί μια επικάλυψη λογότυπου με λευκό κείμενο σε μαύρο σχήμα. Δεν μειώνει τις εικόνες και είναι πολύ λιγότερο ενοχλητικό από ό, τι μπορεί να σκεφτεί κανείς από την ακρόαση της ιδέας. Το λογότυπο στο κέντρο βοηθά επίσης στη δημιουργία μάρκας και οπτικής ταυτότητας.
Συμπεριλάβετε μια ξεχωριστή πρόσκληση για δράση
Μην ξεχνάτε το CTA!
Τι θέλετε να κάνουν οι χρήστες αφού δουν την εικόνα του δροσερού σας ήρωα; Πες τους.
Η πρόσκληση για δράση πρέπει να είναι σαφής, ανεξάρτητα από το αν πρόκειται να συμπληρώσετε μια φόρμα, να μετακινηθείτε για περισσότερο περιεχόμενο ή να κάνετε κλικ σε ένα σύνδεσμο προς μια άλλη σελίδα. Θα πρέπει να περιλαμβάνει αρκετό ορισμό και αντίθεση, ώστε να είναι εύκολα αντιληπτή από το φόντο της εικόνας. (Ποιο είναι το σημείο σε ένα CTA αν κανείς δεν το βλέπει;)
Το χρώμα και το μέγεθος έχουν ιδιαίτερη σημασία εδώ. Το χρώμα του κουμπιού (ένα κοινό σημάδι CTA) πρέπει να ξεχωρίζει από την υπόλοιπη εικόνα. Οι λέξεις που λένε στους χρήστες τι πρέπει να κάνουν πρέπει να είναι εξαιρετικά ευανάγνωστες, απλές και ξεκάθαρες.
συμπέρασμα
Η αντίθεση είναι μία από τις βασικές τεχνικές για κάθε καλό σχεδιασμό. Δημιουργεί το διαχωρισμό μεταξύ των στοιχείων και βοηθά τους χρήστες να κατευθύνονται προς την επιθυμητή ενέργεια.
Προσέξτε ιδιαίτερα για να δημιουργήσετε αρκετή αντίθεση όταν σχεδιάζετε μια εικόνα ήρωας έτσι ώστε οι χρήστες να γνωρίζουν ακριβώς ποιες ενέργειες πρέπει να αναλάβουν στη σελίδα. Ελέγξτε τις μετρήσεις σας και εάν αυτές οι μετατροπές δεν συμβαίνουν, επανεξετάστε το μέγεθος της αντίθεσης στο σχέδιο. Ίσως είναι καιρός να το ενισχύσουμε ακόμη περισσότερο.