Atomic Strategy: Ιστοσελίδα για studio στρατηγικής και marketing

Η πρόκληση

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

Η προσέγγιση

Ταυτότητα που φαίνεται

Έστησα ένα design system πάνω στην παλέτα «Hazelnut & Espresso» του brand: βαθύ καφέ για βάση, φουντουκί για τόνο, κρεμ για το κείμενο. Τη συνδύασα με τις γραμματοσειρές του brand, τη Garet για τους τίτλους και τη The Seasons για το κείμενο. Το αποτέλεσμα είναι ζεστό και premium, όπως η φιλοσοφία του studio («the butter to my bread»).

Πρώτη εντύπωση με video

Η αρχική σελίδα ανοίγει με εισαγωγικό loader και video σε όλο το πλάτος. Στα κινητά φορτώνει ξεχωριστό, κάθετο video, γραμμένο ειδικά για οθόνη τηλεφώνου. Το αρχικό υλικό σε 4K (74 MB) συμπιέστηκε σε λιγότερο από 5 MB, ώστε η σελίδα να ανοίγει γρήγορα και με δεδομένα κινητής.

Υπηρεσίες που διαβάζονται εύκολα

Στον υπολογιστή, οι τέσσερις υπηρεσίες (Brand Strategy, Social Media, Paid Media, Web) εμφανίζονται μία μία καθώς ο επισκέπτης κάνει scroll. Στο κινητό γίνονται απλό accordion με άνοιγμα στο άγγιγμα. Έτσι ο χρήστης δεν χρειάζεται να σκρολάρει ατελείωτα σε μικρή οθόνη. Κάθε υπηρεσία έχει και τη δική της αναλυτική σελίδα.

Δίγλωσση από τη βάση

Ο επισκέπτης αλλάζει γλώσσα (ΕΛ / EN) από οποιαδήποτε σελίδα και η επιλογή του μένει αποθηκευμένη. Όλα τα κείμενα βρίσκονται σε ένα σημείο, οπότε μια αλλαγή κειμένου ενημερώνει αυτόματα κάθε σελίδα όπου εμφανίζεται.

Ομαλή πλοήγηση

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

Λεπτομέρειες που κάνουν τη διαφορά

Φτιάχτηκαν favicon από το σήμα του brand, εικονίδιο για την αρχική οθόνη του iPhone και preview με το λογότυπο όταν το link μοιράζεται σε Viber, Messenger, Facebook ή LinkedIn. Μπήκαν επίσης σωστά meta tags σε κάθε σελίδα.

Το αποτέλεσμα

Μια ιστοσελίδα 8 σελίδων (αρχική, σχετικά, 4 σελίδες υπηρεσιών, έργα, επικοινωνία), γρήγορη και ελαφριά. Είναι γραμμένη σε καθαρό HTML, CSS και JavaScript, χωρίς βαριά frameworks. Ο κώδικας βρίσκεται στο GitHub και κάθε αλλαγή εμφανίζεται στο atomicstrategy.gr μέσα σε λίγα δευτερόλεπτα, χωρίς χειροκίνητο ανέβασμα αρχείων.