تم تصميم كل شاشة تستخدمها من قبل شخص ما: الشاشة الرئيسية لتطبيق مصرفي، ومربع البحث، وصفحة الإعدادات. تصميم واجهة المستخدم هو النظام الذي يقرر كيفية ترتيب تلك الشاشات، وكيف يبدو كل عنصر تحكم وكيف يستجيب عند لمسه.
يعمل مصمم واجهة المستخدم مع عدد قليل من العناصر الأساسية. التخطيط والتباعد بين الأشياء المرتبطة ببعضها البعض. التسلسل الهرمي المرئي يجعل الإجراء الأكثر أهمية بارزًا. الطباعة واللون تحمل المعنى والعلامة التجارية. تم تصميم المكونات مثل الأزرار والمدخلات والبطاقات والقوائم مرة واحدة وإعادة استخدامها، لذلك يبدو المنتج متسقًا.
يحتوي كل مكون أيضًا على حالات. يحتوي الزر على حالات افتراضية، وتحويم، ومضغوط، ومركز، وتعطيل، وتحميل، وكل منها يحتاج إلى تصميم. يعد ترك الحالات خارجًا أحد الأسباب الأكثر شيوعًا التي تجعل التصميم يبدو مكتملًا في نموذج بالحجم الطبيعي ولكنه يبدو مكسورًا في المنتج الحقيقي.
يعد التفاعل والحركة جزءًا من واجهة المستخدم أيضًا. تؤكد الاستجابات الصغيرة، التي تسمى غالبًا بالتفاعلات الدقيقة، أن النقرة تعمل، أو تظهر التقدم، أو تشرح أين حدث شيء ما. يجب أن تكون سريعة وهادفة، وتحترم إعداد النظام لتقليل الحركة.
معظم تصميمات واجهة المستخدم اليوم تحدث في Figma، مع Penpot، Sketch وLunacy كبدائل شائعة. بالنسبة للواجهات التي تحتاج إلى التفاعل مع البيانات الحقيقية والمدخلات في التطبيق النهائي، يستخدم المصممون أيضًا الأدوات التفاعلية. ExodeUI، الذي نصنعه، هو واحد: فهو يخزن الحالات وفيزياء الربيع والأحداث في ملف واحد مفتوح يعمل في React وVue وSvelte وAngular وSolid وReact Native وSwiftUI وFlutter.