FRANKY'S
Ένα ρετρό κιόσκι τυχερών παιχνιδιών στον πάγκο ενός καταστήματος σκέιτμπορντ
Η οπτική γλώσσα του Franky είναι ένας συνδυασμός ρετρό arcade και skateboard shop: ένας ζεστός κρεμ καμβάς (#f3e5df) πλαισιωμένος από άκαμπτα περιγράμματα pixel, μια πανταχού παρούσα ασπρόμαυρη σκακιέρα και μια γραμματοσειρά ενός pixel, Arcade, που χρησιμοποιείται για κάθε λέξη στον ιστότοπο. Η παλέτα είναι σκόπιμα αραιή - μόνο δύο χρωματικά χρώματα παραμένουν (πορτοκαλί σήμα #faa21f για την πινακίδα και πλούσιο πράσινο #128e44 για το κουμπί αγοράς), με ολόκληρη την ιεραρχία να εκφράζεται αυξάνοντας το βάρος της γραμματοσειράς Arcade από 400 σε 700 και χρησιμοποιώντας μαύρο στο κρεμ φόντο. Οι επιφάνειες παραμένουν επίπεδες και μονολιθικές. Το βάθος επιτυγχάνεται μόνο μέσω της εισαγόμενης κρεμ γραμμής 1px στα κουμπιά και του τονικού παιχνιδιού της σκακιέρας. Τα στοιχεία θυμίζουν sprites βιτρίνας της δεκαετίας του 1990: παχιά μαύρα περιγράμματα, σφιχτές ακτίνες περιγράμματος 6-12px, συμπαγές γέμισμα 4-8px και εναλλαγές 3D/AR που μοιάζουν με εικονίδια pixel αντί για στοιχεία χρωμίου. Οι νέες σελίδες έχουν ως στόχο να διατηρήσουν την ατμόσφαιρα που θυμίζει arcade: χωρίς διαβαθμίσεις εκτός από ένα πορτοκαλί κείμενο που κυλίεται, χωρίς απαλές σκιές, χωρίς διακοσμητική τυπογραφία - μόνο κρεμ χαρτί, μαύρες γραμμές με pixel και ένα μόνο ζεστό πορτοκαλί χρώμα.
Σε υπολογιστή, η σελίδα προϊόντος εμφανίζει μια διάταξη πλήρους πλάτους, στο κέντρο με μέγιστο πλάτος 1200px. Ο ρυθμός από πάνω προς τα κάτω είναι: πορτοκαλί κείμενο κύλισης → κρεμ κεφαλίδα με μαύρη γραμμή → διαίρεση δύο στηλών (55% σκακιέρα στην αρχική σελίδα / 45% πλέγμα δύο στηλών καρτών προϊόντων) → κρεμ λωρίδα στο υποσέλιδο. Σε κινητό, η αρχική σελίδα συμπτύσσεται σε μια σκακιέρα πλήρους πλάτους και το πλέγμα γίνεται διάταξη μίας στήλης. Οι κάρτες κατανέμονται ομοιόμορφα σε ένα πλέγμα δύο στηλών με γκρι διαχωριστικά Pixel (#e5e7eb) μεταξύ τους. Η απόσταση μεταξύ των ενοτήτων είναι ελάχιστη (43–61px) και η διεπαφή δεν χρησιμοποιεί ποτέ σκούρες λωρίδες που εκτείνονται σε όλο το πλάτος της σελίδας—ο κρεμ καμβάς εμφανίζεται χωρίς διακοπή.
Μια φωτογραφία με καπέλα σε καθαρό κρεμ φόντο, στο κέντρο και κομμένη σε στενό μέρος, με μια απαλή, μαύρη σκιά από κάτω. Χωρίς τρόπο ζωής, χωρίς μοντέλα, χωρίς συμφραζόμενα—το καπέλο είναι το αστέρι. Ένα μοτίβο σκακιέρας πίσω από το κύριο στοιχείο χρησιμεύει ως γραφική επιφάνεια. Χωρίς εικόνες, χωρίς τρισδιάστατες απεικονίσεις εκτός από την εναλλαγή επαυξημένης πραγματικότητας, χωρίς διακοσμητικά εικονίδια εκτός από τον σταυρό με pixel στο λογότυπο.
Παλέτα
Μάρκα
- Marquee Orange
#faa21f— Γραμμή ειδοποιήσεων στο επάνω μέρος της οθόνης, στοιχεία έμφασης, επωνυμία. - Buy Green
#128e44— Το κουμπί «ΠΡΟΣΘΗΚΗ ΣΤΟ ΚΑΛΑΘΙ» είναι συμπληρωμένο - η μόνη ενέργεια αγοράς που επισημαίνεται με πράσινο χρώμα.
Ουδέτερος
- Arcade Cream
#f3e5df— Φόντο σελίδας, επιφάνειες καρτών προϊόντων, ένθετα κουμπιών. - Ink Black
#000000— Κύριο κείμενο, διάταξη σκακιέρας, όλα τα περιγράμματα UI, περιγράμματα καρτών, περιγράμματα εικονιδίων. - Pixel Gray
#e5e7eb— Λεπτά περιγράμματα, διαχωριστικά καρτών, δομικοί κανόνες μεταξύ κελιών πλέγματος. - Charcoal
#333333— Δευτερεύων τόνος επιφάνειας, τετράγωνα σκιάς σκακιέρας, χρώμα σκιάς - Carbon
#151515— Πλούσιοι ουδέτεροι τόνοι για γεμάτες εικόνες και τα πιο πυκνά πλακίδια σκακιέρας. - Muted Gray
#737373— Απενεργοποιημένο/σε σίγαση κείμενο σε κουμπιά και στο σώμα κειμένου
Τυπογραφία
από 10 έως 18px · 4 βήματα
- Arcade — αντικατάσταση: VT323 · περιγράμματα 400, 700 · Μία μόνο γραμματοσειρά χρησιμοποιείται σε όλη τη διεπαφή—όλες οι επικεφαλίδες, οι ετικέτες, οι τιμές, τα κουμπιά, το κυρίως κείμενο και τα εικονίδια βρίσκονται στο Arcade. Η μετάβαση από το 400 στο 700 είναι το μόνο εργαλείο για τη δημιουργία ιεραρχίας. Η χρήση μιας δεύτερης γραμματοσειράς θα κατέστρεφε την ψευδαίσθηση του περιπτέρου.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | πυκνός |
| Βασικό βήμα | 4-8px |
| Ακτίνα κουμπιού | 6px |
| Ακτίνα κάρτας | 12px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 43-61px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ FRANKY'S και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- 099 SUPPLY — Ένας τοίχος γκαλερί γεμάτος με ασπρόμαυρα αντικείμενα
- teenage engineering — Βιομηχανικός κατάλογος φωτισμού στούντιο - το προϊόν είναι το μόνο σημαντικό αντικείμενο στη σελίδα και όλα τα άλλα συζητούνται γύρω από αυτό
- Custo — Μια γκαλερί σε χρώμα gunmetal με μονολιθική γραμματοσειρά. Ένας εκθεσιακός χώρος σε απαλούς γκριζοπράσινους τόνους, όπου ένα μόνο σκούρο αντικείμενο και μια γραμματοσειρά 57px μιλούν από μόνα τους.
- Walden — Η σιωπή του δασικού εδάφους - κάθε προϊόν είναι μια πέτρα, κάθε pixel είναι βρύα και σιωπή
- Fiverr — Το κεντρικό σημείο του ψηφιακού παζαριού είναι ένας ζωντανός πράσινος παλμός σε φόντο σκοτεινών θεατρικών σκηνών. Μία μόνο νέον πράσινη κουκκίδα χρησιμεύει ως άγκυρα για το λογότυπο. Τα υπόλοιπα είναι μονόχρωμα, σχεδιασμένα για να αναδεικνύουν την ελκυστικότητα των προσφερόμενων υπηρεσιών.
- Peloton — Ένας κόκκινος φάρος σε μια κατάμαυρη πασαρέλα. Ένας εκθεσιακός χώρος γυμναστικής όπου μια μόνο φωτεινή κόκκινη πινακίδα CTA διασχίζει τον απέραντο, σκοτεινό εκθεσιακό χώρο και οδηγεί σε καθαρές, λευκές αίθουσες προϊόντων.
- HOUSEPLANT — ένα βιβλιοπωλείο με ξηρούς καρπούς σε λινό χαρτί
- Adam Lippes — Ένα μονόχρωμο εκδοτικό στούντιο σε κρεμ χαρτί – ένα εξώφυλλο της Vogue όπου η μόνη διακόσμηση είναι το πλέγμα διάταξης, όχι η παλέτα χρωμάτων.
- Elektron — Ο πίνακας ελέγχου του εξοπλισμού τα μεσάνυχτα είναι ένας σχεδόν μαύρος καμβάς, όπου λάμπουν φωτογραφίες προϊόντων, ενώ η διεπαφή παραμένει σχεδόν αόρατη.
- Sigmaphoto — Η Μονόχρωμη Συλλογή Οργάνων Ακριβείας είναι ένα ήσυχο λευκό δωμάτιο όπου το μόνο χρώμα που έχει σημασία είναι αυτό που σε καλεί σε δράση.
- Channel Studio — Ένα φωτογραφικό εργαστήριο στούντιο με ένα κοραλί αμπαζούρ
- Specht Studio — Ένας τοίχος γκαλερί γεμάτος διακριτική περιέργεια. Το χρωμιωμένο φινίρισμα του στούντιο είναι μια λευκή επιφάνεια και μαύρα γράμματα. Τα οπτικά πυροτεχνήματα επικεντρώνονται εξ ολοκλήρου στα πλακάκια του έργου.