الـ Grid System في التصميم — حلقة 6 | كورس UI/UX بالعربي

0:01طيب السلام عليكم يا شباب ايه الاخبار

0:03عاملين ايه؟ يا رب تكونوا بخير

0:05في الحلقه دي ان شاء الله من الكورس

0:06هنتكلم عن الجريد احنا الحلقات اللي فاتت

0:10اتكلمنا وشرحنا الواجهه بتاعه فيجما

0:13وعرفنا الفرق او عرفنا ايه اللي بيكون في

0:16السايد بار هنا واللي محتاجين نركز عليه

0:18ونعرفه الفرق ما بين البيدجز واللايرز

0:21وعرفنا السايد بار اللي هنا التولز اللي

0:24فيه او الكنترولز اللي فيه كلها

0:28ايه اللي بنستخدمه وايه اللي بنشتغل عليه

0:31وهكذا ا برده عرفنا الفرق ما بين التولز

0:34اللي تحت هنا وفهمنا كويس جدا ايه هو

0:36الفريم وايه هو السكشن وايه هو الريكتانجل

0:39والفرقات ما بينهم وعرفنا انه اا الفريم

0:43عرفنا المقاسات اللي احنا بنشتغل عليها

0:46سواء كموبايل ابلكيشن او الديسك توب تمام

0:49كده اا المره اللي فاتت كنا حاولنا نعمل

0:53كذا حاجه مع بعض بشكل بسيط كده ل ا عشان

0:58نفهم يعني ايه فيل ويعني ايه ستروك ويعني

1:00ايه شادو او اللي هي الافيكتس عفوا واخر

1:03حاجه وصلنا لها اللي هي الليي اوت جايد

1:06طيب ايه هي الليي اوت جايد

1:09خلينا اول حاجه نعمل فريم 13 ل الموبايل

1:16تمام

1:17بالشكل ده بعد كده بمجرد ما بحدد الفريم

1:20بنزل تحت زي ما فهمنا التفاصيل اللي هنا

1:24كلها الفل والاستروك والافيكتس و بس كده ا

1:30بالنسبه للاي اوت جايد اللي هي الاوبشن ده

1:34بمجرد ما بروح بضغط عليه بلس من هنا زي

1:38نفس الفكره بتاعه اي حاجه فوق عايزين

1:41نضيفها نضيف من علامه البلس دي بمجرد ما

1:43بضيف بيحصل عندي حاجتين اول حاجه بيظهر لي

1:49البانل دي كده او الموديل ده بالشكل ده

1:51وبيحصل عندي هنا ايه جريد او شبكه على

1:55الفريم بتاعي بالشكل ده طيب ايه اللي

1:57هعمله بعد كده؟ ا بمجرد ما ببدا اضغط على

2:00ايقونه الجريد او الزرار ده بيبدا يظهر

2:03معايا ثلاث حاجات اللي هي الجريد

2:05والكولومز والروز الجريد اللي هي الشبكه

2:08اللي هي دي الكولومز اللي هي الاعمده اللي

2:11هي دي والروز اللي هي الصفوف بالشكل ده

2:14انا محتاج اركز عليه او محتاج اعرف ايه

2:16محتاج اعرف بس الكولومز وليه قدام شويه

2:19هنعرف واحنا شغالين ان شاء الله مجرد ما

2:21بحدد كولومز بالشكل ده بيبدا يظهر لي

2:25الاعدادات اللي انا هبدا اغيرها في الجريد

2:28بتاعي باي ديفولت هو عامل لي هنا ان هم

2:31ايه خمسه كولومز انا ممكن احدد مثلا ان هم

2:33اربعه او لاثه او اثنين او واحد تمام يبقى

2:38اول اا اول حاجه هنا عندي بقدر ان انا

2:43اغير فيها عدد الكولونز بتاعتي انا في

2:46الموبايل بنشتغل على ايه يعني دي حاجات مش

2:49حاجات ثابته اللي هو ده صح وده غلط بس في

2:52اغلب الاحيان في حاجات ستاندرد كده بنشتغل

