AI ഉപയോഗിച്ച് നല്ല രൂപമുള്ള ആപ്പ് എങ്ങനെ ഡിസൈൻ ചെയ്യാം

AI-യിൽ നിന്ന് നല്ല രൂപമുള്ള ആപ്പ് കിട്ടാൻ, “നല്ലതായി കാണിക്കൂ” എന്ന് ആവശ്യപ്പെടുന്നത് നിർത്തി, ഒരു ഡിസൈനർ ആഗ്രഹിക്കുന്നത് നൽകുക: നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന രണ്ടോ മൂന്നോ റഫറൻസുകൾ, പേരിട്ട ഒരു ഡിസൈൻ ദിശ, ടൈപ്പ്, നിറം, ഇടം എന്നിവയ്ക്കുള്ള വ്യക്തമായ നിയമങ്ങൾ. പിന്നെ ഒരു സ്ക്രീൻ നിർമ്മിച്ച് അത് ശരിയാകുന്നതുവരെ ശരിയാക്കുക, എന്നിട്ട് ഒരേ സംവിധാനം മറ്റെല്ലായിടത്തും പ്രയോഗിക്കാൻ AI-യോട് പറയുക. മിക്ക “AI രൂപത്തിനും” കാരണം അവ്യക്തമായ പ്രോംപ്റ്റുകളിൽ നിന്നുള്ള ശരാശരി ഉത്തരങ്ങളാണ്; കൃത്യമായ ഇൻപുട്ട് കൃത്യമായ ഡിസൈൻ നൽകുന്നു.

AI ഡിസൈനുകൾ സാധാരണമായി തോന്നുന്നത് എന്തുകൊണ്ട്

“ആധുനികവും വൃത്തിയുള്ളതുമായ SaaS ഡാഷ്ബോർഡ്” എന്ന് AI-യോട് ചോദിച്ചാൽ, അത് കണ്ടിട്ടുള്ള എല്ലാ ഡാഷ്ബോർഡുകളുടെയും സ്ഥിതിവിവരക്കണക്കിലെ മധ്യഭാഗം നൽകും: അതേ sans-serif ഫോണ്ട്, പർപ്പിൾ-മുതൽ-നീല ഗ്രേഡിയന്റ്, മൃദുവായ നിഴലുള്ള വൃത്താകൃതിയുള്ള കാർഡുകൾ, വൃത്തങ്ങളിലുള്ള ഇമോജി പോലുള്ള ഐക്കണുകൾ, “നിങ്ങളുടെ വർക്ക്ഫ്ലോ, ലളിതമാക്കി” എന്ന് പറയുന്ന മധ്യത്തിലുള്ള hero. ഓരോ തിരഞ്ഞെടുപ്പിലും തെറ്റൊന്നുമില്ല. പ്രശ്നം, ഒന്നും നിങ്ങളുടെ ഉത്പന്നത്തിന് വേണ്ടി തിരഞ്ഞെടുത്തതല്ല എന്നതാണ്.

നല്ല ഡിസൈൻ പ്രധാനമായും തീരുമാനങ്ങളാണ്. ആപ്പിന് ഒരു സ്വഭാവം നൽകുന്ന ഒരു കൂട്ടം തീരുമാനങ്ങൾ എടുക്കുക എന്നതാണ് നിങ്ങളുടെ ജോലി; ബാക്കി ആയിരക്കണക്കിന് ചെറിയ തീരുമാനങ്ങൾ സ്ഥിരമായി എടുക്കാൻ AI-യെ അനുവദിക്കുക.

ഘട്ടം 1: പ്രോംപ്റ്റ് ചെയ്യുന്നതിന് മുമ്പ് റഫറൻസുകൾ ശേഖരിക്കുക

നിങ്ങളുടെ ഉത്പന്നത്തിന് യോജിക്കുന്ന രൂപമുള്ള രണ്ട് മുതൽ നാല് വരെ റഫറൻസുകൾ — ആപ്പുകളോ വെബ്സൈറ്റുകളോ — കണ്ടെത്താൻ ഇരുപത് മിനിറ്റ് ചെലവഴിക്കുക. നല്ല ഉറവിടങ്ങൾ: നിങ്ങളുടെ പ്രേക്ഷകർ ഇതിനകം ഉപയോഗിക്കുന്ന ഉത്പന്നങ്ങൾ, ഡിസൈൻ ഗാലറികൾ, അടുത്ത മേഖലകളിലെ കമ്പനികളുടെ സൈറ്റുകൾ.

