أحتاج إلى رأيكم في تصميم الموقع .

وعليكم السلام 

يعطيك العافية على جهودك في برمجة الموقع ، عندي بعض التعليقات بمثابة نصائح لك لجعل التصميم أكثر كفاءة وفعالية . 

أولاً : يفضل أن تجعل القائمة ظاهرة دون الضغط على div الذي يشبه الماوس (الفأرة) وضوح القائمة يعتبر أمر مهم للزائرين لتسهيل عملية التنقل بين الصفحات.

ثانياً : إن فضلت أن تبقي القائمة المخفية ، يفضل وضع أيقونة معينة لتوضيح للزائر أنه يجب الضغط على الماوس (الفأرة) حتى تظهر القائمة . 

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

رابعاً : بالنسبة إلى الحاوية card يمكنك تقليل ظهورها بشكل 3D قليلاً . 

خامساً : بما أن الموقع يقدم وجبات يفضل تقديم لون أفضل مثل اللون البرتقالي (orange) ، مع اختيار خط رسمي أكثر 

سادساً : بالنسبة للأكواد ، مرتبة ومفهومة في حال أردنا التعديل عليها . 

لا يوجد مشاكل في تجاوبية الموقع مع مختلف أحجام الشاشات ، يمكنك الاستمرار في التدريب على برمجة المواقع ومع التقدم سوف تقوم بتطوير مواقع احترافية .

بتاريخ 26 دقائق مضت قال أسامة زيادة:

وعليكم السلام 

يعطيك العافية على جهودك في برمجة الموقع ، عندي بعض التعليقات بمثابة نصائح لك لجعل التصميم أكثر كفاءة وفعالية . 

أولاً : يفضل أن تجعل القائمة ظاهرة دون الضغط على div الذي يشبه الماوس (الفأرة) وضوح القائمة يعتبر أمر مهم للزائرين لتسهيل عملية التنقل بين الصفحات.

ثانياً : إن فضلت أن تبقي القائمة المخفية ، يفضل وضع أيقونة معينة لتوضيح للزائر أنه يجب الضغط على الماوس (الفأرة) حتى تظهر القائمة . 

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

رابعاً : بالنسبة إلى الحاوية card يمكنك تقليل ظهورها بشكل 3D قليلاً . 

خامساً : بما أن الموقع يقدم وجبات يفضل تقديم لون أفضل مثل اللون البرتقالي (orange) ، مع اختيار خط رسمي أكثر 

سادساً : بالنسبة للأكواد ، مرتبة ومفهومة في حال أردنا التعديل عليها . 

لا يوجد مشاكل في تجاوبية الموقع مع مختلف أحجام الشاشات ، يمكنك الاستمرار في التدريب على برمجة المواقع ومع التقدم سوف تقوم بتطوير مواقع احترافية .

شكرا على النصائح

التصميم جيد عموما ولكن أظنه يحتاج بعض الضبط قليلا، فيما يلي بعض الملاحظات حول ذلك:

• يظهر انزلاق بسبب تجاوز للعناصر على مستوى المحور الأفقي، تأكد من اضافة overflow-x:hidden الى عنصر body للتخلص من المشكلة. 
• نفس ملاحظة المدرب أسامة، أظنك تحتاج اظهار قائمة التصفح. 
• بالوضعية الحالية لقائمة التصفح، لا يوجد ضرورة لاضافة الأيقونة التي تقوم بإظهار وإخفاء القائمة. فهكذا أنت تضطر المستخدمين الصعود الى أعلى الصفحة ثم الضغط من أجل إظهار القائمة لمجرد التصفح الى عنصر آخر. وهو بلا شك ما سيعكس تجربة تصفح سيئة. الحل: قم بإعطاء القائمة وضعية ثابتة position:fixed بالإضافة إلى إبقاء زر الإخفاء.
• بالنسبة للقسم الأول، قسم عارض الشرائح.يوجد الكثير من المساحات الفارغة التي تحتاج الإهتمام بها أكثر. يمكنك مثلا ضبط حجم الصور ليحتل مساحة أكبر. يمكنك أيضا اضافة أسهم أو دوائر لإعطاء عارض الشرائح مرونة أكثر.
• أظنك تحتاج اعادة اختيار الصور بعناية، لا تظهر الصور بخلفيات شفافة بشكل جيد، كما أنك تقوم بتبديد جودة الصور عن طريق اعطاء صور من مقاسات مختلفة نفس المقاسات (يمكنك لتفادي هذا المشكل اعطاء الصور عرضا واحدا مع ارتفاع تلقائي، ستلاحظ فرقا كبيرا بهذا).
• بالقسم الثاني، قسم Popular items حاول المحافظة على ما يسمى النظرة المتناظرة symmetric look. فوجود 5 بطاقات في الصف الأول و 1 في الصف الثاني لا يعطي انطباعا جيدا. أضف 4 أخرى الى الصف الثاني أو قم بالغاء الصف الثاني تماما.
• بقسم المعرض، تأكد من التخلص من الفراغات السلبية negative spaces. وهي بشكل بسيط الفراغات غير المتساوية بين عناصر نفس الجنس. لاحظ: 

