Ακίνητα Μελτέμι

Επισκόπηση

Η Meltemi Houses είναι ένα προσωπικό concept: ένα φανταστικό μεσιτικό γραφείο στην Ερμούπολη της Σύρου για πέτρινα σπίτια στις Κυκλάδες. Ο στόχος ήταν ένα premium site μίας σελίδας που να ανήκει στον τόπο του και όχι σε ένα έτοιμο template. Το μελτέμι, ο βοριάς του καλοκαιριού στο Αιγαίο, έγινε η κεντρική του ιδέα.

Η πρόκληση

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

Σχεδιασμός

Ψυχρό γκριζοπράσινο φόντο, μια ενότητα σε βαθύ μπλε της θάλασσας και λίγο χρώμα μελιού. Η Gloock κρατά τους τίτλους, η Hanken Grotesk τα κείμενα και η Geist Mono τις ετικέτες· τα ελληνικά γράμματα έρχονται από συγγενικές γραμματοσειρές (Noto Serif Display, Manrope, JetBrains Mono), ώστε η τυπογραφία να κρατά σε κάθε γλώσσα. Οι φωτογραφίες δημιουργήθηκαν στο Higgsfield από ένα κοινό brief. Η χαρακτηριστική λεπτομέρεια είναι το ανεμολόγιο σε κάθε ακίνητο: πού βλέπει το σπίτι, από πού έρχεται το μελτέμι και μια απλή εκτίμηση, όπως «Εκτεθειμένο. Φυτέψτε ανεμοφράκτη πριν από οτιδήποτε άλλο».

Κίνηση

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

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

Λειτουργίες

• Ανεμολόγια: σχεδιάζονται από έναν μόνο προσανατολισμό ανά ακίνητο.
• Αγορά ακινήτου στην Ελλάδα: πέντε βήματα, από τον ΑΦΜ μέχρι το οριστικό συμβόλαιο και τον φόρο μεταβίβασης 3,09%.
• Τέσσερις γλώσσες: ελληνικά από προεπιλογή· οι τιμές, οι αριθμοί και ακόμη και τα γράμματα της πυξίδας ακολουθούν τη γλώσσα.
• Φόρμα αιτήματος επίσκεψης: έλεγχος πεδίων και επιβεβαίωση επί τόπου, χωρίς backend στο concept.

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

Κάτω από τα 900px το πλέγμα γίνεται μία στήλη και τα ακίνητα στοιβάζονται με την εικόνα πρώτη, χωρίς οριζόντια κύλιση στα 375px.

Ταχύτητα

Όλα, ακόμη και οι γραμματοσειρές, φιλοξενούνται στο ίδιο το site, οπότε η σελίδα δεν ζητά τίποτα από άλλους servers. Οι εικόνες είναι συμπιεσμένες, φορτώνουν όταν χρειάζεται και έχουν σταθερές διαστάσεις, ώστε η σελίδα να μη «πηδάει».

Τεχνολογίες

HTML, CSS, vanilla JavaScript, inline SVG, Intl API, self-hosted Google Fonts, Higgsfield (εικόνες με AI).