ഓരോന്നിനും, നിങ്ങൾ എന്താണ് ഇഷ്ടപ്പെടുന്നതെന്ന് ലളിതമായ വാക്കുകളിൽ എഴുതുക:

“ധാരാളം വെളുത്ത ഇടം, ഇടുങ്ങിയ കോളത്തിൽ ഉള്ളടക്കം, വലിയ സംഖ്യകൾക്ക് മുകളിൽ ചെറിയ ചാരനിറ ലേബലുകൾ.”
“നേർത്ത വിഭജന വരകളുള്ള സാന്ദ്രമായ പട്ടികകൾ, കാർഡ് നിഴലുകളില്ല, പ്രവർത്തനങ്ങൾക്ക് ഒരു accent നിറം.”
“വലിയ serif തലക്കെട്ടുകൾ, ചൂടുള്ള off-white പശ്ചാത്തലം, ചിത്രീകരണങ്ങൾക്ക് പകരം ഫോട്ടോഗ്രാഫി.”

പിന്നെ ഈ വിവരണങ്ങൾ AI-ക്ക് നൽകുക, ടൂൾ ചിത്രങ്ങൾ സ്വീകരിക്കുന്നുവെങ്കിൽ സ്ക്രീൻഷോട്ടുകളും അറ്റാച്ച് ചെയ്യുക. പ്രചോദനം ഗുണങ്ങളിൽ നിന്ന് എടുക്കുക, ഉത്പന്നത്തിൽ നിന്നല്ല: മറ്റൊരു കമ്പനിയുടെ ലേഔട്ടോ ബ്രാൻഡിംഗോ വാചകമോ മുഴുവനായി പകർത്തുന്നത് നിയമപരമായും വിശ്വാസ്യതയുടെ കാര്യത്തിലും അപകടമാണ്.

ഘട്ടം 2: ഒരു ഡിസൈൻ ദിശ തിരഞ്ഞെടുത്ത് പേരിടുക

ദിശ എന്നത് രൂപത്തിന്റെ ഭാവത്തെക്കുറിച്ചുള്ള ഒരു ചെറിയ വിവരണമാണ്. AI എടുക്കുന്ന ഓരോ തീരുമാനത്തിനും അത് ഒരു ഫിൽട്ടറായി പ്രവർത്തിക്കുന്നു. നന്നായി പ്രവർത്തിക്കുന്ന ചിലത്:

ദിശ	സാധാരണ തിരഞ്ഞെടുപ്പുകൾ	യോജിക്കുന്നത്
ശാന്തവും മിനിമലും	നിഷ്പക്ഷ പാലറ്റ്, ഉദാരമായ ഇടം, ഒരു accent, നേർത്ത അരികുകൾ	ഉത്പാദനക്ഷമതാ ടൂളുകൾ, ധനകാര്യം, ആരോഗ്യം
എഡിറ്റോറിയൽ	serif തലക്കെട്ടുകൾ, ശക്തമായ ടൈപ്പ് വ്യത്യാസം, വലിയ ചിത്രങ്ങൾ, ഇടുങ്ങിയ ടെക്സ്റ്റ് കോളങ്ങൾ	പോർട്ട്ഫോളിയോകൾ, പ്രസിദ്ധീകരണങ്ങൾ, പ്രീമിയം സേവനങ്ങൾ
സാന്ദ്രവും പ്രവർത്തനപരവും	ഒതുങ്ങിയ വരികൾ, ചെറിയ ടൈപ്പ്, പട്ടികകൾ, കീബോർഡ്-സൗഹൃദം	ആന്തരിക ടൂളുകൾ, ഡാഷ്ബോർഡുകൾ, അഡ്മിൻ പാനലുകൾ
ചൂടുള്ളതും സൗഹൃദപരവുമായ	വൃത്താകൃതിയുള്ള ആകൃതികൾ, മൃദുവായ നിറങ്ങൾ, ചിത്രീകരണങ്ങൾ, വലിയ ടച്ച് ലക്ഷ്യങ്ങൾ	ഉപഭോക്തൃ ആപ്പുകൾ, കമ്മ്യൂണിറ്റി, വിദ്യാഭ്യാസം
ധീരവും ഗ്രാഫിക്കലും	ഉയർന്ന കോൺട്രാസ്റ്റ്, വലിയ ടൈപ്പ്, പരന്ന നിറ ബ്ലോക്കുകൾ	ഇവന്റുകൾ, ലോഞ്ചുകൾ, സർഗ്ഗാത്മക ബ്രാൻഡുകൾ

