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) — жарыктандырылган жабдуулары бар кара театр