Peak Design
ഭാഗികമായി പ്രകാശമുള്ള ഗാലറി മതിൽ
പീക്ക് ഡിസൈൻ ഒരു ഗാലറി-നിലവാരമുള്ള വാണിജ്യ അനുഭവമാണ്: എഡിറ്റോറിയൽ ടൈപ്പോഗ്രാഫിയും ഉൽപ്പന്ന ഫോട്ടോഗ്രാഫിയും എല്ലാ ജോലികളും ചെയ്യുന്ന ഏതാണ്ട് മോണോക്രോം ക്യാൻവാസ്. ആഴത്തിലുള്ളതും ഏതാണ്ട് കറുത്തതുമായ പാനലുകൾ ഉപയോഗിച്ച് ഈ സിസ്റ്റം ക്രിസ്പ് വെളുത്ത പ്രതലങ്ങൾ മാറിമാറി നൽകുന്നു, ഒരു വശത്ത് ഒരു ഇറ്റാലിക് ടൈപ്പ്ഫേസിലുള്ള സെരിഫ് തലക്കെട്ടും മറുവശത്ത് ഒരു പൂർണ്ണ സ്ക്രീൻ ഉൽപ്പന്നമോ ജീവിതശൈലി ചിത്രമോ സ്ഥാപിച്ചിരിക്കുന്ന ശ്രദ്ധേയമായ സ്പ്ലിറ്റ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നു. ടൈപ്പോഗ്രാഫി ബ്രാൻഡിന്റെ കാതലായ ശബ്ദമാണ്: തലക്കെട്ടുകൾക്കായി ഒരു ഉയരമുള്ള, സാന്ദ്രീകൃത, അലങ്കാര സെരിഫ് ടൈപ്പ്ഫേസ് (എക്സ്പോഷറിന്റെ ശൈലിയിൽ), ഉപയോക്തൃ ഇന്റർഫേസിനായി ഒരു ന്യൂട്രൽ വിചിത്രമായ ടൈപ്പ്ഫേസുമായി (ഗീസ്റ്റ്), അക്ഷരങ്ങൾ, പുരികങ്ങൾ, ബട്ടണുകൾ എന്നിവയ്ക്കായി ഒരു സാൻസ്-സെരിഫ് ടൈപ്പ്ഫേസ് (ബ്രയന്റ്). ഇന്റർഫേസ് വൃത്തിയായി തുടരുന്നു: ക്രോമാറ്റിക് UI ഘടകങ്ങളില്ല, അലങ്കാര ഗ്രേഡിയന്റുകളില്ല, ഷാഡോകളില്ല - സൂക്ഷ്മമായ ബോർഡറുകൾ മാത്രം, രണ്ട് കോർണർ റേഡിയുകൾ (4 ഉം 8 ഉം), ഊന്നലിനായി ഇടയ്ക്കിടെ മാത്രം ഉപയോഗിക്കുന്ന ഒരു ചുവന്ന ആക്സന്റ്. ഘടകങ്ങൾ അലങ്കാരത്തേക്കാൾ കൂടുതൽ ചിന്തനീയമായി കാണപ്പെടുന്നു: നേർത്ത ഡിവൈഡറുകൾ, ഫ്ലാറ്റ് ഉൽപ്പന്ന കാർഡുകൾ, ഗുളിക ആകൃതിയിലുള്ള ഫിൽട്ടറുകൾ, വാസ്തുവിദ്യാ വ്യാഖ്യാനങ്ങൾ പോലെ തോന്നുന്ന അദൃശ്യ ബട്ടണുകൾ.
പൂർണ്ണ വീതിയുള്ള പേജ് വിഭാഗങ്ങൾ വെള്ളയ്ക്കും ഏതാണ്ട് കറുപ്പിനും ഇടയിൽ മാറിമാറി വരുന്നു; ഓരോ വിഭാഗവും മുഴുവൻ വ്യൂപോർട്ട് വീതിയും ഉൾക്കൊള്ളുന്നു, വിഭാഗ തലത്തിൽ പരമാവധി വീതി പരിധിയില്ല. വിഭാഗങ്ങൾക്കുള്ളിലെ ഉള്ളടക്കത്തിന് പരമാവധി വീതി ~1440px ആണ്, അത് മധ്യഭാഗത്താണ്. പ്രബലമായ തലക്കെട്ട് പാറ്റേൺ 50/50 സ്പ്ലിറ്റ് ആണ്: ഒരു വശത്ത് ഒരു ടെക്സ്റ്റ് ബ്ലോക്ക് (ബ്രൗസിംഗ് + ഹെഡ്ലൈൻ + സബ്ടെക്സ്റ്റ് + ബട്ടണുകൾ), മറുവശത്ത് ഒരു പൂർണ്ണ വീതിയുള്ള ഉൽപ്പന്നം അല്ലെങ്കിൽ ലൈഫ്സ്റ്റൈൽ ചിത്രം. ഫോൾഡിന് താഴെ, ഉൽപ്പന്ന ഗ്രിഡ് 24-32px ന്റെ ഉദാരമായ ഗട്ടറുകളുള്ള തുല്യ വീതിയുള്ള ഉൽപ്പന്ന കാർഡുകളുടെ നാല് നിരകൾ ഉപയോഗിക്കുന്നു. കാറ്റഗറി ഫിൽട്ടർ പാനലുകൾ പ്രധാന നാവിഗേഷന് നേരിട്ട് താഴെ "ഗുളികകളുടെ" ഒരു തിരശ്ചീന നിരയിൽ സ്ഥാപിച്ചിരിക്കുന്നു. വിഭാഗങ്ങൾക്കിടയിൽ 80px ലംബ ഇൻഡന്റേഷനോടുകൂടിയ ലൈറ്റ്/ഇരുണ്ട വരകൾ മാറിമാറി വരച്ചാണ് വിഭാഗങ്ങളുടെ താളം നിർവചിക്കുന്നത്, ഒരു എഡിറ്റോറിയൽ-മാഗസിൻ താളം സൃഷ്ടിക്കുന്നു. നാവിഗേഷൻ എന്നത് മുകളിൽ നേർത്ത പരസ്യ സ്ട്രിപ്പുള്ള ഒരു നിശ്ചിത ടോപ്പ് ബാറാണ്.
ദൃശ്യഭാഷയിൽ ഉൽപ്പന്ന ഫോട്ടോഗ്രാഫി ആധിപത്യം പുലർത്തുന്നു: ബാഗുകൾ, ബെൽറ്റുകൾ, ക്യാമറ ഉപകരണങ്ങൾ എന്നിവ ദൈനംദിന ജീവിതത്തിന്റെ സന്ദർഭമില്ലാതെ ശുദ്ധമായ വെളുത്ത പശ്ചാത്തലത്തിൽ ഫോട്ടോ എടുക്കുന്നു, മെറ്റീരിയലിന്റെ ഘടനയും ഹാർഡ്വെയറിന്റെ വിശദാംശങ്ങളും ലൈറ്റിംഗ് എടുത്തുകാണിക്കുന്നു. ദൈനംദിന ചിത്രങ്ങൾ പൂർണ്ണ സ്ക്രീൻ എഡിറ്റോറിയൽ വിഭാഗങ്ങളിൽ മാത്രമേ ദൃശ്യമാകൂ (ഉദാഹരണത്തിന്, വൃത്താകൃതിയിൽ ക്യാമറകൾ പിടിച്ചിരിക്കുന്ന കൈകൾ) കൂടാതെ സ്പ്ലിറ്റ് പാനലിന്റെ ഒരു വശത്തുള്ള വ്യൂപോർട്ടിന്റെ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുന്നു. ചിത്രങ്ങൾക്ക് പ്രധാന ചിത്രത്തിൽ കോർണർ ആരം ഇല്ല (അവ അരികുകളുമായി ഫ്ലഷ് ആണ്), കാർഡ് ഇമേജിൽ കോർണർ ആരം ഇല്ല. ഫങ്ഷണൽ UI ഐക്കണുകൾ ഒഴികെയുള്ള ചിത്രീകരണങ്ങളോ അമൂർത്ത ഗ്രാഫിക്സുകളോ ഐക്കൺ ചിത്രീകരണങ്ങളോ ഇല്ല. സ്റ്റുഡിയോ-ഗുണമേന്മയുള്ള ഫോട്ടോഗ്രാഫുകളാണ് ഉൽപ്പന്നം ഫോക്കസ് ചെയ്യുന്നത് - സ്ഥിരമായ കോണുകൾ, സ്ഥിരമായ ലൈറ്റിംഗ്, സ്ഥിരമായ വെളുത്ത പശ്ചാത്തലം - അതേസമയം UI പശ്ചാത്തലത്തിലേക്ക് മങ്ങുന്നു, വസ്തുക്കൾക്ക് സ്വയം സംസാരിക്കാൻ അനുവദിക്കുന്നു.
പാലറ്റ്
നിഷ്പക്ഷം
- Carbon Ink
#1a211e— ബോഡി ടെക്സ്റ്റ്, ഇരുണ്ട സൈഡ്ബാറുകൾ, ബോഡി ടെക്സ്റ്റ്, ഐക്കണുകൾ, ലൈറ്റ് പ്രതലങ്ങളിലെ ഫ്രെയിമുകൾ - ഓരോ തലക്കെട്ടിനും അടിസ്ഥാനമായി വർത്തിക്കുകയും വിഭജിച്ച വിഭാഗങ്ങളുടെ ഇരുണ്ട പശ്ചാത്തല പാനലുകൾ രൂപപ്പെടുത്തുകയും ചെയ്യുന്ന ഒരു കറുത്ത നിറമാണിത്. - Paper White
#ffffff— ശ്രദ്ധ ആകർഷിക്കാത്ത പശ്ചാത്തലം സൃഷ്ടിക്കുന്നതിനും ഭാഗങ്ങൾ വേർതിരിക്കുന്നതിനുമുള്ള ഒരു ലൈറ്റ് സപ്പോർട്ടിംഗ് പ്രതലം. കോൾ ടു ആക്ഷന് പ്രാഥമിക നിറമായി ഇത് ഉപയോഗിക്കരുത്. - True Black
#000000— വെളുത്ത പശ്ചാത്തലത്തിൽ ഹെഡർ ഫിൽ, അനൗൺസ്മെന്റ് ബാർ, ഫൂട്ടർ ഡിസൈൻ, സോളിഡ് ഐക്കൺ ഔട്ട്ലൈനുകൾ എന്നിങ്ങനെ പരമാവധി കോൺട്രാസ്റ്റ് ഉള്ള ഘടകങ്ങൾ ഡിസൈനിന് ഏറ്റവും വ്യക്തമായ വരകൾ ആവശ്യമുള്ളിടത്ത് സ്ഥാപിച്ചിരിക്കുന്നു. - Obsidian
#0c0c0c— ആഴത്തിലുള്ള പാനൽ പ്രതലങ്ങളും ഇമേജ് ഓവർലേകളും - യഥാർത്ഥ കറുപ്പിനേക്കാൾ അല്പം മൃദുവാണ്, മുഴുവൻ സ്ക്രീൻ പ്രതലവും ഉൾക്കൊള്ളുന്ന ഇരുണ്ട പ്രദേശങ്ങൾക്ക് ഇത് ഉപയോഗിക്കുന്നു, കൂടാതെ പരന്ന കറുപ്പ് പോലെ കട്ടിയുള്ളതായി തോന്നുകയും എന്നാൽ പരന്ന കറുപ്പ് പോലെ പരുഷമായിരിക്കരുത്. - Fog
#eef1f0— ശ്രദ്ധ ആകർഷിക്കാത്ത പശ്ചാത്തലം സൃഷ്ടിക്കുന്നതിനും ഭാഗങ്ങൾ വേർതിരിക്കുന്നതിനുമുള്ള ഒരു ലൈറ്റ് സപ്പോർട്ടിംഗ് പ്രതലം. കോൾ ടു ആക്ഷന് പ്രാഥമിക നിറമായി ഇത് ഉപയോഗിക്കരുത്. - Mist
#e0e0e0— വിഭജിക്കുന്ന രേഖകൾ, വൈകല്യമുള്ള അവസ്ഥകൾ, സൂക്ഷ്മമായ ഘടനാപരമായ വിഭജനങ്ങൾ - വെളുത്ത ക്യാൻവാസിലെ ഭാഗങ്ങൾക്കിടയിലുള്ള അതിരുകൾ നിർവചിക്കുന്ന ഒരു ഇടത്തരം-ഇളം ചാരനിറം.
ടൈപ്പോഗ്രാഫി
14 മുതൽ 80px വരെ · 6 ചുവടുകൾ
- Geist — മാറ്റിസ്ഥാപിക്കൽ: Inter · രൂപരേഖകൾ 400, 600, 700 · പ്രധാന വാചകം, ഉൽപ്പന്ന ശീർഷകങ്ങൾ, വിവരണങ്ങൾ, ഫോം ഫീൽഡുകൾ, ലിങ്ക് വാചകം, അടിക്കുറിപ്പ് ഉള്ളടക്കം. ഫോണ്ട് ഭാരം: പ്രധാന വാചകത്തിന് 400, ഹൈലൈറ്റുകൾക്ക് 600, ഉൽപ്പന്ന ശീർഷകങ്ങൾക്കും പ്രധാനപ്പെട്ട ഇൻലൈൻ കുറിപ്പുകൾക്കും 700. ന്യൂട്രൽ ഗ്രോട്ടെസ്ക് ഫോണ്ട് ഡിസ്പ്ലേ സെരിഫ്, കണ്ടൻസ്ഡ് സാൻസ് ഫോണ്ടുകൾ ബ്രാൻഡ് ശൈലി പ്രതിഫലിപ്പിക്കാൻ അനുവദിക്കുന്നു, അതേസമയം ഗീസ്റ്റ് പ്രവർത്തനക്ഷമതയും വ്യക്തതയും നൽകുന്നു.
- Exposure-style serif (Exposure-10) — മാറ്റിസ്ഥാപിക്കൽ: Playfair Display · രൂപരേഖകൾ 400 · തലക്കെട്ടുകളും പ്രധാന തലക്കെട്ടുകളും. ഇറ്റാലിക് സെരിഫ് ഫോണ്ടിലുള്ള ഒറ്റ വെയ്റ്റ് (400) എഡിറ്റോറിയൽ അധികാരം സൃഷ്ടിക്കുന്നു - ഈ വാക്കുകൾ ബ്രാൻഡ് ടോൺ സജ്ജമാക്കുന്നു, പേജിന്റെ മുഴുവൻ വീതിയിലും പ്രധാന വിഭാഗങ്ങളുടെ തുടക്കത്തിലും വ്യാപിക്കുന്ന ഇരുണ്ട പാനലുകളിൽ മിതമായി ഉപയോഗിക്കുന്നു. ഇടുങ്ങിയ അക്ഷര അകലം (-0.025em) വലിയ അക്ഷരങ്ങൾ ഭാരം കുറഞ്ഞതായി കാണപ്പെടുന്നതിനുപകരം നിയന്ത്രിതമായി ദൃശ്യമാകാൻ അനുവദിക്കുന്നു.
- Bryant-style condensed sans (bryant) — മാറ്റിസ്ഥാപിക്കൽ: Druk Wide · രൂപരേഖകൾ 700 · നാവിഗേഷൻ ലേബലുകൾ, വിഭാഗ ഫിൽട്ടർ ബട്ടണുകൾ, ബട്ടൺ ടെക്സ്റ്റ്, "പുരികങ്ങൾ", സെക്ഷൻ ടാഗുകൾ, അധിക തലക്കെട്ടുകൾ. പോസിറ്റീവ് ലെറ്റർ സ്പെയ്സിംഗ് ഉള്ള കംപ്രസ് ചെയ്ത വലിയ അക്ഷരങ്ങൾ ഒരു വ്യാവസായിക, ലേബൽ പോലുള്ള ശൈലി സൃഷ്ടിക്കുന്നു - ഈ വാക്കുകൾ തിരിച്ചറിയുകയും നിർദ്ദേശിക്കുകയും ചെയ്യുന്നു, പക്ഷേ ഒരിക്കലും വിവരിക്കുന്നില്ല.
ഇടവേളകളും രൂപവും
| ഉദ്ദേശ്യം | അർത്ഥം |
|---|---|
| സാന്ദ്രത | ശരാശരി |
| അടിസ്ഥാന ഘട്ടം | 24px |
| ബട്ടൺ ആരം | 4px |
| കാർഡ് ആരം | 8px |
| ഷാഡോകൾ | ഷാഡോകൾക്ക് പകരം ബോർഡറുകൾ ഇല്ല |
| വിഭാഗങ്ങൾക്കിടയിൽ | 80px |
| പേജ് വീതി | 1440px |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Peak Design ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- Arsenijs Fabrica — ഗാലറിയിലെ ലൈറ്റുകൾക്ക് കീഴിൽ എഡിറ്റോറിയൽ ഉള്ളടക്കത്തിന്റെ അന്തർലീനമായ സൗന്ദര്യം വെളിപ്പെടുന്നു. ഗാലറിയുടെ തിളങ്ങുന്ന വെളുത്ത ചുവരുകൾ, മോണോക്രോം പശ്ചാത്തലത്തിൽ ഓറഞ്ച് നിറത്തിൽ സ്പന്ദിക്കുന്ന ഒറ്റ ചൂടുള്ള സ്ട്രോബ് ലൈറ്റ്, ഗ്ലാസ് പോലെ നേർത്ത തരം, വെളുത്ത ഇടത്തിന്റെ സമൃദ്ധി.
- 21 TSI — ഒരു കടും ചുവപ്പ് ശൂന്യത, ഒരു ഒറ്റ സിലൗറ്റ് - ഉപയോക്തൃ ഇന്റർഫേസ് അന്തരീക്ഷത്തിൽ ലയിക്കുന്ന ഒരു ഉയർന്ന ഫാഷൻ എഡിറ്റോറിയൽ.
- Aevi Wellness — സ്കാൻഡിനേവിയൻ അപ്പോത്തിക്കറി ശൈലി, ഭാരമില്ലാത്ത ടൈപ്പ്ഫേസ്. മ്യൂട്ട് ചെയ്ത ചാര-നീല ആക്സന്റ് എഡിറ്റോറിയൽ മെറ്റീരിയലിന്റെ മൊത്തത്തിലുള്ള വർണ്ണാഭമായ, വായുസഞ്ചാരമുള്ള ലേഔട്ടിനെ തകർക്കുന്നു, അവിടെ ഉൽപ്പന്ന ഫോട്ടോകൾ നേർത്ത ബോർഡറുള്ള കാർഡുകളിൽ ചൂടുള്ള വെളുത്ത പശ്ചാത്തലത്തിൽ സൂപ്പർഇമ്പോസ് ചെയ്തിരിക്കുന്നു.
- Palmer — മങ്ങിയ പകൽ വെളിച്ചത്തിൽ ഒരു സെറാമിക് ഗാലറി - ഭിത്തിയുമായാണ് പ്രതിപ്രവർത്തനം നടക്കുന്നത്, വസ്തുക്കൾ കലാരൂപങ്ങളാണ്.
- PLATFORM — വൈറ്റ് ക്യൂബ് ഗാലറി ശ്രദ്ധാകേന്ദ്രത്തിൽ
- Assembly Coffee London — ഇരുണ്ട റോസ്റ്ററിയിൽ തീക്കനൽ. ചൂടുള്ളതും മങ്ങിയ വെളിച്ചമുള്ളതുമായ ഉൽപ്പന്ന ഫോട്ടോകളും കഴ്സീവ് സെരിഫ് അക്ഷരങ്ങളുമുള്ള ഏതാണ്ട് കറുത്ത ക്യാൻവാസ് - ഒരു അർദ്ധരാത്രി സമിസ്ദാത്തിൽ അച്ചടിച്ച ഒരു സ്പെഷ്യാലിറ്റി കോഫി മെനുവിന്റെ അനുഭവം.
- ARTWORLD — വെളുത്ത ലിനനിൽ ഫാഷൻ മാഗസിൻ തലക്കെട്ട്
- Structured — പ്ലാസ്റ്റിൻ പോലുള്ള കടലാസിൽ നവോത്ഥാന ഗാലറി
- Airbnb — ഒറ്റ പവിഴപ്പുറ്റിന്റെ ചുവന്ന ബുക്ക്മാർക്കുള്ള ശാന്തമായ വെളുത്ത ഗാലറി മതിൽ.
- VISIONNAIRE — വെളുത്ത പശ്ചാത്തലത്തിൽ ഒരു സ്ട്രീറ്റ്വെയർ എഡിറ്റോറിയൽ ഗാലറി. ബ്രാൻഡ് ഒരു പ്രിന്റഡ് ലുക്ക്ബുക്ക് പോലെയാണ് പ്രവർത്തിക്കുന്നത്: പരന്ന വെളുത്ത ക്യാൻവാസ്, കറുത്ത മഷി, ഒരു ഉൽപ്പന്നമോ ലോഗോയോ പ്രദർശിപ്പിക്കുന്നതിന് കളർ ബ്ലോക്കായി ഉപയോഗിക്കുന്ന ഒറ്റ വാം ക്രീം പാനൽ.
- Letter — സംഭരണത്തിൽ നിന്നുള്ള തിളങ്ങുന്ന പുരാവസ്തുക്കൾ പ്രദർശിപ്പിക്കുന്ന ഒരു സ്വകാര്യ ഗാലറി. ഗാലറിയുടെ നിറം മങ്ങിയ ചുവരുകളിലെ ക്രോം ശിൽപങ്ങൾക്ക് മുകളിൽ സെറിഫൈഡ് തലക്കെട്ടുകൾ പൊങ്ങിക്കിടക്കുന്ന കറുത്ത ഭിത്തിയുള്ള ഒരു പ്രദർശന സ്ഥലം.
- Ramp — എഡിറ്റോറിയൽ ഫിനാൻസ് വിഭാഗം, കറുപ്പും വെളുപ്പും പേജുകൾ ഒറ്റ നിയോൺ മാർക്കർ ഉപയോഗിച്ച്. പ്രസിദ്ധീകരണത്തിന്റെ പ്രായോഗികമായി മോണോക്രോം പ്രതലം, അവിടെ ഒരു തിളക്കമുള്ള നാരങ്ങ-പച്ച സ്ട്രോക്ക് ഓരോ ഇടപെടലിനെയും ഒരു പണ സിഗ്നലാക്കി മാറ്റുന്നു.