UI mockups & wireframes انٹرفیس کی تصاویر بناتا ہے — وہ اسکرینیں جو کوئی ایپ یا سائٹ رکھتی ہے، بریف کی مانگی ہوئی کسی بھی fidelity پر۔ یہ "یہ کیسا لگے گا؟" کا ٹیمپلیٹ ہے اس سے پہلے کہ کچھ حقیقت میں بنے۔
Hi-fi موک اپس یا lo-fi وائر فریمز
fidelity بریف طے کرتا ہے:
- ایک موک اپ — "فوٹو ایپ کی سیٹنگ اسکرین، ڈارک تھیم" — hi-fi اسکرین اترتی ہے اصلی ٹائپ، رنگ اور کنٹرولز کے ساتھ، شپ ہونے کے قریب
- ایک وائر فریم — "آن بورڈنگ فلو wireframe کریں، چار اسکرینیں" — lo-fi ساخت اترتی ہے: بلاکس، درجہ بندی، لیبلز، ابھی جھگڑنے کے لیے کوئی اسٹائلنگ نہیں
دونوں اصلی فائلیں ہیں جنہیں آپ سٹیئر کر سکتے ہیں، جامد تصاویر نہیں — کسی بھی نتیجے کی طرح کنٹرول پن کریں، لے آؤٹ پر کمنٹ کریں، density tweak کریں۔
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
ایک اسکرین یا ایک سیٹ
ایک اسکرین مانگیں اور ایک ملتی ہے؛ فلو مانگیں اور ایجنٹ سیٹ بناتا ہے — آن بورڈنگ، ڈیش بورڈ، سیٹنگز — آرٹ بورڈز کی قطار کی صورت میں جس میں آپ قدم بہ قدم آگے بڑھ سکتے ہیں یا گرڈ میں دیکھ سکتے ہیں۔ پریویو پورے وقت لائیو رہتی ہے: کلک کریں، ہوور کریں، وہ اسٹیٹس آزمائیں جو ایجنٹ نے بنائیں۔
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
یہ کن چیزوں میں اچھا ہے
- سمتوں کی تلاش — ایک ہی اسکرین کے تین ٹیک، سستے
- ابتدائی پروڈکٹ کام — فیچر کے اسکرین سیٹ اس کی spec لکھی جانے سے پہلے
- sign-off کے لیے وائر فریمز — اسٹائل کے جھگڑے کے بغیر ساخت
- مقابلے کا تجزیہ — "یہ فلو کیسا لگے گا؟" بغیر اسے بنائے
موک اپ کو سٹیئر کرنا
سٹیئرنگ کی ہر چیز لاگو ہے — وہی انجن ہے:
- غلط حصے پر ⌥-click کریں، بالکل اسی نوڈ پر کمنٹ کریں
- ان پیرامیٹرز کے لیے Tweaks جو ڈیزائن دکھاتا ہے
- غائب اسکرین یا غلط سمت کے لیے Follow-ups
- "ایک ہی فلو کے دو مختلف ٹیک" کے لیے Variants
گیٹ پھر بھی چلتی ہے — موک اپ کسی بھی نتیجے کی طرح چیک ہوتا ہے، کیونکہ جو تصویر feasibility کے بارے میں جھوٹ بولے وہ مفید نہیں۔
موک اپ بمقابلہ ویب سائٹ بمقابلہ موبائل ایپ
- UI mockups — انٹرفیس کی تصویر، ڈیسک ٹاپ یا ویب شکل
- Mobile app — فون سائز اسکرینیں، ٹچ ٹارگٹس، موبائل نیویگیشن
- Interactive website — وہ سائٹ جو واقعی کام کرے، ملٹی پیج
جب ڈیلیوریبل کچھ ایسا ہے جسے دیکھنے کے بجائے کلک کیا جائے تو یہ موک اپ نہیں — یہ ویب سائٹ ہے (یا موبائل ایپ اگر یہ فون شکل کی ہو)۔
مشورہ: بریف میں fidelity کا نام دیں — "hi-fi mockup" بمقابلہ "lo-fi wireframe" مختلف چیزیں بناتا ہے، اور وہ وائر فریم جسے آپ hi-fi چاہتے تھے ایک ضائع شدہ رن ہے۔ لفظ ایجنٹ کے شروع ہونے سے پہلے توقع طے کر دیتا ہے۔
ایکسپورٹ کرنا
موک اپس شیئرنگ کے لیے PNG یا PDF میں ایکسپورٹ ہوتے ہیں — اسکرینیں ان سائزوں پر رینڈر شدہ جن پر آپ انہیں پیش کریں گے۔ سورس فائلیں اگلی سٹیئرنگ یا اگلے ورژن کے لیے پروجیکٹ فولڈر میں رہتی ہیں۔