مسابقة كورتابز الرمضانية: المهمة 2 - عمل وايرفريم وتصميم الواجهات

مسابقة كورتابز الرمضانية :tada:

المهمة الثانية

بداية المسابقة كانت مشتعلة في جميع الفرق :fire: و الآن حان لنصب المزيد من الزيت مع المهمة الثانية التي سنتناول فيها واجهة المستخدم :bust_in_silhouette:.

بعض الأمور التي يتوجب عليك مراعاتها

قبل البدء في المهمة، يتوجب عليك مراعاة بعض الأمور لإنجاح المشروع مع فريقك:

  • ربما تكون أنت وفريقك قد بدأتوا بالفعل بهذه المهمة وهذا يحسب لصالحكم :ok_hand:

  • التواصل ربما قد يكون متأخر بسبب فارق التوقيت (فريقك غالباً يسكن في دول مختلفة).

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

  • كل مهمة نقوم بنشرها يفترض أن تأخذ يوم واحد فقط.

  • لهذا يتوجب عليك أن تكون متواجد بشكل يومي مع فريقك لمناقشة الأمور.

ما الذي سنفعله اليوم؟

  • عمل وايرفرايم لتجسيد الأفكار التي جمعناها.

  • مناقشة الوايرفرايم بين أعضاء الفريق والتعديل عليه للخروج بأفضل نسخة.

  • جمع الأفكار للتصميم.

  • الانطلاق في عمل التصميم.

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

لا تعرف ماهو الوايرفرايم؟

ننصحك بإلقاء نظرة على درس الوايرفرايم في الأكاديمية على الرابط التالي:

https://coretabs.net/classroom/backend/عمل-تطبيق-مشابه-للفيسبوك/فهم-متطلبات-المشروع/ماهو-الوايرفريم-wireframe

ماهي الأدوات التي تساعدنا في عملها؟

أسهل وسيلة ( وبالنسبة لي أفضلها ) هي الورقة و القلم. و لكن يوجد بعض الأدوات على النت التي يمكنها مساعدتنا أيضا و من بينها Wireframe.cc

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

بعد أن ننتهي من مناقشة الوايرفرايم و الاتفاق على النسخة المناسبة نبدأ في التصميم.

كيف نجمع الأفكار للتصميم؟

لا تنسى:

يجب على الفريق كاملاً المشاركة في بناء التصميم وجمع الأفكار للحصول على رؤية مشتركة بين جميع أعضاء الفريق

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

  • جمع بعض المواقع المشابهة لكي يستفيد منها المصمم و يأخذ منها لمحات.

  • اقتراح بعض الألوان التي قد تبدو لنا مناسبة مع موضوع التطبيق.

  • كل الاقتراحات التي قد تفيد المصمم في عمله على التصميم.

بعد أن نجمع الأفكار لا تنسوا تنظيمها و تخزينها في التريلو لكي لا تضيع :wink:.

الآن نمر الى مرحلة العمل الفعلي على التصميم.

ماهي الأدوات التي تساعدنا في عمل التصميم؟

ما ننصح به في هاته المسابقة هو أن يشتغل جميع أعضاء الفريق على التصميم ( ماعدا الفرق التي تحتوي على مصمم ) والاستعانة بالموجهين في حالة تعسر أي شيئ.

ما يستعمله المصممون غالبا لعمل التصميمات هو Adobe Photoshop، أو Adobe XD، أو Sketch … إلخ.

لكن ذلك يستغرق وقت و خبرة كبيرة بالأداة. لذلك يوجد مجموعة من الأدوات على النت تسهل لنا تجاوز ذلك و النتائج تكون خرافية :heart_eyes: ومن أشهرها:


ما يميز هذ الأداة أنها تعتمد على السحب والإفلات (drag & drop) في بناء الواجهة.


هذا فيديو سريع لكيفية استعمال الموقع (يوجد أيضاً فيديوهات كثيرة على اليوتيوب): https://www.youtube.com/watch?v=aMeuZpBnlj8

الأداتين تقدمان عرض مجاني لعمل تصميمنا للمسابقة. و أيضا كلاهما فيه إمكانية العمل الجماعي بين الفريق :star_struck:


للحصول على ألوان متناسقة بإمكانك استعمال هذه الأداة


سيساعدك هذا الموقع على إضافة صور (برخصة مجانية) لاستعمالها في التصميم الذي لديك.
مثلاً: قد تحتاج لصور وجبات :meat_on_bone: لإضافتها في التصميم.

ماهي الصفحات التي لدينا؟

كما نعرف سابقاً من متطلبات المشروع المعلنة في بداية المسابقة:

مسابقة تطوير موقع توصيل وجبات الطعام ضمن فعاليات رمضان الكريم

بأن لدينا الصفحات التالية:

  • صفحة عرض المنتجات لليوزر.
  • صفحة تعبئة العنوان للطلب.
  • صفحة نجاح طلب المنتج.
  • عرض الطلبات - للمدير.
  • إضافة منتج - للمدير.

ما الذي سنفعله بعد الانتهاء من التصميم؟

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

يفترض أن تستغرق منكم عملية بناء الوايرفريم والتصميم يوم واحد فقط لكي نستطيع الانتقال على المرحلة التالية.

لننطلق في العمل اذا :heart_eyes: بالتوفيق لكل الفرق.

17 Likes

بالتوفيق لجميع الفرق في المهمة الثانية @contest_teams

16 Likes

بالتوفيق للجميع

4 Likes

@esraa1
@benyahia32

3 Likes

@Osman_Hassan
@Wael.mansour

2 Likes

عندي سؤال هل يجب على اعضاء الفريق ان يكون على علم في كيفية استخدام برنامج الاليستريتور ام المواقع التي في اعلاه تكفي؟

4 Likes

اي اداة تفي بالغرض، لا يهم الاداة… المهم هو النتيجة :wink:

3 Likes

هل بالإمكان توضيح اكثر لهذه الصفحتين ؟؟؟؟

2 Likes

صفحة تعبئة عنوان الطلب تطلب من المستخدم بعد تحديد الوجبة أو يكتب عنوان بيته واسمه ليتم ارسال الطلب إليه.

وصفحة نجاح طلب المنتج لإعلام المستخدم أنه نجحت العملية (لإعطاءة تجربة مستخدم جميلة Great UX)

3 Likes

شكرا لك @YaserAlnajjar

1 Like

على الرحب والسعة :blush:

1 Like