2:55عليها ا الموبايل ممكن نشتغل على اربعه

2:58كولومز بالشكل ده اا الحاجه الثانيه من

3:02تحت من هنا اللون بقدر اغير درجه اللون

3:05بتاعته لو انا عايزها احمر او اي درجه

3:07ثانيه بالشكل ده اا ثالث حاجه التايب

3:11بتاعه الاسترتش ولا ليفت ولا يعني ولا

3:16رايت وسنتر يعني يمين ولا شمال ولا في

3:18النص ولا سترتش دايما بنستخدم اوبشن سترتش

3:22يعني هفهمكم برض هو الليفت لو عملنا ليفت

3:24ان هو بيكونوا الاربعه او الاربعه كولونز

3:27بتوعي بيكونوا على يمين عفوا على شمال

3:30السكشن ولو عملتهم يمين او في النص

3:33هيكونوا كده فانا مش بنحتاج خالص التفاصيل

3:36دي دلوقتي اللي احنا محتاجينه بس ان هم

3:38يكون استرتش تمام كده مجرد ما بعمل استرتش

3:42الويت عندي بيبقى اوتوماتيك تلقائي مش

3:45بتحكم فيه بعد كده المارجن والجيتر

3:49الحاجتين دول محتاجك تركز عليهم جدا ايه

3:51هو المارجن ركز معايا كده المارجن لما

3:54ببدا ابدا ان انا ازود

3:56اهوف بايدي على على الجزء ده كده بلاقي

3:59الماوس بتاعي شكله اتغير للشكل ده ده

4:02معناه ان انا اقدر ازود واقلل بالماوس

4:05بتاعي الارقام بالشكل ده طيب ايه هو

4:08المارجن ركز معايا كده المارجن بمجرد ما

4:10ببدا ازود المارجن بتاعي شايفين المارجن

4:14اللي هي المسافه دي اللي هي المسافه

4:18ثواني نعمل ده احمر المسافه اللي بره دي

4:22المسافه اللي انا بسيبها هنا كده دي ده هو

4:25المارجن انا عايزها كام او بنشتغل على كام

4:27في الموبايل يعني يفضل ان هي تبقى يعني 16

4:31يعني بيبقى رقم كويس ان احنا نشتغل عليه

4:33تمام كده طيب ايه هو الجيتر الجيتر اللي

4:36هي المسافه اللي هي اللي جوه بقى اللي ما

4:38بين الاعمده من جوه تمام برده ممكن نخليها

4:4116

4:42ولو خليتها مثلا 40 او 50 عشان برده

4:45تشوفوها هتلاقي المسافه اللي جوه وسعت

4:48فانا هخليها 16 فيعتبر نوعا ما دي السيتنج

4:53بتاع بتاعه اا الجريد اللي احنا بنشتغل

4:57عليه

4:59للموبايل تمام كده ده الموبايل طيب تعالوا

5:02نعمل فريم جديد للديسك توب تمام ديسك توب

5:07اا ديسك توب اهو ونشوف مثلا ممكن نعمل

5:12الجريد بتاعه ازاي هنزل تحت اروح على

5:14الليلاي اوت جايد وهعمل بلس هلاقي عمل لي

5:18باي ديفولت شكل الجريد ده هروح اغيره

5:20لكولمز وهبدا ان انا ايه اغير عدد

5:23الكولومز عندي نوعا ما يفضل ان احنا

5:26نستخدم 12 في الديسك توب تمام وبقيت اللون

5:30هسيبه زي ما هو التايب هسيبه زي ما هو

5:32سترتش هنزل عند المارجن ممكن والله في

5:36الموبايل ممكن عفوا في الديسك توب ممكن

5:38اعمله 60 يعني ممكن تبتدي من 60 بالشكل ده

5:40او ممكن تعمله برده 80 عادي جدا وفي ناس

5:44بتشتغل برده 100 ما فيش مشكله اا براحتك

5:47وانت حابب تشتغل على ايه يعني نوعا ما

5:50خلينا

