Case Study μιας βραβευμένης ιστοσελίδας: Konstantopoulos SA "Olymp"

Η εταιρία Κωνσταντόπουλος ΑΕ "Olymp", ηγέτης στην εξαγωγή ελιών και ελαιόλαδου, μας εμπιστεύτηκε για να επανασχεδιάσουμε την εταιρική της ιστοσελίδα με μια σαφή έμφαση στο Β2Β. Στοχεύσαμε σε μια φρέσκια, σύχρονη ιστοσελίδα, συνδυάζοντας τους γήινους τόνους του καφέ, του χρυσού και του πράσινου με παιχνιδιάρικα microinteractions και animations, φροντίζοντας ταυτόχρονα να παρουσιαστεί σωστά όλη η εξειδικευμένη πληροφόρηση που απαιτούν οι διεθνείς Β2Β πελάτες.

Εικαστική προσέγγιση

Από την εκκίνηση του έργου εντοπίσαμε την ανάγκη για ένα ισχυρό κεντρικό concept και μια αφήγηση, η οποία θα καθοδηγούσε τους στόχους του σχεδιασμού. Δεν χρειάστηκε να ψάξουμε μακριά: ο καρπός της ελιάς, ο οποίος καλλιεργείται εδώ και χιλιάδες χρόνια στην ελληνική γη και είναι συνυφασμένος με τις παραδόσεις του τόπου, ήταν ο ιδανικός πρωταγωνιστής. Επιλέξαμε να χρησιμοποιήσουμε ελκυστικά κοντινά πλάνα από ελιές για να μας συνοδεύουν στο περιεχόμενο, τόσο ως πρωταγωνιστές όσο και ως υποστηρικτικά στοιχεία. Κατά την πλοήγηση στο περιεχόμενο, ο επισκέπτης έχει συνεχώς στο πλάι του εικόνες από το εξαιρετικό προϊόν της εταιρίας. 

Οπτικό σύστημα

Το οπτικό σύστημα της ιστοσελίδας συμπληρώνεται από επαναλαμβανόμενα patterns που προσφέρουν μια εμπειρία σε αρμονία με το εταιρικό brand:

• Η χρήση parallax scrolling σε συνδυασμό με στοιχεία που αιωρούνται (ωμές και επεξεργασμένες ελιές και φυλλαράκια) εξασφαλίζουν πως οι πρωταγωνιστές μας είναι συνεχώς παρώντες, αλληλεπιδρώντας παιχνιδιάρικα με το περιεχόμενο.
• Η χρωματική παλέτα συμπληρώνεται από υφές με θόρυβο (noise texture fills), προσφέροντας την απαραίτητη οπτική διαφοροποίηση χωρίς να επεκτείνουμε αναίτια την χρωματική παλέτα.
• Η χρήση αχνών φωτογραφιών για τις hero περιοχές δίνει μια ονειρική ατμόσφαιρα στα φωτογραφικά στοιχεία ενώ εξασφαλίζει πως η προσοχή παραμένει στα εισαγωγικά κείμενα. 
• Η χρήση smooth scrolling στοχεύει στο να ενδυναμώσει το parallax effect και τα scroll-triggered waypoints, δίνοντας έξτρα χρόνο στα animations χωρίς να εμποδίζουν την πλοήγηση του χρήστη. 

Με μια κοντινή ματιά

Ας εξετάσουμε μερικά στοιχεία του UI της ιστοσελίδας από μια front-end design οπτική:

• Κύριο CTA της αρχικής σελίδας: Οι αρχικές μας προσεγγίσεις περιελάμβαναν την υλοποίηση από ένα custom slider με τρια διαφορετικά Call to Action και τα συνοδευτικά τους animations. Ετοιμάσαμε και δοκιμάσαμε ένα prototype version του στοιχείου, με το οποίο επιβεβαιώσαμε αυτό που έντονα υποστηρίζει η βιβλιογραφία: τα slideshows δεν λειτουργούν για κανένα slide πέρα από το πρώτο. Καταλήξαμε να συμπυκνώσουμε τα τρια μηνύματα σε ένα, και προσαρμόσαμε το animation ώστε να συμπληρώσει τα στοιχεία που δεν αποτυπώθηκαν στο κείμενο (συνεχής διαθεσιμότητα και διαφοροποίηση των white label προϊόντων).

