Notion

நண்பகல் வெயிலில் ஒரு சூடான காகித நோட்டுப்புத்தகம்

நோஷனின் இடைமுகம், பகல் வெளிச்சத்தில் ஒரு பிரியமான காகித நோட்டுப்புத்தகம் போலத் தோற்றமளிக்கிறது: உயிரற்றதாகத் தோன்றாமல், தொட்டுணரக்கூடிய ஒரு இதமான, கிரீம் போன்ற தளம்; தாராளமான சான்ஸ்-செரிஃப் எழுத்துருக்கள் தயாரிப்பு விளக்கத்திற்கு ஒரு தலையங்க முக்கியத்துவத்தை அளிக்கின்றன; மேலும், நிறங்கள் அரிதான நிறுத்தற்குறிகளாகப் பயன்படுத்தப்பட்டுள்ளன—பீச் நிற "மாத்திரைகள்" வினைச்சொற்களை முன்னிலைப்படுத்துகின்றன, ஒற்றை நீல நிறம் முக்கியச் செயலுக்கு அடித்தளமிடுகிறது, மற்றும் சுழலும் துணை வண்ணங்களின் (பவளம், அம்பர், வானம், நள்ளிரவு) வரிசையானது அட்டைகளின் பின்னணியை ஸ்டிக்கர்களைப் போல வண்ணமயமாக்குகிறது. அட்டைகள், மோல்ஸ்கின் நோட்டுப்புத்தகத்தின் வரி இடப்பட்ட பகுதிகளைப் போல, மெல்லிய ஓரங்கள் மற்றும் மூலைகளுடன்—நிழல்களோ, குரோம் பூச்சுகளோ இல்லாமல்—ஒரு தளத்தில் அடுக்கப்பட்டுள்ளன. அசைவூட்டம் விளையாட்டுத்தனமாகவும் துள்ளலாகவும் உள்ளது; 200 மில்லி விநாடிகளில் மென்மையான நிலைமாற்றங்களும், அலங்காரமாக இல்லாமல் இடைமுகத்திற்கு உயிரூட்டும் துள்ளலான கதாபாத்திர அசைவூட்டங்களும் இதில் உள்ளன.

மையப்படுத்தப்பட்ட நிலையில், அதிகபட்ச அகலம் தோராயமாக 1440px ஆகக் கட்டுப்படுத்தப்பட்டுள்ளது. முக்கிய உறுப்பு ஒரு மையப்படுத்தப்பட்ட அடுக்காகும்: சின்னங்களின் ஒரு வரிசை → உட்பொதிக்கப்பட்ட வண்ண மாத்திரையுடன் கூடிய ஒரு பெரிய இரண்டு-வரித் தலைப்பு → ஒரு துணைத் தலைப்பு → இரண்டு செயலழைப்பு பொத்தான்களைக் கொண்ட ஒரு வரிசை → ஒரு பெரிய தயாரிப்பு UI மாதிரி. முக்கிய உறுப்பிற்குக் கீழே, பிரிவுகள் வெள்ளை அட்டைகளின் கட்டங்களுக்கும் முழு-வண்ண உச்சரிப்புப் பலகங்களுக்கும் இடையில் மாறி மாறி வருகின்றன. லோகோ சுவர் என்பது சாம்பல் நிறத்தில் உள்ள கூட்டாளர் லோகோக்களின் மையப்படுத்தப்பட்ட ஒற்றை-வரிசைக் கட்டமாகும். சிறப்புத் தொகுதிகள் இரண்டு-நெடுவரிசை அமைப்பைப் பயன்படுத்துகின்றன (இடதுபுறத்தில் உரை, வலதுபுறத்தில் வண்ணப் பலகம்), பிரிவுகளுக்கு இடையில் இடமிருந்து வலமாக மாறி மாறி வருகின்றன. "தேவைக்கேற்ப உங்கள் உதவியாளர்களிடம் கேளுங்கள்" என்ற பிரிவு 2x2 அட்டை கட்டத்தைப் பயன்படுத்துகிறது, இதில் மேல் அட்டை முழு அகலத்தையும் எடுத்துக்கொள்கிறது, மற்றும் கீழ் வரிசை இரண்டு சமமான நெடுவரிசைகளாகப் பிரிக்கப்பட்டுள்ளது. பிரிவுகளுக்கு இடையேயான இடைவெளிகள் தாராளமாக (~80px) உள்ளன, இது ஒரு அமைதியான செங்குத்துத் தாளத்தை உருவாக்குகிறது. வழிசெலுத்தல் என்பது 64px உயரமுள்ள ஒரு நிலையான மேல் பட்டையாகும், இது மையப்படுத்தப்பட்ட வழிசெலுத்தல் கூறுகள் மற்றும் வலதுபுறம் சீரமைக்கப்பட்ட செயலழைப்பு பொத்தான்களைக் கொண்டுள்ளது.

