Obscura

Το πρόβλημα

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

Το στοίχημα ήταν να μη μείνει σκηνικό. Πίσω από το ρετρό περίβλημα έπρεπε να δουλεύει ένα κανονικό e-shop: φίλτρα καταλόγου, καλάθι, ταμείο, χωρίς framework και χωρίς build step.

Η προσέγγιση

Τρία αρχεία γραμμένα στο χέρι: HTML, CSS και JavaScript, με τυπογραφία Press Start 2P, VT323 και Space Mono. Το κεντρικό εφέ είναι ο σκοτεινός θάλαμος: καθώς κατεβαίνεις τη σελίδα, μια φωτογραφία εμφανίζεται σταδιακά πάνω στο χαρτί, όπως στην πραγματική εμφάνιση φιλμ.

Το κατάστημα λειτουργεί: φίλτρα ανά φορμά και δεκαετία, καλάθι που σέβεται το απόθεμα, ταμείο που τυπώνει απόδειξη dot matrix και ένα contact sheet 35mm που κατεβαίνει ως εικόνα. Οι μηχανές είναι φανταστικό εμπόρευμα και οι φωτογραφίες τους παραγμένες με AI: το δηλώνουμε, όπως δηλώνουμε ότι δεν υπάρχει πελάτης.

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

Πριν δημοσιευθεί πέρασε από διαδοχικούς εσωτερικούς ελέγχους: προσβασιμότητα με κουμπί παύσης κίνησης και σεβασμό στο prefers-reduced-motion, έλεγχο ασφαλείας με μηδέν κρίσιμα ευρήματα και Content Security Policy, και πέρασμα απόδοσης που μετέφερε τα βαριά εφέ εικόνας σε σταθερό overlay ώστε το scroll να μένει ομαλό.

Είναι ζωντανό στο obscura-nine-alpha.vercel.app: ένα e-shop με προσωπικότητα, όπου το παιχνίδι της νοσταλγίας δεν θυσιάζει ούτε τη χρηστικότητα ούτε την ασφάλεια.

Δείτε το ζωντανά ↗