Superhuman

தங்க நேர தலையங்கக் குழு

சூப்பர்ஹியூமன், தலையங்கப் புகைப்படக்கலை மற்றும் மென்பொருள் பயனர் இடைமுகம் (UI) ஆகியவற்றின் சந்திப்பில் அமைந்துள்ளது—ஒரு இதமான, காகிதம் போன்ற தளம் (ஒருபோதும் தூய வெள்ளை அல்ல) மெரூன் நிற பிராண்டிங் கூறுகளையும் துடிப்பான ஊதா நிற சிறப்பம்சங்களையும் வடிவமைக்கிறது. 460 எழுத்துருவில் அமைக்கப்பட்டுள்ள தலைப்புகள், உரக்கக் கத்துவதற்குப் பதிலாக மென்மையாக ஒலிக்கின்றன; இது முழுப் பக்க சினிமா பாணியிலான புகைப்படங்கள் முக்கியப் பணியைச் செய்ய அனுமதிக்கிறது, அதே நேரத்தில் ஒளிபுகும் தயாரிப்பு பயனர் இடைமுக அட்டைகள் படங்களுக்கு மேலே கண்ணாடி போல மிதக்கின்றன. இதன் வண்ணத் தொகுப்பு பெரும்பாலான நேரங்களில் அமைதியாகவும் தலையங்கப் பாணியிலேயே உள்ளது: கிரீம் நிறப் பரப்புகள், கரிய நிற எழுத்துக்கள், நுட்பமான இதமான சாம்பல் நிற ஓரங்கள், மற்றும் கூறுகளுக்கு இடையே தாராளமான இடைவெளி; ஒரு மெரூன் நிறச் செயல் அழைப்பு, ஊதா நிற இணைப்புகள், ஒரு வெளிர் இளஞ்சிவப்பு நிறச் சேர்க்கை பொத்தான் போன்ற திட்டமிட்ட பிராண்ட் அடையாளங்களுக்காக மட்டுமே நிறங்கள் ஒதுக்கப்பட்டுள்ளன. இந்த அமைப்பு பயனர் இடைமுகப் பரப்புகளில் வலுவான நிழல்களையும் வண்ணச் சரிவுகளையும் வேண்டுமென்றே தவிர்க்கிறது; அடுக்கடுக்கான விளைவின் மூலம் அல்லாமல், தலைப்பில் உள்ள அடுக்குப் புகைப்படங்கள் மற்றும் நுட்பமான பின்னணி மங்கல் மூலம் ஆழம் அடையப்படுகிறது.

முக்கிய அம்சம் என்பது, மையப்படுத்தப்பட்ட தலைப்புடன் (48-64px/460) கூடிய ஒரு முழு அகலப் புகைப்படம் மற்றும் ஒயின் படத்தால் நிரப்பப்பட்ட ஒரு ஒற்றைச் செயல் அழைப்பு ஆகும். இதன் இடது மற்றும் வலது ஓரங்களில் மிதக்கும், ஒளிபுகும் தயாரிப்பு பயனர் இடைமுக அட்டைகள் பதிக்கப்பட்டுள்ளன. முக்கிய அம்சத்திற்குக் கீழே ஒரு வெள்ளைப் பட்டை லோகோ பட்டை (ஒரு வரிசைக்கு 6 கட்டங்கள், அதிகபட்ச அகலம் வரம்பிடப்பட்டது) உள்ளது. அதைத் தொடர்ந்து, பார்ச்மென்ட் கேன்வாஸில் வெள்ளை அட்டை மேற்பரப்புகளைக் கொண்ட ஒரு டேப் பகுதி உள்ளது. பக்கத்தின் மூன்றில் இரண்டு பங்கு தூரத்தில், ஒரு அடர் நீலப்பச்சை நிறப் பட்டை இந்தத் தாளத்தை உடைக்கிறது—முழு அகலம், இரண்டு பத்திகள் (இடதுபுறம் படம், வலதுபுறம் உரை)—நீங்கள் ஸ்க்ரோல் செய்யும்போது இது மட்டுமே வண்ண வேறுபாட்டை உருவாக்குகிறது. அதைத் தொடர்ந்து ஒரு கிரேடியன்ட் வளிமண்டலப் பட்டை வருகிறது. பிரிவுகளுக்கு இடையேயான செங்குத்து இடைவெளி 64-96px ஆகும். உள்ளடக்கத்தின் அதிகபட்ச அகலம் மையப்படுத்தப்பட்ட நிலையில் ~1200px ஆகும், மேலும் முக்கிய அம்சம் மற்றும் அடர் நிறப் பட்டை ஆகியவை காட்சிப் பகுதியின் முழு அகலத்தையும் உள்ளடக்கியுள்ளன. வழிசெலுத்தல் என்பது மங்கலான பின்னணியுடன் கூடிய ஒரு நிலையான தலைப்புப் பகுதி; பக்கவாட்டுப் பட்டி இல்லை, மெகா மெனு இல்லை. அடிக்குறிப்பு என்பது இணைப்புகளின் பல-பத்தி தளவமைப்பைக் கொண்ட ஒரு முழு அகல பர்கண்டி நிறப் பக்கம் ஆகும். ஒரு தலையங்கத் தாளத்தை உருவாக்கும் வகையில், ஒளி மற்றும் இருண்ட பட்டைகள் மாறி மாறி வரும் ஒட்டுமொத்த அமைப்புமுறை இதுதான்: பிரதான சட்டகம் → அமைதியான வெள்ளை/கிரீம் நிற உள்ளடக்கம் → பிரதான படத்துடன் கூடிய அடர் நிறப் பட்டை → சூழலுக்கேற்ற வண்ணச் சரிவு → பர்கண்டி நிற அடிக்குறிப்பு.

