التصميم

التخطيط Layout : هذه هي الطريقة التي تُرتب بها العناصر البصرية على صفحة أو شاشة لتوصيل رسالة. قد تشمل هذه العناصر نصًا، صورًا، ومساحة بيضاء.

المحاذاة Alignment : هي كيفية وضع العناصر بالنسبة لبعضها البعض. استخدام المحاذاة بشكل صحيح يساعد على جعل التصميم يبدو نظيفًا ومنظمًا.

التكوين Composition : هو فعل ترتيب العناصر لإنشاء تصميم متناغم. يحدد كيف ترتبط العناصر مثل الصور، النصوص، والأشكال ببعضها وتساهم في التصميم بطريقة فنية.

التوازن Balance : هو كيفية توزيع الوزن البصري داخل التكوين. يسعى المصممون إلى خلق توازن من خلال ترتيبات متماثلة (symmetrical) أو غير متماثلة (asymmetrical).

المقياس Scale : يشير إلى مقارنة أبعاد (dimensions) أو حجم (size) عنصر واحد بعنصر آخر.

التسلسل الهرمي Hierarchy : يحدد ترتيب أهمية العناصر في التصميم. يتعلق بضمان ملاحظة المعلومات الأكثر أهمية أولًا.

التباين Contrast : هو عملية خلق تمييز واضح بين العناصر. يمكنك فعل ذلك من خلال اختلافات في اللون، الحجم، الشكل، الملمس، أو أي خاصية بصرية أخرى. التباين القوي يساعد أيضًا على تحسين قابلية القراءة.

المساحة البيضاء White Space (المساحة السلبية negative space) : هي المساحة الفارغة في التصميم. هي المنطقة المحيطة بالعناصر.

واجهة المستخدم (UI) User Interface : تشمل العناصر البصرية والتفاعلية التي يمكن للمستخدمين رؤيتها على شاشاتهم، مثل الأيقونات، الصور، النصوص، القوائم، الروابط، والأزرار.

تجربة المستخدم (UX) User Experience : تتعلق بكيف يشعر المستخدمون عند استخدام منتج أو خدمة. التطبيق ذو تجربة المستخدم المصممة جيدًا يكون بديهيًا، سهل الاستخدام، فعالًا، متاحًا، وممتعًا.

موجز التصميم Design Brief : هو وثيقة تحدد أهداف ومتطلبات المشروع. هو خارطة طريق (roadmap) توجه عملية التصميم وتضمن أن المنتج النهائي يلبي احتياجات العميل.

التصميم القائم على المتجهات Vector Based Design : يتضمن إنشاء فن رقمي باستخدام صيغ رياضية لتعريف الخطوط، الأشكال، والألوان.

النمذجة الأولية Prototyping : تشير إلى عملية إنشاء نموذج تفاعلي لمنتج أو واجهة مستخدم.

تباين جيد لألوان الخلفية والمقدمة Good Contrast for Background and Foreground Colors : من المهم التأكد من أن ألوان الخلفية والمقدمة تتمتع بتباين جيد لجعل النص قابلًا للقراءة. توصي إرشادات إمكانية الوصول لمحتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير.

تسلسل هرمي بصري جيد في التصميم Good Visual Hierarchy in Design : يمكن للتسلسل الهرمي البصري القوي أن يوفر مسارًا واضحًا للعين لتتبعه، مما يضمن استهلاك المعلومات التي تنقلها بالترتيب الذي تريده.

الصور المتجاوبة Responsive Images : الصور المتجاوبة هي الصور التي تتغير أبعادها لتناسب حجم الشاشة التي تُعرض عليها. هذا مهم لأنه يضمن أن تبدو صورك جيدة على جميع الأجهزة، من الحواسيب المكتبية إلى الهواتف المحمولة.

التحسين التدريجي Progressive Enhancement : هو نهج تصميم يضمن لجميع المستخدمين، بغض النظر عن المتصفح أو الجهاز، الوصول إلى المحتوى والوظائف الأساسية للتطبيق.

تصميم يركز على المستخدم User-centered Design : هو نهج يعطي الأولوية للمستخدم النهائي، من احتياجاته إلى تفضيلاته وقيوده. هدف تصميم يركز على المستخدم هو إنشاء صفحة ويب بديهية، فعالة في الاستخدام، وممتعة لتفاعل المستخدمين معها.

بحث المستخدم User Research : هو الدراسة المنهجية للأشخاص الذين يستخدمون منتجك. الهدف هو قياس احتياجات المستخدمين، سلوكياتهم، ونقاط الألم لديهم.

مقابلات الخروج Exit Interviews : هي استبيان يمكنك تقديمه للمستخدمين عند إلغاء حساباتهم. يساعدك على فهم سبب مغادرة المستخدمين وما يمكنك فعله لتقليل معدل الانسحاب.

اختبار المستخدم User Testing : يشير إلى ممارسة جمع البيانات من المستخدمين أثناء تفاعلهم مع تطبيقك.

اختبار Testing A/B : هو عملية إطلاق ميزة جديدة لمجموعة فرعية مختارة عشوائيًا من قاعدة المستخدمين. يمكنك بعد ذلك الاستفادة من بيانات التحليلات لتحديد ما إذا كانت الميزة مفيدة.

