டெலிகிராம், WhatsApp+380637610482
வலேரி டான்யுக்
வலேரி டான்யுக்டெவலப்பர்வணிகங்களுக்கான செயற்கை நுண்ணறிவு கருவிகளை உருவாக்குகிறோம். உயர் தரம். மலிவு விலை.Telegram இல் எழுதவும்
Shop — இந்த பாணியிலான ஒரு தளத்தின் முன்னோட்டம்

Shop

வெள்ளை பளிங்குக் கல்லின் மீது மிதக்கும் வர்த்தக விண்மீன் கூட்டம்

இந்த ஆன்லைன் ஸ்டோர், சிறுபடங்களின் கட்டங்களுக்குப் பதிலாக, பெரிய, அதிக வளைவு கொண்ட பட அட்டைகளாகப் பொருட்களைக் காண்பிக்கும் ஒரு "வெள்ளை கேன்வாஸ்" மாதிரியில் இயங்குகிறது. முழு இடைமுகமும் நம்பமுடியாத அளவிற்கு மென்மையாக உள்ளது: முழுவதும் 20-28px ஆரங்கள், மாத்திரை வடிவக் கட்டுப்பாடுகள், மற்றும் எழுத்துக்களைத் தெளிவாகவும் தடிமனாகவும் காட்டும் இறுக்கமான நெகட்டிவ் டிராக்கிங்குடன் கூடிய கச்சிதமான 16px GT ஸ்டாண்டர்ட் பாடி. இந்த அமைப்பின் ஒரே தடிமனான அம்சம், ஒரு துடிப்பான ஊதா நிறம் (#5433eb) ஆகும். இது லோகோவிலும், வட்ட வடிவ தேடல் முடிவுகள் பகுதியிலும், மற்றும் அதே பொத்தானில் ஒரு சாயல் நிழலாகவும் தோன்றுகிறது. மீதமுள்ள வண்ணத் தட்டு வெதுவெதுப்பான நடுநிலை நிறத்தில் உள்ளது: வெள்ளை மேற்பரப்புகள், ஒரு நுட்பமான குளிர் சாம்பல் நிற கேன்வாஸ், நுட்பமான பார்டர்கள், மற்றும் கிட்டத்தட்ட கருப்பு நிற எழுத்துக்கள். 12px இடைவெளிகளுடன் அடர்த்தி கச்சிதமாக உள்ளது, ஆனால் 64-80px என்ற தாராளமான செங்குத்துத் தாளத்திற்கு நன்றி, ஹீரோ மற்றும் வகை பட்டைகள் உயிர்ப்புடன் காணப்படுகின்றன. இது வர்த்தக அனுபவத்தை ஒரு பட்டியலைப் பார்ப்பதை விட உலாவுவது போன்ற உணர்வைத் தருகிறது.

அதிகபட்ச அகலம் 1200px ஆகும், இது ஒளிபுகும் #f2f4f5 கேன்வாஸில் மையப்படுத்தப்பட்டுள்ளது. இதன் இடதுபுறத்தில், வழிசெலுத்தல் சின்னங்களை மட்டுமே கொண்ட, 64px அகலமுள்ள ஒரு நிலையான பக்கப் பட்டி உள்ளது. முக்கிய உறுப்பு ஒரு முழு அகலப் பட்டையாகும்; இதில், மையப்படுத்தப்பட்ட ஊதா நிற "ஷாப்" சின்னத்திற்கு மேலே தயாரிப்பு அட்டைகளும், அதற்கு நேர் கீழே ஒரு மாத்திரை வடிவத் தேடல் பட்டியும் அமைந்துள்ளன. வகை மாத்திரைகள், தேடல் பட்டிக்குக் கீழே மையப்படுத்தப்பட்ட ஒற்றை வரிசையில் அமைக்கப்பட்டுள்ளன. உள்ளடக்கப் பிரிவுகள் (பெண்கள், ஆண்கள், அழகு, வீடு, குழந்தை மற்றும் சிறுவர்கள்) அதற்கென ஒதுக்கப்பட்ட பட்டைகளாகத் தொடர்கின்றன. ஒவ்வொன்றிலும் தயாரிப்புப் படங்களைக் கொண்ட 4-நெடுவரிசைக் கட்டம் அல்லது 2-நெடுவரிசை "முக்கிய உறுப்பு மற்றும் கட்டம்" அமைப்பு உள்ளது. செங்குத்து இடைவெளி தாராளமாக உள்ளது: முக்கியப் பிரிவுகளுக்கு இடையே 64–80px. அடிக்குறிப்பு என்பது பக்கத்தின் அடிப்பகுதியில் உள்ள ஒரு அடர் நிறப் பட்டையாகும், இதில் நெடுவரிசை வடிவ இணைப்பு குழுக்கள் உள்ளன. கிடைமட்ட தயாரிப்புப் பேனல்களின் வலது பக்கத்தில் உள்ள சுழல் அம்புக்குறிகள், பக்க எண்கள் இல்லாத, உருட்டக்கூடிய உள்ளடக்கத்தைக் குறிக்கின்றன.

புகைப்படமே பிரதான காட்சி அம்சமாக உள்ளது: வெள்ளை பின்னணியில், 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 முதல் 16px வரை · 4 படிகள்

  • GT Standard — மாற்று: Inter · வெளிப்புறங்கள் 400 · அனைத்து அளவுகளிலும் உள்ள முதன்மை எழுத்துரு—உரைப்பகுதி மற்றும் தலைப்புகள் ஆகிய இரண்டிற்கும். GTStandard-MRegular (16px/-0.031em) என்பது உரைப்பகுதி, பொத்தான்கள் மற்றும் லேபிள்களுக்கான முதன்மை எழுத்துருவாகும். GTStandard-MSemibold (20px/-0.05em) பல பெரிய தலைப்புகளுக்குப் பயன்படுத்தப்படுகிறது; GTStandard-MMedium (11–12px) சிறு தலைப்புகளுக்குப் பயன்படுத்தப்படுகிறது. ஒவ்வொரு எழுத்துரு வகையும் 400 என்ற ஆப்டிகல் வெயிட்டுடன் காட்டப்படுகிறது—தடித்த வண்ண வேறுபாட்டிற்குப் பதிலாக, நுட்பமான கிரேடியன்ட்கள் மற்றும் அடர்த்தியான எதிர்மறை எழுத்து இடைவெளி மூலம் எழுத்துரு படிநிலை அடையப்படுகிறது. இது ஒரு தனித்துவமான பாணி: ஷாப் தடித்த எழுத்துருக்களால் கூச்சலிடுவதில்லை, மாறாக எழுத்து இடைவெளி மூலம் உரையை வடிவமைக்கிறது.
  • Shopify Sans — மாற்று: Inter · வெளிப்புறங்கள் 400, 700 · செயலி ஏற்றப் பதாகைகள் மற்றும் குக்கீ ஒப்புதல் உரை போன்ற அமைப்பு நிலைச் செய்திகளுக்காக ஒதுக்கப்பட்டுள்ளது.

இடைவெளிகள் மற்றும் வடிவம்

நோக்கம்பொருள்
அடர்த்திசராசரி
அடிப்படை படி12px
பொத்தான் ஆரம்9999px
அட்டை ஆரம்28px
நிழல்கள்மென்மையான நிழல்கள்
பிரிவுகளுக்கு இடையில்64px
பக்க அகலம்1200px

செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Shop பாணியில் உருவாக்கி, அதை நிரப்பும்.

  • Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
  • உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
  • சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
  • தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.

ஒத்த பாணிகள்

  • Cursor — கனன்று கொண்டிருக்கும் கரித்துண்டுகளின் ஒளியில், ஒரு இதமான தோல்பட்டுப் பட்டறை.
  • Slush — வெளிர் நிறக் காகிதத்தில் ஒட்டப்பட்ட ஸ்டிக்கர்களால் ஆன ஊதப்பட்ட பிரபஞ்சம்
  • MindMarket — வெளிர் மஞ்சள் நிறக் காகிதத்தில் அச்சிடப்பட்ட ஒரு இதமான தேவதைக் கதைப் புத்தகம் - சூரிய ஒளி பட்டு மிருதுவான, ஸ்டிக்கர்கள் ஒட்டிய மேற்பரப்பில், பெரிய 'இன்டர்' தலைப்புகளும் வெட்டி எடுக்கப்பட்ட காகிதக் கதாபாத்திரங்களும் ஒருங்கே காணப்படும் ஒரு நட்பான தலையங்கக் களம்.
  • Airbnb — ஒற்றை பவள சிவப்பு புக்மார்க்குடன் கூடிய அமைதியான வெள்ளை கேலரி சுவர்.
  • Superr — மென்மையான பிற்பகல் ஒளியில் ஒரு இதமான பள்ளி நோட்டுப்புத்தகம். ஒரு வெளிர் பழுப்பு நிறப் பக்கம், மூடியில்லாத ஒரு ஆரஞ்சு நிற மார்க்கர், மற்றும் உரிக்கப்படக் காத்திருக்கும் லேமினேட் செய்யப்பட்ட பெயர் ஸ்டிக்கர்களின் ஒரு அடுக்கு.
  • Apple (España) — மென்மையான பகல் ஒளியில், அருங்காட்சியகக் காட்சிக்கூடம், இலேசான வண்ணம் பூசப்பட்ட சுவரில் ஒவ்வொரு காட்சிப்பொருளும் ஒரு ஸ்பாட்லைட்டால் ஒளிரூட்டப்பட்ட, வசீகரிக்கும், பாரமற்ற ஒற்றை வெண்மை வெளியாகக் காட்சியளிக்கிறது.
  • Lamborghini — ஷோரூமில் கருப்பு நிற பாடியுடன், ஸ்பாட்லைட்டுகளின் கீழ் - ஒரு மஞ்சள் கார்
  • Amplemarket — சூரிய ஒளி நிறைந்த, வண்ணக் காகிதத் துண்டுகள் சிதறிக் கிடக்கும் ஒரு பணியிடம்
  • Getharvest — பொன்னிற நேரத்தில் ஓர் மேசை – இதமான கிரீம் நிற கேன்வாஸ், அதன் மீது தொங்கவிடப்பட்ட வெள்ளை அஞ்சல் அட்டைகள், மற்றும் ஒற்றைப் பிரகாசமான ஆரஞ்சு நிறச் சுடர்.
  • Agence Foudre — பத்திரிகையின் அட்டைப் பக்கம், உதட்டுச்சாயத்தை நினைவூட்டும் மென்மையான இளஞ்சிவப்பு நிறத்தில் உள்ளது.
  • Drive Capital — வெதுவெதுப்பான காகிதத்தில் ரெட்ரோ சாலைப் பயண சுவரொட்டி
  • Apple (España) — வெள்ளை கேலரி காட்சிப் பெட்டி