ആദ്യ പ്രോംപ്റ്റിൽ ഇത് ആരാണ് ആപ്പ് ഉപയോഗിക്കുന്നത് എന്നതിനൊപ്പം ഉൾപ്പെടുത്തുക:

ഒരു സ്വതന്ത്ര യോഗ സ്റ്റുഡിയോയ്ക്കുള്ള ബുക്കിംഗ് ആപ്പ് നിർമ്മിക്കുക. ഡിസൈൻ ദിശ: ശാന്തവും മിനിമലും, അച്ചടിച്ച സ്റ്റുഡിയോ ടൈംടേബിൾ പോലെ. ചൂടുള്ള off-white പശ്ചാത്തലം, ഏതാണ്ട് കറുത്ത ടെക്സ്റ്റ്, ബട്ടണുകൾക്കും തിരഞ്ഞെടുത്ത അവസ്ഥകൾക്കും ഒരു മങ്ങിയ sage-green accent. തലക്കെട്ടുകൾക്ക് ഒരു serif, ബോഡി ടെക്സ്റ്റിന് വൃത്തിയുള്ള sans-serif. ഉദാരമായ ഇടം, ഗ്രേഡിയന്റില്ല, ഡ്രോപ്പ് ഷാഡോകളില്ല, ഇമോജിയില്ല. മൊബൈൽ-ആദ്യം.

ഘട്ടം 3: നിയമങ്ങൾ സജ്ജമാക്കുക — ടൈപ്പ്, നിറം, ഇടം

ഈ മൂന്നും ദൃശ്യഭംഗിയുടെ വലിയ പങ്ക് വഹിക്കുന്നു. ഇവ വ്യക്തമായി പറയുന്നതാണ് നിങ്ങൾക്ക് വരുത്താവുന്ന ഏറ്റവും വലിയ മെച്ചപ്പെടുത്തൽ.

ടൈപ്പോഗ്രാഫി

ഒന്നോ രണ്ടോ typeface-കൾ. ഒരു തലക്കെട്ട് ഫേസും ഒരു ബോഡി ഫേസും, അല്ലെങ്കിൽ പല വെയിറ്റുകളിലുള്ള ഒരു കുടുംബം.
ഒരു ടൈപ്പ് സ്കെയിൽ. കുറച്ച് വലിപ്പങ്ങൾ സ്ഥിരമായി ഉപയോഗിക്കുക — ഉദാഹരണത്തിന് 14, 16, 20, 28, 40 px — ഓരോ ഘടകവും സ്വന്തമായി തിരഞ്ഞെടുക്കുന്നതിന് പകരം.
വായിക്കാൻ എളുപ്പമുള്ള ബോഡി ടെക്സ്റ്റ്. വെബിൽ ഏകദേശം 16 px, ഏകദേശം 1.5 വരി ഉയരം, നീണ്ട ടെക്സ്റ്റിന് ഏകദേശം 60–75 അക്ഷരങ്ങളുടെ വരി നീളം.
ശ്രേണി വെയിറ്റിലൂടെയും വലിപ്പത്തിലൂടെയും, നിറത്തിലൂടെയല്ല. തലക്കെട്ടുകൾ കട്ടിയുള്ളതും വലുതും; ദ്വിതീയ ടെക്സ്റ്റ് ചെറുതും മൃദുവായ ചാരനിറവും.

നിറം

