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

1. By : Dr. Mostafa gawdat
www.mostafa-gawdat.net

2. ‫األول‬ ‫تصميمنا‬ ‫لنبدأ‬
‫نتفق‬ ‫أن‬ ‫يجب‬ ‫األول‬ ‫تصميمنا‬ ‫نبدأ‬ ‫أن‬ ‫قبل‬
‫نتبعها‬ ‫أسس‬ ‫عدة‬ ‫على‬.

3. ‫ا‬‫أول‬ ‫فلنتفق‬
‫كمبيوترية‬ ‫مادة‬ ‫نصمم‬ ‫نحن‬
 Design for the computer medium
‫ككل‬ ‫للموقع‬ ‫موحد‬ ‫تصميم‬ ‫لعمل‬ ‫نحتاج‬
 Create a unified site design
‫المستخدم‬ ‫مراعاة‬(‫الجمهور‬)‫تصميمنا‬ ‫في‬
 Design for the user
‫وليس‬ ‫الشاشة‬ ‫على‬ ‫تعرض‬ ‫مادة‬ ‫نصمم‬ ‫نحن‬
‫ملصقات‬ ‫أو‬ ‫ورقية‬ ‫مادة‬
 Design for the screen

4. ‫الكمبيوترية‬ ‫المواد‬ ‫تصميم‬
‫عمل‬ ‫منصات‬ ‫على‬ ‫تصميمك‬ ‫يعمل‬ ‫أن‬ ‫راعي‬
‫متعددة‬(‫متعددة‬ ‫مستعرضات‬)
 Design for Cross Platform
‫نطاق‬ ‫سعة‬ ‫تصميمك‬ ‫يستهلك‬ ‫ال‬ ‫أن‬ ‫راعي‬
‫الشبكة‬.
 Design for low bandwidth
‫إلى‬ ‫الوصول‬ ‫معه‬ ‫يسهل‬ ‫واضح‬ ‫لتصميم‬ ‫خطط‬
‫معلوماتك‬.
 Plan for clear presentation and easy
access to your information

5. ‫متعددة‬ ‫عمل‬ ‫منصات‬ ‫مع‬ ‫التوافق‬
‫بشكل‬ ‫يعمل‬ ‫أن‬ ‫يجب‬ ‫اإللكتروني‬ ‫موقعك‬
‫نظام‬ ‫أو‬ ‫المستعرض‬ ‫عن‬ ‫النظر‬ ‫بغض‬ ‫صحيح‬
‫الكمبيوتر‬ ‫جهاز‬ ‫نوع‬ ‫أو‬ ‫التشغيل‬.
 Your Web should be accessible across
different browsers, operating systems,
and computer platforms
‫من‬ ‫واثقا‬ ‫كنت‬ ‫لو‬ ‫حتى‬ ‫تصميمك‬ ‫دوما‬ ‫اختبر‬‫ه‬.
 Remember to test your work even when
you feel confident of your results

6. ‫الشبكة‬ ‫نطاق‬ ‫سعة‬ ‫مراعاة‬
‫يجب‬‫الال‬‫م‬ ‫أكثر‬ ‫الصفحة‬ ‫تحميل‬ ‫يستغرق‬‫ن‬7
‫ثواني‬7 Second Rule.
‫الس‬ ‫مع‬ ‫لتتفق‬ ‫صفحتنا‬ ‫نصمم‬ ‫أن‬ ‫يفضل‬‫رعات‬
‫لإلنترنت‬ ‫المختلفة‬.
 Plan your pages so that they are
accessible at a variety of connection
speeds.

7. ‫التالي‬ ‫التصميم‬ ‫راجع‬

9. ‫العرض‬ ‫وأسلوب‬ ‫الشكل‬ ‫تحديد‬
‫توحيد‬ ‫راعي‬‫الثمة‬‫تصميمك‬ ‫في‬ ‫والبنية‬.
 Plan with unifying themes and Structures
‫للحفاظ‬ ‫والعرضية‬ ‫الطولية‬ ‫الخطوط‬ ‫استخدم‬
‫للصفحة‬ ‫البصرية‬ ‫البنية‬ ‫على‬.
 Use a grid to provide visual structure
‫الفعالة‬ ‫البيضاء‬ ‫المساحات‬ ‫استخدم‬.
 Use active white space

10. ‫الحالية‬ ‫للصفحة‬ ‫جيدا‬ ‫أنظر‬

11. ‫بالساب‬ ‫الحالية‬ ‫الصفحة‬ ‫قارن‬‫قة‬

12. ‫الصفحة‬ ‫بنية‬ ‫على‬ ‫للحفاظ‬ ‫الخطوط‬ ‫استخدم‬
Use a grid to provide visual structure

13. ‫الفع‬ ‫البيضاء‬ ‫المساحات‬ ‫استخدم‬‫الة‬

15. ‫تصميمك‬ ‫في‬ ‫المستخدم‬ ‫راعي‬
 Keep your design efforts centered
around your user
 Design for interaction
 Design for location
 Guide the user’s eye
 Decide whether the user will read or
scan

18. ‫للمسح‬ ‫مصممة‬ ‫صفحة‬‫للقراءة‬ ‫مصممة‬ ‫صفحة‬
‫للمستخ‬ ‫وفقا‬ ‫الصفحات‬ ‫تصميم‬‫دم‬

19. ‫التفضي‬ ‫مناطق‬ ‫حسب‬ ‫التصميم‬‫ل‬

20. ‫التفضيل‬ ‫لمناطق‬ ‫مثال‬

21. ‫القراءة‬ ‫التجاه‬ ‫وفقا‬ ‫التصميم‬

22. ‫المسح‬ ‫اتجاه‬ ‫حسب‬ ‫التصميم‬