
Shopify
நள்ளிரவு பசுமைக்குடில் - புதினாவின் ஒற்றைப் பொறியால் ஒளிரூட்டப்பட்ட, ஆழ்ந்த நீலப்பச்சை நிறப் பின்னணியில் வர்த்தக முத்திரைகள் மலர்கின்றன.
ஷாப்பிஃபையின் வடிவமைப்பு அமைப்பு என்பது வர்த்தகத்திற்கான ஒரு நள்ளிரவுப் பட்டறை போன்றது: அடர் நீலப்பச்சை நிறம் பூசப்பட்ட கிட்டத்தட்ட கருப்பு நிறத் தளம், அகலமான, கம்பீரமான சான்ஸ்-செரிஃப் எழுத்துரு, மற்றும் ஊடாடும் தருணங்களைத் தூண்டும் ஒரு துடிப்பான புதினா நிறத் தொடுப்பு. இந்த இடைமுகம் ஒரு இருட்டறையை ஒத்திருக்கிறது, அங்கு தயாரிப்புகளும் பிராண்டுகளுமே ஒளியின் ஆதாரமாக இருக்கின்றன—புகைப்படங்களும் கடை முகப்புகளும் கிட்டத்தட்ட கருப்புப் பரப்புகளில் ஒளிர்கின்றன, அதே சமயம் குரோம் கூறுகள் பின்வாங்குகின்றன. கூறுகள் வடிவியல் சார்ந்தவையாகவும் அதே சமயம் மென்மையாகவும் உள்ளன: மெல்லிய ஓரங்களைக் கொண்ட 12px-ஆரம் கொண்ட அட்டைகள், மாத்திரை வடிவ பொத்தான்கள், மற்றும் அளவை உரக்கக் கூறாமல் மென்மையாக உணர்த்தும் 330-எடை எழுத்துரு. இணைப்புகள், குறிச்சொற்கள் மற்றும் கவன நிலைகளில் ஒரு ஒற்றை வண்ண நிறுத்தற்குறி (#36f4a4) குறைவாகப் பயன்படுத்தப்படுகிறது; வணிகர்களின் கதைகளே காட்சியின் மையப் புள்ளியாக இருப்பதை உறுதிசெய்ய, செயல்பாட்டுத் தருணங்களுக்கு வண்ணம் ஒதுக்கப்படுகிறது.
அதிகபட்ச அகலம் சுமார் 1280px ஆகும், இது மையப்படுத்தப்பட்டுள்ளது, மேலும் புகைப்படக் கொள்கலனைத் தாண்டி முழு அகல ஸ்பிளாஷ் தொகுதிகள் நீட்டிக்கப்பட்டுள்ளன. பக்கத்தின் அமைப்பு பின்வருமாறு மாறி மாறி வருகிறது: (1) ஒரு முழு அகல இருண்ட ஸ்பிளாஷ் பக்கம், அதன் மீது ஒரு தலைப்பு மற்றும் செயலுக்கான அழைப்பு பொத்தான்கள் பதிக்கப்பட்டுள்ளன, (2) 2 பத்திகளில் அதிகபட்ச அகல உரை மற்றும் படத் தொகுதிகள் அல்லது 3 பத்திகளில் படக் கட்டங்களைக் கொண்ட வசதியான இருண்ட பகுதிகள், (3) ஆழமான கேன்வாஸில் உயர்த்தப்பட்ட அட்டைகளாகக் காட்டப்படும் ஊடாடும் காட்சிப் பலகங்கள் (தயாரிப்பு அட்டை, ஷிப்பிங் கால்குலேட்டர், உலக வரைபடம்). வழிசெலுத்தல் என்பது ஒரு நிலையான மேல் பட்டையாகும், அதில் லோகோ + 3 வழிசெலுத்தல் கூறுகள் + இரண்டாம் நிலை இணைப்புகள் + முதன்மை செயலுக்கான அழைப்பு பொத்தான் ஆகியவை வலதுபுறம் சீரமைக்கப்பட்டுள்ளன. செங்குத்து அமைப்பானது, பிரிவுகளுக்கு இடையில் 80px இடைவெளிகளைப் பயன்படுத்துகிறது, மேலும் மென்மையான மாற்றத்தைக் கொண்டுள்ளது—இருண்ட பிரிவுகளுக்கு இடையில் பிரிப்பான்கள் இல்லை, மேற்பரப்பு நிறத்தில் மட்டுமே மாற்றம் உள்ளது.
காட்சி வடிவமைப்பு முதன்மையாக சில்லறை விற்பனையாளரை மையமாகக் கொண்டுள்ளது: முழு அளவு தயாரிப்புப் புகைப்படங்கள் மற்றும் பிராண்ட் நிகழ்வுகளின் புகைப்படங்கள், பெரும்பாலும் பெரிய பின்னணிகளின் மீது வெள்ளை எழுத்துக்கள் பதிக்கப்பட்டு, காட்சியின் பெரும்பகுதியைத் தாங்குகின்றன. படங்கள் நெருக்கமாக வெட்டப்பட்டவை, அதிக மாறுபாடு கொண்டவை, மற்றும் பண்டிகைத் தன்மை கொண்டவை (நாஸ்டாக் மணி ஒலித்தல், குழு வாழ்த்துக்கள், கையில் உள்ள தயாரிப்புகளின் நெருக்கமான காட்சிகள்). அடர் பின்னணி, இந்தப் புகைப்படங்கள் ஸ்பாட்லைட்களால் ஒளிரூட்டப்பட்டவை போன்ற தோற்றத்தை உருவாக்குகிறது. விளக்கப்படங்கள் மிகக்குறைந்த கூறுகளைக் கொண்டவை—முக்கிய விளக்கப் பணியை உட்பொதிக்கப்பட்ட தயாரிப்புப் படங்கள் மற்றும் கடை முகப்புகளின் ஸ்கிரீன்ஷாட்கள் செய்கின்றன. சின்னங்கள் ஒற்றை வண்ணத்தில், 1.5–2px கோட்டு அகலத்துடன், பொதுவாக வெள்ளை அல்லது செயல்பாட்டு நிலைகளுக்கு #36f4a4 வண்ணத்தில் இருக்கும்.
வண்ணத் தட்டு
பிராண்ட்
- Shopify Mint
#36f4a4— செயலில் உள்ள வழிசெலுத்தல் குறிகாட்டிகள், ஃபோகஸ் வளையங்கள், டேக் ஹைலைட்கள் மற்றும் இணைப்புகளின் மீதான ஹோவர் ஹைலைட்கள் ஆகியவை மட்டுமே, ஒரு இருண்ட பின்னணியில் இயக்கப்பட்ட ஊடாடல் உணர்வை உருவாக்கும் வண்ணமயமான மினுமினுப்புகளாகும்.
நடுநிலை
- Midnight Forest
#02090a— பக்க கேன்வாஸ், தலைப்புப் பின்னணிப் படங்கள், பிரிவுப் பின்னணிப் படங்கள் - Deep Lichen
#061a1c— பிரதான அட்டைப் பரப்புகள், உயர்த்தப்பட்ட பேனல்கள், உள்ளடக்கத் தொகுதி. - Shaded Fern
#072720— வழிசெலுத்தல் பலகம், கூடுதல் அட்டைகள், பலகத்தின் சிறிதளவு உயர்வு. - Spruce Border
#1e2c31— அட்டைகளுக்கான மெல்லிய ஓரங்கள், பிரிக்கும் கோடுகள், உள்ளீட்டுப் புலங்களின் வெளிக்கோடுகள். - Abyss Indigo
#000a1e— தயாரிப்புகள்/செயல்விளக்கங்களைப் பதிப்பதற்கான கூடுதல் மேற்பரப்பு, செயல்பாடுகளின் விளக்கங்களைக் கொண்ட பலகைகள். - Pure White
#ffffff— முதன்மை உரை, பொத்தான் நிரப்புதல், தலைப்பு, சின்னங்கள்.
அச்சுக்கலை
12 முதல் 70px வரை · 8 படிகள்
- Neue Haas Grotesk — மாற்று: Inter · வெளிப்புறங்கள் 330, 400, 500, 550, 600 · மைய அச்சுக்கலை அமைப்பானது, ஆரவாரமாக இல்லாமல் நுட்பமாகத் தோற்றமளிக்கும் 70–96px (330–400) எழுத்துரு எடையுள்ள தலைப்புகளையும்; 16–18px (400–500) எழுத்துரு எடையுள்ள முக்கியப் பகுதியையும்; மற்றும் 14–16px (500–550) எழுத்துரு எடையுள்ள வழிசெலுத்தல் மற்றும் பயனர் இடைமுகத்தையும் கொண்டுள்ளது. பெரிய திரை அளவுகளில் 330 என்ற மிக மெல்லிய எழுத்துரு எடை ஒரு தனித்துவமான அம்சமாகும்: அது பருமனைக் காட்டிலும் நிதானத்தின் மூலம் நம்பிக்கையை வெளிப்படுத்துகிறது.
- Inter Variable — மாற்று: Inter · வெளிப்புறங்கள் 400, 420, 450, 550 · வழிசெலுத்தல் இடைமுகக் கூறுகள், சிறிய குறிப்புகள், தத்தல் கட்டுப்பாடுகள் மற்றும் அடிக்குறிப்புகளில் உள்ள நுண் உரை ஆகியவற்றில் பயன்படுத்தப்படும் ஒரு இரண்டாம் நிலை எழுத்துரு வகை. இதன் சற்றே பெரிய சிற்றெழுத்துக்களும், வழக்கமான எழுத்து இடைவெளியும், சிறிய அளவுகளில் இதை மேலும் படிக்கக்கூடியதாக ஆக்குகின்றன. மேலும், ஒரு சாதாரண மற்றும் நடுத்தர அளவு எழுத்துருவிற்கு இடையிலான இடைவெளியை 420-எடை எழுத்துரு நிரப்பும் சூழ்நிலைகளுக்கும் இது பொருத்தமானது.
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | சராசரி |
| அடிப்படை படி | 12px |
| பொத்தான் ஆரம் | 9999px |
| அட்டை ஆரம் | 12px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 80px |
| பக்க அகலம் | 1280px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Shopify பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- Retool — ஒரு இதமான கருங்கற் பட்டறை - துல்லியமான கருவிகளுக்கான ஒரு தளம், கனன்று கொண்டிருக்கும் தணல்களால் ஒளியூட்டப்பட்ட, அனைத்தும் உருவாக்கப்படும் ஓர் இடம்.
- Elektron — நள்ளிரவில் உபகரணக் கட்டுப்பாட்டுப் பலகம் கிட்டத்தட்ட ஒரு கருமையான திரை போலக் காட்சியளிக்கிறது; அதில் தயாரிப்புப் புகைப்படங்கள் பிரகாசிக்க, இடைமுகம் கண்ணுக்குப் புலப்படாமல் மறைந்துவிடுகிறது.
- REKKI — புகைப்பட ஆய்வகத்தில் உள்ள விமானக் கட்டுப்பாட்டுப் பலகம்
- OFFFICE : — பிரம்மாண்டமான எழுத்துருவால் சூழப்பட்ட ஒரு இருண்ட கலைக்கூடம்
- Clyde — ஒற்றை ஒளிவிளக்கைக் கொண்ட அந்த ஷோரூம், கிட்டத்தட்ட இருண்ட ஒரு கலைக்கூடமாக உள்ளது; அங்கு அறையில் காணப்படும் ஒரே நிறம், இதமான வண்ணச்சாய்வு கொண்ட ஒரு பந்து மட்டுமே.
- Channel Studio — ஒரு பவள நிற விளக்கு நிழலுடன் கூடிய ஒரு ஸ்டுடியோ புகைப்பட ஆய்வகம்
- Electronic Materials Office — கரியால் அலங்கரிக்கப்பட்ட ஒரு கலைக்கூடத்தில் கனன்று கொண்டிருக்கும் ஒரு தணல்.
- ORYZO AI — ஒரு இருட்டறையைப் பற்றிய புகைப்படக் கட்டுரை. இதமான இருளில் மிதக்கும் ஒரு தனிப் பொருள், வெண்ணிற எழுத்துரு மட்டுமே அதன் ஒரே அலங்காரம்.
- Factory — நள்ளிரவில் "போர் அறை" முனையம். "தொழிற்சாலை" என்பது ஒரு பளிச்சிடும் கருப்புக் கட்டுப்பாட்டுப் பலகம்; அதில் கைவிளக்கு ஒளியில் வரும் செய்தி போல ஒற்றை வெள்ளை அட்டை ஒன்று வந்து விழுகிறது—அந்த அறையில் உள்ள ஒரே பொருள் அந்தப் படைப்பு மட்டுமே.
- Hungry Tiger — தந்தூரின் சுவரில் மஞ்சள் நிறத்தில் பிரகாசமான கிறுக்கல்கள். தங்கம் மற்றும் துருப்பிடித்த பழுப்பு நிறங்களின் ஒருங்கிணைந்த கலவை, அதன் எழுத்துரு மிகவும் பெரிதாக இருப்பதால், அது ஒரு இணையதளத்தை விட மசாலா சந்தை விளம்பரப் பலகை போலத் தெரிகிறது.
- Bibliothèque — ஒரு விளக்கொளியின் கீழ் உள்ள கருப்பு நிற கனசதுர வடிவக் கூடம் – ஒரு பரந்த, இருண்ட மண்டபத்தில் ஒளிரும் ஒரு தனித் தட்டு.
- Apple (España) — ஒளிரும் பொருத்துதல்களுடன் கூடிய கருப்பு திரையரங்கம்