
Subframe
வெதுவெதுப்பான தோல்தாளில் வரையப்பட்ட ஒரு வரைகலை ஓவியம். இந்த வடிவமைப்பாளர் தாளில், ஒவ்வொரு கோடும் கிராஃபைட் அல்லது அழிப்பானால் தீட்டப்படும், ஒருபோதும் வண்ணத்தால் அல்ல — கோடுகளின் தடிமன் மற்றும் அரிதான செரிஃப்கள் மூலம் ஆழம் அடையப்படுகிறது.
சப்ஃபிரேம் என்பது ஒரு ஒற்றை வண்ண வடிவமைப்பாளரின் பணிச்சூழல்: ஒரு இதமான, கிரீம் போன்ற தளம், கிராஃபைட்-கருப்பு மை, மற்றும் வண்ண உச்சரிப்புகள் முற்றிலும் இல்லாத நிலை. முழு இடைமுகமும் காகிதம், பென்சில், மற்றும் நிழல் என ஒரே பொருளாக உணரப்படுகிறது. இதில் ஒரே ஒரு அழுத்தமான அச்சுக்கலை அம்சம் உள்ளது: ஒரு நேர்த்தியான செரிஃப் (இன்ஸ்ட்ரூமென்ட் செரிஃப்), ஒரு முறையான சான்ஸ்-செரிஃப் (இன்டர்) எழுத்துருவிற்கு எதிராக அமைக்கப்பட்டு, தலைப்புகளுக்கு தலையங்கத்தின் முக்கியத்துவத்தை அளிக்கிறது. மேற்பரப்புகள் உயர்த்தப்பட்டவையாக இல்லாமல், தட்டையாகவும் சட்டமிடப்பட்டும் உள்ளன; #e5e7eb எழுத்துருவில் உள்ள மெல்லிய பிரிப்பான்கள் மற்றும் நிழல்களுக்குப் பதிலாக அடர் நிறக் கட்டுப்பாடுகளில் உள்ளிணைந்த ஹைலைட்கள் மூலம் ஆழம் அடையப்படுகிறது. அடர்த்தி தாராளமாக உள்ளது: ஒரு பரந்த செங்குத்துத் தாளம் (பிரிவுகளுக்கு இடையே 48–64px இடைவெளிகள்), மையப்படுத்தப்பட்ட, முழு அகல தளவமைப்புகள், மற்றும் உரையைச் சுற்றி தாராளமான வெற்று இடம். ஏறக்குறைய வெள்ளை மற்றும் ஏறக்குறைய கருப்பு நிறங்களுக்கு இடையிலான வேறுபாடு மட்டுமே ஒரே வண்ணமாகும். இது ஒவ்வொரு பக்கத்திலும் அடர் நிற பொத்தானை மிகவும் கவனத்தை ஈர்க்கும் அம்சமாகவும், சாம்பல் நிற டோன்களில் உள்ள கூட்டாளர் பிராண்ட் லோகோக்களின் பட்டையை ஒரே அலங்காரக் காட்சி அம்சமாகவும் ஆக்குகிறது.
தாராளமான செங்குத்து வரிசையுடன், மையப்படுத்தப்பட்ட, முழு அகல தளவமைப்புகள் (1200px). முக்கிய உறுப்பு ஒரு ஒற்றை, மையப்படுத்தப்பட்ட தொகுதியாகும்: மேலே ஒரு அடர் நிற, பிரிக்கப்பட்ட கட்டுப்பாடு, ஒரு பெரிய "இடை" தலைப்பு, ஒரு ஒற்றை வரி துணைத் தலைப்பு, மற்றும் அருகருகே உள்ள இரண்டு பொத்தான்கள் (நிரப்பப்பட்ட + ஒளிபுகும்) — பக்கவாட்டுப் படம் இல்லை, தளவமைப்புப் பிரிவு இல்லை. முக்கிய உறுப்பிற்குக் கீழே மையப்படுத்தப்பட்ட சாம்பல் நிற லோகோ பட்டை உள்ளது. அடுத்தடுத்த ஒவ்வொரு பகுதியும் இதே அமைப்பைப் பின்பற்றுகிறது: இடதுபுறம் சீரமைக்கப்பட்ட தலைப்பு மற்றும் துணைத் தலைப்புத் தொகுதி, பின்னர் பிரிவுகளுக்கு இடையில் 48–64px இடைவெளியுடன் கூடிய முழு அகல தயாரிப்பு காட்சிச் சட்டகம். வழிசெலுத்தல் மிகக் குறைவு: மையப்படுத்தப்பட்ட இணைப்புகள் மற்றும் வலதுபுறம் சீரமைக்கப்பட்ட செயல்களுடன் கூடிய ஒரு மேல் பட்டி, பக்கவாட்டுப் பட்டி இல்லை, மெகா-மெனு இல்லை. இந்தப் பக்கம் மேலிருந்து கீழாக, மையப்படுத்தப்பட்ட கூற்றுகளின் தொடராகத் தெரிகிறது, ஒவ்வொன்றிற்கும் போதுமான இடம் கொடுக்கப்பட்டுள்ளது — இந்த தளவமைப்பு ஒரு பரபரப்பான தயாரிப்புப் பக்கத்தை விட ஒரு தலையங்கத் தொகுப்பைப் போலவே உணர்வளிக்கிறது.
காட்சி வடிவமைப்பு எளிமையானதாகவும் செயல்பாட்டுக்கு உகந்ததாகவும் உள்ளது. இந்த அமைப்பு இரண்டு காட்சி முறைகளைப் பயன்படுத்துகிறது: (1) 24px-ஆரம் கொண்ட சட்டங்களுக்குள் அடைக்கப்பட்ட தயாரிப்பு ஸ்கிரீன்ஷாட்கள் மற்றும் UI மாதிரிகள் — இவை உண்மையான இடைமுகக் கூறுகளை (அட்டவணைகள், பொத்தான்கள், படிவங்கள்) ஒரே ஒற்றை வண்ணத் தட்டில் காண்பிக்கின்றன, இதனால் ஸ்கிரீன்ஷாட்கள் பக்கத்துடன் தடையின்றி ஒருங்கிணைந்ததாகத் தோன்றும்; (2) சாம்பல் நிற கூட்டாளர் சின்னங்களின் ஒற்றைப் பட்டை, நிறம் அல்லது கொள்கலன்கள் இல்லாமல் தட்டையாகக் காட்டப்பட்டு, சமூகச் சான்றாகச் செயல்படுகிறது. வாழ்க்கை முறைப் புகைப்படங்கள், அருவமான வண்ணச் சரிவுகள் அல்லது 3D ரெண்டர்கள் எதுவும் இல்லை. ஒரே ஒரு விளக்கக் கூறு, ஒரு பிராண்ட் சின்னத்துடன் கூடிய வெதுவெதுப்பான சாம்பல் பின்னணியில் மையப்படுத்தப்பட்ட ஒரு அடர் நிற தயாரிப்பு "டைல்" ஆகும் — இது ஒரு அலங்காரமாக அல்லாமல், ஒரு தயாரிப்பு செயல்விளக்கமாகவே பார்க்கப்படுகிறது. அனைத்துப் படங்களும் உரை அடிப்படையிலான தளவமைப்பில் உள்ளன, இதில் காட்சியின் முக்கியத்துவம் உரையால் தாங்கப்படுகிறது.
வண்ணத் தட்டு
நடுநிலை
- Page Canvas
#fafafa— பக்கத்தின் பின்னணி, கேன்வாஸில் உள்ள அஞ்சல் அட்டை, அடர் பரப்புகளில் உள்ள வெளிர் நிற எழுத்துக்கள் – இந்த முழு ஒற்றை வண்ண அமைப்புக்கும் அடிப்படையாகத் திகழும் ஓர் இதமான வெள்ளை நிறம். - Hairline Border
#e5e7eb— பிரிப்பான்கள், அட்டை ஓரங்கள், படச் சட்டங்கள், சின்னங்களின் வெளிக்கோடுகள் - கணினி அமைப்பில் மிகவும் பரவலாகப் பயன்படுத்தப்படும் வெளிக்கோட்டு வகையானது, இடஞ்சார்ந்த கட்டமைப்பை வரையறுக்கிறது. - Card Surface
#ededed— அட்டைகளுக்கான உயர்த்தப்பட்ட பின்னணி, ஒரு கூடுதல் மேற்பரப்பாக, கேன்வாஸிற்கு ஒரு படி மேலே அமைந்து, நிழல்கள் இல்லாத ஒரு குழுமத்தை உருவாக்குகிறது. - Divider Mid
#dadada— பிரிவுகளுக்கு இடையேயான இடைநிலைத் தொனிப் பிரிப்பான்கள் மற்றும் மாற்றங்கள் - Graphite
#242424— வெளிச்சமான பரப்புகளில் உள்ள முதன்மை பொத்தான்களுக்கான அதிக மாறுபாடு கொண்ட நடுநிலை நிரப்பு வண்ணம். - Ink Black
#171717— உள்ளடக்க உரை, தலைப்புகள், சின்னங்களின் வெளிக்கோடுகள் - கிராஃபைட்டை விட சற்றே சிறப்பானது, மேற்பரப்புகளுக்குப் பதிலாக அச்சுக்கலைக்குப் பயன்படுத்தப்படுகிறது.
அச்சுக்கலை
12 முதல் 128px வரை · 7 படிகள்
- Inter — மாற்று: Inter (Google Fonts) · வெளிப்புறங்கள் 500, 600, 700 · ஒரு சான்ஸ்-செரிஃப் அமைப்பு இடைமுகம்—வழிசெலுத்தல், முக்கிய உரை, பொத்தான்கள், துணைத் தலைப்புகள் மற்றும் பகுதித் தலைப்புகள். எடை: முக்கிய உரை மற்றும் கட்டுப்பாடுகளுக்கு 500, துணைத் தலைப்புகள் மற்றும் வழிசெலுத்தல் சிறப்பம்சங்களுக்கு 600, மற்றும் பகுதித் தலைப்புகளுக்கு 700. வலுவான எதிர்மறை எழுத்து இடைவெளியானது, எந்த அளவிலான வடிவியல் வடிவங்களையும் சுருக்கி, இடைமுகத்திற்கு ஒரு செறிவான, தொழில்நுட்பத் தோற்றத்தை அளிக்கிறது.
- Instrument Serif — மாற்று: Playfair Display · வெளிப்புறங்கள் 400 · தலைப்புகள் மற்றும் தலையங்க உள்ளடக்கத்திற்காக பிரத்தியேகமாக வடிவமைக்கப்பட்ட ஒரு செரிஃப் எழுத்துரு. இதன் 400 தடிமன் மற்றும் -0.025em எழுத்து இடைவெளி, இன்டர் எழுத்துருவின் தொழில்துறை வடிவவியலுக்கு முரணான ஒரு நேர்த்தியான, சாய்வான தோற்றத்தை உருவாக்குகின்றன. இன்டர் எழுத்துரு என்பது ஒரு தனித்துவமான உத்தியாகும்: செரிஃப் இல்லாத ஒரு பக்கத்தில், ஒரே ஒரு செரிஃப் சொல் அல்லது சொற்றொடரைப் பயன்படுத்தி, அதைத் தலைப்புப் பாணியாகச் செயல்படாமல், ஒரு காட்சி நிறுத்தற்குறியாகப் பயன்படுத்துவது.
- Fragment Mono — மாற்று: JetBrains Mono · வெளிப்புறங்கள் 400 · உள்ளமைந்த குறியீடு போன்ற கூறுகள், குறிச்சொல் பெயர்கள் மற்றும் தொழில்நுட்பக் குறிப்புகளுக்கு ஆக்சென்ட் மோனோ பயன்படுத்தப்படுகிறது. இது அளவோடு பயன்படுத்தப்படும்போது, "இது கணினி வெளியீடு" என்பதை வடிவமைப்பு கருவி சுட்டிக்காட்ட விரும்பும் செயல்பாட்டுப் பட்டியல்கள் மற்றும் உள்ளமைந்த விளக்கக் குறிப்புகளில் தோன்றும்.
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | சராசரி |
| அடிப்படை படி | 8px |
| பொத்தான் ஆரம் | 16px |
| அட்டை ஆரம் | 24px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 64px |
| பக்க அகலம் | 1200px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Subframe பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- monopo saigon — தலையங்க மௌனத்திற்குப் பின்னால் ஒரு திரவ, வானவில் போன்ற ஒளிர்வு—உருகிய ஒளியில் மிதக்கும் ஓர் ஒற்றை வண்ணத் தலையங்கக் காட்சியகம்.
- Hyer Aviation — காக்பிட்டில், காகிதத்தோலின் மீது அந்திப் பொழுது. வெளிறிய விடியல் வானம், விமானத்தின் உடல் அளவுள்ள செரிஃப் சின்னத்தைச் சந்திக்கிறது; ஒற்றை வண்ணக் கட்டுப்பாட்டை ஒரு இதமான களிமண் நிறத் தீற்றல் உடைக்கிறது.
- OFF+BRAND. — வெதுவெதுப்பான தோல்தாளின் மீது வானவில் நிறக் கோளம்
- Seed — ஆய்வகக் கண்ணாடியின் கீழ் ஒரு உயிருள்ள உயிரினம்
- Eindhoven Design District — வெள்ளைக் காகிதத்தில் அச்சிடப்பட்ட தலையங்கக் கொடூரம் என்பது, பெரிய எழுத்துருவில், குறைந்தபட்ச புகைப்படங்களுடன் மற்றும் முழுமையான கட்டுப்பாட்டுடன் செயல்படுத்தப்பட்ட ஒரு நகராட்சி வடிவமைப்பு அறிக்கை ஆகும்.
- Miranda — இலேசான கிரீம் நிறப் பின்னணியில் பாரம்பரிய அகல வடிவ எழுத்துரு—டிஜிட்டல் யுகத்திற்கான ஒரு செய்தித்தாள் தலையங்கம்.
- Monocle — வெளிர் மஞ்சள் நிறக் காகிதத்தில் அச்சிடப்பட்ட, உயர்தரமான, அகல வடிவ செய்தித்தாள். கவனமாகத் தொகுக்கப்பட்ட தலையங்கம்; இதில் ஒவ்வொரு பத்தியும் அதற்கே உரிய இடத்தைப் பெறுகிறது, மேலும் பக்கத்தில் அர்த்தமுள்ள ஒரே ஒரு நிறம் மட்டுமே இடம்பெறுகிறது.
- Agencja brandingowa — வெள்ளை நிற சாயல்களில், கருப்பு மையில் அச்சிடப்பட்ட எழுத்துக்களுடன் கூடிய ஒரு தலையங்கத் தொகுப்பு.
- Websmith Studio — கிரீம் நிறக் காகிதத்தின் மீது காலை ஒளி
- Aspelin Reitan — மெழுகுவர்த்தி ஒளியில் கட்டிடக்கலை ஆவணக்காப்பகம் - இந்தப் பக்கம், இதமான கிரீம் நிறச் சுவரில் பொருத்தப்பட்ட, கட்டப்பட்ட இடங்களின் தொகுப்பு போலத் தோற்றமளிக்கிறது; ஒவ்வொரு படத்திற்கும் மேலே, பக்கத்தின் முழு அகலத்திற்கும் ஒரே ஒரு வெள்ளை நிற உரை மிதக்கிறது.
- Public — குளிர்ந்த பளிங்குக் கல்லின் மீது வரையப்பட்ட ஒரு ஒற்றை வண்ணப் படைப்பு—கிட்டத்தட்ட ஒரு ஒற்றை வண்ண ஓவியம் போல, 300-புள்ளி செரிஃப் எழுத்துருவும் ஒற்றை ஊதா நிறத் தீற்றலும் அனைத்து வண்ண வேலைகளையும் செய்கின்றன.
- Motto — காகிதத்தில் ஒரு அச்சுக்கலை ஒற்றைக்கல் – பனிவெள்ளைக் காகிதத்தில் தன்னை பிரகடனப்படுத்தும் ஓர் ஒற்றை, தன்னம்பிக்கையான குரல்.