اذهب إلى المحتوى

السؤال

نشر

أهلاً أساتذتي وإخوتي الكـرام، 

بدأت للتوِ في عمل جديد أتدرب من خلالهِ على تصميم الواجهات من خلال ما تعلمته من هذه الدورة المميزة، وأنا بحاجة لـرأيكم في هذا العمل الذي بدأتهُ 

هل هو جيد أم لازلت أحتاج لتدريب أكثر وأكثر ؟ وإن أمكن تقييم مستواياي على هذه البداية - (ضعيف / متوسط / جيد .... إلخ ).

مــلاحظة : الصفحة غير مكتملة، وسوف أتممها إن شاء الله تعالى .

رابــط الصفحة : اضغط هــنــا .

وبارك الله فيكم وشكراً لكم مسبقاً .

 

Recommended Posts

  • 0
نشر

تصميم جيد و بداية موفقة 

الملاحظات:

  1. الألوان فاقعة و متنوعة جدا (النصف الثاني من الموقع ألوان غير مريحة, الجزء العلوي جيد) (نكتفي ب 3 ألوان رئيسية)
  2. خطأ في التصميم (محاذاة آخر عنصر في الأسفل جهة اليسار) /مولد النص العربي/ 
  3. ال navbar خذها إلى اليسار قليلا (حافظ على تباعد متساوٍ لجميع العناصر عن أطراف الصفحة) (اجعل الهامش موحداً)
  • 0
نشر (معدل)

الصفحة جيدة ,وكبداية عمل ممتاز   .

  • لدي بعض الملاحظات:

1- الموقع يحتوي على بعض العناصرة غير متوافقة مع الشاشات

 5f6bbf5e8d5ca_.PNG.81cc844141d50892aa09c8a3a26727b8.PNG

2-  تناسق الألوان

لا تكثر الألوان في موقعك وحاول أن تأخذ الألوان من العناصر الأساسية في موقعك, لو لون الخلفية غامق يجب أن تكون العناصر التي عليها ذات لون فاتح  ,مثل الصندوق المكتوب فيه الرؤية والهدف لونه غامق.

3- العناوين (من نحن وخدماتنا) لو كانت في المنتصف تكون أجمل. 

 

**التدريب يا صديقي مهم لجميع المبرمجين فلا تتوقف عند مرحلة  معينة  , يجب أن تستمر في تطوير مهاراتك   .

تم التعديل في بواسطة omar haddad
  • 0
نشر

بالنسبة ك شخص مبتدئ في مجال frontend وهذه أول تطبيقاته فهذا جيد .

ولكن يوجد بعض التعليقات على التصميم 

  • الريسبونسيف ليس جيد نهائيا ويحتاج التعديل على التوافق على الشاشات الصغيرة 

1.PNG.e87d8916f7901321112ed7ebef710e4c.PNG2.PNG.3634faa3f7b5dbfd39166fcef80ad650.PNG

لا يوجد أي تناسق على الكلام فيحب وضع النص في الوسط وإعطاء إلي p width: 100%

يجب عليك تعلم MediaQueries فهذه الخاصية سوف تساعدك كثيراً في الريسبونسيف لأنها تحدد تغير خواص عنصر معين في الصفحة في مقاس شاشة معين مثل :

 

@media only screen and (max-width: 600px) {
  div {
    background-color: lightblue;
  }
}
600px هنا سوف يتم تغير خاصية لون الخلفية فى العنصر عند شاشة 

خاصية MediaQueries  في css مهمة جداً لا تعتمد على bootstrap فقط في الريسبونسيف .

يمكنك أن تتعلم الخاصية من هنا .

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

تقوم بفتح login الخاصة بالفيس بوك وتقوم بإنشاء صفحة مماثلة بنسبة 100% لها 

ثم تقوم بالتعديلات التي تريدها ويجب وضعها من وجهة نظر حضرتك على صفحة login  هذا سوف يؤثر على مستوى حضرتك كثيرأ .

لا تتوقف عن التعلم فجميع المطورين مهما زاد احترافهم في اللغات لا يعرف كل شئ  فيها وكل يوم يرى شئ جديد فيها أثناء التطبيق والعمل .

  • 0
نشر

جميل جدًا، يبدو انك مجتهد و هذا عمل يعتبر جميل جدًا بما انت عليه الآن من مهارات.

راجعت الموقع و سأقدم لك ملاحظاتي و نصائحي :

  • حاول أن تجعل محتوى الصفحة و محاذاته بشكل متناسق مع شاشة العرض، حتى يكون مريح للعين وغير متباعد أو متلاصق، أنصحك أن تسخدم كلاس container الذي توفره Bootstrap حيث أنه يحاذي لك المحتوى من جميع الأطراف، كما أنه متوافق مع جميع شاشات العرض.
  • المسافة من الأسفل و الأعلى بين المحتويات في الواجهة الرئيسية بالأعلى من الأفضل أن تكون أكثر من ذلك، لأنها تبدو متداخلة، أنصحك بإستخدام line-height Property، تستطيع من خلاله التحكم في إرتفاع كل div عن الآخر و يمنحك تحكم سهل في طريقة العرض.
  • الألوان تبدو صاخبة و مزعجة للعين، أنصحك بأن تختار ألوان أكثر تناسقًا و بدرجات أقل من المستخدمة في موقعك، هناك مواقع توفر لك إمكانية تنسيق ألوانك للموقع بحيث تختار اللون و تمنحك الدرجات الأقل و الأكثر التي تكون ملائمة للون الرئيسي مثل Color Scheme Designer أو The Color Wizard 3.0.
  • بالنسبة لتوافق الموقع مع الشاشات مختلفة الأحجام، فإن موقعك يفتقد لذلك الشيء، أنصحك بإستخدام media إنها تمنحك التحكم الكامل بأحجام الشاشات و منح كل حجم شاشة الإعدادت اللازمة، و سأطرح عليك موقع يساعدك في معرفة أحجام الشاشات المستخدمة في معظم الأجهزة تستطيع زيارته من هنا.

بالتوفيق.

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...