முதன்மையான காட்சி அம்சம் சினிமா பாணியிலான புகைப்படம் எடுத்தல் ஆகும்: திறந்த வானத்திற்கு எதிராக எடுக்கப்பட்ட ஒரு முழு அகல உருவப்படம் மையப் புள்ளியாகச் செயல்படுகிறது, மேலும் பக்கத்தின் கீழ்ப்பகுதியில் இரண்டாவது வளிமண்டலப் பட்டை ஒன்று வைக்கப்பட்டுள்ளது. அந்தப் படம் இதமான வண்ணத்துடனும், நுட்பமான மென்மையுடனும், ஒரு பொன்னிற நேரத்தை நினைவூட்டும் வகையில் பக்கவாட்டுத் தோற்றத்தில் எடுக்கப்பட்டுள்ளது, இது ஒரு பெருநிறுவனத் தோற்றத்தை விட ஒரு தலையங்கத் தோற்றத்தையே அதிகம் உருவாக்குகிறது. சிந்தனையில் ஆழ்ந்திருக்கும் ஒரு மனிதனின் புகைப்படத்தின் மீது, ஒளிபுகும் வடிவியல் செவ்வகங்கள் மற்றும் கையால் எழுதப்பட்ட வாசகங்களைக் கொண்ட ஒரு அடர் நிறப் பட்டை பதிக்கப்பட்டுள்ளது—இது ஒரு ஒற்றைப் படமாக இல்லாமல், பரப்புகளின் ஒரு படத்தொகுப்பாக உள்ளது. பயனர் இடைமுகம், தனித்தனி ஸ்கிரீன்ஷாட்களாக இல்லாமல், புகைப்படத்தின் மீது நேரடியாகப் பதிக்கப்பட்ட மிதக்கும் கண்ணாடி அட்டைகளாக வழங்கப்பட்டுள்ளது. சாய்வு வளிமண்டலப் பட்டையைத் தவிர, ஆயத்த விளக்கப்படங்களோ, முப்பரிமாண ரெண்டர்களோ, அல்லது அருவமான அலங்கார வடிவங்களோ இல்லை. சின்னங்கள், 460 பாயிண்ட் எழுத்து எடைக்கு ஏற்ப ஒரே அகலத்துடன், சுமார் 16-20px அகலமுள்ள, எளிமையான ஒற்றை வண்ணக் கோட்டுச் சின்னங்களாக உள்ளன.

தூய சாஸ்தலையங்கம்அதிக மாறுபாடு

https://superhuman.com

வண்ணத் தட்டு

பிராண்ட்

Midnight Wine #421d24 — முக்கிய செயல்பாட்டு பொத்தான்கள், விளம்பரப் பதாகை மற்றும் அடிக்குறிப்பு ஆகியவை, சிவப்பை விட மையைப் போன்ற ஒரு இதமான, கிட்டத்தட்ட கருப்பு நிற பர்கண்டி வண்ணத்தில் அமைந்துள்ளன; இது ஆதிக்கம் செலுத்தாமல் வண்ணத் தொகுப்பை நிலைநிறுத்துகிறது.
Royal Violet #714cb6 — இணைப்புகள், குறிச்சொற்கள் மற்றும் சிறு சொற்றொடர்களை முன்னிலைப்படுத்த ஊதா நிறம் பயன்படுத்தப்படுகிறது. செயல் அழைப்புகளுக்கு இதை முதன்மை நிறமாகப் பயன்படுத்தக் கூடாது.