புகைப்படங்கள் இல்லாமல், விளக்கப்படங்களே முதன்மையானவை. காட்சி மொழியானது, தட்டையான, சித்திர வடிவிலான சின்னங்கள் (2px வண்ண வட்டங்களில் வளைந்த விளிம்புகள்), அருவமான அலங்காரக் கூறுகள் (கையால் வரையப்பட்ட நெளிவுகள், மினுமினுப்பு, அம்புக்குறிகள், மலர் வடிவங்கள்), மற்றும் தயாரிப்பின் பயனர் இடைமுகத்தின் மாதிரி வடிவங்கள் ஆகியவற்றின் மீது கட்டமைக்கப்பட்டுள்ளது. இந்தச் சின்னங்கள் பிரதான சாளரத்தில் ஏழு அவதாரங்களின் கிடைமட்ட வரிசையாகத் தோன்றி, பக்கமெங்கும் விளையாட்டுத்தனமான நிறுத்தற்குறிகளாகச் சிதறிக் கிடக்கின்றன. தயாரிப்பின் திரைப்பிடிப்புகள் மட்டுமே "உண்மையான" காட்சிக் கூறுகளாகும்: அவை முழுமையான கூறுகள் மற்றும் உண்மையான தரவுகளுடன், உண்மையான நோஷன் இடைமுகத்தை (கன்பன் பலகைகள், ஆவணக் காட்சிகள், AI முகவர் பேனல்கள்) காட்டுகின்றன. பிரதான சாளரத்தில் உள்ள தயாரிப்பு மாதிரி வடிவம் பெரியதாகவும், மையப்படுத்தப்பட்டதாகவும் உள்ளது, மேலும் அது கேன்வாஸிலிருந்து பிரிக்கும் ஒற்றை நிழலை உருவாக்குகிறது. வாழ்க்கை முறைப் புகைப்படங்கள், ஆயத்தப் படங்கள், அருவமான 3D ரெண்டர்கள் எதுவும் இல்லை.

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

https://notion.so

வண்ணத் தட்டு

பிராண்ட்

Notion Blue #0075de — செயலில் உள்ள வழிசெலுத்தலில் ஒரு சிறப்பம்சமாக விளங்கும், செயலுக்கு அழைக்கும் (CTA) பொத்தானை நிரப்பும் பிரதான கூறான, நிரப்பப்பட்ட செயல் பொத்தான்கள், ஏறக்குறைய ஒற்றை வண்ண அமைப்பில் ஒரு நிலைமாற்றியாக உணரப்படும் அளவுக்குப் போதுமான செறிவு கொண்ட ஒரே வண்ணத் திட்டமாகும்.

நடுநிலை

Paper Warmth #f6f5f4 — பக்கத் திரை, பிரதான சாளரப் பின்னணி மற்றும் பகுதிப் பின்னணி ஆகிய அனைத்தும், கணினி அமைப்புக்குத் தொட்டுணரக்கூடிய, அனலாக் போன்ற உணர்வைத் தரும் இதமான, சற்றே வெளிர் பழுப்பு நிறங்களில் அமைந்துள்ளன.
Pure White #ffffff — அட்டை மேற்பரப்புகள், புடைப்பான பட்டைகள், லோகோ பின்னணி, அடர் நிற அட்டைகளில் மாறுபட்ட எழுத்துக்கள்.
Ink Black #000000 — புதிய வண்ணங்களைச் சேர்க்காமல் ஒரு படிநிலையை உருவாக்குவதற்காக, முதன்மை உரை, வழிசெலுத்தல் இணைப்புகள், தலைப்புகள் போன்றவை வெவ்வேறு ஒளிபுகும் தன்மைகளுடன் (100%, 95%, 90%, 60%, 40%, 20%) பயன்படுத்தப்படுகின்றன.
Charcoal #111111 — முழுக்க முழுக்க கருப்பு நிறம் மிகவும் கடுமையாகத் தோன்றும் பயனர் இடைமுகப் பகுதிகளுக்கான அடர் நிற எழுத்துத் தேர்வு.
Stone #757575 — இரண்டாம் நிலை வழிசெலுத்தல் உரை, ஒலியடக்கப்பட்டுள்ள துணை உரை, செயலிழக்கப்பட்ட பொத்தான் பெயர்கள் - 60% மை ஆல்ஃபா
Graphite #615d59 — முக்கிய உரை, இதமான பின்னணியுடன் இணக்கமாக, பழுப்புச் சாம்பல் நிறத்தில் ஒரு கதகதப்பான தொனியைக் கொண்டுள்ளது.

அச்சுக்கலை

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

