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 оптималдаштыруу.
Окшош стилдер
- Apple iPhone Duo — Ак галереядагы бүктөлүүчү түзмөк. Продукциянын визуалдык сүрөттөрү борбордо, ал эми типография жана көк башкаруу элементтери атайылап басаңдатылган.
- AYOCIN — Ден соолуктун күн нуру. Жылуу интерьер сүрөтүн эске салган экрандарды түзүңүз: монументалдуу шрифт, жумшак бүдөмүк архитектуралык көлөкө жана тынч, каймактай мейкиндикте коюлган бир гана жарыктандырылган объект.
- Apple AirPods 5 — Apple — ак фондо кинотеатр. Монтаждоо үчүн кең ак мейкиндик толук метраждуу жарнамаларга жол берет, анда кыймылдуу объектилердин силуэттери жана каныккан жарык визуалдык драманы жаратат.
- Hopper — Күүгүмдө Санторини аэропортунун үстүндөгү терезе. Көздөгөн жердин жумшартылган сүрөтү атмосфералык катмар катары кызмат кылат, анын үстүндө компакттуу ак навигация жана брондоо башкаруу элементтери жайгашкан.
- Bose — Жээктеги үн аянтчасы. Кадрдын ичин шамал учурган жарнамалык сүрөт толтуруп турат, ал эми анын айланасында так кара-ак түстөгү кампаниянын башкаруу элементтери так деталдардай жайгаштырылган.
- Bauhaus Clock — Баухаус стилиндеги сааттар – бирюза түстүү механикалык люминесценция. Тынч, жарык беттерди караңгы, кинематографиялык сааттын сүрөтү менен алкактап, бирюза түсүн сейрек кездешүүчү жарык берүүчү детал катары колдонуңуз.
- Cursor — Күйүп жаткан чоктор менен жарыктандырылган жайлуу пергамент устаканасы
- Slush — пастел кагазга чапталган үйлөмө стикерлердин ааламы
- MindMarket — Каймак кагазга басылган жайлуу жомок китеби - күнгө күйгөн, стикердей жумшак бетинде чоң Inter аталыштары жана кесилген кагаз каармандары жанаша жайгашкан ыңгайлуу редакциялык полотно.
- Airbnb — Бир гана маржан кызыл кыстармасы бар тынч ак галерея дубалы
- Superr — Түштөн кийинки жумшак жарыкта жылуу мектеп дептери. Каймак түстүү барак, капкагы жок кызгылт сары маркер жана сыйрылып бүткүчө ламинатталган ат чаптамаларынын үймөгү.
- Apple (España) — Музей галереясы жумшак күндүзгү жарыкта бирдиктүү, өзүнө тартып турган, салмаксыз ак мейкиндик болуп саналат, ар бир экспонат ачык түстөгү дубалга прожектор менен жарыктандырылган.