കൂടുതലും നിഷ്പക്ഷ നിറങ്ങൾ. പശ്ചാത്തലങ്ങൾ, പ്രതലങ്ങൾ, അരികുകൾ, ടെക്സ്റ്റിലെ ചാരനിറങ്ങൾ എന്നിവയാണ് ഏറ്റവും പണിയെടുക്കുന്നത്.
പ്രവർത്തനങ്ങൾക്കും തിരഞ്ഞെടുത്ത അവസ്ഥകൾക്കും ഒരു accent നിറം. വ്യക്തമായ ഒരു ജോലിയുണ്ടെങ്കിൽ മാത്രം രണ്ടാമത്തേത്.
വിജയം, മുന്നറിയിപ്പ്, പിശക് എന്നിവയ്ക്ക് അർത്ഥപരമായ നിറങ്ങൾ — അവ ആ കാര്യങ്ങൾക്ക് മാത്രം ഉപയോഗിക്കുക.
കോൺട്രാസ്റ്റ്. സാധാരണ ബോഡി ടെക്സ്റ്റിന് WCAG 2 കുറഞ്ഞത് 4.5:1 കോൺട്രാസ്റ്റ് അനുപാതവും വലിയ ടെക്സ്റ്റിന് 3:1-ഉം ആവശ്യപ്പെടുന്നു. വെളുപ്പിൽ ഇളം ചാരനിറ ടെക്സ്റ്റ് പലപ്പോഴും പരാജയപ്പെടും; AI-യോട് പരിശോധിക്കാൻ ആവശ്യപ്പെടുക.
ഡാർക്ക് മോഡ്, വേണമെങ്കിൽ — മറിച്ചിടുകയല്ല, മനഃപൂർവ്വം ഡിസൈൻ ചെയ്തത്.

ഇടവും ലേഔട്ടും

ഒരു സ്‌പേസിംഗ് സ്കെയിൽ, ഉദാഹരണത്തിന് 4, 8, 12, 16, 24, 32, 48, 64 px. എല്ലാം അതിലേക്ക് ചേർന്നിരിക്കണം.
വിന്യാസം. അരികുകൾ ഒത്തുചേരുന്നു; ഉള്ളടക്കം ഒരു ഗ്രിഡിലോ സ്ഥിരമായ പരമാവധി വീതിയുള്ള കോളത്തിലോ ഇരിക്കുന്നു.
സാമീപ്യം. ബന്ധപ്പെട്ടവ അടുത്തും ബന്ധമില്ലാത്തവ അകലെയും. ഈ ഒരൊറ്റ നിയമം മിക്ക തിരക്കുള്ള സ്ക്രീനുകളും ശരിയാക്കുന്നു.
കുറഞ്ഞ കണ്ടെയ്‌നറുകൾ. എല്ലാത്തിനും കാർഡ് വേണ്ട. അരികുകളും വിഭജനങ്ങളും വെളുത്ത ഇടവും ഉള്ളടക്കത്തെ കൂടുതൽ ശാന്തമായി ഗ്രൂപ്പ് ചെയ്യാം.

ഒരിക്കൽ സിസ്റ്റം സജ്ജമാക്കുന്ന ഒരു പ്രോംപ്റ്റ്:

