• 5 Στοιχεία-Κλειδιά του Homepage

• Μινιμαλισμός

• Επίπεδος/Σχεδόν Επίπεδος Σχεδιασμός

• Ήπιο Animation

• Όμορφη Φωτογραφία ή Βίντεο

• Σχεδιασμός για Ανάγνωση

• Χρήση Έντονης Γραμματοσειράς

• Συνδυασμός όλων μαζί

 

Απλά Homepages

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

Όπως όμως λένε και οι Αμερικανοί KISS ( Keep It Simple Stupid). Επειδή το εγώ σας μπορεί να ζορίζεται με αυτή την δήλωση παρακαλώ σκεφθείτε μόνο το εξής. Αν κάποια σχεδιαστική ή λειτουργική λεπτομέρεια που προτάξατε στην ιστοσελίδα ή στο ηλεκτρονικό σας κατάστημα δεν γίνει αντιληπτή από τον υποψήφιο πελάτη – επισκέπτη θα θεωρήσει αυτός ότι αφείλεται στην δική του απειρία ή και αργοστροφία ή θα το χρεώσει ως λάθος δικό σας με προφανή αποτέλεσμα να ματαιώσετε μια πώληση; Βλέπετε τα ΕΓΩ έχουν την τάση να συγκρούονται πολλές φορές γιατί δεν έχουν την τάση να παραδέχονται ότι έσφαλλαν…

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

5 Στοιχεία-Κλειδιά του Homepage

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

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

• Κεφαλίδα: Το κύριο κείμενο που λέει στους χρήστες τι είναι ο ιστότοπός σας

• Πλοήγηση: Σύνδεσμοι σε άλλο περιεχόμενο που προσθέτει στα μηνύματα

• Λογότυπο ή branding: Βεβαιωθείτε ότι οι χρήστες γνωρίζουν ποιος κατέχει τον ιστότοπο και δημιουργήστε εμπιστοσύνη

• Οπτικό Στοιχείο: Εικόνα, βίντεο ή απεικόνιση που υποστηρίζει μηνύματα

• Διέγερση: Ένα κουμπί, φόρμα ή σύνδεσμος που δίνει στους χρήστες κάτι να κάνουν

Μινιμαλισμός

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

Ο μινιμαλισμός αναγνωρίζεται από τη γενική έλλειψη στοιχείων σχεδιασμού ή εξωραϊσμού. Τα περισσότερα σχέδια είναι λευκά με μαύρο κείμενο (ή αντίστροφα). Δεν υπάρχουν πολλές εικόνες ή στοιχεία που αποσπούν το χρήστη από το κεντρικό μήνυμα. Η τυπογραφία επίσης κανονικοποιείται συχνά, με ένα απλό sans serif.

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

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

Επίπεδος/Σχεδόν Επίπεδος Σχεδιασμός

 

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

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

Οι πιο αποτελεσματικές επίπεδες αρχικές σελίδες έχουν ένα κεντρικό σημείο εστίασης προς το οποίο όλα τα στοιχεία σχεδιασμού «τείνουν». Αυτό μπορεί να είναι ένα κουμπί ή μια εικόνα ή ένα στοιχείο κειμένου που ελκύει χρήστες.

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

Ήπιο Animation

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

Υπάρχουν δύο μέθοδοι για χρηση απλού animation στο homepage:

• Αυτοματοποιημένο animation, στο οποίο ένα στοιχείο μετακινείται με χρονισμένο τρόπο από μόνο του (όπως το περιστρεφόμενο κείμενο και εικόνες στην αρχική σελίδα των ετικετών Royston Labels)

Royston Labels

• Animation με κύλιση ή κλικ που ελέγχεται από τo χρήστη (όπως τα κινούμενα πολύγωνα στην αρχική σελίδα του Ditto)

Ditto

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

Όμορφη Φωτογραφία ή Βίντεο

Μια φωρογραφία (ή βίντεο) ισούται με 1000 λέξεις.

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

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

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

Η χρήση βίντεο δεν είναι τυχαία ένα από τα βασικότερα όπλα στην φαρέτρα τόσο στην διαδικασία προώθησης ιστοσελίδων όσο και σε αυτή της διαφήμισης στο internet μέσω του Google Ads (πρώην Google Adwords) , Facebook Ads και αλλού ενώ δεν είναι τυχαίο η δυναμική είσοδος του Instagram στον χώρο του βίντεο με το  IGTV που φιλοδοξεί να αποτελέσει την επόμενη γενιά στα βίντεο. Μια διαδικασία που δεν απαιτεί ιδιαίτερες τεχνικές γνώσεις αλλά μεράκι όπως και κάθετι στην ζωή όμως εξάλλου αν θέλεις τουλάχιστον να το κάνεις επιτυχημένα.

Σχεδιασμός για Ανάγνωση

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

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

• Η τυπογραφία είναι απλή με επιλογές serif ή sans serif, συμπεριλαμβανομένων κανονικών βαρών και ομοιόμορφα πλάτη χαρακτήρων

• Το μέγεθος κειμένου είναι λίγο μεγαλύτερο από το αναμενόμενο, συχνά ξεκινώντας από 16 σημεία για το σώμα του κειμένου

• Τα ύψη οδηγών ή γραμμών είναι κάπως υπερβολικά (1,75 φορές το μέγεθος κειμένου ή περισσότερο)

• Τα μπλοκ κειμένου περιβάλλονται από μεγάλα διάκενα με άφθονο λευκό χώρο

• Η τυπογραφία είναι σκοτεινή σε ανοιχτό φόντο με έγχρωμο τύπο μόνο για ευδιάκριτους τόνους

• Δεν υπάρχουν επικαλύψεις κειμένου σε μπλοκ αντιγράφων, οι ροές κειμένου και οι εικόνες ή επεξηγήσεις είναι κεντραρισμένες στο σώμα έτσι ώστε τα μήκη γραμμών να είναι ίσα για ολόκληρο το μπλοκ κειμένου

Χρήση Έντονης Γραμματοσειράς

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

Αλλά τι κάνει την τυπογραφία έντονη?

• Η έντονη τυπογραφία δημιουργεί αντίθεση με το παρασκήνιο

• Η έντονη τυπογραφία περιλαμβάνει κάτι αναπάντεχο, όπως ένα έξυπνο typeface ή γέμισμα.

• Η έντονη τυπογραφία μπορεί να είναι υπερμεγέθης (ή μικροσκοπική)

• Η έντονη τυπογραφία μπορεί να είναι χρωματιστή

• Η έντονη τυπογραφία είναι οτιδήποτε φωνάζει «διάβασέ με» όταν οι χρήστες βλέπουν το homepage

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

Συνδυασμός όλων μαζί

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

Και έτσι θα έπρεπε να είναι.

Η αρχική σας σελίδα θα πρέπει να σχεδιάζεται για να ενθαρρύνει τους χρήστες να κάνουν κάτι. Είτε πρόκειται για κλικ σε έναν σύνδεσμο «μάθετε περισσότερα», αγορά προϊόντος ή σύνδεσης σε υπηρεσία, ο στόχος είναι να μετατρέψετε έναν επισκέπτη σε ενεργό χρήστη του ιστότοπου σας.

Καταργήστε το “θόρυβο” και το μονοπάτι δράσης αποκαλύπτεται με φυσικότητα στους χρήστες. Γιατί όπως συνηθίζουμε να λέμε. Η κατασκευή ιστοσελίδων απαιτεί ολιστική προσέγγιση εκ μέρους του web designer

Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.