এই lesson এখন পর্যন্ত শেখা সবকিছু একটা আসল screen-এ একসাথে নিয়ে আসে: একটা mobile sign-in screen, ঠিক যেভাবে একজন কর্মরত designer এটা বানাবে সেভাবে বানানো।
যাচ্ছেতাই একটা rectangle-এর বদলে একটা আসল device-এর size-এ (Frames & Presets lesson-এ কভার করা) একটা Frame দিয়ে শুরু করুন — একটা ফোন স্ক্রিন আসলে যে pixel size-এ render হবে ঠিক সেই size-এ design করলে handoff-এর পরে না, সাথে সাথেই sizing সমস্যা ধরা পড়ে।
কোনো styling করার আগে, একজন user যেভাবে পড়ে সেই ক্রমে content বসান: একটা heading ("Sign In") screen-টা কীসের জন্য তা জানায়, তারপর input field, আর সবার শেষে primary action (button), যা দৃশ্যত সবচেয়ে ভারী — color দিয়ে ভরা, যেখানে input-গুলো একটা নিরপেক্ষ ধূসর থাকে।
একটা input field একটা হালকা ধূসর fill সহ সাধারণ একটা rounded rectangle হিসেবে শুরু হয় — wireframe পর্যায়ে "এখানে টাইপ করুন" বোঝানোর জন্য যথেষ্ট। একটা আসল input component (একটা border, একটা focus state, placeholder text সহ) ঠিক এমন জিনিস যা design স্থির হয়ে গেলে Components & Variants lesson-এর technique ব্যবহার করে একটা Component-এ পরিণত করার যোগ্য।
সমান দৃশ্যত গুরুত্বের তিনটা button থাকা একটা screen user-কে অনুমান করতে বাধ্য করে কোনটা গুরুত্বপূর্ণ। এই screen-এ ঠিক একটাই ভরা, রঙিন button আছে ("Continue") — বাকি সবকিছু নিরপেক্ষ থাকে, তাই পরের ধাপ নিয়ে কোনো অস্পষ্টতা নেই।
একটা আসল প্রজেক্টে, input rectangle-গুলো variant সহ (Default/Focused/Error) আসল Input component হয়ে যায়, button এই কোর্সের আগের Button component set-এর একটা instance হয়ে যায়, আর পুরো screen-টা একটা prototype-এ জোড়া লাগে — যা পরের Smart Animate আর Overlays lesson-এ কভার করা হয়েছে।