يعطي هذا انطباعا عن أن الأقسام منفصلة وغير منظمة.

• درجات الألوان بحدود البطاقات في قسم المعرض حادة جدا وتقليدية، أظنك تحتاج تخفيفها والاهتمام بها أكثر.

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

بتاريخ 17 ساعات قال Adnane Kadri:

التصميم جيد عموما ولكن أظنه يحتاج بعض الضبط قليلا، فيما يلي بعض الملاحظات حول ذلك:

• يظهر انزلاق بسبب تجاوز للعناصر على مستوى المحور الأفقي، تأكد من اضافة overflow-x:hidden الى عنصر body للتخلص من المشكلة. 
• نفس ملاحظة المدرب أسامة، أظنك تحتاج اظهار قائمة التصفح. 
• بالوضعية الحالية لقائمة التصفح، لا يوجد ضرورة لاضافة الأيقونة التي تقوم بإظهار وإخفاء القائمة. فهكذا أنت تضطر المستخدمين الصعود الى أعلى الصفحة ثم الضغط من أجل إظهار القائمة لمجرد التصفح الى عنصر آخر. وهو بلا شك ما سيعكس تجربة تصفح سيئة. الحل: قم بإعطاء القائمة وضعية ثابتة position:fixed بالإضافة إلى إبقاء زر الإخفاء.
• بالنسبة للقسم الأول، قسم عارض الشرائح.يوجد الكثير من المساحات الفارغة التي تحتاج الإهتمام بها أكثر. يمكنك مثلا ضبط حجم الصور ليحتل مساحة أكبر. يمكنك أيضا اضافة أسهم أو دوائر لإعطاء عارض الشرائح مرونة أكثر.
• أظنك تحتاج اعادة اختيار الصور بعناية، لا تظهر الصور بخلفيات شفافة بشكل جيد، كما أنك تقوم بتبديد جودة الصور عن طريق اعطاء صور من مقاسات مختلفة نفس المقاسات (يمكنك لتفادي هذا المشكل اعطاء الصور عرضا واحدا مع ارتفاع تلقائي، ستلاحظ فرقا كبيرا بهذا).
• بالقسم الثاني، قسم Popular items حاول المحافظة على ما يسمى النظرة المتناظرة symmetric look. فوجود 5 بطاقات في الصف الأول و 1 في الصف الثاني لا يعطي انطباعا جيدا. أضف 4 أخرى الى الصف الثاني أو قم بالغاء الصف الثاني تماما.
• بقسم المعرض، تأكد من التخلص من الفراغات السلبية negative spaces. وهي بشكل بسيط الفراغات غير المتساوية بين عناصر نفس الجنس. لاحظ: 

يعطي هذا انطباعا عن أن الأقسام منفصلة وغير منظمة.

• درجات الألوان بحدود البطاقات في قسم المعرض حادة جدا وتقليدية، أظنك تحتاج تخفيفها والاهتمام بها أكثر.

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

شكرا.

ملاحظات قيمة.