Dub
ലിങ്കിന്റെ മാറ്റ് റൈസ് പേപ്പർ നിയന്ത്രണ പാനൽ
ഡബ്ബിന്റെ വിഷ്വൽ സിസ്റ്റത്തിന് ഒരു നിയന്ത്രിതവും ഏതാണ്ട് എഡിറ്റോറിയൽ SaaS സൗന്ദര്യശാസ്ത്രവുമുണ്ട്: നീണ്ടുനിൽക്കുന്ന ഘടകങ്ങളേക്കാൾ നേർത്ത ബോർഡറുകളാൽ ഒരുമിച്ച് ചേർത്തിരിക്കുന്ന വെളുത്ത നിറത്തിലുള്ള ഒരു ക്യാൻവാസ്, സാന്ദ്രമായ മോണോക്രോം ടൈപ്പോഗ്രാഫി ഘടനാപരമായ പിന്തുണ നൽകുന്നു, ഒരു തിളക്കമുള്ള നീല നിറം (#2563eb) ഒരു പ്രസ്താവന നടത്തുന്നു. ഒറ്റനോട്ടത്തിൽ ഉപരിതലങ്ങൾ പരന്നതും ഫ്രെയിംലെസ്സുമായി തുടരുന്നു, പക്ഷേ ഓരോ കണ്ടെയ്നറിനും 1px #e5e5e5 മാർജിൻ ഉണ്ട്, ഇത് അച്ചടിച്ച പ്രമാണത്തിന്റെ അനുഭവം ഉണർത്തുന്നു. ന്യൂട്രൽ പാലറ്റിന് മുകളിൽ പൊങ്ങിക്കിടക്കുന്ന നിറമുള്ള "പിൽ" ആക്സന്റുകളുടെ (ഓറഞ്ച്, പച്ച, പർപ്പിൾ) ഒരു ചെറിയ സെറ്റ്, മിന്നാതെ ആത്മവിശ്വാസവും ആധുനികവും അനുഭവപ്പെടുന്ന ഹെഡറുകൾ എന്നിവയിലൂടെയാണ് വ്യക്തിത്വം കൈവരിക്കുന്നത്. ഘടകങ്ങൾ ഒതുക്കമുള്ളതും ഇടതൂർന്നതുമാണ്: 8px ഗട്ടറുകൾ, 12px കാർഡ് റേഡിയസ്, 9999px-ൽ ഗുളിക ആകൃതിയിലുള്ള ലേബലുകൾ, കനത്തതും നിറഞ്ഞതുമായ ബട്ടണുകൾക്ക് പകരം അദൃശ്യമായ നിയന്ത്രണങ്ങൾ.
ഏകദേശം 1200px പരമാവധി വീതിയുള്ള ഒരു കേന്ദ്രീകൃത ലേഔട്ടിലാണ് പേജ് നിർമ്മിച്ചിരിക്കുന്നത്. ഒരു വലിയ ഉൽപ്പന്ന ലേഔട്ടിന് മുകളിൽ തിരശ്ചീനമായി സ്ഥാപിച്ചിരിക്കുന്ന മൂന്ന് ഫ്ലോട്ടിംഗ് എലമെന്റുകളുള്ള (അഫിലിയേറ്റ് പ്രോഗ്രാമുകൾ, കൺവേർഷൻ അനലിറ്റിക്സ്, ഷോർട്ട് ലിങ്കുകൾ) ഒരു കേന്ദ്രീകൃത ടെക്സ്റ്റ് ബ്ലോക്കാണ് പ്രധാന ഘടകം. ടോണൽ വേർതിരിക്കലിനായി വെളുത്ത ക്യാൻവാസും #f5f5f5 പേപ്പർ ഹെയ്സും തമ്മിൽ മാറിമാറി മാറിമാറി വരുന്ന, സ്ഥിരമായ 64px ഗട്ടറുകൾ ഉപയോഗിച്ച് വിഭാഗങ്ങൾ ലംബമായി ക്രമീകരിച്ചിരിക്കുന്നു. താഴെയുള്ള വിഭാഗം ഒരു Z-ആകൃതിയിലുള്ള ലേഔട്ട് ഉപയോഗിക്കുന്നു: എഡിറ്റോറിയൽ ടെക്സ്റ്റ് മധ്യ മൂന്നിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു, ഫ്ലോട്ടിംഗ് UI കാർഡുകൾ ഇടത്, വലത് മാർജിനുകളിൽ നങ്കൂരമിട്ടിരിക്കുന്നു, ഇത് ഒരു അസമമായ, മാഗസിൻ പോലുള്ള താളം സൃഷ്ടിക്കുന്നു. ലോഗോ ക്ലൗഡ് പേജിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്ന ഒരു ലളിതമായ 5x2 ഗ്രിഡാണ്. നാവിഗേഷൻ ഒരു മിനിമലിസ്റ്റ് ടോപ്പ് ബാറാണ് - ഇടതുവശത്ത് ലോഗോ, മധ്യഭാഗത്ത് നാവിഗേഷൻ, വലതുവശത്ത് രണ്ട് ബട്ടണുകളുടെ ഒരു ഗ്രൂപ്പ് (ഒരു ഗോസ്റ്റ് "ലോഗിൻ" ബട്ടൺ + ഒരു പൂരിപ്പിച്ച "രജിസ്റ്റർ" ബട്ടൺ) - ഒരു സ്ഥിരമായ അല്ലെങ്കിൽ മെഗാ-മെനു ഇല്ലാതെ. പ്രധാന വിൻഡോയുടെ ഡാഷ്ബോർഡ് ലേഔട്ട് ഒരു ക്ലാസിക് രണ്ട്-കോളം ആപ്പ് ലേഔട്ട് പ്രദർശിപ്പിക്കുന്നു: ഒരു നിശ്ചിത സൈഡ്ബാർ (240px-ന് സമാനമായത്) + സന്ദർശകർ സ്ക്രോൾ ചെയ്യാൻ തുടങ്ങുന്നതിനുമുമ്പ് ഉൽപ്പന്ന വിവരങ്ങളുടെ സാന്ദ്രത നിർവചിക്കുന്ന ഒരു ഉള്ളടക്ക ഏരിയ.
ജീവിതശൈലിയിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുള്ളതല്ല, ഉൽപ്പന്നത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുള്ളതാണ് വിഷ്വലുകൾ. പ്രധാന സ്ക്രീൻ ഒരു വലിയ ഡാഷ്ബോർഡ് സ്ക്രീൻഷോട്ടിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു, സൈഡ്ബാർ നാവിഗേഷൻ, ഡാറ്റ ടേബിൾ, ഫ്ലോട്ടിംഗ് UI ഘടകങ്ങൾ എന്നിവ ഉപയോഗിച്ച് ഒരു യഥാർത്ഥ ലോക ഉൽപ്പന്ന മോക്കപ്പിനെ പ്രതിനിധീകരിക്കുന്നു, ഇത് വെളുത്ത ക്യാൻവാസിൽ ഒരു ഫ്ലാറ്റ് പാനലായി സജ്ജീകരിച്ചിരിക്കുന്നു. ക്ലയന്റ് ലോഗോകൾ അവരുടെ സോഷ്യൽ മീഡിയ പ്രകടനത്തെ അംഗീകരിക്കുന്നതിന് ഒരു ഡീസാച്ചുറേറ്റഡ് ഗ്രേസ്കെയിൽ ഗ്രിഡിൽ (ബീഹിവ്, സൂപ്പർ പവർ, ചാറ്റ്ബേസ് മുതലായവ) പ്രദർശിപ്പിക്കുന്നു, പേജിന്റെ ഒറ്റ നീല ആക്സന്റ് പ്രബലമായി തുടരാൻ അനുവദിക്കുന്നതിന് നിറം നീക്കം ചെയ്തു. ഫ്ലോട്ടിംഗ് പാർട്ണർ കാർഡുകൾ (ചെറിയ പ്രൊഫൈലുകളും വരുമാന/പേയ്മെന്റ് ഡാറ്റയുള്ള ടൈലുകളും) താഴെയുള്ള എഡിറ്റോറിയൽ ടെക്സ്റ്റിന്റെ ബ്ലോക്കുകളിൽ ചുറ്റി സഞ്ചരിക്കുന്നു, ടെക്സ്റ്റിൽ തന്നെ ഷാഡോകൾ ഉപയോഗിക്കാതെ ആഴത്തിലുള്ള ഒരു ബോധം സൃഷ്ടിക്കുന്നു. ഡോട്ട് ചെയ്ത ഗ്രിഡ് പശ്ചാത്തല പാറ്റേൺ ഒരു സിഗ്നേച്ചർ സവിശേഷതയാണ്: വളരെ കുറഞ്ഞ അതാര്യതയുള്ള ചെറിയ ഡോട്ടുകളുടെ നേർത്ത നിര ടെക്സ്ചറും ഒരു ഡിസൈൻ സിസ്റ്റത്തിന്റെ/ഡ്രോയിംഗ് ഉപരിതലത്തിന്റെ അനുഭവവും സൃഷ്ടിക്കുന്നു, ഇത് "ആധുനിക ലിങ്ക് ആട്രിബ്യൂഷൻ പ്ലാറ്റ്ഫോം" ആയി സൈറ്റിന്റെ സ്ഥാനനിർണ്ണയത്തിന് പ്രാധാന്യം നൽകുന്നു. ഔട്ട്ലൈനുകളും ഫില്ലുകളും ഉള്ള ഐക്കണോഗ്രഫി വളരെ കുറവാണ്, കൂടാതെ ഫീച്ചർ ടാഗുകൾക്കായി ഒരു ആക്സന്റ് പാലറ്റ് (ടാംഗറിൻ ഓറഞ്ച്, ലാവെൻഡർ പർപ്പിൾ, മിന്റ് ഗ്രീൻ) ഉപയോഗിക്കുന്നു. ഫോട്ടോഗ്രാഫുകളോ ചിത്രീകരണങ്ങളോ 3D മോഡലുകളോ ഉപയോഗിക്കുന്നില്ല - ഉൽപ്പന്നത്തിന്റെ ഉപയോക്തൃ ഇന്റർഫേസ് തന്നെ ഒരു ദൃശ്യ ഭാഷയാണ്.
പാലറ്റ്
ബ്രാൻഡ്
- Electric Blue
#2563eb— ലോഗോ, ലിങ്കുകൾ, പ്രധാന പ്രകടന സൂചകങ്ങൾ, സജീവ അവസ്ഥകൾ, ഐക്കൺ ആക്സന്റുകൾ എന്നിങ്ങനെയുള്ള പ്രാഥമിക ബ്രാൻഡ് നിറമാണ് ഉപയോഗിച്ചിരിക്കുന്നത്. വെളുത്ത പശ്ചാത്തലത്തിൽ സമ്പന്നമായ നീല നിറം സിസ്റ്റത്തിന്റെ ഏക ദൃശ്യ ആകർഷണം സൃഷ്ടിക്കുന്നു. - Deep Sapphire
#1e40af— ആക്ഷൻ ബട്ടണിന്റെ പ്രധാന പശ്ചാത്തലം, പ്രവർത്തനത്തെ സൂചിപ്പിക്കുന്ന ഒരേയൊരു നിറമായ കോൾ ടു ആക്ഷന്റെ ബോൾഡ് ഫിൽ, ശ്രദ്ധ ആകർഷിക്കുന്നതിനായി വളരെ കുറച്ച് മാത്രമേ ഉപയോഗിച്ചിട്ടുള്ളൂ.
നിഷ്പക്ഷം
- Canvas White
#ffffff— പേജ് പശ്ചാത്തലം, കാർഡ് ഉപരിതലം, പോപ്പ്-അപ്പ് പാനലുകൾ എന്നിവയാണ് ഓരോ സ്ക്രീനിന്റെയും അടിസ്ഥാനം. - Paper Mist
#f5f5f5— നെസ്റ്റഡ് കാർഡുകൾ, അധിക പാനലുകൾ, ഹോവർ ചെയ്യുമ്പോൾ ഫില്ലുകൾ എന്നിവയ്ക്കായി സൂക്ഷ്മമായ ഉപരിതല വർണ്ണ മാറ്റങ്ങൾ. - Ash
#e5e5e5— കാർഡുകളിലെ നേർത്ത ബോർഡറുകൾ, ഇൻപുട്ട് കണക്ടറുകൾ, ഡിവൈഡറുകൾ എന്നിവയാണ് സിസ്റ്റത്തെ ഒരുമിച്ച് നിർത്തുന്ന ഘടനാപരമായ രേഖകൾ. - Smoke
#d4d4d4— തിരഞ്ഞെടുത്ത കണ്ടെയ്നറുകൾക്ക് കൂടുതൽ മൂർച്ചയുള്ള ബോർഡറുകളും അധിക ബട്ടൺ ഔട്ട്ലൈനുകളും. - Pebble
#c8c8c8— ബോർഡറുകൾ, നിയന്ത്രണ രൂപരേഖകൾ, ഇടത്തരം ദൃശ്യതീവ്രതയുള്ള ഘടനാപരമായ ഡിവൈഡറുകൾ. പ്രവർത്തനത്തിനുള്ള കോളുകൾക്ക് പ്രാഥമിക നിറമായി ഈ നിറം ഉപയോഗിക്കരുത്. - Midnight Ink
#0a0a0a— പരമാവധി ദൃശ്യതീവ്രതയ്ക്കായി ബട്ടണുകളുടെ പ്രധാന വാചകം, ഹൈലൈറ്റ് ചെയ്ത ബട്ടണുകൾ, നാവിഗേഷൻ വാചകം എന്നിവ ഏതാണ്ട് കറുപ്പാണ്.
ടൈപ്പോഗ്രാഫി
11 മുതൽ 48px വരെ · 9 ചുവടുകൾ
- Satoshi — മാറ്റിസ്ഥാപിക്കൽ: Inter (weight 500 · രൂപരേഖകൾ 500 · ഡിസ്പ്ലേ ഹെഡിംഗുകൾ - ഹെഡിംഗുകൾക്കും സെക്ഷൻ ടൈറ്റിലുകൾക്കും 36–48px വരികളിൽ മാത്രം ഉപയോഗിക്കുന്നു. ഫോണ്ട് ഭാരം - 500 (ഇടത്തരം, ബോൾഡ് അല്ല): ഹെഡിംഗുകൾ ആത്മവിശ്വാസമുള്ളതും ആധുനികവുമായി കാണപ്പെടുന്നു, പക്ഷേ ഒരിക്കലും അമിതമായി പ്രവർത്തിക്കുന്നില്ല. സതോഷിയുടെ ജ്യാമിതീയ അനുപാതങ്ങൾ ടൈപ്പ്ഫേസിന് അല്പം എഡിറ്റോറിയൽ, ആധുനിക അനുഭവം നൽകുന്നു, ഇന്ററിന്റെ ബോഡി കോപ്പി പകർത്താൻ കഴിയില്ല.
- Inter — മാറ്റിസ്ഥാപിക്കൽ: Inter (native) · രൂപരേഖകൾ 400, 500, 600 · ബോഡി കോപ്പി, UI ലേബലുകൾ, നാവിഗേഷൻ, ഉപതലക്കെട്ടുകൾ, മൈനർ ഹെഡിംഗുകൾ. ഇന്റർ ആണ് പ്രാഥമിക വർക്ക്ഹോഴ്സ്, 11px മൈക്രോ-ലേബലുകൾ മുതൽ 30px സെക്കൻഡറി ഹെഡിംഗുകൾ വരെ എല്ലാം കൈകാര്യം ചെയ്യുന്നു. ബോഡി കോപ്പിക്ക് 400 ന്റെ ഭാരം ഡിഫോൾട്ടാണ്, ഹൈലൈറ്റ് ചെയ്ത ഘടകങ്ങൾക്കും ബട്ടൺ ലേബലുകൾക്കും 500 ഉം, പ്രധാനപ്പെട്ട UI ലേബലുകൾക്കായി 600 ഉം നീക്കിവച്ചിരിക്കുന്നു. 1.5 വരി ഉയരമുള്ള 16px ആണ് ഏറ്റവും കൂടുതൽ തവണ കാണപ്പെടുന്ന സിംഗിൾ-സ്റ്റെപ്പ് വലുപ്പം (1220 സംഭവങ്ങൾ), 16px കാനോനിക്കൽ ബോഡി കോപ്പി വലുപ്പമാണെന്ന് സ്ഥിരീകരിക്കുന്നു.
- Geist Mono — മാറ്റിസ്ഥാപിക്കൽ: JetBrains Mono or IBM Plex Mono · രൂപരേഖകൾ 400, 500 · കോഡ് സ്നിപ്പെറ്റുകൾ, ടെക്നിക്കൽ മെറ്റാഡാറ്റ, എംബഡഡ് മോണോസ്പേസ്ഡ് ടോക്കണുകൾ എന്നിവ 12–14px ഉള്ള കോഡ് ബ്ലോക്കുകളിലും 24px ഉള്ള വലിയ കോഡ് ഡിസ്പ്ലേ ഘടകങ്ങളിലും ഉപയോഗിക്കുന്നു. ഇത് ഡബിന്റെ ഉൽപ്പന്ന സ്ഥാനനിർണ്ണയവുമായി പൊരുത്തപ്പെടുന്ന ഡെവലപ്പർ ഉപകരണത്തിന്റെ വിശ്വാസ്യത ഉറപ്പാക്കുന്നു.
ഇടവേളകളും രൂപവും
| ഉദ്ദേശ്യം | അർത്ഥം |
|---|---|
| സാന്ദ്രത | ശരാശരി |
| അടിസ്ഥാന ഘട്ടം | 8px |
| ബട്ടൺ ആരം | 8px |
| കാർഡ് ആരം | 12px |
| ഷാഡോകൾ | ഷാഡോകൾക്ക് പകരം ബോർഡറുകൾ ഇല്ല |
| വിഭാഗങ്ങൾക്കിടയിൽ | 64px |
| പേജ് വീതി | 1200px |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Dub ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- ElevenLabs — സൂക്ഷ്മമായ തലക്കെട്ടുകളുള്ള ഊഷ്മളമായ ക്രീം ടോണുകളിൽ ഒരു ഫോട്ടോ ഉപന്യാസം. ബൗഹൗസ് ശൈലിയിലുള്ള ഒരു നോട്ട്ബുക്ക് - മുട്ടത്തോടിന്റെ നിറമുള്ള പേപ്പർ, കറുത്ത മഷി, ഉൽപ്പന്ന പ്രദർശനത്തിനായി പർപ്പിൾ, ഓറഞ്ച് നിറങ്ങളിലുള്ള ഒറ്റ ആക്സന്റ്.
- Awesomic — കൺഫെറ്റിയെ അനുസ്മരിപ്പിക്കുന്ന ഓറഞ്ച് വിരാമചിഹ്നങ്ങളുള്ള എഡിറ്റോറിയൽ സിങ്ക് മെഷ്.
- Monad — ചൂടുള്ള കടലാസിൽ എഡിറ്റോറിയൽ ടെക്നിക്കൽ ജേണൽ
- Seline Analytics — ചൂടുള്ള കടലാസിൽ ഒരു നിശബ്ദ വിശകലന പട്ടിക
- Notion — ഉച്ചവെയിലിൽ ഒരു ചൂടുള്ള കടലാസ് നോട്ട്ബുക്ക്
- Anthropic — ഊഷ്മളമായ വെല്ലത്തെക്കുറിച്ചുള്ള ഒരു ശാസ്ത്രീയ ഫീൽഡ് ജേണൽ - ശാന്തമായ ആനക്കൊമ്പ് പ്രതലങ്ങൾ, സെറിഫൈഡ് എഡിറ്റോറിയൽ തലക്കെട്ടുകൾ, ആവശ്യമുള്ളപ്പോൾ മാത്രം ദൃശ്യമാകുന്ന ഒറ്റ കളിമൺ ആക്സന്റ്.
- Calendly — തണുത്ത മാർബിളിൽ കടും നീല മഷി
- Augen Pro — മോണോക്രോം നിറത്തിലുള്ള ഇടത്തിലെ ഏക ആകർഷണമായി ക്ലിനിക്കൽ, ഭാരമില്ലാത്ത, ഇലക്ട്രിക് നീലയാണ് ആപ്പിളിന്റെ വെള്ള നിറത്തിലുള്ള അവതരണത്തിൽ ഉള്ളത്.
- Antimetal — ക്രീം പേപ്പറിൽ ഒരു എഡിറ്റോറിയൽ ക്രോണിക്കിൾ - ഒരു ശാസ്ത്ര ജേണലിലെ ശാന്തമായ ഒരു പ്രഭാതം, അവിടെ സംയമനം ആത്മവിശ്വാസം പകരുകയും സെരിഫുകൾ ഭാരിച്ച കാര്യങ്ങൾ ചെയ്യുകയും ചെയ്യുന്നു.
- Perk — ചൂടുള്ള കടലാസ് പേപ്പറിൽ ഇലക്ട്രിക് കുമ്മായം
- Ditto — കാട്ടുപൂക്കളുടെ സാമ്പിളുകൾ നിർമ്മിക്കുന്ന സൂര്യപ്രകാശത്തിൽ പ്രവർത്തിക്കുന്ന ഒരു വർക്ക്ഷോപ്പ്. ചൂടുള്ള ക്രീം നിറമുള്ള പ്രതലങ്ങൾ, തിളക്കമുള്ള മഞ്ഞ അടിസ്ഥാന നിറം, കടും നേവി നീല മഷികൾ, കഷണത്തിന് പിന്നിൽ വിരിഞ്ഞുനിൽക്കുന്ന ജൈവ നിറമുള്ള രൂപങ്ങൾ.
- Officevibe — ചൂടുള്ള ക്രീം നിറമുള്ള പേപ്പറിൽ ഒരു എഡിറ്റോറിയൽ മാസിക. ഒരു ഉൽപ്പന്നമായി അവതരിപ്പിച്ചിരിക്കുന്ന, HR മാനേജ്മെന്റിനെക്കുറിച്ചുള്ള ഒരു ചിന്തനീയമായ ഉപന്യാസം സങ്കൽപ്പിക്കുക - ഒരു ആധുനിക നീല ഇന്റർഫേസിലൂടെ മന്ത്രിക്കുന്ന ഒരു കഴ്സീവ് സെരിഫ് ഫോണ്ട്.