FRANKY'S
Тэшүүрийн дэлгүүрийн лангуун дээрх ретро тоглоомын мухлаг
Фрэнкигийн харааны хэл нь ретро аркад болон тэшүүрийн дэлгүүрийн хослол юм: хатуу пикселийн хүрээтэй дулаан кремэн даавуу (#f3e5df), хаа сайгүй хар цагаан шатар самбар, вэбсайт дээрх үг бүрт ашигладаг ганц пикселийн фонт болох Arcade. Палитр нь зориудаар сийрэг - зөвхөн хоёр хроматик өнгө үлдсэн (тэмдэгт нь улбар шар #faa21f, худалдан авах товчлуур нь баялаг ногоон #128e44), бүх шатлалыг Arcade фонтын жинг 400-аас 700 болгон нэмэгдүүлэх, кремэн дэвсгэр дээр хар өнгийг ашиглах замаар илэрхийлсэн. Гадаргуу нь хавтгай, цул хэвээр байна; гүнийг зөвхөн товчлуурууд дээр оруулсан 1px кремэн шугам болон шатар самбарын өнгө аясаар л олж авдаг. Бүрэлдэхүүн хэсгүүд нь 1990-ээд оны дэлгүүрийн спрайтуудыг санагдуулдаг: зузаан хар хүрээ, нягт 6-12px хилийн радиус, авсаархан 4-8px зөөлөвч, хром элементүүдээс илүү пикселжүүлсэн дүрс шиг харагддаг 3D/AR товчлуурууд. Шинэ хуудсууд нь аркад маягийн уур амьсгалыг хадгалах зорилготой: улбар шар өнгийн гүйлгэх текстээс өөр градиент байхгүй, зөөлөн сүүдэр байхгүй, гоёл чимэглэлийн хэв маяг байхгүй - зөвхөн цөцгий өнгийн цаас, хар пикселжүүлсэн шугам, ганц дулаан улбар шар өнгө.
Десктоп дээр бүтээгдэхүүний хуудас нь дээд тал нь 1200 пикселийн өргөнтэй, бүрэн өргөнтэй, төвлөрсөн байрлалыг харуулдаг. Дээрээс доош хэмнэл нь: улбар шар гүйлгэх текст → хар шугамтай цөцгий өнгийн толгой → хоёр баганатай хуваагдал (нүүр хуудсан дээрх 55% шатрын самбар / бүтээгдэхүүний картын 45% хоёр баганатай сүлжээ) → хөл хэсэгт цөцгий өнгийн судалтай. Гар утсан дээр нүүр хуудас нь бүрэн өргөнтэй шатрын самбар болж хумигдаж, сүлжээ нь нэг баганатай байрлал болдог. Картуудыг саарал өнгийн Пиксел (#e5e7eb) хуваагчтай хоёр баганатай сүлжээнд жигд тараасан. Хэсгүүдийн хоорондох зай хамгийн бага (43–61 пиксел) бөгөөд интерфэйс нь хуудасны бүх өргөнийг хамарсан бараан судал хэзээ ч ашигладаггүй - цөцгий өнгийн зураг тасалдалгүйгээр харагдана.
Цэвэрхэн цөцгий өнгийн дэвсгэр дээр, төвд нь байрлуулсан, нягт тайрсан, доор нь зөөлөн, нүүрс шиг хар сүүдэртэй малгайн зураг. Амьдралын хэв маяг, загвар өмсөгчид, контекст байхгүй - малгай бол од юм. Гол элементийн ард байгаа шатрын хээ нь график гадаргуу болж үйлчилдэг. Зураг чимэглэл, нэмэгдүүлсэн бодит байдлын унтраалгаас бусад 3D дүрслэл, логон дахь пикселжүүлсэн загалмайгаас бусад гоёл чимэглэлийн дүрс байхгүй.
Палетт
Брэнд
- Marquee Orange
#faa21f— Дэлгэцийн дээд хэсэгт байрлах мэдэгдлийн самбар, өргөлтийн элементүүд, брэндинг. - Buy Green
#128e44— "САГСАН ДЭЭР НЭМЭХ" товчийг бөглөсөн - ногоон өнгөөр тэмдэглэсэн цорын ганц худалдан авалтын үйлдэл.
Төвийг сахисан
- Arcade Cream
#f3e5df— Хуудасны дэвсгэр, бүтээгдэхүүний картын гадаргуу, товчлуурын оруулга. - Ink Black
#000000— Үндсэн текст, шатрын самбарын зохион байгуулалт, бүх UI хүрээ, картын тойм, дүрсний хүрээ. - Pixel Gray
#e5e7eb— Нимгэн хил хязгаар, карт хуваагч, торон нүднүүдийн хоорондох бүтцийн дүрмүүд. - Charcoal
#333333— Хоёрдогч гадаргуугийн өнгө, даамны самбарын сүүдрийн дөрвөлжин, сүүдрийн өнгө - Carbon
#151515— Дүүргэлтийн чимэглэлд зориулсан баялаг төвийг сахисан өнгөнүүд болон хамгийн нягт шатартай хавтангууд. - Muted Gray
#737373— Товчлуурууд болон үндсэн текст дээрх текстийг идэвхгүй болгосон/дуугүй болгосон
Типографи
10-аас 18 пиксел хүртэл · 4 алхам
- Arcade — солих: VT323 · тоймууд 400, 700 · Интерфэйс даяар ганц фонт ашиглагддаг бөгөөд бүх гарчиг, шошго, үнэ, товчлуур, үндсэн текст болон дүрсүүд нь Arcade дээр байдаг. 400-аас 700 руу шилжих нь шатлал үүсгэх цорын ганц хэрэгсэл юм; хоёр дахь фонт ашиглах нь киоскийн хуурмаг байдлыг сүйтгэх болно.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 4-8px |
| Товчлуурын радиус | 6px |
| Картын радиус | 12px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 43-61px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг FRANKY'S хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- 099 SUPPLY — Хар цагаан эд зүйлсээр дүүрсэн галерейн хана
- teenage engineering — Студи гэрэлтүүлэг дэх аж үйлдвэрийн каталог - бүтээгдэхүүн нь хуудсан дээрх цорын ганц чухал объект бөгөөд бусад бүх зүйлийг түүний эргэн тойронд хэлэлцдэг
- Custo — Ган төмөр өнгөтэй, цул фонттой галерей. Бүдэг саарал ногоон өнгөтэй, ганц бараан объект болон 57 пикселийн фонт өөрөөрөө ярьдаг үзэсгэлэнгийн танхим.
- Walden — Ойн ёроолын нам гүм байдал - бүтээгдэхүүн бүр чулуу, пиксел бүр хөвд ба нам гүм байдал
- Fiverr — Дижитал захын гол анхаарал нь харанхуй театрын тайзны эсрэг тод ногоон импульс юм. Ганц неон ногоон цэг нь логоны зангуу болж үйлчилдэг бол үлдсэн хэсэг нь санал болгож буй үйлчилгээний сэтгэл татам байдлыг тодруулах зориулалттай монохром өнгөтэй.
- Peloton — Хар өнгийн тайзны улаан гэрэлт цамхаг. Өргөн уудам, харанхуй үзэсгэлэнгийн орон зайг дайран өнгөрдөг ганц тод улаан CTA тэмдэг нь цэвэрхэн, цагаан бүтээгдэхүүний өрөөнүүд рүү хөтөлдөг фитнесс үзэсгэлэнгийн танхим.
- HOUSEPLANT — Маалинган цаасан дээр самар зурсан номын дэлгүүр
- Adam Lippes — Цөцгий цаасан дээрх монохром редакцийн студи – Vogue сэтгүүлийн цорын ганц чимэглэл нь өнгөний палитр биш, харин зохион байгуулалтын тор юм.
- Elektron — Шөнө дундын төхөөрөмжийн удирдлагын самбар нь бараг хар өнгийн даавуу бөгөөд бүтээгдэхүүний зургууд гялалзаж, интерфэйс нь бараг харагдахгүй хэвээр байна.
- Sigmaphoto — Нарийвчлалтай багаж хэрэгслийн монохром галерей бол чимээгүй цагаан өрөө бөгөөд энд зөвхөн таныг үйлдэлд дууддаг өнгө л чухал юм.
- Channel Studio — Нэг шүрэн бүрхүүлтэй студийн гэрэл зургийн лаборатори
- Specht Studio — Нууцлаг сониуч зангаар дүүрэн галерейн хана. Студийн өөрийн хром өнгөлгөө нь цагаан гадаргуу, хар үсэгтэй; харааны салютууд нь төслийн плитаны ажилд бүхэлдээ төвлөрсөн байдаг.