متطلبات المستخدم User Requirements : تشير إلى القصص أو المعايير التي يجب أن يتبعها تطبيقك. قد تُحدد متطلبات المستخدم من خلال بحث المستخدم أو معايير الصناعة. يمكن أيضًا تحديدها بناءً على مدخلات أصحاب المصلحة.

الإفصاح التدريجي Progressive Disclosure : هو نمط تصميم يُستخدم لإظهار المحتوى ذي الصلة فقط للمستخدمين بناءً على نشاطهم الحالي وإخفاء الباقي. يُفعل ذلك لتقليل الحمل المعرفي وجعل تجربة المستخدم أكثر بديهية.

التسجيل المؤجل/الكسول Deferred/Lazy Registration : هو نمط تصميم واجهة مستخدم يسمح للمستخدمين بتصفح والتفاعل مع تطبيقك دون الحاجة إلى التسجيل.

الوضع الداكن Dark Mode : هي ميزة خاصة في تطبيقات الويب تتيح لك تغيير نظام الألوان الافتراضي الفاتح (the default light color scheme) إلى نظام ألوان داكن (dark color scheme). يجب استخدام ألوان منخفضة التشبع (desaturated colors) في الوضع الداكن. الألوان منخفضة التشبع هي ألوان أقل كثافة (less intense) ولها مستوى تشبع أقل (lower saturation level).

شريط التنقل (Breadcrumbs) : هو أداة تنقل تُظهر للمستخدم موقعه في هيكل الموقع. من الأفضل وضع شريط التنقل في أعلى الصفحة ليتمكن المستخدمون من العثور عليه بسهولة. كما يجب التأكد من أن شريط التنقل كبير بما يكفي ليُقرأ بسهولة، ولكن ليس كبيرًا جدًا ليأخذ مساحة كبيرة من الصفحة.

مكوِّن البطاقة Card Component : يجب أن يكون مكوِّن البطاقة بسيطًا في التصميم، غير مزدحم بصريًا أو يعرض معلومات كثيرة. بالنسبة للوسائط (media)، تأكد من اختيار صور وفيديوهات عالية الجودة (high-quality) لتعزيز تجربة المستخدم (user experience).

التمرير اللانهائي Infinite Scroll : هو نمط تصميم يحمل المزيد من المحتوى أثناء تمرير المستخدم لأسفل الصفحة. يجب التفكير في استخدام زر "تحميل المزيد" لأنه يمنح المستخدم التحكم في متى يريد رؤية المزيد من المحتوى. يمكنك أيضًا إضافة زر رجوع ليتمكن المستخدمون من العودة إلى الصفحة السابقة دون الحاجة إلى التمرير إلى الأعلى.

مربع الحوار المنبثق Modal Dialog : هو نوع من النوافذ المنبثقة التي تظهر فوق محتوى الصفحة الحالي. عادةً ما يكون خلف المحتوى لون مظلم لمساعدة المستخدم على التركيز على محتوى المربع. من الجيد دائمًا السماح للمستخدم بالنقر خارج المربع لإغلاقه. عند استخدام عنصر dialog HTML ، ستحصل على الكثير من الوظائف وفوائد إمكانية الوصول المدمجة.

مؤشر التقدم في تسجيل النماذج Progress Indication for Form Registration : هو طريقة لإظهار مدى تقدم المستخدم في عملية ما. يمكن استخدامه في النماذج، التسجيل، وعمليات الإعداد. يجب أن يكون تصميمك بسيطًا، سهل العثور عليه، ويسمح بالعودة إلى الخطوات السابقة.

عربة التسوق Shopping Cart : العربة هي مكان يرى فيه المستخدم العناصر التي اختارها بالفعل على منصة التجارة الإلكترونية. يجب أن تكون عربات التسوق مرئية دائمًا للمستخدم، تستخدم أيقونة شائعة مثل عربة، حقيبة، أو سلة، وتحتوي على زر نداء واضح لاتخاذ إجراء للمستخدمين للمتابعة إلى الدفع.

Figma : هذه الأداة السحابية متخصصة في تصميم واجهة المستخدم وتجربة المستخدم (UI / UX). تتيح لفرق التصميم والتطوير التعاون من أي مكان، وتقدم ميزات مدمجة تشمل التصميم القائم على المتجهات، التخطيط التلقائي، نظام التعليقات والتغذية الراجعة، والمزيد.

Sketch : هي أداة تصميم شهيرة تُستخدم لواجهتها البديهية وبساطتها، مما يجعلها مثالية للمطورين الذين يرغبون في إنشاء نماذج أولية بسرعة. كما يستخدمها المصممون على نطاق واسع لمهام مثل إنشاء واجهات المستخدم، الأيقونات، وتخطيطات الويب.

Adobe XD : هي أداة تصميم ونمذجة أولية قائمة على المتجهات لتصميم UI/UX، معروفة بتكاملها السلس مع تطبيقات Adobe الأخرى مثل Photoshop وIllustrator وAfter Effects.

Canva : تتيح هذه الأداة إنشاء مجموعة واسعة من المحتوى البصري، بما في ذلك الملصقات، صور الغلاف، العروض التقديمية، الفيديوهات القصيرة، والمزيد. تصميمها البسيط وسهل الاستخدام يجعلها مثالية للمبتدئين.