8 مارس 2025 • بقلم د.ك.

التصميم هو الذكاء الذي أصبح مرئياً. - ألينا ويلر، مؤلفة.
الدور الأساسي للمصممين هو تصميم المكونات البصرية للواجهة الأمامية للتطبيق/الموقع الإلكتروني. تؤثر وظيفتهم على قابلية الاستخدام وتجربة المستخدم للتطبيق/الموقع الإلكتروني.

حل المشكلة أولاً. ثم، اكتب الكود. - جون جونسون
من ناحية أخرى، يركز المطورون على برمجة الأفكار والمفاهيم في تطوير وظائف التطبيق/الموقع الإلكتروني.

المصممون فئة مختلفة عن المطورين. في الشركات الصغيرة، تتداخل مسؤولياتهم وأحياناً في الشركات الكبيرة أيضاً. هناك عدة مبادئ قد يضعها المطورون في اعتبارهم لجعل المنتج جاهزاً للإنتاج.

النسبية في CSS

يساعد استخدام em و rem والنسب المئوية في جعل أنماط CSS سلسة عبر أحجام الشاشات المختلفة.

بدلاً من استخدام البكسل كوحدات، استخدم rem. على سبيل المثال، section.hero {width: 90%; font-size: 1.5rem;} بدلاً من section.hero {width: 900px; font-size: 16px;}

على سبيل المثال، إذا كنت بحاجة إلى تغيير نقطة توقف (breakpoint)، تظل عرضك ثابتة. ويمكنك تغيير حجم خط أي عنصر ببساطة عن طريق تغيير حجم خط العنصر.

استعلامات الوسائط والمحتوى

يحدد المحتوى نقاط التوقف لأي جهاز وليس عرض الجهاز.

إذا كنت تفكر في عرض الجهاز، فإن الأجهزة تتطور بمعدل أسي مما لا يمكننا كمطورين اللحاق به أبداً.

نحن بحاجة إلى إيجاد حل ذكي لهذه المشكلة، ويوفر لنا المحتوى فرصة لحل هذه المشكلة.

@zomigi أول استعلام وسيط (media query) هو في الواقع غياب الدعم لاستعلامات الوسائط. — براين ريغر (@bryanrieger) 1 ديسمبر 2011

إذا شعرت ببعض الضياع، استخدم حاسبة الطباعة بالنسبة الذهبية عند تحديد أطوال الأسطر.

جانب مهم آخر لوجود نقاط توقف المحتوى هو تحسين الأداء لأن كل شيء يبدو يعمل بشكل جيد دون الحاجة إلى الكثير من التصحيح (debugging).

الإيجاز هو روح الفكاهة. - بولونيوس

اجعله قصيراً، اجعله بسيطاً.

قائمة الميزات أولاً

كمطورين، نبدأ أولاً بإدراج الميزات التي تحتاج إلى تطوير.

معظم الوقت، عندما تتداخل أعمالنا مع المصممين، نضيع في الجوانب البصرية بدلاً من التركيز على المهمة المطروحة، وهي إدراج الميزات أولاً ثم الانتقال إلى الجوانب الأخرى.

الأسئلة التي تطرحها على نفسك هي مؤشر لنوع المخرجات التي سينتجها.

لنقل، إنك تسأل نفسك سؤالاً، "هل يجب أن يتم تعويم هذا إلى اليسار أو إلى اليمين؟" بدلاً من "ما هي الطرق التي يمكنني من خلالها جعل المستخدم يشعر بالراحة عند استخدام التطبيق؟"

أدرج الميزات أولاً، ثم صمم.