நடுநிலை

Lilac Mist #d4c7ff — இரண்டாம் நிலை மேற்பரப்பு நிரப்பு, ஒளி சின்னங்கள் மற்றும் கோஸ்ட் பட்டன் பின்னணிகள் ஆகிய அனைத்தும், தம்மீது தேவையற்ற கவனத்தை ஈர்க்காமல் பிராண்டின் பாணியை உணர்த்தும் ஒரு மென்மையான ஊதா நிறத்தைக் கொண்டுள்ளன.
Deep Lagoon #0c4243 — முக்கிய கதைக்கூறாகப் பயன்படுத்தப்படும் அந்த சித்திரக்கதையின் அடர் பின்னணியானது, அதன் மீது பதிக்கப்பட்ட ஒரு வடிவியல் வடிவத்துடன் இணைந்து, அந்த அமைப்பில் உள்ள ஒரே அடர் மேற்பரப்பாக விளங்குகிறது.
Warm Parchment #f2f0eb — பக்கத்தின் பணிபுரியும் மேற்பரப்பே பிரதான அம்சமாக உள்ளது; அடிப்படையாக இருந்த வெள்ளை நிறத்திற்குப் பதிலாக இதமான கிரீம் நிறம் பயன்படுத்தப்பட்டு, முழு அமைப்புக்கும் ஒரு பதிப்பு சார்ந்த அரவணைப்பை அளிக்கிறது.
Soft Mist #e3e3e2 — நேர்த்தியான ஓரங்கள், அட்டையின் வெளிக்கோடுகள், பிரிக்கும் கோடுகள்—தோல் காகிதத்துடன் இயைந்து, அதே சமயம் விளிம்புகளைத் தெளிவாக வரையறுக்கும் ஒரு இதமான, வெளிர் சாம்பல் நிறம்.
Ink Charcoal #292827 — உள்ளடக்க உரை, தலைப்புகள், சின்னங்களின் வெளிக்கோடுகள் - காகிதத்தில் மை இருப்பது போன்ற உணர்வைத் தரும் அளவுக்குப் பழுப்பு நிறம் கலந்த, இதமான, கிட்டத்தட்ட கருப்பு நிறம்; ஒருபோதும் குளிர்ச்சியற்றது #000
Stone Gray #666666 — துணை உரை, ஆதரவு உரைகள், நுட்பமான விளக்கங்கள் - இவை அனைத்திற்கும் ஒரே ஒரு மிதமான சாம்பல் நிறம், முதன்மை உரையுடன் ஒருபோதும் போட்டியிடாத வகையில் அளவோடு பயன்படுத்தப்பட்டுள்ளது.

அச்சுக்கலை

12 முதல் 64px வரை · 8 படிகள்

Super Sans VF — மாற்று: Inter (closest open equivalent for variable weight range) · வெளிப்புறங்கள் 460, 500, 540, 600, 700 · முழு அமைப்பிலும் ஒரே ஒரு எழுத்துரு. அச்சு மாறிகள் 460 (அனைத்து பெரிய தலைப்பு உரைகளுக்குமான ஒரு தனித்துவமான, சற்றே வெட்டப்பட்ட எழுத்துரு) முதல் 540 (வலியுறுத்தப்பட்ட முக்கிய உரை) மற்றும் 700 (சிறிய, தடித்த தலைப்புகள்) வரையிலான வரம்பில் உள்ளன. சிறப்பாக வடிவமைக்கப்பட்ட ஒரு காட்சிப் புலம் (VF), 460-அளவு தலைப்புகளைத் தற்செயலானதாகத் தோன்றாமல், மிகவும் திட்டமிட்டதாகத் தோன்றச் செய்கிறது—48-64px அளவில் நெருக்கமான எழுத்து இடைவெளியுடன், "சற்றே வெட்டப்பட்ட" விளைவானது மெல்லியதாகத் தோன்றாமல், நம்பிக்கையானதாக உணரப்படுகிறது.

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

நோக்கம்	பொருள்
அடர்த்தி	அடர்த்தியான
அடிப்படை படி	8px
பொத்தான் ஆரம்	16px
அட்டை ஆரம்	16px
நிழல்கள்	நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை
பிரிவுகளுக்கு இடையில்	64-96px
பக்க அகலம்	1200px

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

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

இந்த பாணியில் ஒரு வலைத்தளத்தை உருவாக்கவும்

