Έχοντας τελειώσει με το project yourpartner.gr, την σχεδίαση ενός άλλου project αλλά και το δικό μου website και blog, κάνοντας ένα flash back/review στην σχεδίαση τους ανακάλυψα τις επιροές που έχουν οι σχεδιασμοί αυτοί στην χρήση footers που έχουν λειτουργικότητα και μικρο-περιεχόμενο και δεν είναι κάποια απλά copyrights, signatures και links σε xhtml/css validators.

Αντλώντας έμπνευση από τρία blog posts που διάβαζα πρόσφατα ψάχνοντας επί του θέματος:

• Footers In Modern Web Design: Creative Examples and Ideas
• Informative And Usable Footers In Web Design
• Modern Sitemap and Footer

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

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

Περιεχόμενα

Σε footers θα συναντήσουμε:

• Sitemap, αναλόγως το μέγεθος ενός website μπορεί να συναντήσουμε ολόκληρο το sitemap ή μέρος αυτού δηλάδη μέχρι 2ο ή 3ο επίπεδο. Τι πιο σημαντικό για τον επισκέπτη μας να βρει σε αυτό το σημείο επιλογές στην πλοήγηση του αφού έφτασε μέχρι αυτό το σημείο. Ειδικά για websites μεγάλου περιεχομένου, καλό θα ήταν να βάλουμε και ένα link προς το πλήρες sitemap.
• Πληροφορίες και Links επικοινωνίας. Πραγματικά ένα καλό σημείο για τον ενδιαφερόμενο μετά από το scrolling και την ανάγνωση που έκανε στην σελίδα μας να του δώσουμε και τον τρόπο να επικοινωνήσει μαζί μας.
• Content snapshots. Μικρά τμήματα περιεχομένου που θέλει ο σχεδιαστής να προβάλει. Για παράδειγμα, εμφανίζονται τα δείγματα από τα έργα (portfolio) μιας εταιρίας, συνοπτικές περιγραφές των υπηρεσιών της ή κάποια από τα προϊόντα της εταιρίας.
• Φόρμα Αναζήτησης. Μια απλή φόρμα για να διευκολύνει τον επισκέπτη να αναζητήσει το περιεχόμενο που δεν βρήκε κάνοντας scroll μέχρι το τέλος της σελίδας.
• Απλές Φόρμες Επικοινωνίας. Συχνά εμφανίζονται σχεδιασμοί που περιλαμβάνουν απλές φόρμες επικοινωνίας. Δεν είναι άσχημο για μένα, μάλλον λίγο περίεργο μου φαίνεται.
• Πληροφορίες Εταιρίας ή Συγγραφέα. Το κλασσικό About Us ή τα λίγα λόγια για τον ιδιοκτήτη του website.
• Blogs, έδω έχουμε κάποιο ας πούμε “τυποποιήμενο” περιεχόμενο που συνήθως εμφανίζεται και όλοι λίγο πολύ τα γνωρίζουμε, όπως Recent Comments, Popular Posts, Tag Cloud, Post Categories, Pages, Blog Rolls κλπ.

Σχεδίαση και Styling

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

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

Παραδείγματα

Παρουσιάζω έδω 10 ελληνικά websites που κέντρισαν το ενδιαφέρον μου και περιέχουν κάποια από τα παραπάνω στοιχεία στο περιεχόμενο του footer τους αλλά και λόγω της σχεδίασής τους.

paramithas.tv

Ένα από τα αγαπημένα μου websites. Ίσως λόγω περιεχομένου μιας και με τον Παραμυθά μεγαλώσαμε. Τέλεια σχεδίαση και λειτουργικότατο. Παρέχει ουσιαστικά δυο κατηγορίες από βίντεο, το κλασσικό tag cloud και την λίστα με τα πρόσφατα σχόλια των επισκεπτών. Επίσης παρέχει την δυνατότητα εγγραφής στα RSS feeds με μια αντιστοιχη φόρμα και links.

css3.gr

Στο CSS3 θα βρούμε δύο στήλες με τα τελευταία άρθρα και blog posts στην αριστερή και στην μεσαία στήλη. Στην δεξία μεριά θα δούμε ένα post-it με λίγα λόγια για τους συντελεστές του website.

Πανέμορφη σχεδίαση χρησιμοποιόντας τεχνικές CSS 3 και πάνω απ’ όλα είναι καθαρό και ευανάγνωστο.

skai.gr

Περιέχει κάποια links για προσβασή σε κάποιες ακόμα σελίδες (Θέσεις Εργασίας, Βοήθεια κλπ), κυρίως όμως παρουσιάζει τα τέσσερα κυριότερα θέματα του website. Κάθε θέμα σε μια στήλη, με θέματα σε τίτλους αλλά και επιπλέον sitemap ανά θέμα.

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

cosmo.gr

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

Είναι λίγο πυκνά γραμμένο παρ’ όλα αυτά αρκετά λειτουργικό.

megatv.com

Παρουσιάζονται όλες οι εκπομπές του τηλεοπτικού σταθμού για την τρέχουσα σεζόν. Χωρισμένο σε κατηγορίες και με ωραία σχεδίαση και χρώματα προσφέρει στον επισκέπτη ένα πολύ καλό sitemap για το περιεχόμενο του website.

skroutz.gr

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

ricardo.gr

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

e-steki.gr

Πολύ όμορφη όσο και απλή σχεδίαση. Παρουσιάζει το sitemap του website με πολύ καθαρό τρόπο καθώς και κάποια links. Ένα χαρακτηριστικό είναι το link εικονίδιο για να επιστρέψει ο επισκέπτης στην αρχή της σελίδας.

musicheaven.gr

Ωραία χρώματα και λιτή σχεδίαση. Εμφανίζονται τρεις θεματικές κατηγορίες με links σε σελίδες κοινού ενδιαφέροντος. Χαρακτηριστικό είναι το link για παραπομπή στο γενικό sitemap του website το οποίο είναι και πάρα πολύ μεγάλο. Επίσης υπάρχει και φόρμα για αναζήτηση περιεχομένου από τον επισκέπτη.

milaraki.com

Ο γενικότερος σχεδιασμός του blog είναι επιρεασμένος από το website της apple. Έτσι λοιπόν βρίσκουμε εδώ κατηγορίες links είτε σε φιλικά websites είτε στα Archives και στα Pages του blog.

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