5:5260 وسطيا هيبقى كويس والجيتر اللي هي

5:56المسافه اللي في النص ممكن تشتغل عليها 20

5:59ممكن تشتغل 24 احيانا ممكن نشتغل 32

6:03يعني الموضوع مش ثابت فانت ممكن تخليك في

6:06المنتصف مثلا وتكون 20 او 24 يعني مش ا مش

6:12هتكون فيها مشاكل معاك يعني فدي برده ايه

6:15السيتنج الافضل بتاعه الجريد طيب لازمته

6:19ايه بقى الجريد ده الجريد ده لما انا ببدا

6:23اشتغل على المشروع بتاعي هبدا اديزاين اي

6:26حاجه ا خلينا مثلا نقول ان احنا عايزين

6:30نعمل انبوت فيلد مثلا عايز هعمل انبوت

6:33فيلد بالشكل ده هيكون مثلا عندي تكست

6:37مثلا ايه هو ايه ما كتبش ليه طيب ماشي

6:41مثلا ايه اسم

6:47المستخدم

6:48تمام كده التكست ده انا هعمله في فريم

6:51سريع بس عشان نفهم الفكره ايه هدي له فيل

6:55من هنا هنعرف الكلام ده بنعمله ازاي المره

6:57الجايه ولكن خليني بس ايه ا اوضح لكم

7:02الفكره بشكل سريع

7:06طيب شركه فيفون بتتصل بينا داخل الفيديو

7:09اوكي ماشي انا عملت الفريم ده فبمجرد

7:15الجريد ده هنبدا واحنا بندزاين الفتره

7:17الجايه

7:18ا هو مهمته ايه؟ مهمته ان هو المحتوى

7:21بتاعي بتاع التصميم كله

7:27يبقى على نفس المحاذاه وهكذا اي حاجه بقى

7:32هصممها عندي في التصميم بتاعي اي حاجه

7:35هعملها هتكون واخده نفس السبيس دي كده

7:37اللي هي سايبه من هنا 16 وسايبه من هنا 16

7:40اللي هيشيها على الكولمز بتاعتي بالظبط او

7:43لو عندي بنر مثلا هيكون في النص عندي بنر

7:46او تصميم او ايا يكن

7:48او لو عندي كاردات فهخلي ان في كاردين

7:52واخدين كولومز وكاردين الثانيين واخدين

7:54اثنين كولومز الثانيين وهكذا ببدا امشي في

7:57التصميم بتاعي بنفس اللي اوت ده كده عشان

8:01الامور تبقى او لو عندي مثلا اربعه يعني

8:04ممكن ايه ان انا اضيف لكل واحد

8:07وهكذا

8:11تمام

8:13كده

8:15كده كده

8:20بس فيعني دي الفكره كلها ان انا ببدا ارتب

8:24العناصر بتاعتي داخل التصميم بتاعي على

8:26نفس

8:28الكولومز اللي عندي عشان تبقى اا متنقه

8:32بشكل كويس السبيسنج بتاعتها مظبوطه بشكل

8:35كويس ا كل حاجه ماشيه مع بعض بطريقه كويسه

8:41ومتوازيه بطريقه كويسه فده يدي انطباع

8:43بصريا انه الديزاين كلين والدنيا حلوه

8:47هنتعرف اكت الفتره الجايه واحنا شغالين مع

8:49بعض على الجريد وهنبدا نصمم مع بعض باذن

8:54الله اا

8:56واحده يعني تمام الصفحه دي انا هسيبها

8:59هسميها درافت الفايل ده انا هشيره معاكم

9:01ممكن اسيبه تحت الفيديو هعمل لكم صفحه

9:04جديده هنا مثلا اسمها ايه التاسكات مثلا

9:06او خلينا نقول الدرافت سيب دي درافت هنخلي

9:10دي هظبط انا الفايل وعشان في كم حاجه كده

9:13عايز ارتبها

9:14وهشيره معاكم ان شاء الله باذن الله

9:18وبس كده السلام عليكم ورحمه الله وبركاته.