ஒத்த பாணிகள்

AI for Business — வெதுவெதுப்பான சாம்பல் நிறத் தொனிகளில் அமைந்த ப்ரூட்டலிஸ்ட் தலையங்கக் காட்சியகம்
Jeton — வெதுவெதுப்பான பளிங்குக் கல்லில் நிதி தொழில்நுட்பம் பற்றிய ஒரு தலையங்கம்
Airtable — வெவ்வேறு வண்ணங்களில் அத்தியாயங்கள் குறிக்கப்பட்ட ஒரு இதமான கருத்தரங்கம்.
Osmo — சாம்பல் நிற கான்கிரீட் மீதான டெவலப்பர்களின் அருங்காட்சியகம்
Linktr — தலையங்கச் சுவரொட்டிகள் மிட்டாய்களைப் போல அடுக்கப்பட்டுள்ளன. வலைத்தளமானது வண்ணத் தொகுதிகளில் வடிவமைக்கப்பட்டுள்ளது; அதில் அடர் நீலச் சுவர்களுக்கு எதிராகப் பிரகாசமான பச்சை நிறத் தலைப்புகளும், மெரூன் நிறப் பின்னணிகளுக்கு மேலே மிதக்கும் வெள்ளை மாத்திரை வடிவ வழிசெலுத்தல் கூறுகளும் இடம்பெற்றுள்ளன.
Outsource Consultants — எலும்புத் தாளில் அச்சிடப்பட்ட ஒரு பெரிய அளவிலான கட்டிடக்கலைத் தாள். இது ஒரு மோனோகிராஃபிக் அழகியல்; இதில், மற்றபடி இதமானதாகவும், அச்சுக்கலையில் உச்சபட்சமாகவும் உள்ள கட்டத்தை, ஒரேயொரு பிரகாசமான கருநீலப் புள்ளி குறுக்கிடுகிறது.
Streamtime — தொட்டுணரக்கூடிய படைப்பாற்றல் மனநிலைப் பலகை - வடிவமைப்பாளர் ஸ்கிராப்புக்கிங் மேசை
Switch-Lit — கிரீம் நிறக் காகிதத்தில் மை கொண்டு அச்சிடப்பட்ட தலையங்கக் கட்டம்
HubSpot — ஒற்றை ஆரஞ்சு நிறத் தீற்றலுடன் கூடிய இதமான க்ரீம் நிறக் காகிதம். ஹப்ஸ்பாட், கனமான காகிதத்தில் அச்சிடப்பட்ட ஒரு வடிவமைப்பாளர் இதழைப் போலத் தோற்றமளிக்கிறது—செரிஃப் தலைப்புச் செய்திகள், இதமான க்ரீம் நிறப் பக்கங்கள், மற்றும் மிக முக்கியமான அம்சங்களை மட்டும் சிறப்பித்துக் காட்டும் ஒற்றைத் தீப்பிழம்பு போன்ற ஆரஞ்சு நிறத் தீற்றல்.
Granola — வெதுவெதுப்பான தோல் தாளில் எழுதப்பட்ட களக் குறிப்புகள்—கிரானோலா, சூரிய ஒளி படும் மேசையில் திறந்து வைக்கப்பட்ட, நன்கு பயன்படுத்தப்பட்ட ஒரு மோல்ஸ்கின் நோட்டுப்புத்தகத்தைப் போல வாசிக்கப்படுகிறது: செரிஃப் தலைப்புகள் ஒரு திடமான தோற்றத்தை அளிக்கின்றன, தாவர அடிப்படையிலான மையைப் போன்ற இயற்கையான பச்சை நிறத் தீற்றல்கள், மற்றும் கையெழுத்துக் குறிப்புகளை ஒத்த அட்டைகளின் ஓரங்களில் உள்ள மெல்லிய கோடுகள்.
Secure — மென்மையான பகல் ஒளியில் ஒரு ஐரோப்பிய காஃபேவில் நடக்கும் உரையாடல், காணொளி அழைப்பின் ஒரு இதமான, நேர்த்தியான வடிவமாகும்; அதில் செரிஃப் எழுத்துருவில் உள்ள தலைப்புகள், ஒரு தொழில்நுட்பப் பொருள் பக்கத்தைப் போலன்றி, சிந்தனைமிக்க ஒரு பத்திரிகைக் கட்டுரையைப் போலத் தோற்றமளிக்கின்றன.
Mockups made easy — வெள்ளைக் காகிதத்தில் தலையங்க வடிவமைப்பு ஸ்டுடியோ