Πως να διατάξετε γραφιστικά το μήνυμά σας για μέγιστη έμφαση
πως να διατάξετε γραφιστικά το μήνυμά σας για μέγιστη έμφαση

Πως να διατάξετε γραφιστικά το μήνυμά σας για μέγιστη έμφαση

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

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

Η χρήση του σχεδιασμού για τονισμό

 

1 . Τα μάτια μας σκανάρουν την σελίδα με τον παρακάτω τρόπο

Η παραπάνω εικόνα δείχνει την αρχική σελίδα για την ιστοσελίδα wix.com. Οι φωτογραφία (1) στην επάνω αριστερή γωνία είναι ελκυστική και εγκλοβίζει την ματιά των επισκεπτών. Στα δεξιά, η wix έχει θέσει το κύριο μήνυμα (2) και στο (3) την κύρια αλληλεπίδραση (CALL-TO-ACTION) με τον χρήστη. Κάτω από αυτό, ο επισκέπτης μπορεί να ανιχνεύσει δείγματα. (4) Καθώς προχωρούμε προς τα κάτω τη σελίδα, το περιεχόμενο και οι εικόνες γίνονται μικρότερες και πιο λεπτομερείς. Το περιεχόμενο ψηλότερα στην οθόνη είναι προσεκτικά επιλεγμένο για να προσελκύσει την προσοχή των επισκεπτών και να τους κρατήσει απασχολημένους.

2. Τα χρώματα ορίζουν την ατμόσφαιρα της ιστοσελίδας

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

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

  1. Τολμηρό κόκκινο και ζεστό ροζ: Τα τολμηρά, σέξι χρώματα ταιριάζουν με το ύφος της ιστοσελίδας Salsa Dancing.
  2. Παιχνιδιάρικο ροζ και αθώο λευκό μαρτυρούν γάμο - έναν πολύ διασκεδαστικό! Ποιός θα χάσει αυτό το γεγονός;
  3. Γήινες αποχρώσεις και πινελιές για την ιστοσελίδα http://www.speckled-wood.com/ συνδυάζουν μια χαλαρή αίσθηση σύνδεσης με τη φύση. Ιδανικό για χειροποίητα, ξύλινα προϊόντα.
  4. Μπλε και γκρι αντικατοπτρίζουν επαγγελματισμό για την ιστοσελίδα http://www.freelinetech.com/ Μπορείτε πραγματικά να εμπιστευτείτε σε αυτή την επιχείρηση τις τεχνολογικές σας ανάγκες.

3. Οι φωτογραφίες ορίζουν την ατμόσφαιρα επίσης

Σε βοήθεια για τον καθορισμό της διάθεσης, οι εικόνες μεταδίδουν στους επισκέπτες πόσο επαγγελματική είναι η επιχείρησή σας. Μια καλή ιστοσελίδα εξαρτάται από καλές εικόνες. Ακόμα και οι καλύτεροι γραφίστες θα δυσκολευτούν να δημιουργήσουν μια καλή ιστοσελίδα, δίχως καλής ποιότητας φωτογραφικού υλικού και γραφικών στοιχείων. Η ποιότητα των εικόνων και των φωτογραφιών σας,  στέλνει ένα μήνυμα προς τον επισκέπτη -  πόσο σοβαρή είναι η επιχείρησή σας και τι είδους υπηρεσίες/προϊόντα προσφέρετε. Φωτογραφίες δίχως αισθητική μεταδίδουν προχειρότητα, τεμπελιά καθώς και έλλειψη σοβαρότητας.

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

Έλλειψη εμπιστοσύνης στις φωτογραφικές ικανότητές σας; Εδώ θα βρείτε μερικές συμβουλές από το Etsy για το πως να τραβήξετε εκπληκτικές φωτογραφίες των προϊόντων σας:

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

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

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

4. Τυπογραφία: Επιλέξτε την κατάλληλη τυπογραφία που θα ταιριάζει με το μήνυμά σας

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

Τo βλέμμα μας μαγνητίζεται σε bold, μεγάλες γραμματοσειρές. Χρησιμοποιήσετε αυτήν την τεχνική για να μεταφέρετε γρήγορα το βασικό μήνυμά σας. Συχνά το μέγεθος και το στυλ της γραμματοσειράς μπορεί να είναι τόσο εκλυστικό όσο οι ίδιες οι λέξεις ή η γραμματοσειρά. Μπορείτε για παράδειγμα να χρησιμοποιήσετε γραμματοσειρές με μεγάλο contrast για να επιστήσει την προσοχή του επισκέπτη άμεσα.

