AI ਨਾਲ ਚੰਗੀ ਦਿੱਖ ਵਾਲੀ ਐਪ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੀਏ
AI ਤੋਂ ਚੰਗੀ ਦਿੱਖ ਵਾਲੀ ਐਪ ਲੈਣ ਲਈ, "ਇਸਨੂੰ ਸੋਹਣਾ ਬਣਾਓ" ਕਹਿਣਾ ਛੱਡੋ ਅਤੇ ਉਹ ਦਿਓ ਜੋ ਇੱਕ ਡਿਜ਼ਾਈਨਰ ਚਾਹੁੰਦਾ: ਦੋ ਜਾਂ ਤਿੰਨ ਹਵਾਲੇ ਜੋ ਤੁਹਾਨੂੰ ਪਸੰਦ ਹਨ, ਡਿਜ਼ਾਈਨ ਦੀ ਨਾਮਜ਼ਦ ਦਿਸ਼ਾ, ਅਤੇ ਟਾਈਪ, ਰੰਗ ਤੇ ਫਾਸਲੇ ਲਈ ਠੋਸ ਨਿਯਮ। ਫਿਰ ਇੱਕ ਸਕਰੀਨ ਬਣਾਓ, ਉਸਨੂੰ ਠੀਕ ਹੋਣ ਤੱਕ ਸੁਧਾਰੋ, ਅਤੇ AI ਨੂੰ ਉਹੀ ਸਿਸਟਮ ਬਾਕੀ ਥਾਵਾਂ ਉੱਤੇ ਲਾਗੂ ਕਰਨ ਲਈ ਕਹੋ। ਜ਼ਿਆਦਾਤਰ "AI ਵਾਲੀ ਦਿੱਖ" ਅਸਪਸ਼ਟ ਪ੍ਰੌਮਪਟਾਂ ਤੋਂ ਆਉਂਦੀ ਹੈ; ਠੋਸ ਜਾਣਕਾਰੀ ਠੋਸ ਡਿਜ਼ਾਈਨ ਦਿੰਦੀ ਹੈ।
AI ਦੇ ਡਿਜ਼ਾਈਨ ਆਮ ਕਿਉਂ ਲੱਗਦੇ ਹਨ
ਜੇ AI ਨੂੰ "ਇੱਕ ਆਧੁਨਿਕ, ਸਾਫ਼ SaaS ਡੈਸ਼ਬੋਰਡ" ਬਣਾਉਣ ਲਈ ਕਹੋ, ਤਾਂ ਉਹ ਹਰ ਡੈਸ਼ਬੋਰਡ ਦਾ ਅੰਕੜਾਤਮਕ ਵਿਚਕਾਰਲਾ ਰੂਪ ਦੇਵੇਗਾ: ਉਹੀ ਸਾਦਾ ਫੌਂਟ, ਜਾਮਨੀ ਤੋਂ ਨੀਲੇ ਵੱਲ ਗ੍ਰੇਡੀਐਂਟ, ਨਰਮ ਪਰਛਾਵਿਆਂ ਵਾਲੇ ਗੋਲ ਕਾਰਡ, ਚੱਕਰਾਂ ਵਿੱਚ ਇਮੋਜੀ ਵਰਗੇ ਆਈਕਾਨ, ਅਤੇ ਵਿਚਕਾਰ ਇੱਕ ਹੀਰੋ ਹਿੱਸਾ ਜਿਸ ਵਿੱਚ ਲਿਖਿਆ ਹੋਵੇ "ਤੁਹਾਡਾ ਕੰਮ, ਸੌਖਾ ਕੀਤਾ ਗਿਆ"। ਇਨ੍ਹਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਚੋਣ ਗਲਤ ਨਹੀਂ ਹੈ। ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਇਨ੍ਹਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਤੁਹਾਡੇ ਉਤਪਾਦ ਲਈ ਚੁਣੀ ਨਹੀਂ ਗਈ।
ਚੰਗਾ ਡਿਜ਼ਾਈਨ ਜ਼ਿਆਦਾਤਰ ਫ਼ੈਸਲਿਆਂ ਦਾ ਨਾਮ ਹੈ। ਤੁਹਾਡਾ ਕੰਮ ਉਹ ਕੁਝ ਫ਼ੈਸਲੇ ਕਰਨਾ ਹੈ ਜੋ ਐਪ ਨੂੰ ਇੱਕ ਪਛਾਣ ਦਿੰਦੇ ਹਨ, ਅਤੇ ਬਾਕੀ ਹਜ਼ਾਰਾਂ ਛੋਟੇ ਫ਼ੈਸਲੇ AI ਨੂੰ ਇਕਸਾਰਤਾ ਨਾਲ ਕਰਨ ਦਿਓ।
ਕਦਮ 1: ਪ੍ਰੌਮਪਟ ਤੋਂ ਪਹਿਲਾਂ ਹਵਾਲੇ ਇਕੱਠੇ ਕਰੋ
ਵੀਹ ਮਿੰਟ ਲਾ ਕੇ ਦੋ ਤੋਂ ਚਾਰ ਹਵਾਲੇ ਲੱਭੋ — ਐਪਾਂ ਜਾਂ ਵੈੱਬਸਾਈਟਾਂ ਜਿਨ੍ਹਾਂ ਦੀ ਦਿੱਖ ਤੁਹਾਡੇ ਉਤਪਾਦ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੋਵੇ। ਚੰਗੇ ਸਰੋਤ ਹਨ ਉਹ ਉਤਪਾਦ ਜੋ ਤੁਹਾਡੇ ਦਰਸ਼ਕ ਪਹਿਲਾਂ ਹੀ ਵਰਤਦੇ ਹਨ, ਡਿਜ਼ਾਈਨ ਗੈਲਰੀਆਂ, ਅਤੇ ਨੇੜਲੇ ਖੇਤਰਾਂ ਦੀਆਂ ਕੰਪਨੀਆਂ ਦੀਆਂ ਵੈੱਬਸਾਈਟਾਂ।
ਹਰ ਇੱਕ ਲਈ ਸਾਦੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਲਿਖੋ ਕਿ ਤੁਹਾਨੂੰ ਕੀ ਪਸੰਦ ਹੈ:
- "ਬਹੁਤ ਸਾਰੀ ਖਾਲੀ ਥਾਂ, ਸਮੱਗਰੀ ਇੱਕ ਤੰਗ ਕਾਲਮ ਵਿੱਚ, ਵੱਡੇ ਅੰਕਾਂ ਉੱਤੇ ਛੋਟੇ ਸਲੇਟੀ ਲੇਬਲ।"
- "ਪਤਲੀਆਂ ਲਕੀਰਾਂ ਵਾਲੀਆਂ ਸੰਘਣੀਆਂ ਟੇਬਲਾਂ, ਕਾਰਡ ਦੇ ਪਰਛਾਵੇਂ ਨਹੀਂ, ਕਾਰਵਾਈਆਂ ਲਈ ਇੱਕ ਲਹਿਜ਼ੇ ਵਾਲਾ ਰੰਗ।"
- "ਵੱਡੇ ਸੇਰੀਫ ਸਿਰਲੇਖ, ਨਿੱਘਾ ਆਫ-ਵਾਈਟ ਪਿਛੋਕੜ, ਚਿੱਤਰਾਂ ਦੀ ਥਾਂ ਫੋਟੋਆਂ।"
ਫਿਰ ਇਹ ਵੇਰਵੇ AI ਨੂੰ ਦਿਓ, ਅਤੇ ਜੇ ਤੁਹਾਡਾ ਟੂਲ ਤਸਵੀਰਾਂ ਲੈਂਦਾ ਹੈ ਤਾਂ ਸਕਰੀਨਸ਼ਾਟ ਵੀ ਨੱਥੀ ਕਰੋ। ਕਿਸੇ ਹੋਰ ਦੀ ਲੇਆਊਟ, ਬ੍ਰਾਂਡਿੰਗ ਜਾਂ ਲਿਖਤ ਹੂ-ਬ-ਹੂ ਨਕਲ ਕਰਨਾ ਕਾਨੂੰਨੀ ਅਤੇ ਭਰੋਸੇ ਦੋਵਾਂ ਪੱਖੋਂ ਖ਼ਤਰਾ ਹੈ, ਇਸ ਲਈ ਗੁਣਾਂ ਤੋਂ ਪ੍ਰੇਰਣਾ ਲਓ, ਉਤਪਾਦ ਤੋਂ ਨਹੀਂ।
ਕਦਮ 2: ਡਿਜ਼ਾਈਨ ਦੀ ਦਿਸ਼ਾ ਚੁਣੋ ਅਤੇ ਉਸਨੂੰ ਨਾਮ ਦਿਓ
ਦਿਸ਼ਾ ਇਸ ਮਹਿਸੂਸ ਦਾ ਛੋਟਾ ਵੇਰਵਾ ਹੈ। ਇਹ AI ਨੂੰ ਹਰ ਫ਼ੈਸਲੇ ਲਈ ਇੱਕ ਛਾਣਨੀ ਦਿੰਦੀ ਹੈ। ਕੁਝ ਜੋ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ:
| ਦਿਸ਼ਾ | ਆਮ ਚੋਣਾਂ | ਢੁਕਵੀਂ |
|---|---|---|
| ਸ਼ਾਂਤ ਅਤੇ ਸਾਦੀ | ਨਿਰਪੱਖ ਪੈਲੇਟ, ਖੁੱਲ੍ਹਾ ਫਾਸਲਾ, ਇੱਕ ਲਹਿਜ਼ਾ ਰੰਗ, ਪਤਲੀਆਂ ਬਾਰਡਰਾਂ | ਉਤਪਾਦਕਤਾ ਟੂਲ, ਵਿੱਤ, ਸਿਹਤ |
| ਸੰਪਾਦਕੀ | ਸੇਰੀਫ ਸਿਰਲੇਖ, ਮਜ਼ਬੂਤ ਟਾਈਪ ਅੰਤਰ, ਵੱਡੀਆਂ ਤਸਵੀਰਾਂ, ਤੰਗ ਟੈਕਸਟ ਕਾਲਮ | ਪੋਰਟਫੋਲੀਓ, ਪ੍ਰਕਾਸ਼ਨ, ਪ੍ਰੀਮੀਅਮ ਸੇਵਾਵਾਂ |
| ਸੰਘਣੀ ਅਤੇ ਕਾਰਜਸ਼ੀਲ | ਛੋਟੀਆਂ ਕਤਾਰਾਂ, ਛੋਟੀ ਟਾਈਪ, ਟੇਬਲਾਂ, ਕੀਬੋਰਡ-ਅਨੁਕੂਲ | ਅੰਦਰੂਨੀ ਟੂਲ, ਡੈਸ਼ਬੋਰਡ, ਐਡਮਿਨ ਪੈਨਲ |
| ਨਿੱਘੀ ਅਤੇ ਦੋਸਤਾਨਾ | ਗੋਲ ਆਕਾਰ, ਨਰਮ ਰੰਗ, ਚਿੱਤਰਕਾਰੀ, ਵੱਡੇ ਟੱਚ ਟਾਰਗੇਟ | ਖਪਤਕਾਰ ਐਪਾਂ, ਭਾਈਚਾਰਾ, ਸਿੱਖਿਆ |
| ਬੋਲਡ ਅਤੇ ਗ੍ਰਾਫਿਕ | ਉੱਚਾ ਕੰਟਰਾਸਟ, ਵੱਡੀ ਟਾਈਪ, ਸਮਤਲ ਰੰਗ ਦੇ ਬਲਾਕ | ਇਵੈਂਟ, ਲਾਂਚ, ਰਚਨਾਤਮਕ ਬ੍ਰਾਂਡ |
ਇਸਨੂੰ ਪਹਿਲੇ ਪ੍ਰੌਮਪਟ ਵਿੱਚ ਪਾਓ, ਨਾਲ ਇਹ ਵੀ ਕਿ ਐਪ ਕਿਸ ਲਈ ਹੈ:
ਇੱਕ ਸੁਤੰਤਰ ਯੋਗਾ ਸਟੂਡੀਓ ਲਈ ਬੁਕਿੰਗ ਐਪ ਬਣਾਓ। ਡਿਜ਼ਾਈਨ ਦਿਸ਼ਾ: ਸ਼ਾਂਤ ਅਤੇ ਸਾਦੀ, ਛਪੇ ਹੋਏ ਸਟੂਡੀਓ ਸਮਾਂ-ਸਾਰਣੀ ਵਰਗੀ। ਨਿੱਘਾ ਆਫ-ਵਾਈਟ ਪਿਛੋਕੜ, ਲਗਭਗ-ਕਾਲਾ ਟੈਕਸਟ, ਬਟਨਾਂ ਅਤੇ ਚੁਣੀਆਂ ਹਾਲਤਾਂ ਲਈ ਇੱਕ ਹਲਕਾ ਸੇਜ-ਹਰਾ ਲਹਿਜ਼ਾ। ਸਿਰਲੇਖਾਂ ਲਈ ਸੇਰੀਫ, ਲਿਖਤ ਲਈ ਸਾਫ਼ ਸੈਨਸ-ਸੇਰੀਫ। ਖੁੱਲ੍ਹਾ ਫਾਸਲਾ, ਕੋਈ ਗ੍ਰੇਡੀਐਂਟ ਨਹੀਂ, ਕੋਈ ਪਰਛਾਵਾਂ ਨਹੀਂ, ਕੋਈ ਇਮੋਜੀ ਨਹੀਂ। ਪਹਿਲਾਂ ਮੋਬਾਈਲ।
ਕਦਮ 3: ਨਿਯਮ ਤੈਅ ਕਰੋ — ਟਾਈਪ, ਰੰਗ ਅਤੇ ਫਾਸਲਾ
ਇਹ ਤਿੰਨ ਜ਼ਿਆਦਾਤਰ ਦ੍ਰਿਸ਼ਟੀ ਗੁਣਵੱਤਾ ਲਿਆਉਂਦੇ ਹਨ। ਇਨ੍ਹਾਂ ਬਾਰੇ ਸਾਫ਼ ਹੋਣਾ ਇਕੱਲੀ ਸਭ ਤੋਂ ਵੱਡੀ ਸੁਧਾਰ ਹੈ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ।
ਟਾਈਪੋਗ੍ਰਾਫੀ
- ਇੱਕ ਜਾਂ ਦੋ ਫੌਂਟ। ਇੱਕ ਸਿਰਲੇਖ ਫੌਂਟ ਅਤੇ ਇੱਕ ਲਿਖਤ ਫੌਂਟ, ਜਾਂ ਇੱਕੋ ਪਰਿਵਾਰ ਦੇ ਕਈ ਭਾਰ।
- ਟਾਈਪ ਪੈਮਾਨਾ। ਕੁਝ ਆਕਾਰ ਜੋ ਇਕਸਾਰ ਵਰਤੇ ਜਾਣ — ਜਿਵੇਂ 14, 16, 20, 28 ਅਤੇ 40 px — ਨਾ ਕਿ ਹਰ ਕੰਪੋਨੈਂਟ ਆਪਣੀ ਮਰਜ਼ੀ ਦਾ।
- ਪੜ੍ਹਨਯੋਗ ਲਿਖਤ। ਵੈੱਬ ਉੱਤੇ ਲਗਭਗ 16 px, ਲਾਈਨ ਉਚਾਈ ਲਗਭਗ 1.5, ਅਤੇ ਲੰਬੇ ਟੈਕਸਟ ਲਈ ਲਗਭਗ 60–75 ਅੱਖਰ ਪ੍ਰਤੀ ਲਾਈਨ।
- ਪੱਧਰ ਭਾਰ ਅਤੇ ਆਕਾਰ ਰਾਹੀਂ, ਰੰਗ ਰਾਹੀਂ ਨਹੀਂ। ਸਿਰਲੇਖ ਮੋਟੇ ਅਤੇ ਵੱਡੇ; ਦੂਜੀ ਲਿਖਤ ਛੋਟੀ ਅਤੇ ਹਲਕੀ ਸਲੇਟੀ।
ਰੰਗ
- ਜ਼ਿਆਦਾਤਰ ਨਿਰਪੱਖ। ਪਿਛੋਕੜ, ਸਤਹਾਂ, ਬਾਰਡਰਾਂ ਅਤੇ ਟੈਕਸਟ ਦੀਆਂ ਸਲੇਟੀਆਂ ਜ਼ਿਆਦਾਤਰ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।
- ਇੱਕ ਲਹਿਜ਼ਾ ਰੰਗ ਕਾਰਵਾਈਆਂ ਅਤੇ ਚੁਣੀਆਂ ਹਾਲਤਾਂ ਲਈ। ਦੂਜਾ ਤਾਂ ਹੀ, ਜੇ ਉਸਦਾ ਸਾਫ਼ ਕੰਮ ਹੋਵੇ।
- ਸੈਮੈਂਟਿਕ ਰੰਗ ਸਫਲਤਾ, ਚੇਤਾਵਨੀ ਅਤੇ ਗਲਤੀ ਲਈ — ਅਤੇ ਸਿਰਫ਼ ਉਨ੍ਹਾਂ ਲਈ।
- ਕੰਟਰਾਸਟ। 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, ਲਗਭਗ-ਚਿੱਟੇ ਤੋਂ ਲਗਭਗ-ਕਾਲੇ ਤੱਕ ਨਿਰਪੱਖ, ਸਿਰਫ਼ ਮੁੱਖ ਕਾਰਵਾਈਆਂ ਲਈ ਇੱਕ ਲਹਿਜ਼ਾ ਰੰਗ (#3F6B5A), ਅਤੇ ਗਲਤੀਆਂ ਲਈ ਹੀ ਲਾਲ। ਬਟਨ, ਇਨਪੁੱਟ ਅਤੇ ਕਾਰਡ ਇੱਕੋ ਬਾਰਡਰ ਰੇਡੀਅਸ ਸਾਂਝਾ ਕਰਨ। ਜਾਂਚੋ ਕਿ ਸਾਰੀ ਲਿਖਤ WCAG AA ਕੰਟਰਾਸਟ ਪੂਰਾ ਕਰਦੀ ਹੈ।
ਜੇ ਤੁਸੀਂ ਕੋਡ-ਜਾਣੂ ਬਿਲਡਰ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਆਮ ਤੌਰ ਉੱਤੇ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਬਣਦੇ ਹਨ — CSS ਵੈਰੀਏਬਲ ਜਾਂ Tailwind ਥੀਮ — ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬਾਅਦ ਦੀਆਂ ਤਬਦੀਲੀਆਂ ਇੱਕੋ ਥਾਂ ਹੁੰਦੀਆਂ ਹਨ।
ਕਦਮ 4: ਪਹਿਲਾਂ ਇੱਕ ਸਕਰੀਨ ਠੀਕ ਬਣਾਓ
ਬਾਰਾਂ ਸਕਰੀਨਾਂ ਇੱਕੋ ਵਾਰ ਬਣਾ ਕੇ ਫਿਰ ਸਭ ਠੀਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਾ ਕਰੋ। ਉਹ ਸਕਰੀਨ ਚੁਣੋ ਜੋ ਲੋਕ ਸਭ ਤੋਂ ਵੱਧ ਦੇਖਦੇ ਹਨ — ਅਕਸਰ ਡੈਸ਼ਬੋਰਡ ਜਾਂ ਮੁੱਖ ਸੂਚੀ — ਅਤੇ ਉਹ ਠੀਕ ਹੋਣ ਤੱਕ ਸੁਧਾਰੋ। ਫਿਰ:
ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਬਾਕੀ ਸਾਰੇ ਪੰਨਿਆਂ ਲਈ ਹਵਾਲਾ ਬਣਾਓ: ਉਹੀ ਹੈਡਰ, ਫਾਸਲਾ, ਟਾਈਪ ਆਕਾਰ, ਬਟਨ ਸਟਾਈਲ ਅਤੇ ਟੇਬਲ ਸਟਾਈਲ। Settings ਅਤੇ Bookings ਪੰਨਿਆਂ ਨੂੰ ਇਸ ਨਾਲ ਮਿਲਦਾ ਕਰੋ।
ਇੱਕ ਮੁਕੰਮਲ ਹਵਾਲਾ ਸਕਰੀਨ ਤੁਹਾਡਾ ਸੁਆਦ ਕਿਸੇ ਵੀ ਵਿਸ਼ੇਸ਼ਣ ਨਾਲੋਂ ਬਿਹਤਰ ਦੱਸਦੀ ਹੈ।
ਕਦਮ 5: ਛੋਟੀਆਂ, ਖ਼ਾਸ ਬੇਨਤੀਆਂ ਨਾਲ ਸੁਧਾਰੋ
AI ਨੂੰ ਫੀਡਬੈਕ ਇੱਕ ਜੂਨੀਅਰ ਡਿਜ਼ਾਈਨਰ ਵਾਂਗ ਦਿਓ: ਖ਼ਾਸ, ਇੱਕ ਵਾਰ ਵਿੱਚ ਇੱਕ ਖੇਤਰ, ਅਤੇ ਸਾਫ਼ ਦੱਸੋ ਕਿ ਕੀ ਰੱਖਣਾ ਹੈ।
| ਅਸਪਸ਼ਟ | ਖ਼ਾਸ |
|---|---|
| "ਇਸਨੂੰ ਹੋਰ ਸੋਹਣਾ ਬਣਾਓ।" | "ਸੈਕਸ਼ਨਾਂ ਵਿਚਕਾਰ ਫਾਸਲਾ 64 px ਕਰੋ, ਪੰਨੇ ਦਾ ਸਿਰਲੇਖ 40 px ਕਰੋ, ਅਤੇ ਦੂਜੀ ਲਿਖਤ ਨੂੰ ਮੱਧਮ ਸਲੇਟੀ ਕਰੋ।" |
| "ਇਹ ਭੀੜਾ ਲੱਗਦਾ ਹੈ।" | "ਅੰਕੜਿਆਂ ਵਾਲੀ ਕਤਾਰ ਤੋਂ ਕਾਰਡ ਬਾਰਡਰ ਹਟਾਓ, ਅੰਕ ਖੱਬੇ ਪਾਸੇ ਕਰੋ, ਅਤੇ ਲੇਬਲ ਉਨ੍ਹਾਂ ਦੇ ਉੱਪਰ ਛੋਟੇ ਅੱਖਰਾਂ ਵਿੱਚ ਰੱਖੋ।" |
| "ਇਸਨੂੰ ਚਮਕਾਓ।" | "ਲਹਿਜ਼ਾ ਰੰਗ ਸਿਰਫ਼ ਮੁੱਖ ਬਟਨ ਲਈ ਵਰਤੋ। ਸੈਕੰਡਰੀ ਬਟਨਾਂ ਨੂੰ ਬਾਹਰੋਂ ਲਕੀਰ ਵਾਲੇ ਬਣਾਓ।" |
| "ਮੋਬਾਈਲ ਦ੍ਰਿਸ਼ ਸੁਧਾਰੋ।" | "ਫੋਨ ਦੇ ਆਕਾਰ ਉੱਤੇ ਫਿਲਟਰ ਇੱਕ ਸ਼ੀਟ ਵਿੱਚ ਰੱਖੋ ਜੋ ਇੱਕ Filters ਬਟਨ ਤੋਂ ਖੁੱਲ੍ਹੇ, ਅਤੇ ਟੇਬਲ ਦੀਆਂ ਕਤਾਰਾਂ ਨੂੰ ਕਾਰਡਾਂ ਵਿੱਚ ਬਦਲੋ।" |
ਹਮੇਸ਼ਾ ਦੱਸੋ ਕਿ ਕੀ ਰੱਖਣਾ ਹੈ — "ਸਾਰੇ ਰੂਟ, ਲਿਖਤ ਅਤੇ ਫੀਚਰ ਉਵੇਂ ਹੀ ਰੱਖੋ" — ਤਾਂ ਕਿ ਦ੍ਰਿਸ਼ਟੀ ਬਦਲਾਅ ਚੁੱਪ-ਚਾਪ ਕੋਈ ਫੰਕਸ਼ਨ ਨਾ ਹਟਾ ਦੇਵੇ। ਅਤੇ ਅਗਲੀ ਬੇਨਤੀ ਤੋਂ ਪਹਿਲਾਂ ਹਰ ਤਬਦੀਲੀ ਫੋਨ ਦੇ ਆਕਾਰ ਵਾਲੀ ਸਕਰੀਨ ਉੱਤੇ ਜਾਂਚੋ; ਛੋਟੀਆਂ ਸਕਰੀਨਾਂ ਲਈ ਕੀ ਚੰਗਾ ਹੈ, ਇਹ ਦੇਖਣ ਲਈ ਮੋਬਾਈਲ-ਅਨੁਕੂਲ ਵੈੱਬ ਐਪ ਕਿਵੇਂ ਬਣਾਈਏ ਵੇਖੋ।
ਕਦਮ 6: ਉਹ ਵੇਰਵੇ ਜੋ ਚੰਗੇ ਨੂੰ ਆਮ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ
ਜਦੋਂ ਢਾਂਚਾ ਠੀਕ ਹੋ ਜਾਵੇ, ਇਹ ਛੋਟੀਆਂ ਗੱਲਾਂ ਐਪ ਨੂੰ ਮੁਕੰਮਲ ਮਹਿਸੂਸ ਕਰਾਉਂਦੀਆਂ ਹਨ:
- ਖਾਲੀ ਹਾਲਤਾਂ। ਨਵੇਂ ਉਪਭੋਗਤਾ ਨੂੰ ਬਿਨਾਂ ਡਾਟੇ ਦੇ ਕੀ ਦਿਸਦਾ ਹੈ: ਇੱਕ ਛੋਟੀ ਵਿਆਖਿਆ ਅਤੇ ਇੱਕ ਸਾਫ਼ ਕਾਰਵਾਈ, ਨਾ ਕਿ ਖਾਲੀ ਟੇਬਲ।
- ਲੋਡਿੰਗ ਹਾਲਤਾਂ। ਸਮੱਗਰੀ ਵਰਗੇ ਆਕਾਰ ਦੇ ਸਕੈਲੀਟਨ, ਹਰ ਥਾਂ ਸਪਿਨਰ ਨਹੀਂ।
- ਗਲਤੀ ਹਾਲਤਾਂ। ਉਸ ਖੇਤਰ ਕੋਲ ਸਾਫ਼ ਭਾਸ਼ਾ ਵਿੱਚ ਸੁਨੇਹਾ ਜੋ ਗਲਤੀ ਦਾ ਕਾਰਨ ਹੋਵੇ।
- ਹੋਵਰ, ਫੋਕਸ ਅਤੇ ਦਬਾਏ ਜਾਣ ਵਾਲੀਆਂ ਹਾਲਤਾਂ ਹਰ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਉੱਤੇ — ਕੀਬੋਰਡ ਵਰਤਣ ਵਾਲਿਆਂ ਲਈ ਫੋਕਸ ਰਿੰਗ ਜ਼ਰੂਰੀ ਹਨ।
- ਅਸਲੀ ਸਮੱਗਰੀ। "Lorem ipsum" ਅਤੇ "John Doe" ਦੀ ਥਾਂ ਯਥਾਰਥਕ ਲਿਖਤ ਅਤੇ ਡਾਟਾ ਰੱਖੋ; ਨਕਲੀ ਸਮੱਗਰੀ ਲੇਆਊਟ ਦੀਆਂ ਸਮੱਸਿਆਂ ਨੂੰ ਲੁਕਾਉਂਦੀ ਹੈ।
- ਇੱਕੋ ਸੈੱਟ ਦੇ ਆਈਕਾਨ, ਇੱਕ ਜਾਂ ਦੋ ਆਕਾਰਾਂ ਵਿੱਚ, ਇਕਸਾਰ ਲਕੀਰ ਦੀ ਮੋਟਾਈ ਨਾਲ।
- ਮਕਸਦ ਵਾਲੇ ਚਿੱਤਰ। ਤੁਹਾਡੇ ਉਤਪਾਦ, ਥਾਂ ਜਾਂ ਲੋਕਾਂ ਦੀਆਂ ਅਸਲੀ ਫੋਟੋਆਂ ਆਮ ਸਟਾਕ ਨਾਲੋਂ ਬਿਹਤਰ ਹਨ। ਜਿੱਥੇ ਸਟਾਕ ਜਾਂ ਬਣਾਈਆਂ ਤਸਵੀਰਾਂ ਵਰਤੋ, ਉਨ੍ਹਾਂ ਦੀ ਸ਼ੈਲੀ ਇਕਸਾਰ ਰੱਖੋ।
- ਲਿਖਤ। ਛੋਟੇ, ਖ਼ਾਸ ਲੇਬਲ ("Book class", "Submit" ਨਹੀਂ) ਕਿਸੇ ਵੀ ਰੰਗ ਦੇ ਫ਼ੈਸਲੇ ਜਿੰਨਾ ਮਹਿਸੂਸ ਹੋਣ ਵਾਲੀ ਗੁਣਵੱਤਾ ਵਧਾਉਂਦੇ ਹਨ।
ਆਮ ਗਲਤੀਆਂ
- ਇੱਕ ਪ੍ਰੌਮਪਟ ਵਿੱਚ ਸਭ ਕੁਝ ਦੁਬਾਰਾ ਡਿਜ਼ਾਈਨ ਕਰਨਾ। ਵੱਡੇ ਰੀਰਾਈਟ ਨਵੀਆਂ ਖਰਾਬੀਆਂ ਲਿਆਉਂਦੇ ਹਨ। ਇੱਕ-ਇੱਕ ਪੰਨਾ ਕਰੋ।
- ਬਹੁਤੇ ਲਹਿਜ਼ਾ ਰੰਗ। ਜੇ ਸਭ ਕੁਝ ਉਭਾਰਿਆ ਹੋਵੇ, ਤਾਂ ਕੁਝ ਵੀ ਨਹੀਂ ਉਭਰਦਾ।
- ਸਭ ਕੁਝ ਵਿਚਕਾਰ ਰੱਖਣਾ। ਵਿਚਕਾਰਲੀ ਲਿਖਤ ਸਿਰਲੇਖ ਤੋਂ ਅੱਗੇ ਪੜ੍ਹਨ ਵਿੱਚ ਔਖੀ ਹੈ; ਜ਼ਿਆਦਾਤਰ ਸਮੱਗਰੀ ਖੱਬੇ ਪਾਸੇ ਰੱਖੋ।
- ਛੋਟੀ, ਘੱਟ ਕੰਟਰਾਸਟ ਵਾਲੀ ਲਿਖਤ ਜੋ ਵੱਡੇ ਮਾਨੀਟਰ ਉੱਤੇ ਸੋਹਣੀ ਲੱਗਦੀ ਹੈ ਅਤੇ ਧੁੱਪ ਵਿੱਚ ਫੋਨ ਉੱਤੇ ਨਹੀਂ ਪੜ੍ਹੀ ਜਾਂਦੀ।
- ਸਜਾਵਟ ਨੂੰ ਪੱਧਰ-ਵੰਡ ਤੋਂ ਉੱਪਰ ਰੱਖਣਾ। ਗ੍ਰੇਡੀਐਂਟ ਅਤੇ ਪਰਛਾਵੇਂ ਉਸ ਸਕਰੀਨ ਨੂੰ ਠੀਕ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜਿੱਥੇ ਸਭ ਤੋਂ ਜ਼ਰੂਰੀ ਕਾਰਵਾਈ ਸਾਫ਼ ਨਹੀਂ।
- ਲੈਂਡਿੰਗ ਪੰਨੇ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨਾ। ਕਈ ਉਤਪਾਦਾਂ ਲਈ ਇਹ ਪਹਿਲਾ ਪ੍ਰਭਾਵ ਹੈ; ਵੇਖੋ ਕਨਵਰਟ ਹੋਣ ਵਾਲਾ ਲੈਂਡਿੰਗ ਪੰਨਾ ਕਿਵੇਂ ਬਣਾਈਏ।
ਡਿਜ਼ਾਈਨ ਤੋਂ ਅੱਗੇ ਪ੍ਰੌਮਪਟ ਦੇ ਹੋਰ ਢੰਗਾਂ ਲਈ AI ਐਪ ਬਿਲਡਰਾਂ ਲਈ ਪ੍ਰੌਮਪਟ ਕਿਵੇਂ ਲਿਖੀਏ ਪੜ੍ਹੋ। ਜੇ ਤੁਹਾਡਾ ਕੰਮ ਹੀ ਉਤਪਾਦ ਹੈ — ਡਿਜ਼ਾਈਨ ਜਾਂ ਫੋਟੋਗ੍ਰਾਫੀ ਪੋਰਟਫੋਲੀਓ — ਤਾਂ ਪੋਰਟਫੋਲੀਓ ਵੈੱਬਸਾਈਟ ਕਿਵੇਂ ਬਣਾਈਏ ਪੇਸ਼ਕਾਰੀ ਬਾਰੇ ਡੂੰਘਾਈ ਨਾਲ ਦੱਸਦੀ ਹੈ।
Mythex ਨਾਲ ਡਿਜ਼ਾਈਨ
Mythex ਵਿੱਚ ਤੁਸੀਂ ਚੈਟ ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਦੱਸਦੇ ਹੋ, ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਵੇਖਦੇ ਹੋ, ਅਤੇ ਅਗਲੀ ਤਬਦੀਲੀ ਤੋਂ ਪਹਿਲਾਂ ਫੋਨ ਦੇ ਆਕਾਰ ਵਾਲਾ ਫਰੇਮ ਜਾਂਚਦੇ ਹੋ। ਡੌਕਸ ਵਿੱਚ ਇਸਦੇ ਛੋਟੇ ਢੰਗ ਹਨ: ਡਿਜ਼ਾਈਨ ਅਤੇ UI ਪ੍ਰੌਮਪਟ ਜਿਸ ਵਿੱਚ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਕੀ ਬਦਲਣਾ ਅਤੇ ਕੀ ਰੱਖਣਾ ਹੈ, ਅਤੇ ਆਪਣਾ UI ਮੁੜ ਡਿਜ਼ਾਈਨ ਕਰੋ ਜੋ ਇੱਕ ਵਾਰ ਵਿੱਚ ਇੱਕ ਪੰਨਾ ਤਾਜ਼ਾ ਕਰਦਾ ਹੈ ਬਿਨਾਂ ਫੀਚਰ ਗੁਆਏ। Mythex ਚੈਟ ਵਿੱਚ ਸਟਾਕ ਫੋਟੋਆਂ ਖੋਜ ਸਕਦਾ ਹੈ ਜਾਂ ਇੱਕ ਤਸਵੀਰ ਬਣਾ ਸਕਦਾ ਹੈ — ਹੀਰੋ ਤਸਵੀਰ, ਬੈਕਗ੍ਰਾਊਂਡ, ਸ਼ੇਅਰ ਚਿੱਤਰ — ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਕਹੋ ਤਾਂ ਐਪ ਵਿੱਚ ਲਗਾ ਸਕਦਾ ਹੈ। ਜੇ ਕੋਈ ਪਾਸ ਗਲਤ ਹੋ ਜਾਵੇ, ਤਾਂ ਉਸ ਤੋਂ ਪਹਿਲਾਂ ਵਾਲੇ ਚੈੱਕਪੌਇੰਟ ਉੱਤੇ ਵਾਪਸ ਜਾਓ। ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਮੌਜੂਦਾ ਡਿਜ਼ਾਈਨ ਤੋਂ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਉਸਨੂੰ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਟੈਂਪਲੇਟ ਵੇਖੋ।
ਸਵਾਲ
AI ਨਾਲ ਬਣੀਆਂ ਐਪਾਂ ਸਾਰੀਆਂ ਇੱਕੋ ਜਿਹੀਆਂ ਕਿਉਂ ਲੱਗਦੀਆਂ ਹਨ?
ਕਿਉਂਕਿ ਅਸਪਸ਼ਟ ਪ੍ਰੌਮਪਟ ਦਾ ਨਤੀਜਾ ਸਭ ਤੋਂ ਆਮ ਜਵਾਬ ਹੁੰਦਾ ਹੈ: ਉਹੀ ਫੌਂਟ, ਗ੍ਰੇਡੀਐਂਟ, ਗੋਲ ਕਾਰਡ ਅਤੇ ਵਿਚਕਾਰ ਹੀਰੋ ਹਿੱਸਾ। ਹਵਾਲੇ, ਡਿਜ਼ਾਈਨ ਦੀ ਨਾਮਜ਼ਦ ਦਿਸ਼ਾ ਅਤੇ ਟਾਈਪ, ਰੰਗ ਤੇ ਫਾਸਲੇ ਲਈ ਠੋਸ ਨਿਯਮ ਦਿਓ, ਤਾਂ ਨਤੀਜਾ ਆਮ ਨਹੀਂ ਲੱਗੇਗਾ।
ਕੀ ਮੈਂ ਕਿਸੇ ਸਟਾਈਲ ਦੀ ਨਕਲ ਕਰਾਉਣ ਲਈ AI ਨੂੰ ਸਕਰੀਨਸ਼ਾਟ ਦੇ ਸਕਦਾ ਹਾਂ?
ਬਹੁਤ ਸਾਰੇ AI ਬਿਲਡਰ ਤਸਵੀਰ ਅਟੈਚਮੈਂਟ ਲੈਂਦੇ ਹਨ, ਅਤੇ ਸਟਾਈਲ ਦਿਖਾਉਣ ਦਾ ਸਭ ਤੋਂ ਸਾਫ਼ ਤਰੀਕਾ ਸਕਰੀਨਸ਼ਾਟ ਹੈ। ਦੱਸੋ ਕਿ ਤੁਹਾਨੂੰ ਉਸ ਵਿੱਚ ਕੀ ਪਸੰਦ ਹੈ — ਫਾਸਲਾ, ਟਾਈਪ, ਰੰਗਾਂ ਦੀ ਵਰਤੋਂ — ਨਾ ਕਿ ਕਿਸੇ ਹੋਰ ਦੇ ਉਤਪਾਦ ਦੀ ਹੂ-ਬ-ਹੂ ਨਕਲ ਮੰਗੋ।
ਕੀ AI ਨਾਲ ਬਣਾਉਣ ਲਈ ਡਿਜ਼ਾਈਨਰ ਦੀ ਲੋੜ ਹੈ?
ਪਹਿਲੇ ਵਰਜਨ ਲਈ ਨਹੀਂ। ਡਿਜ਼ਾਈਨਰ ਉਦੋਂ ਸਭ ਤੋਂ ਵੱਧ ਫਾਇਦਾ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਬ੍ਰਾਂਡ ਦੀ ਰੱਖਿਆ ਕਰਨੀ ਹੋਵੇ ਜਾਂ ਉਤਪਾਦ ਗੁੰਝਲਦਾਰ ਹੋਵੇ, ਜਿੱਥੇ ਲੇਆਊਟ ਦੇ ਫ਼ੈਸਲੇ ਲੋਕਾਂ ਦੀ ਵਰਤੋਂ ਉੱਤੇ ਅਸਰ ਪਾਉਂਦੇ ਹਨ। ਉਸ ਤੋਂ ਪਹਿਲਾਂ ਸਾਫ਼ ਹਵਾਲੇ ਅਤੇ ਛੋਟੇ ਸੁਧਾਰ ਵੀ ਇੱਕ ਸਾਫ਼ ਤੇ ਵਰਤਣਯੋਗ ਇੰਟਰਫੇਸ ਦੇ ਦਿੰਦੇ ਹਨ।
ਕਿਸੇ ਐਪ ਨੂੰ ਪ੍ਰੋਫੈਸ਼ਨਲ ਕੀ ਬਣਾਉਂਦਾ ਹੈ?
ਸਜਾਵਟ ਨਾਲੋਂ ਇਕਸਾਰਤਾ ਵੱਧ: ਇੱਕ ਟਾਈਪ ਪੈਮਾਨਾ, ਰੰਗਾਂ ਦਾ ਛੋਟਾ ਪੈਲੇਟ ਜੋ ਸੋਚ-ਸਮਝ ਕੇ ਵਰਤਿਆ ਜਾਵੇ, ਇੱਕ ਨਿਸ਼ਚਿਤ ਪੈਮਾਨੇ ਉੱਤੇ ਫਾਸਲਾ, ਇਕਸਾਰ ਕਿਨਾਰੇ, ਅਤੇ ਸਾਫ਼ ਪੱਧਰ-ਵੰਡ ਤਾਂ ਕਿ ਹਰ ਸਕਰੀਨ ਦੀ ਸਭ ਤੋਂ ਜ਼ਰੂਰੀ ਚੀਜ਼ ਸਾਫ਼ ਦਕਿਸੇ।