Ανάπλαση

Επισκόπηση

Η Anaplasi είναι ένα concept δικής μας πρωτοβουλίας: ένας όμιλος ανακαινίσεων στη Θεσσαλονίκη που παίρνει διαμερίσματα, σπίτια και ολόκληρες πολυκατοικίες των δεκαετιών του '60 έως του '80 και τα ξαναφτιάχνει, είτε για ιδιοκτήτες που θα μείνουν σε αυτά είτε για επενδυτές που θα τα νοικιάσουν. Η εταιρεία είναι φανταστική· το brief αντιμετωπίστηκε σαν πραγματικό. Το site έπρεπε να δείχνει μέσα σε δευτερόλεπτα τι αλλάζει μια ανακαίνιση, και να δίνει σε μια τοπική επιχείρηση δική της, premium ταυτότητα.

Η πρόκληση

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

Σχεδιασμός

Κυριαρχεί το κόκκινο. Το κόκκινο Anaplasi βάφει ολόκληρες ενότητες, με ασβεστοσοβά, μπορντό και ένα βαθύ κεραμιδί γύρω του, όλα από το βυζαντινό τούβλο της πόλης. Το λογότυπο είναι μια αψίδα κομμένη στη μέση: το αριστερό μισό είναι περίγραμμα, αυτό που βρίσκει η ομάδα, και το δεξί γεμάτο, αυτό που παραδίδει. Η αψίδα έρχεται από τη Ροτόντα, την Καμάρα και τα τείχη πάνω από την Άνω Πόλη.

Η Commissioner, του Έλληνα σχεδιαστή γραμμάτων Κώστα Μπαρτσώκα, γράφει εξίσου καλά ελληνικά και λατινικά, με τον άξονα «flare» ανεβασμένο στους τίτλους. Η JetBrains Mono αναλαμβάνει τις ετικέτες και τις μετρήσεις. Η διάταξη είναι full-bleed: φωτογραφίες σε όλη την οθόνη με κεντραρισμένο κείμενο, και οι υποστηρικτικές ενότητες πιο κάτω στη σελίδα.

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

Κίνηση

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

Όσοι έχουν ζητήσει από τη συσκευή τους λιγότερη κίνηση βλέπουν σταθερό slider και καμία κίνηση.

Λειτουργίες

• Slider πριν και μετά: πέντε έργα (πρόσοψη, σαλόνι, κουζίνα, μπάνιο και μπαλκόνι), το καθένα με περιοχή, έτος κατασκευής και εβδομάδες εργασιών. Μετακινείται και με το πληκτρολόγιο.
• «Να το ζήσετε» / «Να αποδώσει»: δύο φωτογραφίες σε όλο το ύψος της οθόνης, μία για ιδιοκτήτες και μία για επενδυτές.
• Διαδικασία: πέντε βήματα πάνω σε χάρακα 16 εβδομάδων, από τη δωρεάν αυτοψία μέχρι την παράδοση.
• Έργα: έξι ανακαινίσεις σε Τούμπα, Άνω Πόλη, Λαδάδικα, Καλαμαριά, Νεάπολη και Χαριλάου.
• Φόρμα αυτοψίας: όνομα, τηλέφωνο, περιοχή, είδος ακινήτου και σκοπός, με μηνύματα και στις δύο γλώσσες. Στο concept δεν αποστέλλει δεδομένα.
• Οδηγός ταυτότητας: πλήρης σελίδα σε ελληνικά και αγγλικά, με λογότυπα SVG για λήψη.

Για κάθε οθόνη

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

Ταχύτητα και SEO

Είναι στατικό site χωρίς framework και χωρίς build, με φιλοξενία στη Vercel. Γραμματοσειρές, λογότυπα και φωτογραφίες σερβίρονται από το ίδιο το project, οπότε το site δεν κάνει καμία κλήση σε τρίτους. Οι φωτογραφίες είναι συμπιεσμένες, όσες βρίσκονται κάτω από την πρώτη οθόνη φορτώνουν μόνο όταν χρειαστούν, η εικόνα της αρχικής φορτώνει πρώτη, και το υλικό αποθηκεύεται στον browser για μία εβδομάδα. Οι ελληνικές και οι αγγλικές σελίδες συνδέονται με hreflang, και το favicon υπάρχει σε SVG, ICO και Apple touch icon.

Τεχνολογίες

HTML, CSS, vanilla JavaScript, Vercel, Higgsfield (φωτογραφίες με GPT Image 2.5), fontTools (περιγράμματα λογοτύπου), Commissioner και JetBrains Mono φιλοξενούμενες στο site.