Superhuman
ഗോൾഡൻ അവർ എഡിറ്റോറിയൽ പാനൽ
എഡിറ്റോറിയൽ ഫോട്ടോഗ്രാഫിയുടെയും സോഫ്റ്റ്വെയർ UI യുടെയും ഇടയിലൂടെ സൂപ്പർഹുമാൻ കടന്നുവരുന്നു - ഒരു ചൂടുള്ള, കടലാസ് പോലുള്ള ക്യാൻവാസ് (ഒരിക്കലും ശുദ്ധമായ വെള്ളയല്ല) ഫ്രെയിമുകൾ മെറൂൺ ബ്രാൻഡിംഗ് ഘടകങ്ങളും ഊർജ്ജസ്വലമായ പർപ്പിൾ ആക്സന്റുകളും. 460 ഫോണ്ടിൽ സജ്ജീകരിച്ചിരിക്കുന്ന തലക്കെട്ടുകൾ, ആർപ്പുവിളിക്കുന്നതിനുപകരം മന്ത്രിക്കുന്നു, പൂർണ്ണ പേജ് സിനിമാറ്റിക് ഫോട്ടോഗ്രാഫിക്ക് കനത്ത ലിഫ്റ്റിംഗ് നടത്താൻ അനുവദിക്കുന്നു, അതേസമയം അർദ്ധസുതാര്യമായ ഉൽപ്പന്ന UI കാർഡുകൾ ഇമേജറിക്ക് മുകളിൽ ഗ്ലാസ് പോലെ പൊങ്ങിക്കിടക്കുന്നു. പാലറ്റ് മിക്കപ്പോഴും ശാന്തവും എഡിറ്റോറിയലുമായി തുടരുന്നു: ക്രീം പ്രതലങ്ങൾ, ചാർക്കോൾ ടെക്സ്റ്റ്, സൂക്ഷ്മമായ വാം-ഗ്രേ ബോർഡറുകൾ, ഘടകങ്ങൾക്കിടയിലുള്ള ഉദാരമായ അകലം, ബോധപൂർവമായ ബ്രാൻഡ് ചിഹ്നനത്തിനായി നിറം നീക്കിവച്ചിരിക്കുന്നു - ഒരു മെറൂൺ കോൾ-ടു-ആക്ഷൻ, പർപ്പിൾ ലിങ്കുകൾ, ഒരു ലൈറ്റ് ലിലാക്ക് ആഡ്-ഓൺ ബട്ടൺ. UI പ്രതലങ്ങളിൽ ശക്തമായ നിഴലുകളും ഗ്രേഡിയന്റുകളും സിസ്റ്റം മനഃപൂർവ്വം ഒഴിവാക്കുന്നു; ഒരു സ്റ്റാക്കിംഗ് ഇഫക്റ്റിലൂടെയല്ല, ലേയേർഡ് ഫോട്ടോഗ്രാഫിയും ടൈറ്റിലിലെ സൂക്ഷ്മമായ പശ്ചാത്തല മങ്ങലും വഴിയാണ് ആഴം കൈവരിക്കുന്നത്.
പ്രധാന ഘടകം ഒരു ഫുൾ-വീതിയിലുള്ള ഫോട്ടോഗ്രാഫാണ്, അതിൽ ഒരു കേന്ദ്രീകൃത തലക്കെട്ട് (48-64px/460) ഉണ്ട്, വീഞ്ഞിന്റെ ചിത്രം നിറഞ്ഞ ഒരു സിംഗിൾ കോൾ ടു ആക്ഷൻ ഉണ്ട്, ഇടത്, വലത് അരികുകളിൽ പൊങ്ങിക്കിടക്കുന്ന അർദ്ധസുതാര്യ ഉൽപ്പന്ന UI കാർഡുകൾ ഉണ്ട്. പ്രധാന ഘടകത്തിന് താഴെ ഒരു വെളുത്ത വരയുള്ള ലോഗോ സ്ട്രിപ്പ് (ഒരു വരിയിൽ 6 സെല്ലുകൾ, പരമാവധി വീതി പരിമിതപ്പെടുത്തിയിരിക്കുന്നു), തുടർന്ന് പാർക്ക്മെന്റ് ക്യാൻവാസിൽ വെളുത്ത കാർഡ് പ്രതലങ്ങളുള്ള ഒരു ടാബ് വിഭാഗം. പേജിന്റെ മൂന്നിൽ രണ്ട് ഭാഗവും ഒരു ഇരുണ്ട ടർക്കോയ്സ് സ്ട്രിപ്പ് താളം തകർക്കുന്നു - പൂർണ്ണ വീതി, രണ്ട് കോളങ്ങൾ (ഇടത് വശത്ത് ചിത്രം, വലതുവശത്ത് വാചകം) - നിങ്ങൾ സ്ക്രോൾ ചെയ്യുമ്പോൾ ഒരേയൊരു ടോണൽ കോൺട്രാസ്റ്റ് സൃഷ്ടിക്കുന്നു. ഒരു ഗ്രേഡിയന്റ് അന്തരീക്ഷ സ്ട്രിപ്പ് പിന്തുടരുന്നു. വിഭാഗങ്ങൾക്കിടയിലുള്ള ലംബ അകലം 64-96px ആണ്. പരമാവധി ഉള്ളടക്ക വീതി ~1200px മധ്യത്തിലാണ്, പ്രധാന ഘടകവും ഇരുണ്ട വരയും വ്യൂപോർട്ടിന്റെ മുഴുവൻ വീതിയിലും വ്യാപിക്കുന്നു. മങ്ങിയ പശ്ചാത്തലമുള്ള ഒരു സിംഗിൾ ഫിക്സഡ് ഹെഡറാണ് നാവിഗേഷൻ; സൈഡ്ബാർ ഇല്ല, മെഗാ മെനു ഇല്ല. ലിങ്കുകളുടെ മൾട്ടി-കോളം ലേഔട്ടുള്ള ഒരു ഫുൾ-വീതിയുള്ള ബർഗണ്ടി പേജാണ് ഫൂട്ടർ. മൊത്തത്തിലുള്ള താളം ഇതാണ്: പ്രധാന ഫ്രെയിം → ശാന്തമായ വെള്ള/ക്രീം ഉള്ളടക്കം → പ്രധാന ചിത്രമുള്ള ഇരുണ്ട വര → അന്തരീക്ഷ ഗ്രേഡിയന്റ് → ബർഗണ്ടി അടിക്കുറിപ്പ്, എഡിറ്റോറിയൽ ടെമ്പോ സൃഷ്ടിക്കുന്നതിന് വെളിച്ചത്തിന്റെയും ഇരുണ്ട വരകളുടെയും മാറിമാറി.
പ്രധാന ദൃശ്യ ഘടകം സിനിമാറ്റിക് ഫോട്ടോഗ്രാഫിയാണ്: തുറന്ന ആകാശത്തിന് നേരെയുള്ള ഒരു പൂർണ്ണ വീതിയുള്ള ഛായാചിത്രം കേന്ദ്രബിന്ദുവായി വർത്തിക്കുന്നു, പേജിന് താഴെയായി രണ്ടാമത്തെ അന്തരീക്ഷ വര സ്ഥാപിച്ചിരിക്കുന്നു. ചിത്രം ഊഷ്മളമായി ടോൺ ചെയ്ത്, സൂക്ഷ്മമായി നിശബ്ദമാക്കി, പ്രൊഫൈലിൽ ചിത്രീകരിച്ചിരിക്കുന്നു, ഒരു സുവർണ്ണ മണിക്കൂറിനെ അനുസ്മരിപ്പിക്കുന്നു, ഇത് കോർപ്പറേറ്റ് അനുഭവത്തേക്കാൾ കൂടുതൽ എഡിറ്റോറിയൽ അനുഭവം സൃഷ്ടിക്കുന്നു. ചിന്തയിൽ മുഴുകിയിരിക്കുന്ന ഒരു മനുഷ്യന്റെ ഫോട്ടോയ്ക്ക് മുകളിൽ അർദ്ധസുതാര്യമായ ജ്യാമിതീയ ദീർഘചതുരങ്ങളും കൈകൊണ്ട് എഴുതിയ ലിഖിതങ്ങളുമുള്ള ഒരു ഇരുണ്ട വരയുണ്ട് - ഒരൊറ്റ ചിത്രത്തേക്കാൾ പ്രതലങ്ങളുടെ ഒരു കൊളാഷ്. പ്രത്യേക സ്ക്രീൻഷോട്ടുകളായിട്ടല്ല, ഫോട്ടോഗ്രാഫിൽ നേരിട്ട് സൂപ്പർഇമ്പോസ് ചെയ്ത ഫ്ലോട്ടിംഗ് ഗ്ലാസ് കാർഡുകളായി ഉപയോക്തൃ ഇന്റർഫേസ് അവതരിപ്പിച്ചിരിക്കുന്നു. ഗ്രേഡിയന്റ് അന്തരീക്ഷ വര ഒഴികെ, സ്റ്റോക്ക് ചിത്രീകരണങ്ങളോ 3D റെൻഡറുകളോ അമൂർത്ത അലങ്കാര രൂപങ്ങളോ ഇല്ല. ഐക്കണുകൾ മിനിമലിസ്റ്റ് മോണോക്രോം ലൈൻ ഐക്കണുകളാണ്, ~16-20px വീതി, 460 പോയിന്റ് ടെക്സ്റ്റ് ഭാരത്തിന് അനുസൃതമായി ഒരൊറ്റ വീതി.
പാലറ്റ്
ബ്രാൻഡ്
- 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 |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Superhuman ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- AI for Business — ചൂടുള്ള ചാരനിറത്തിലുള്ള ടോണുകളിൽ ക്രൂരവാദി എഡിറ്റോറിയൽ ഷോറൂം
- Jeton — ഊഷ്മള മാർബിളിലെ ഫിൻടെക്കിനെക്കുറിച്ചുള്ള ഒരു എഡിറ്റോറിയൽ
- Airtable — വ്യത്യസ്ത നിറങ്ങളിൽ അടയാളപ്പെടുത്തിയ അധ്യായങ്ങളുള്ള ഒരു സുഖകരമായ സെമിനാർ
- Osmo — ഗ്രേ കോൺക്രീറ്റിലെ ഡെവലപ്പേഴ്സ് മ്യൂസിയം
- Linktr — എഡിറ്റോറിയൽ പോസ്റ്ററുകൾ മിഠായികൾ പോലെ അടുക്കി വച്ചിരിക്കുന്നു. വെബ്സൈറ്റ് കളർ ബ്ലോക്കുകളിലാണ് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്, കൊബാൾട്ട്-നീല ചുവരുകളിൽ തിളങ്ങുന്ന പച്ച തലക്കെട്ടുകൾ സജ്ജീകരിച്ചിരിക്കുന്നു, ബർഗണ്ടി ഫീൽഡുകൾക്ക് മുകളിൽ പൊങ്ങിക്കിടക്കുന്ന വെളുത്ത ഗുളിക ആകൃതിയിലുള്ള നാവിഗേഷൻ ഘടകങ്ങൾ ഉണ്ട്.
- Outsource Consultants — ബോൺ പേപ്പറിൽ നിർമ്മിച്ച ഒരു വലിയ ഫോർമാറ്റ് ആർക്കിടെക്ചറൽ ഷീറ്റ്. ഒരു മോണോഗ്രാഫിക് സൗന്ദര്യശാസ്ത്രം, അതിൽ തിളക്കമുള്ള ഒരു നീലക്കല്ല്, മറ്റുവിധത്തിൽ ഊഷ്മളമായ, ടൈപ്പോഗ്രാഫിക്കലി മാക്സിമലിസ്റ്റ് ഗ്രിഡിനെ തടസ്സപ്പെടുത്തുന്നു.
- Streamtime — ടാക്റ്റൈൽ ക്രിയേറ്റീവ് മൂഡ് ബോർഡ് - ഡിസൈനർ സ്ക്രാപ്പ്ബുക്കിംഗ് ടേബിൾ
- Switch-Lit — ക്രീം പേപ്പറിൽ മഷിയിൽ അച്ചടിച്ച എഡിറ്റോറിയൽ ഗ്രിഡ്.
- HubSpot — ഓറഞ്ച് നിറത്തിലുള്ള ഒരു ചൂടുള്ള ക്രീം പേപ്പർ നിറം. ഹെവിവെയ്റ്റ് പേപ്പറിൽ അച്ചടിച്ച ഒരു ഡിസൈനർ മാഗസിനോട് ഹബ്സ്പോട്ട് സാമ്യമുള്ളതാണ് - സെരിഫ് തലക്കെട്ടുകൾ, ചൂടുള്ള ക്രീം പേജുകൾ, ഏറ്റവും പ്രധാനപ്പെട്ട പോയിന്റുകൾ മാത്രം എടുത്തുകാണിക്കുന്ന ഒരൊറ്റ ഫേമിയർ ഓറഞ്ച് ആക്സന്റ്.
- Granola — ഊഷ്മള വെല്ലത്തിലെ ഫീൽഡ് നോട്ടുകൾ— ഗ്രാനോള സൂര്യപ്രകാശമുള്ള മേശയിൽ തുറന്നിട്ട മോൾസ്കൈൻ നോട്ട്ബുക്ക് പോലെ വായിക്കുന്നു: സെരിഫ് തലക്കെട്ടുകൾ ഒരു ദൃഢത നൽകുന്നു, സസ്യ അധിഷ്ഠിത മഷി പോലുള്ള ജൈവ പച്ച ആക്സന്റുകൾ, കൈകൊണ്ട് എഴുതിയ കുറിപ്പുകളോട് സാമ്യമുള്ള കാർഡുകളുടെ അരികുകളിലെ നേർത്ത വരകൾ.
- Secure — ഒരു യൂറോപ്യൻ കഫേയിൽ, പകൽ വെളിച്ചത്തിൽ, നടത്തുന്ന സംഭാഷണം, വീഡിയോ കോളിംഗിന്റെ ഊഷ്മളവും സ്റ്റൈലിഷുമായ ഒരു അനുഭവമാണ്. അവിടെ, ഒരു സാങ്കേതിക ഉൽപ്പന്ന പേജ് പോലെയല്ല, മറിച്ച് ചിന്തനീയമായ ഒരു മാഗസിൻ ലേഖനം പോലെയാണ് സെരിഫ് തലക്കെട്ടുകൾ വായിക്കുന്നത്.
- Mockups made easy — വൈറ്റ് പേപ്പറിൽ എഡിറ്റോറിയൽ ഡിസൈൻ സ്റ്റുഡിയോ