[ الدرس السادس ] : [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

تم تحميل الصفحة في 1,2061874 ثانية
[ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
709
الإعجابات
964
النقاط
93



*
ألسسَلاأم عليككم ورححمةة الله وبرككاته ،

أليوم يتجدد لقأئنا زوأأر قسسم التصميم والجرافيكس مع موضوع جديد ،

من دورة التصميم المسطح | Flat Design


||-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-||

.:: فهرس الدورة ::.

[ Flat Design | آلتصميم آلمسطح ] : مقدمة عنـ آلتصميمـ , وتآريخة .

[ Flat Design | آلتصميم آلمسطح ] : البداية فى التصميم المسطح .


[ Flat Design | آلتصميم آلمسطح ] : تصميمـ Header .

[ Flat Design | آلتصميم آلمسطح ] : الخـطوط والالوان .

[ Flat Design | آلتصميم آلمسطح ] : تصميم الايقونات واستخدام الظلال .

[ Flat Design | آلتصميم آلمسطح ] : تصميم شآشة أبل .

||-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-||

| Flat Design | آلتصميم آلمسطح .: تصاميم الويب :.

تحدثنآ سآبقأ عن التصميم المسطح كاتجاة فى تصميم والويب بالاسآس
واردت ان اختم هذة الدورة بتصميم صفحة ويب وليس موقع كامل ،
حــتى تكون انطلاقة فى هذآ المجال ،

*

||-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-||



||-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-||
نقووم بفتح برنامج الفوتوشوب اى اصدار متاح !

بالاعدادات والمقآسات الاتية!



ألــان نقــوم بـعمل "Guide"

لتحديد العمل بدقة ، . .











ليصبح الشكل النهآئى للــ"Guides" هكذآ



نــقوم الان بآستخدام اداة ، [
]


بعدهآ نضغط على الخلفية ، لتظهر لنا القأئمة الاتية ،



ثــم نضع المستطيل ، هكذآ



نقوم بكتابة اقسام الموقع ، ووضع الوجو ،



نــآخذ الان أداة ، [
]


وبالضغط ، على الخلفية ، تظهر النأفذة التأليــة /



ثم نكتب عبآرة بحث ، ونضع الايقونة ،

هكذآ ، ،




نـــآخذ الان ادآة [
]




ونضع المستطيل هكذآ



بآلطبع تتذكرون هذة الشآشة ،
[
]



نضع اللوجو او صورة الموقع ، داخل الشآشة ،

ونبذة تعريفية بالموقع ،




ونقوم بصنع خمسة دوائر كما قمنا من قبل فى درس تصميم الهيدر ،



نـــآخذ الان ادآة [
]


وننشآ مستطيل بالاعدادات الاتية ،



ثم نضع المستطيل هكذآ



ثم نقوم بعمل ايقونات لعرض خدمات التى يقدمها الموقع مع كتابة تعريف عنها ، كمآ سبق شرحها ، فى درس تصميم الايقونات ،



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



وبآالطبع انشآء البآقى معروف، الى ان نصل الــى هذة النتيجة ،



||-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-||


سنتحدث عن بعض الطرق والعناصر التي تساعدك في تصميم موقع مسطح وجميل. ،


[#] :

عنصر الألوان

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










[#] :

الخطوط Typography


لعنصر الذي تستطيع استخدامه وتوضيفه في تصميم الموقع هو عنصر الخطوط الذي يجعلك قادر على الإستغناء عن كثير من العناصر المعقدة في الموقع.



[#] :

الرسومات المتجهة Vector Graphic

يمثل هذا النوع من الرسومات اللغة التي يفهمها الجميع. بمعنى آخر، تعتبر الرسومات والأشكال المرسومة على تصميم الموقع هي العنصر الذي يمثل البساطة في التصميم والسهولة في وصول المعلومة. الرسومات المتجهة هو نوع من الرسم الذي لا يعتمد على التعقيد وإنما البساطة في الرسم. توجد الكثير من البرامج المستخدمة في رسم الرسوم المتجهة ومن أشهرها Adobe Illustrator.
يمكن لك أن تقوم بتنزيل بعض الرسومات المتجهة من هذا الموقع

( البعض منها يمكن تنزيلها مجاناً).





[#] :


استخدام الخلفيات المُعتمة

في التصميم المسطح يمكن أن تضيف خلفية شفافة معتمة نوعا ما تُعطي الموقع جمالاً وبساطة.




[#]
عناصر كبيرة والكثير من الفراغات بينها

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









اضافة الحركة باستخدام HTML5 و CSS3

باستخدام التقنيات الجديدة التي تتميز بها للغة HTML5 و CSS3 يمكن أن نعطي الموقع جانبا جماليا، ومن ضمن هذه التقنيات عنصر الحركة لعناصر الموقع بصورة جميلة.





||-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-||

الى هنا ينتهي موضوعي هذا ،

وابقى على امل ان التقي بكم في مواضيع قادمة ،

في أمان الله ورعايته ،

D r . X a v I | D E V - P O I N T


:1 (226):


 
التعديل الأخير بواسطة المشرف:

-Abu Majed-

.: المدير التنفيذي :.
rankrankrankrankrankrank
طاقم الإدارة
إنضم
7 نوفمبر 2006
المشاركات
3,918
الإعجابات
20,007
النقاط
113
الإقامة
الامارات
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمه الله وبركاته ,

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

جاري التقيم والنشر والوشم بالخماسي .

تقبل مروري .
 

Nasser Salem

.:: administration ::.
طاقم الإدارة
إنضم
7 أغسطس 2011
المشاركات
14,662
الإعجابات
23,982
النقاط
113
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمة الله وبركآته

والله يآ غالي مآ ضل فيهآ كلآم , شهآدتي بك مجروحة .

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


يثبت لمدة 3 أيآم لينآل نصيبه من الاطلآع من قبل الزوآر والأعضآء .

وأنتظر بشدة بآقي دروسك لأستفيد منهآ .


وآصل يا استثنآئي

:9:
 
إنضم
26 مارس 2013
المشاركات
5,605
الإعجابات
6,381
النقاط
113
الإقامة
♥ TUNISIA ♥
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

فعلا انت المحترف
شروحاتك فيها لمسة ابداعية
مصمم محترف و محترف في شروحات ايضا
بارك الله فيك حبيبي
:32:
 
إنضم
7 أكتوبر 2013
المشاركات
4,037
الإعجابات
7,224
النقاط
113
العمر
23
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمة الله وبركاته

لم تترك صغيرة ولا كبيرة الآ ووضحتها .. لك لمسة جميلة وانيقة في الشروحات

وهذا ما يميزك عن غيرك من المصممين في مجالك .

احسنت و احسنت دورة تزداد تشويقا يوماً بعد يوم .. في متابعة لكل جديدك ..

لك كل الود و التقدير ي مبدع .. لك كل التحايا :637469:
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
709
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمه الله وبركاته ,

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

جاري التقيم والنشر والوشم بالخماسي .

تقبل مروري .
[تسلم مديرنا الغالى ابو مأجد نــورت الموضوع يآ غالى ، ، وشكر أ لك على التقيم والنشر والخماسى] ، ، :155:
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
709
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمة الله وبركآته

والله يآ غالي مآ ضل فيهآ كلآم , شهآدتي بك مجروحة .

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


يثبت لمدة 3 أيآم لينآل نصيبه من الاطلآع من قبل الزوآر والأعضآء .

وأنتظر بشدة بآقي دروسك لأستفيد منهآ .


وآصل يا استثنآئي

:9:
[تسلم استآذ " نآصر" ، ششهآدة اعتز بيها ، دوومآ ، من مبدع مثلك ]
آن شآء الله تبقى درس واحد ، بآذن الله من هذة الدورة ونختتمها، :637475:
خــأص تحيآتــى لك ، :1 (226)::1 (226):
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
709
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

فعلا انت المحترف
شروحاتك فيها لمسة ابداعية
مصمم محترف و محترف في شروحات ايضا
بارك الله فيك حبيبي
:32:
[ شكرآ لك حيبى يوسف ، ، نورت الموضوع يآ غألى، ] . . .:1 (226)::1 (226):
 

Đя.Aиσиyмσυs

.:: مُصمم جرافيكس، مَبرمج ::.
rankrankrank
إنضم
3 يونيو 2014
المشاركات
709
الإعجابات
964
النقاط
93
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمة الله وبركاته

لم تترك صغيرة ولا كبيرة الآ ووضحتها .. لك لمسة جميلة وانيقة في الشروحات

وهذا ما يميزك عن غيرك من المصممين في مجالك .

احسنت و احسنت دورة تزداد تشويقا يوماً بعد يوم .. في متابعة لكل جديدك ..

لك كل الود و التقدير ي مبدع .. لك كل التحايا :637469:
شكرآ لك ايها المبدع ابو مشعل الغألى ، سعيدجدا براى مبدع مثلك فى اعمالى ، ، :637475:
 
إنضم
1 فبراير 2014
المشاركات
3,363
الإعجابات
3,996
النقاط
113
الإقامة
[Algeria]
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

ماذا تعتقد في مشاركة Đŗ.Ẋāṽi؟ يعجبني ويستحق التقييم
 
إنضم
24 ديسمبر 2013
المشاركات
952
الإعجابات
1,828
النقاط
93
الإقامة
<h1>أ‡أ،أŒأ’أ‡أ†أ‘</h1>
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

السلام عليكم ورحمة الله وبركاته

موضوع في قمة الروعة اخي العزيز

سهولة في فهم الموضوع وكل شئ متقن

ماشاء الله عليك

بارك الله فيك ننتظر باقي دروسك ياغالي

:637456: :h (13): :637456:
 
إنضم
24 يونيو 2014
المشاركات
1,565
الإعجابات
3,325
النقاط
0
الإقامة
|أڑأ‍أ¦أ، أ‡أ،أ¦أ‡أڑأ­أ¤|
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

عندما يتحدث الابداع فــ أنت أهلا له

جهود تذكر فتشكر ..

شكرا بحجم السماء تستحق التقييم ..

:32:
 
إنضم
26 سبتمبر 2013
المشاركات
1,650
الإعجابات
1,178
النقاط
0
الإقامة
.::∫Egypt∫::.
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمة الله وبركاتة ،

مآ شآء الله يآ غالى والله نتمى ان هذة الدورة الاحترافية لا تنتهى ابدأ ،

حتى لا تغادر اقسآم التصميم والجرافيكس مطلقآ ،

جآرى تقيمك ولايك اقل شى يآ غالى

واصل ولا تحرمنا جديدك ، ابدا
 
إنضم
24 يونيو 2014
المشاركات
1,565
الإعجابات
3,325
النقاط
0
الإقامة
|أڑأ‍أ¦أ، أ‡أ،أ¦أ‡أڑأ­أ¤|
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

يجب أن تضع للبعض سمعات قبل إعطائها إلى Đŗ.Ẋāṽi مرة أخرى.

في المرات المقبلة يامبدع ..
 

-DelFord Art-

.:: Legendary Designer ::.
rankrankrankrankrankrank
إنضم
15 أبريل 2013
المشاركات
4,758
الإعجابات
9,075
النقاط
113
العمر
24
الإقامة
جمهورية العرآق.
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

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

من الجيد وجود اشخآص مثلك

لدينا في هذا الصررح , بارع في عمل

الشروحآت وتنسيقها وايصالها الى المتلقي

فضلا عن كونها احترافية وفريدة من نوعها

اسأل الله التوفيق لك يا نخبة

تم : تقييم + اظآفة الدرس الى الفهرسس الخاص بالدورة

فديتك حبيبي

9:
 

Ahmed Jasim

.:: Legends DeveloPer ::.
إنضم
28 أكتوبر 2012
المشاركات
7,833
الإعجابات
12,579
النقاط
113
الإقامة
Iraq
رد: [ Flat Design | آلتصميم آلمسطح ] : تصاميم الويب .

وعليكم السلام ورحمة الله وبركاته

درس بعد درس تبهرنا باغالي ,ماشاء الله تنسيق جميل جدا

وايصالك للمعلومة بكل سهولة وسلاسه

دمت لنا يامبدع ,ولاتحرمنا من دروسك ياغالي

فائق احترامي .
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 1 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل