Shopify
Түн ортасындағы жылыжай - Сауда белгілері жалбыздың бір ұшқынымен жарықтандырылған қою көгілдір фонда гүлдейді
Shopify дизайн жүйесі - саудаға арналған түн ортасындағы шеберхана: қою көгілдір жасыл түспен боялған қара дерлік кенеп, кең, сенімді санс-сериф қаріпі және интерактивті сәттерді белсендіретін бір жарқын жалбыз екпіні. Интерфейс өнімдер мен брендтер жарық көзі болып табылатын қараңғы бөлмеге ұқсайды - фотосуреттер мен дүкен сөрелері қара дерлік беттерге қарсы жарқырайды, ал хром элементтері шегінеді. Компоненттер геометриялық, бірақ жұмсақ: жұқа жиектері бар 12 пиксель радиусты карталар, таблетка тәрізді түймелер және айқайлаудың орнына масштабты сыбырлайтын 330 салмақты қаріп. Сілтемелерде, тегтерде және фокус күйлерінде бір ғана хроматикалық тыныс белгісі (#36f4a4) сирек қолданылады, саудагерлердің әңгімелері визуалды фокустық нүкте болып қалуын қамтамасыз ету үшін функционалды сәттерге түсті сақтайды.
Максималды ені ~1280 пиксель, ортасында орналасқан, толық ендік блоктар фотоконтейнерден тыс созылады. Бет ырғағы кезектесіп отырады: (1) қабаттасқан тақырыбы және әрекетке шақыру түймелері бар толық ендік қараңғы бет, (2) 2 бағанда максималды ендік мәтін және кескін блоктары бар ыңғайлы қараңғы бөлімдер немесе 3 бағанда кескін торлары, (3) тереңірек кенепте көтерілген карталар ретінде көрсетілген интерактивті витрина панельдері (өнім картасы, жеткізу калькуляторы, әлем картасы). Навигация - логотипі + 3 навигация элементі + қосымша сілтемелер + негізгі әрекетке шақыру түймесі бар бекітілген жоғарғы жолақ, барлығы оңға қарай тураланған. Тік ырғақ бөлімдер арасында тегіс ауысумен 80 пиксельдік саңылауларды пайдаланады - қараңғы бөлімдер арасында бөлгіштер жоқ, тек беткі реңктің өзгеруі.
Визуалды дизайн негізінен бөлшек саудагерге бағытталған: толық өлшемді өнім фотосуреттері мен бренд іс-шараларынан алынған фотосуреттер визуалды салмақтың негізгі бөлігін алады, көбінесе ақ мәтінмен жабылған үлкен фон түрінде болады. Суреттер тығыз кесілген, жоғары контрастпен және мерекелік сипатта (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) — жарықтандырылған арматурасы бар қара театр