കൂടുതൽ സ്ക്രീനുകൾ നിർമ്മിക്കുന്നതിന് മുമ്പ്, ഒരു ചെറിയ ഡിസൈൻ സിസ്റ്റം സജ്ജമാക്കി എല്ലായിടത്തും ഉപയോഗിക്കുക: 14/16/20/28/40 px ടൈപ്പ് സ്കെയിൽ, ബോഡി ലൈൻ ഉയരം 1.5, 4/8/12/16/24/32/48 px സ്‌പേസിംഗ് സ്കെയിൽ, ഏകദേശം വെളുപ്പ് മുതൽ ഏകദേശം കറുപ്പ് വരെയുള്ള നിഷ്പക്ഷ നിറങ്ങൾ, പ്രാഥമിക പ്രവർത്തനങ്ങൾക്ക് മാത്രം ഒരു accent നിറം (#3F6B5A), പിശകുകൾക്ക് മാത്രം ചുവപ്പ്. ബട്ടണുകൾ, ഇൻപുട്ടുകൾ, കാർഡുകൾ എന്നിവ ഒരേ border radius പങ്കിടണം. എല്ലാ ടെക്സ്റ്റും WCAG AA കോൺട്രാസ്റ്റ് പാലിക്കുന്നുണ്ടെന്ന് പരിശോധിക്കുക.

കോഡ് അറിയുന്ന ബിൽഡറിലാണ് പ്രവർത്തിക്കുന്നതെങ്കിൽ, ഇത് സാധാരണയായി ഡിസൈൻ ടോക്കണുകളായി മാറും — CSS variables അല്ലെങ്കിൽ Tailwind theme — അതായത് പിന്നീടുള്ള മാറ്റങ്ങൾ ഒരിടത്ത് മാത്രം നടക്കും.

ഘട്ടം 4: ആദ്യം ഒരു സ്ക്രീൻ ശരിയായി ഉണ്ടാക്കുക

പന്ത്രണ്ട് സ്ക്രീനുകൾ ഉണ്ടാക്കി പിന്നെ അവയെല്ലാം ശരിയാക്കാൻ ശ്രമിക്കരുത്. ഉപയോക്താക്കൾ ഏറ്റവും കൂടുതൽ കാണുന്ന സ്ക്രീൻ തിരഞ്ഞെടുക്കുക — പലപ്പോഴും ഡാഷ്ബോർഡോ പ്രധാന ലിസ്റ്റോ — അത് ശരിയാകുന്നതുവരെ ആവർത്തിക്കുക. പിന്നെ:

മറ്റെല്ലാ പേജുകൾക്കും റഫറൻസായി ഡാഷ്ബോർഡ് ഉപയോഗിക്കുക: അതേ ഹെഡർ, ഇടം, ടൈപ്പ് വലിപ്പങ്ങൾ, ബട്ടൺ ശൈലികൾ, പട്ടിക ശൈലി. Settings, Bookings പേജുകൾ അതിനനുസരിച്ച് അപ്ഡേറ്റ് ചെയ്യുക.

പൂർത്തിയായ ഒരു റഫറൻസ് സ്ക്രീൻ നിങ്ങളുടെ അഭിരുചി ഏതൊരു വിശേഷണത്തെക്കാളും നന്നായി അറിയിക്കുന്നു.

ഘട്ടം 5: ചെറിയ, നിർദ്ദിഷ്ട അഭ്യർത്ഥനകളിലൂടെ ആവർത്തിക്കുക

AI-ക്ക് നൽകുന്ന ഫീഡ്‌ബാക്ക് ഒരു ജൂനിയർ ഡിസൈനർക്ക് നൽകുന്നതുപോലെയാണ്: നിർദ്ദിഷ്ടം, ഒരു സമയം ഒരു ഭാഗം, എന്ത് നിലനിർത്തണമെന്ന് വ്യക്തമായി.

അവ്യക്തം	നിർദ്ദിഷ്ടം
“ഇത് കൂടുതൽ മനോഹരമാക്കൂ.”	“വിഭാഗങ്ങൾക്കിടയിലെ ഇടം 64 px ആക്കുക, പേജ് തലക്കെട്ട് 40 px ആക്കുക, ദ്വിതീയ ടെക്സ്റ്റ് മധ്യ ചാരനിറത്തിലേക്ക് മൃദുവാക്കുക.”
“ഇത് അലങ്കോലമായി തോന്നുന്നു.”	“സ്ഥിതിവിവര വരിയിലെ കാർഡ് അരികുകൾ നീക്കം ചെയ്യുക, സംഖ്യകൾ ഇടത്തേക്ക് വിന്യസിക്കുക, ലേബലുകൾ അവയ്ക്ക് മുകളിൽ ചെറിയ capitals-ൽ വെക്കുക.”
“ഇത് തിളങ്ങട്ടെ.”	“accent നിറം പ്രാഥമിക ബട്ടണിൽ മാത്രം ഉപയോഗിക്കുക. ദ്വിതീയ ബട്ടണുകൾ രൂപരേഖയായി ആക്കുക.”
“മൊബൈൽ കാഴ്ച മെച്ചപ്പെടുത്തൂ.”	“ഫോൺ വീതിയിൽ, Filters ബട്ടണിൽ നിന്ന് തുറക്കുന്ന ഷീറ്റിൽ ഫിൽട്ടറുകൾ അടുക്കുക, പട്ടിക വരികൾ കാർഡുകളാക്കുക.”

എപ്പോഴും എന്ത് നിലനിർത്തണമെന്നും ചേർക്കുക — “എല്ലാ റൂട്ടുകളും ടെക്സ്റ്റും ഫീച്ചറുകളും അതേപടി നിലനിർത്തുക” — അങ്ങനെ ഒരു വിഷ്വൽ പാസ് ഒളിഞ്ഞ് ഫങ്ഷണാലിറ്റി നീക്കം ചെയ്യില്ല. അടുത്ത അഭ്യർത്ഥനയ്ക്ക് മുമ്പ് ഓരോ മാറ്റവും ഫോൺ വലിപ്പമുള്ള സ്ക്രീനിൽ പരിശോധിക്കുക; ചെറിയ സ്ക്രീനുകളിൽ നല്ലത് എങ്ങനെയിരിക്കുമെന്നതിന് മൊബൈൽ-സൗഹൃദ വെബ് ആപ്പ് എങ്ങനെ നിർമ്മിക്കാം കാണുക.

ഘട്ടം 6: നല്ലതിനെ സാധാരണത്തിൽ നിന്ന് വേർതിരിക്കുന്ന വിശദാംശങ്ങൾ

ഘടന ശരിയായിക്കഴിഞ്ഞാൽ, ഈ ചെറിയ കാര്യങ്ങൾ ആപ്പിനെ പൂർത്തിയായതായി തോന്നിപ്പിക്കുന്നു:

ശൂന്യ അവസ്ഥകൾ. ഡാറ്റയില്ലാത്ത പുതിയ ഉപയോക്താവ് കാണുന്നത്: ഒരു ചെറിയ വിശദീകരണവും ഒരു വ്യക്തമായ പ്രവർത്തനവും, ശൂന്യമായ പട്ടികയല്ല.
ലോഡിംഗ് അവസ്ഥകൾ. ഉള്ളടക്കത്തിന്റെ ആകൃതിയിലുള്ള skeleton-കൾ, എല്ലായിടത്തും സ്പിന്നറുകളല്ല.
പിശക് അവസ്ഥകൾ. പിശകിന് കാരണമായ ഫീൽഡിന് അടുത്ത് ലളിതമായ ഭാഷയിലുള്ള സന്ദേശങ്ങൾ.
Hover, focus, അമർത്തിയ അവസ്ഥകൾ ഓരോ ഇന്ററാക്ടീവ് ഘടകത്തിലും — കീബോർഡ് ഉപയോക്താക്കൾക്ക് focus ring പ്രധാനമാണ്.
യഥാർത്ഥ ഉള്ളടക്കം. “Lorem ipsum”, “John Doe” എന്നിവയ്ക്ക് പകരം യാഥാർത്ഥ്യബോധമുള്ള ടെക്സ്റ്റും ഡാറ്റയും; പ്ലേസ്‌ഹോൾഡർ ഉള്ളടക്കം ലേഔട്ട് പ്രശ്നങ്ങൾ മറയ്ക്കുന്നു.
ഒരു സെറ്റിൽ നിന്നുള്ള ഐക്കണുകൾ, ഒന്നോ രണ്ടോ വലിപ്പങ്ങളിൽ, സ്ഥിരമായ സ്ട്രോക്ക് വീതിയോടെ.
ഉദ്ദേശ്യമുള്ള ചിത്രങ്ങൾ. സാധാരണ സ്റ്റോക്കിനെക്കാൾ നിങ്ങളുടെ ഉത്പന്നത്തിന്റെയോ സ്ഥലത്തിന്റെയോ ആളുകളുടെയോ യഥാർത്ഥ ഫോട്ടോകൾ മികച്ചതാണ്. സ്റ്റോക്കോ generate ചെയ്ത ചിത്രങ്ങളോ ഉപയോഗിക്കുമ്പോൾ സ്ഥിരമായ ശൈലി നിലനിർത്തുക.
പകർപ്പെഴുത്ത്. ചെറുതും നിർദ്ദിഷ്ടവുമായ ലേബലുകൾ (“Submit” എന്നതിന് പകരം “Book class”) ഏതൊരു നിറ തിരഞ്ഞെടുപ്പും പോലെ കാഴ്ചയിലെ ഗുണനിലവാരം ഉയർത്തുന്നു.

സാധാരണ തെറ്റുകൾ

ഒരു പ്രോംപ്റ്റിൽ മുഴുവൻ വീണ്ടും ഡിസൈൻ ചെയ്യുക. വലിയ പുനരെഴുത്തുകൾ പിന്നോട്ടുപോക്ക് കൊണ്ടുവരും. പേജ് പേജായി പോകുക.
ധാരാളം accent നിറങ്ങൾ. എല്ലാം ഹൈലൈറ്റ് ചെയ്താൽ ഒന്നും ഹൈലൈറ്റ് ആകില്ല.
എല്ലാം മധ്യത്തിൽ വെക്കുക. മധ്യത്തിലുള്ള ടെക്സ്റ്റ് ഒരു തലക്കെട്ടിനപ്പുറം വായിക്കാൻ പ്രയാസമാണ്; മിക്ക ഉള്ളടക്കവും ഇടത്തേക്ക് വിന്യസിക്കുക.
ചെറുതും കുറഞ്ഞ കോൺട്രാസ്റ്റുള്ളതുമായ ടെക്സ്റ്റ് വലിയ മോണിറ്ററിൽ മനോഹരമായി തോന്നും, വെയിലത്ത് ഫോണിൽ വായിക്കാനാകില്ല.
ശ്രേണിക്ക് പകരം അലങ്കാരം. ഏറ്റവും പ്രധാനപ്പെട്ട പ്രവർത്തനം വ്യക്തമല്ലാത്ത സ്ക്രീനെ ഗ്രേഡിയന്റുകൾക്കോ നിഴലുകൾക്കോ ശരിയാക്കാനാകില്ല.
ലാൻഡിംഗ് പേജ് അവഗണിക്കുന്നത്. പല ഉത്പന്നങ്ങൾക്കും അതാണ് ആദ്യ മതിപ്പ്; പരിവർത്തനം ചെയ്യുന്ന ലാൻഡിംഗ് പേജ് എങ്ങനെ നിർമ്മിക്കാം കാണുക.

ഡിസൈനിനപ്പുറമുള്ള കൂടുതൽ പ്രോംപ്റ്റ് രീതികൾക്ക്, AI ആപ്പ് ബിൽഡറുകൾക്കുള്ള പ്രോംപ്റ്റുകൾ എഴുതുന്നത് എങ്ങനെ വായിക്കുക. നിങ്ങളുടെ ജോലി തന്നെ ഉത്പന്നമാണെങ്കിൽ — ഡിസൈൻ അല്ലെങ്കിൽ ഫോട്ടോഗ്രാഫി പോർട്ട്ഫോളിയോ — ഒരു പോർട്ട്ഫോളിയോ വെബ്സൈറ്റ് എങ്ങനെ നിർമ്മിക്കാം അവതരണത്തെക്കുറിച്ച് വിശദമായി പറയുന്നു.

Mythex-ൽ ഡിസൈൻ ചെയ്യുന്നത്

Mythex-ൽ ചാറ്റിൽ ഡിസൈൻ വിവരിക്കുന്നു, ലൈവ് പ്രിവ്യൂവിലും ഫോൺ വലുപ്പമുള്ള ഫ്രെയിമിലും അത് കാണുന്നു, അടുത്ത മാറ്റത്തിന് മുമ്പ് പരിശോധിക്കുന്നു. ഡോക്സിൽ ഇതിനുള്ള ചെറിയ പാറ്റേണുകളുണ്ട്: design and UI prompts ഏതെല്ലാം മാറ്റണം, ഏതെല്ലാം നിലനിർത്തണം എന്ന് പറയുന്നതിനെക്കുറിച്ചും, redesign your UI ഫീച്ചറുകൾ നഷ്ടപ്പെടാതെ ഒരു പേജ് വീതം പുതുക്കുന്നതിനെക്കുറിച്ചും. Mythex-ന് ചാറ്റിൽ സ്റ്റോക്ക് ഫോട്ടോകൾ തിരയാനോ ഒരു ചിത്രം generate ചെയ്യാനോ കഴിയും — ഒരു hero ചിത്രം, ഒരു പശ്ചാത്തലം, ഒരു share ചിത്രം — നിങ്ങൾ ആവശ്യപ്പെടുമ്പോൾ അത് ആപ്പിൽ വെക്കാം. ഒരു പാസ് തെറ്റിപ്പോയാൽ, അതിന് മുമ്പുള്ള ചെക്ക്പോയിന്റിലേക്ക് മടങ്ങുക. ഒരു പേജ് ഡിസൈനിൽ നിന്നുതന്നെ തുടങ്ങാൻ താല്പര്യമുണ്ടെങ്കിൽ, ടെംപ്ലേറ്റുകൾ ബ്രൗസ് ചെയ്ത് ക്രമീകരിക്കുക.

ചോദ്യങ്ങൾ

AI ഡിസൈൻ ചെയ്ത ആപ്പുകൾ എല്ലാം ഒരുപോലെ തോന്നുന്നത് എന്തുകൊണ്ട്?

അവ്യക്തമായ പ്രോംപ്റ്റ് ഏറ്റവും ശരാശരി ഉത്തരം നൽകുന്നതുകൊണ്ടാണ്: ഒരേ ഫോണ്ടുകൾ, ഗ്രേഡിയന്റുകൾ, വൃത്താകൃതിയുള്ള കാർഡുകൾ, മധ്യത്തിലുള്ള hero. റഫറൻസുകളും പേരിട്ട ഡിസൈൻ ദിശയും ടൈപ്പ്, നിറം, ഇടം എന്നിവയ്ക്കുള്ള വ്യക്തമായ നിയമങ്ങളും നൽകിയാൽ ഔട്ട്പുട്ട് സാധാരണമായി തോന്നില്ല.

ഒരു സ്ക്രീൻഷോട്ട് കാണിച്ച് ഒരു ശൈലി പകർത്താൻ AI-യോട് പറയാമോ?

പല AI ബിൽഡറുകളും ചിത്ര അറ്റാച്ച്മെന്റുകൾ സ്വീകരിക്കുന്നു, ഒരു ശൈലി കാണിക്കാൻ സ്ക്രീൻഷോട്ട് ഏറ്റവും വ്യക്തമായ മാർഗ്ഗങ്ങളിലൊന്നാണ്. നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത് വിവരിക്കുക — ഇടം, ടൈപ്പ്, നിറത്തിന്റെ ഉപയോഗം — മറ്റൊരാളുടെ ഉത്പന്നത്തിന്റെ കോപ്പി ആവശ്യപ്പെടുന്നതിന് പകരം.

AI ഉപയോഗിച്ച് നിർമ്മിക്കുമ്പോൾ ഡിസൈനർ വേണോ?

ആദ്യ പതിപ്പിന് വേണ്ട. ഒരു ബ്രാൻഡ് സംരക്ഷിക്കാനുള്ളപ്പോഴോ, ലേഔട്ട് തീരുമാനങ്ങൾ ആളുകൾക്ക് എത്രത്തോളം നന്നായി ഉപയോഗിക്കാനാകും എന്നതിനെ ബാധിക്കുന്ന സങ്കീർണ്ണ ഉത്പന്നമുള്ളപ്പോഴോ ഡിസൈനർ ഏറ്റവും കൂടുതൽ സഹായിക്കും. അതുവരെ വ്യക്തമായ റഫറൻസുകളും ചെറിയ മാറ്റങ്ങളും വൃത്തിയുള്ളതും ഉപയോഗയോഗ്യവുമായ ഇന്റർഫേസ് നൽകും.

ഒരു ആപ്പ് പ്രൊഫഷണലായി കാണാൻ എന്താണ് വേണ്ടത്?

അലങ്കാരത്തെക്കാൾ സ്ഥിരത: ഒരു ടൈപ്പ് സ്കെയിൽ, ഉദ്ദേശ്യത്തോടെ ഉപയോഗിക്കുന്ന ചെറിയ നിറ പാലറ്റ്, നിശ്ചിത സ്കെയിലിലുള്ള ഇടം, ഒത്തുചേരുന്ന അരികുകൾ, ഓരോ സ്ക്രീനിലും ഏറ്റവും പ്രധാനപ്പെട്ടത് വ്യക്തമാകുന്ന ശ്രേണി.