Shopify
Шөнө дундын хүлэмж - Барааны тэмдэгнүүд нь гүн оюу өнгийн дэвсгэр дээр гааны очоор гэрэлтэж цэцэглэдэг
Shopify-ийн дизайны систем нь худалдааны зориулалттай шөнө дундын семинар юм: гүн оюу ногоон өнгөтэй бараг хар өнгийн зураг, өргөн, өөртөө итгэлтэй санс-сериф фонт, интерактив мөчүүдийг идэвхжүүлдэг ганц тод гаа өнгийн аялга. Интерфэйс нь бүтээгдэхүүн, брэндүүд гэрлийн эх үүсвэр болдог харанхуй өрөөтэй төстэй - зураг, дэлгүүрийн цонхнууд бараг хар гадаргуу дээр гэрэлтдэг бол хром элементүүд ухардаг. Бүрэлдэхүүн хэсгүүд нь геометрийн боловч зөөлөн: нимгэн хүрээтэй 12 пикселийн радиустай картууд, эм хэлбэртэй товчлуурууд, хашгирахаас илүү масштабыг шивнэх 330 жинтэй фонт. Холбоос, шошго, фокусын төлөвт ганц хроматик цэг таслалын тэмдгийг (#36f4a4) бага ашигладаг бөгөөд худалдаачдын түүхүүд харааны төв цэг хэвээр үлдэхийн тулд функциональ мөчүүдэд өнгийг хадгалдаг.
Хамгийн их өргөн нь ~1280px, төвд нь байрлуулсан бөгөөд зургийн контейнерээс цааш үргэлжилсэн бүрэн өргөнтэй блокуудтай. Хуудасны хэмнэл ээлжлэн солигддог: (1) давхарласан гарчиг болон үйлдэлд уриалсан товчлууруудтай бүрэн өргөнтэй бараан хуудас, (2) 2 багана дахь хамгийн их өргөнтэй текст болон зургийн блокууд эсвэл 3 багана дахь зургийн тор бүхий тухтай бараан хэсгүүд, (3) илүү гүн зураг дээр өргөгдсөн карт хэлбэрээр харуулсан интерактив үзүүлэнгийн самбарууд (бүтээгдэхүүний карт, тээвэрлэлтийн тооцоолуур, дэлхийн газрын зураг). Навигаци нь лого + 3 навигацийн элемент + хоёрдогч холбоосууд + үндсэн үйлдэлд уриалсан товчлуур бүхий тогтмол дээд самбар бөгөөд бүгд баруун тийш зэрэгцсэн. Босоо хэмнэл нь хэсгүүдийн хооронд 80px зайг ашиглан жигд шилжилттэй - бараан хэсгүүдийн хооронд хуваагч байхгүй, зөвхөн гадаргуугийн өнгө өөрчлөгддөг.
Харааны дизайн нь голчлон жижиглэн худалдаа эрхлэгчдэд чиглэгддэг: бүтээгдэхүүний бүрэн хэмжээний зураг болон брэндийн арга хэмжээний зургууд нь харааны жингийн дийлэнх хэсгийг эзэлдэг бөгөөд ихэвчлэн цагаан текст бүхий том дэвсгэр хэлбэрээр байдаг. Зурагнууд нь нягт тайрагдсан, өндөр тодосгогчтой, баярын шинж чанартай (Nasdaq хонх дуугарах, бүлгийн мэндчилгээ, гартаа барьсан бүтээгдэхүүний ойрын зураг). Харанхуй дэвсгэр нь эдгээр зургуудыг прожектороор гэрэлтүүлсэн мэт сэтгэгдэл төрүүлдэг. Зураг чимэглэл нь минималист бөгөөд гол тайлбарыг суулгагдсан бүтээгдэхүүний зураг болон дэлгүүрийн витрины дэлгэцийн агшингаар гүйцэтгэдэг. Дүрсүүд нь монохром бөгөөд шугамын өргөн нь 1.5–2 пиксел, ихэвчлэн цагаан эсвэл идэвхтэй төлөвийн хувьд #36f4a4 байна.
Палетт
Брэнд
- Shopify Mint
#36f4a4— Идэвхтэй навигацийн индикаторууд, фокусын цагираг, шошго тодруулга, холбоосууд дээр хулганы байрлалыг тодруулах нь бараан дэвсгэр дээр идэвхтэй харилцан үйлчлэлийн мэдрэмжийг төрүүлдэг цорын ганц хроматик гялалзалт юм.
Төвийг сахисан
- Midnight Forest
#02090a— Хуудасны зураг, толгой хэсгийн дэвсгэр зураг, хэсгийн дэвсгэр зураг - Deep Lichen
#061a1c— Үндсэн картын гадаргуу, өргөгдсөн самбар, контент блокууд. - Shaded Fern
#072720— Навигацийн самбар, нэмэлт картууд, самбар бараг мэдэгдэхүйц өргөгдсөн. - Spruce Border
#1e2c31— Картуудын нимгэн хүрээ, хуваах шугам, оролтын талбарын тойм. - Abyss Indigo
#000a1e— Бүтээгдэхүүн/үзүүлэнг оруулах нэмэлт гадаргуу, функцийн тайлбар бүхий самбар. - Pure White
#ffffff— Үндсэн текст, товчлуурын дүүргэлт, гарчиг, лого.
Типографи
12-70 пиксель хүртэл · 8 алхам
- Neue Haas Grotesk — солих: Inter · тоймууд 330, 400, 500, 550, 600 · Гол фонтын систем нь чанга биш харин нарийн, 70–96 пиксел (330–400) хэмжээтэй гарчиг; 16–18 пиксел (400–500) хэмжээтэй фонтын жинтэй үндсэн текст; мөн 14–16 пиксел (500–550) хэмжээтэй навигаци болон хэрэглэгчийн интерфэйс юм. Том дэлгэцийн хэмжээтэй 330 хэмжээтэй хэт хөнгөн фонт нь өвөрмөц онцлог юм: энэ нь эзэлхүүн биш харин хязгаарлалтаар дамжуулан өөртөө итгэх итгэлийг илэрхийлдэг.
- Inter Variable — солих: Inter · тоймууд 400, 420, 450, 550 · Навигацийн интерфэйсийн элементүүд, жижиг тэмдэглэл, таб удирдлага болон хөл хэсэгт байрлах микротекстэд ашиглагддаг хоёрдогч фонтын төрөл. Жижиг үсгүүд болон стандарт зай нь бага хэмжээтэй үед илүү уншигдахуйц болгодог. Мөн 420 жинтэй фонт нь ердийн болон дунд хэмжээтэй фонтын хоорондох зайг нөхдөг нөхцөлд тохиромжтой.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 12px |
| Товчлуурын радиус | 9999px |
| Картын радиус | 12px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 80px |
| Хуудасны өргөн | 1280px |
Хиймэл оюун ухаан таны вэбсайтыг Shopify хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Retool — Дулаан обсидиан цех - бүх зүйлийг бүтээдэг, шатаж буй цогоор гэрэлтүүлсэн нарийн багаж хэрэгслийн гадаргуу
- Elektron — Шөнө дундын төхөөрөмжийн удирдлагын самбар нь бараг хар өнгийн даавуу бөгөөд бүтээгдэхүүний зургууд гялалзаж, интерфэйс нь бараг харагдахгүй хэвээр байна.
- REKKI — Гэрэл зургийн лабораторийн нислэгийн удирдлагын самбар
- OFFFICE : — цул фонтоор бүрхэгдсэн хар галерей
- Clyde — Ганцхан прожектортой үзэсгэлэнгийн танхим нь бараг харанхуй галерей бөгөөд өрөөнд зөвхөн дулаан градиент бөмбөлөг өнгө л харагдана.
- Channel Studio — Нэг шүрэн бүрхүүлтэй студийн гэрэл зургийн лаборатори
- Electronic Materials Office — Нүүрсээр чимэглэсэн галерейд гэрэлтэж буй цог
- ORYZO AI — Харанхуй өрөөний тухай фото эссэ. Дулаан харанхуйд хөвж буй ганц бие зүйл, цөцгий өнгийн фонт нь цорын ганц чимэглэл юм.
- Factory — Шөнө дундын "дайны өрөө"-ний терминал. "Үйлдвэр" бол хар өнгийн удирдлагын самбар бөгөөд гар чийдэнгийн гэрэлд ассан дохионы самбар шиг ганц цагаан карт буудаг бөгөөд өрөөнд байгаа цорын ганц объект бол бүтээл өөрөө юм.
- Hungry Tiger — Тандырын ханан дээрх турмерик шиг тод граффити. Алтан шаргал болон зэвэрсэн хүрэн өнгийн нэгдмэл палитр, маш том фонт нь вэбсайт гэхээсээ илүү халуун ногооны зах зээлийн тэмдэг шиг харагдаж байна.
- Bibliothèque — Прожекторын доорх хар шоо хэлбэртэй галерей – асар том, харанхуй танхимд ганц гэрэлтсэн таваг
- Apple (España) — гэрэлтүүлэгтэй хар театр