Υπάρχουν χιλιάδες διασκεδαστικές γραμματοσειρές εκεί έξω, αλλά χρησιμοποιήστε τες με σύνεση. Ιδανικά για τους τίτλους "διακοσμητικές" γραμματοσειρές τραβούν την προσοχή. Για μεγαλύτερα τμήματα κειμένου, θέλετε να επιμείνετε σε γραμματοσειρές που βοηθούν την εύκολη ανάγνωση.

Ο τύπος της γραμματοσειράς στέλνει επίσης ένα μήνυμα. Επιλέξτε τις γραμματοσειρές που απεικονίζουν με ακρίβεια το βασικό μήνυμά σας και να θυμάστε να το κρατήσετε απλό. Χρησιμοποιώντας πάρα πολλές γραμματοσειρές θα μπερδέψετε τον επισκέπτη και μειώνετε το μήνυμά σας. Προσπαθήστε να μείνετε σε δύο ή τρεις γραμματοσειρές για ολόκληρη την ιστοσελίδα σας.

Και στις δύο αυτές ιστοσελίδες, οι γραμματοσειρές συμβάλλουν στη δημιουργία της αίσθησης της ιστοσελίδας. Η πρώτη ιστοσελίδα χρησιμοποιεί μια καλλιτεχνική, χειρόγραφη γραμματοσειρά για το όνομα (Sylvie Bondy) και έρχεται σε αντίθεση με μία εύκολη να διαβάστει, έντονη γραμματοσειρά sans-serif που μας λέει ξεκάθαρα τι επιχείρηση είναι (Studio Art & Design).

Ομοίως, η ιστοσελίδα JTown Tech χρησιμοποιεί μία εύκολη στην ανάγνωση γραμματοσειρά sans-serif. Εδώ, η χρήση των κεφαλαίων και bold μεταφέρουν την αίσθηση ότι η εν λόγω εταιρεία είναι οργανωμένη και επαγγελματική.

5. Το μεγάλο κοντράστ, προσλκύει την προσοχή

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

Δείτε πως στην ιστοσελίδα Ute Hiltl, τόσο πως το πρόσωπο της γυναίκας όσο και οι λέξεις "Haute Couture" τονίζονται. Αυτό είναι λόγω της μεγάλης αντίθεση μεταξύ του λευκού της εικόνας και των λέξεων με το εντυπωσιακό μαύρο φόντο.

6. Το μέγεθος μετράει

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

7. KISS (Keep It Simple, Stupid)

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

Η αρχική σελίδα της Emma Berliner έχει ένα πολύ απλό, σαφές μήνυμα το οποίο είναι εξαιρετικά συναρπαστικό. Κάνει ο επισκέπτης να θέλει να "μπει μέσα" και να περάσουν περισσότερο χρόνο στο site.

Τώρα που γνωρίζετε τους βασικούς κανόνες...εφαρμόστε τους!

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

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

  1. Το λογότυπο βρίσκεται στην πάνω αριστερή γωνία και η καρέκλα κάτω από αυτό, η οποία τραβάει τον επισκέπτη πριν από την εισαγωγή του κύριος μήνυματος κειμένου. Από εκεί, τα μάτια του επισκέπτη κινούνται κάτω από το κείμενο πριν τους ζητηθεί να ενεργήσουν, στην κάτω δεξιά γωνία. Τα κίτρινα σημεία, χρησιμεύουν ως ένα χάρτη για το πως τα μάτια μας σαρώσουν την ιστοσελίδα
  2. Τα χρώματα είναι ζεστά, καθαρά και κομψά. Δϊνουν τον τόνο για ένα κατάστημα που πωλεί τα συγκεκριμένα προϊόντα τα οποία μοιράζονται τα ίδια στοιχεία.
  3. Η εικόνα της καρέκλας που στέκεται μόνη της, προσελκύει αμέσως την προσοχή μας και παίζει με την περιέργειά μας. Γιατί μια εικόνα από μια καρέκλα; Πρέπει να διαβάσω περισσότερα γι'αυτήν!
  4. Η τυπογραφία είναι απλή και σύγχρονη, σύμφωνη με την θεματολογία χρώματος και τα προϊόντων που πωλούνται.
  5. Η μαύρη γραμματοσειρά σε λευκό φόντο ξεχωρίζει από τη σελίδα και είναι εύκολο να διαβαστεί.
  6. Το μεγάλο μέγεθος γραμματοσειράς καθιστά επίσης τις λέξεις ευανάγνωστες.
  7. Η απλότητα είναι το κλειδί εδώ. Η ιστοσελίδα δεν είναι γεμάτη με κείμενα, εικόνες ή από μία ποικιλία γραμματοσειρών.

Συμπέρασμα

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