• Αnimations στο μενού: Το μενού πλοήγησης έχει δύο επίπεδα βάθους. Χρησιμοποιήσαμε ένα δίστηλο layout για να προβάλλουμε το πρώτο και δεύτερο επίπεδο βάθους αντίστοιχα. Το animation των στοιχείων του μενού και του φόντου τους έγινε μέσω timeline animation (TimelineMax). Εκ των υστέρων διαπιστώσαμε πως η χορογραφία από το animation με την συγκεκριμένη τεχνική ήταν πολύ σύνθετη, αν αναλογιστεί κανείς τις πολλαπλές απαραίτητες προσαρμογές του layout του μενού σε μικρότερες αναλύσεις οθόνης.

• Ενότητες History και Production Process: οι ενότητες αυτές χρησιμοποιούν ένα σύνθετο layout για την παρουσίασή τους, συνδυάζοντας ακίνητα αντικείμενα (pager και ενδείξεις έτους) με περιεχόμενο που κινείται με ελεγχόμενο scrolling. Το εφέ μετάβασης των ενδείξεων έτους υλοποιήθηκε με ένα απλό αλλά οπτικά εντυπωσιακό τρόπο: κάθε αριθμός αναπαρίσταται από μια κάθετη στήλη όλων των αριθμών (0-9) χρησιμοποιώντας overflow-hidden. Σε κάθε αλλαγή, κάθε στήλη κυλάει ανεξάρτητα από τον τρέχοντα στον νέο αριθμό. Για οπτική διαφοροποίηση, θέσαμε διαφορετική διάρκεια και καθυστέρηση στο animation της κάθε στήλης. Αφού είδαμε τα έτη που έπρεπε να χειριστούμε, αποφασίσαμε να μετακινήσουμε τις στήλες κατά ένα στοιχείο ξεκινώντας από το 9 αντί για το μηδέν, έτσι ώστε τα animations της αλλαγής χιλιετίας να μην έχουν υπερβολικά έντονη κίνηση.

• Κίνηση στα αιωρούμενα στοιχεία: Ξεκινήσαμε με στόχο να κάνουμε κάθε αιωρούμενο στοιχείο (ελιές-φύλλα) να κινείται ανεξάρτητα, και να συνεχίσει να κινείται ακόμη και όταν ο χρήστης δεν σκρολάρει. Η ιδέα ακουγόταν πολύ καλή στο χαρτί, αλλά το prototyping έδειξε το αντίθετο αποτέλεσμα: οι ελίτσες κινούνταν με απωθητικό τρόπο, σαν έντομα που σέρνονται. Απλοποιήσαμε την κίνηση των στοιχείων, αφαιρέσαμε την κίνηση χωρίς scroll και αυξήσαμε αισθητά τους χρόνους των animations ώστε να φτάσουμε στο ζητούμενο εφέ αιώρησης.

Art Direction

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

Φωτογράφηση: Mαργαρίτα Yoko Νικητάκη

Αποδοχή

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

Τεχνολογίες

Το back-end της ιστοσελίδας υλοποιήθηκε σε Drupal 8, το αγαπημένο μας πανίσχυρο CMS. Στο front-end, συνδυάσαμε TimelineMax για τα animations και ScrollMagic για το στοχευμένο parallax και smooth scrolling. Η noise υφή στην τυπογραφία υλοποιήθηκε με διάφανο χρώμα στο κειμένο συνδυασμένο με ένα textured tileable background-image που περιείχε την υφή. Το CSS γράφτηκε σε SASS ακολουθώντας τα BEM/SMACSS conventions.

_________
Το παρόν κείμενο δημοσιεύτηκε αρχικά στο Awwwards Magazine.

Βραβεύσεις
Η ιστοσελίδα βραβεύτηκε με Site of the Day και Developer Award στα Awwwards, έλαβε Special Kudos και Best UI, UX & Innovation awards (βραβεία κοινού) στα CSS Design Awards.

Επισκευθείτε την ιστοσελίδα: www.konstolymp.gr
Διαβάστε περισσότερα στην παρουσίαση του έργου