Shop
Цагаан гантиг дээр хөвж буй худалдааны одны орд
Онлайн дэлгүүр нь "цагаан даавуун" загвар дээр ажилладаг бөгөөд бүтээгдэхүүнүүд нь жижиг зургийн тор биш харин том, хүнд муруй зургийн карт хэлбэрээр харагддаг. Бүхэл бүтэн интерфэйс нь гайхалтай жигд: бүхэлдээ 20-28 пикселийн радиус, эм хэлбэртэй удирдлага, текстийг тод, тод болгодог нягт сөрөг мөртэй авсаархан 16 пикселийн GT Standard бие. Системийн цорын ганц тод өргөлт нь тод ягаан өнгө (#5433eb) бөгөөд энэ нь лого, дугуй хайлтын үр дүнгийн талбарт болон ижил товчлуур дээр сүүдэр хэлбэрээр харагддаг. Палитрын үлдсэн хэсэг нь дулаан төвийг сахисан: цагаан гадаргуу, нарийн хүйтэн саарал даавуу, нарийн хүрээ, бараг хар текст. 12 пикселийн ус зайлуулах хоолойтой нягтрал нь авсаархан хэвээр байгаа ч баатар болон ангиллын судал нь 64-80 пикселийн өргөн босоо хэмнэлийн ачаар амьсгалж, худалдааны туршлагыг каталогоос илүү хайлт хийх мэт мэдрэмж төрүүлдэг.
Хамгийн их өргөн нь 1200 пиксел бөгөөд тунгалаг #f2f4f5 зураг дээр төвлөрсөн, зүүн талд нь зөвхөн навигацийн дүрс бүхий 64 пиксел өргөн хажуугийн самбартай. Үндсэн элемент нь бүтэн өргөнтэй тууз бөгөөд бүтээгдэхүүний картууд нь төвд нь нил ягаан "дэлгүүр" логоны дээр байрладаг бөгөөд түүний доор эм хэлбэртэй хайлтын мөр байрладаг. Ангиллын эмүүдийг хайлтын мөрний доор нэг төвлөрсөн мөрөнд байрлуулсан. Агуулгын хэсгүүд (Эмэгтэйчүүд, Эрэгтэйчүүд, Гоо сайхан, Гэр, Хүүхэд ба Хүүхдүүд) нь заасан туузууд хэлбэрээр дагалдаж, тус бүр нь бүтээгдэхүүний зурагтай 4 баганатай тор эсвэл 2 баганатай "үндсэн элемент ба тор" бүтэцтэй байна. Босоо хэмнэл нь өргөн хүрээтэй: үндсэн хэсгүүдийн хооронд 64–80 пиксел. Хөл хэсэг нь хуудасны доод хэсэгт байрлах багана хэлбэртэй холбоос бүлэгтэй бараан тууз юм. Хэвтээ бүтээгдэхүүний самбарын баруун талд байрлах тойрог сумнууд нь хуудаслах цэггүйгээр гүйлгэх боломжтой контентыг заана.
Гэрэл зураг нь давамгайлсан харааны элемент юм: цагаан дэвсгэр дээр бүтэн дэлгэцээр авсан бүтээгдэхүүний зургууд, 1:1 харьцаатай тайрсан, мөн дулаан шороон өнгө (шаргал, терракотта, мэргэн, зааны ясан) бүхий амьдралын хэв маягийн зургууд. Бүтээгдэхүүний зургууд өөрийн гэсэн өнгөтэй байдаг - хэрэглэгчийн интерфэйс нь өнгөгүй хэвээр байгаа нь бүтээгдэхүүний өнгөнүүд нь харааны олон янз байдлыг хангах боломжийг олгодог. Брэндийн лого нь тусдаа дүрс биш харин бараан эсвэл цайвар үндсэн зургууд дээр давхарласан текст хэлбэрээр гарч ирдэг. Үндсэн найрлагад бүтээгдэхүүний картуудыг үгийн тэмдгийн дээр хөвж, бага зэрэг давхцсан одны орд хэлбэрээр байрлуулсан байдаг. Дүрсүүд нь минималист ба монохром (хар тойм) бөгөөд ангиллын дүрсүүд нь нэг брэндийн өнгийг ашигладаг. Бүтээгдэхүүний зурагт чимэглэл, 3D эффект, градиент байхгүй.
Палетт
Брэнд
- Shop Violet
#5433eb— Илгээх товчлуур, цэгтэй текст тэмдэг, брэндийн лого нь цагаан дэвсгэр дээрх үйлдэл болон өвөрмөц байдлыг тодруулдаг цорын ганц өргөлт юм. - Violet Wash
#c0b5f3— Нил ягаан өнгийн илгээх товчлуурын ард өнгөө өөрчлөхгүйгээр гэрэлтсэн хэвээрээ байдаг тунгалаг гэрэлт цагираг хэлбэртэй.
Төвийг сахисан
- Canvas Mist
#f2f4f5— Хуудасны дэвсгэр болон өргөгдсөн картуудын ард нэмэлт гадаргуугийн боловсруулалт. - Pure White
#ffffff— Карт, оролтын талбар, хөвөгч тэмдэг болон эм хэлбэртэй товчлууруудын гол гадаргуу. - Ink Black
#000000— Үндсэн текст, гарчиг, дүрс, навигацийн тэмдэг, бүтээгдэхүүний картууд харанхуй горимд байна. - Faint Border
#ebebeb— Картууд дээрх нимгэн хуваах шугамууд, оролтын талбарын тоймууд болон эм хэлбэртэй товчлуурын хүрээнүүд. - Muted Gray
#787574— Идэвхгүй үед хоёрдогч текст, навигацийн шошго, дүрс тэмдгийн тоймууд - Cool Stone
#cccccc— Орлуулагч, идэвхгүй төлөвүүд болон идэвхгүй дүрс тэмдгийн дэвсгэрүүд
Типографи
11-ээс 16 пиксел хүртэл · 4 алхам
- GT Standard — солих: Inter · тоймууд 400 · Бүх хэмжээтэй үндсэн фонт - үндсэн текст болон гарчгийн аль алинд нь. 16px/-0.031em хэмжээтэй GTStandard-MRegular нь үндсэн текст, товчлуур болон шошгоны үндсэн фонт юм. 20px/-0.05em хэмжээтэй GTStandard-MSemibold нь хэд хэдэн том гарчигт ашиглагддаг; 11–12px хэмжээтэй GTStandard-MMedium нь бичил тайлбарт ашиглагддаг. Фонтын хувилбар бүрийг 400 оптик жинтэй харуулдаг - фонтын шатлалыг тод өнгийн контраст биш харин нарийн градиент болон нягт сөрөг үсгийн зайгаар дамжуулан олж авдаг. Энэ бол өвөрмөц хэв маяг юм: Shop нь тод фонтоор хашгирдаггүй, харин үсгийн зайгаар дамжуулан текстийг хэлбэржүүлдэг.
- Shopify Sans — солих: Inter · тоймууд 400, 700 · Апп ачаалах баннер болон күүки зөвшөөрлийн текст зэрэг системийн түвшний мессежүүдэд зориулагдсан.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 12px |
| Товчлуурын радиус | 9999px |
| Картын радиус | 28px |
| Сүүдэр | зөөлөн сүүдэр |
| Хэсгүүдийн хооронд | 64px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Shop хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Cursor — Утаатай нүүрсээр гэрэлтдэг тухтай илгэн цаасны цех
- Slush — Пастел цаасан дээрх хийлдэг наалтуудын ертөнц
- MindMarket — Тослог цаасан дээр бичсэн тухтай үлгэрийн ном - нарны гэрэлд норсон, наалт шиг зөөлөн гадаргуу дээр том Интер гарчиг болон хайчилж авсан цаасан дүрүүд зэрэгцэн орших найрсаг редакцийн зураг.
- Airbnb — Ганц шүрэн улаан хавчуургатай чимээгүй цагаан галерейн хана
- Superr — Үдээс хойш зөөлөн гэрэлд дулаахан сургуулийн дэвтэр. Цөцгий өнгийн хуудас, малгайгүй улбар шар өнгийн маркер, хуулахыг хүлээж буй ламинатлагдсан нэрийн наалтны овоолго.
- Apple (España) — Зөөлөн өдрийн гэрэлд музейн галерей нь ганцхан, сэтгэл татам, жингүй цагаан орон зай бөгөөд үзмэр бүрийг цайвар өнгийн хананы эсрэг прожектороор гэрэлтүүлдэг.
- Lamborghini — Үзэсгэлэнгийн танхимд, гэрлийн доор хар өнгийн кузов - нэг шар машин
- Amplemarket — Наранд шарсан ажлын байр нь конфеттигээр хучигдсан
- Getharvest — Алтан цагийн ширээ – дулаан цөцгий өнгийн даавуу, даавуун дээр өлгөөтэй цагаан ил захидлууд болон ганц тод улбар шар дөл
- Agence Foudre — Сэтгүүлийн нүүр хуудас нь уруулын будаг санагдуулам зөөлөн ягаан өнгөтэй.
- Drive Capital — Дулаан цаасан дээрх ретро замын аяллын зурагт хуудас
- Apple (España) — цагаан галерей дэлгэцийн хайрцаг