NotionInter — மாற்று: Inter · வெளிப்புறங்கள் 400, 500, 600, 700 · முக்கியமான சான்ஸ்-செரிஃப் எழுத்துருவானது, நுட்பமான வேறுபாடுகளைக் கொண்ட ஒரு வடிவியல் ஹியூமனிஸ்ட் எழுத்துருவாகும். இது முக்கிய உரைக்கு 400 அளவிலும், வழிசெலுத்தல்/பயனர் இடைமுகத்திற்கு 500 அளவிலும், தலைப்புகளுக்கு 600-700 அளவிலும் பயன்படுத்தப்படுகிறது. இந்த எழுத்துரு அளவானது, பெரிய அளவுகளில் (96px அளவில் -4.6px, 72px அளவில் -2px) தீவிரமான எதிர்மறை எழுத்து இடைவெளியைப் பயன்படுத்துகிறது. இது தலைப்பை காற்றோட்டமாகத் தோன்றுவதற்குப் பதிலாக, மிகவும் கச்சிதமாகவும் நம்பிக்கையுடனும் உணர வைக்கிறது.
Lyon Text — மாற்று: Source Serif Pro · வெளிப்புறங்கள் 400 · முக்கிய உரையின் தனித்தனிப் பிரிவுகளுக்கும் பகுதி அறிமுகங்களுக்கும் ஒதுக்கப்பட்டுள்ள தலையங்க செரிஃப் எழுத்துரு, ஒரு பத்திரிகை வடிவமைப்பில் உள்ள மேற்கோளைப் போல, எழுத்துருவிற்கு இலக்கிய முக்கியத்துவத்தை அளிப்பதற்காகக் குறைவாக (நான்கு முறை) பயன்படுத்தப்பட்டுள்ளது. இது ஒரு இணையான படிநிலையாகச் செயல்படாமல், ஒரு அமைப்பு சார்ந்த அழுத்தமாகச் செயல்படுகிறது.

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

நோக்கம்	பொருள்
அடர்த்தி	சராசரி
அடிப்படை படி	8px
பொத்தான் ஆரம்	8px
அட்டை ஆரம்	12px
நிழல்கள்	நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை
பிரிவுகளுக்கு இடையில்	80px
பக்க அகலம்	1440px

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

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

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

ஒத்த பாணிகள்

ElevenLabs — மென்மையான தலைப்புகளுடன், இதமான கிரீம் வண்ணங்களில் அமைந்த ஒரு புகைப்படக் கட்டுரை. ஒரு பௌஹாஸ் பாணி நோட்டுப்புத்தகம்—முட்டை ஓட்டு நிறக் காகிதம், கருப்பு மை, மற்றும் பொருளைக் காட்சிப்படுத்த ஒற்றை ஊதா மற்றும் ஆரஞ்சு வண்ண அலங்காரம்.
Awesomic — காகிதத் துண்டுகளை நினைவூட்டும் ஆரஞ்சு நிற நிறுத்தற்குறிகளுடன் கூடிய தலையங்க துத்தநாக வலை.
Monad — வெதுவெதுப்பான தோல் காகிதம் குறித்த தலையங்க தொழில்நுட்ப இதழ்
Dub — லிங்கின் மேட் அரிசி காகித கட்டுப்பாட்டுப் பலகம்
Seline Analytics — சூடான காகிதத்தில் ஒரு அமைதியான பகுப்பாய்வு அட்டவணை
Anthropic — வெதுவெதுப்பான தோல் தாளில் அச்சிடப்பட்ட ஒரு அறிவியல் கள ஆய்விதழ்—அமைதியான தந்த நிற மேற்பரப்புகள், செரிஃப் வடிவ தலையங்கத் தலைப்புகள், மற்றும் செயல்பாடு தேவைப்படும்போது மட்டும் தோன்றும் ஒரு களிமண் நிறச் சின்னம்.
Calendly — குளிர்ந்த பளிங்குக் கல்லின் மீது அடர் நீல மை
Augen Pro — ஆப்பிளின் வெள்ளை நிறக் காட்சியமைப்பில், ஒரே வண்ணமுடைய இடத்தில், நேர்த்தியான, எடையற்ற, மின்னல் நீல நிறம் மட்டுமே தனிச்சிறப்பாக இடம்பெற்றுள்ளது.
Antimetal — வெளிர் நிறத் தாளில் ஒரு தலையங்கக் குறிப்பு—ஒரு அறிவியல் இதழில் ஓர் அமைதியான காலைப் பொழுது; அங்கே நிதானம் தன்னம்பிக்கையை வெளிப்படுத்த, செரிஃப் எழுத்துருக்கள் கடினமான வேலையைச் செய்கின்றன.
Perk — சூடான காகிதத்தோல் மீது மின்சார சுண்ணாம்பு
Ditto — சூரிய ஒளி நிறைந்த ஒரு பட்டறையில் காட்டுப்பூ மாதிரிகள் உருவாக்கப்படுகின்றன. வெதுவெதுப்பான கிரீம் நிறப் பரப்புகள், துடிப்பான மஞ்சள் நிற அடிப்பூ, அடர் கடற்படை நீல மைகள், படைப்பிற்குப் பின்னால் மலரும் இயற்கையான வண்ண வடிவங்கள்.
Officevibe — வெதுவெதுப்பான கிரீம் நிறக் காகிதத்தில் ஒரு தலையங்க இதழ். மனிதவள மேலாண்மை குறித்த ஒரு சிந்தனைமிக்க கட்டுரையை, ஒரு தயாரிப்பாக முன்வைக்கப்படுவதைக் கற்பனை செய்து பாருங்கள்—ஒரு நவீன நீல இடைமுகத்தின் வழியே மெல்லிய செரிஃப் எழுத்துரு மென்மையாக ஒலிப்பது போல.