التصميم المسطح - flat design أصبح مجالا أكثر إنتشارا و إستخداما في مجال التصميم العصري و هو عبارة عن أشكال (إنسان, فواكه, سيارات, حيونات...) مسطحة على شكل رسومات و هي تقنية قد تزيد من جمالية الصور و الرسومات حيث أصبحت حتى خبراء الموشن جرافيك يعملون بهذه التقنية.
مثال لتصاميم مسطحة صممتها:

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

إقرأ المزيد

mouhcine

السلام عليكم و رحمة الله, إن كنت مصمم مواقع أو مبرمج أو مطور مواقع, فستحتاج إلى أيقونات من أجل توضيفها في الموقع لجعل الموقع إكثر و ضوحا , جماليا و إحترافيا, مكتبة Font Awesome ماهي؟ ماهي مميزاتها ؟ ما أهميتها في المواقع ؟

ماهي مكتبة font awesome ؟ :

مكتبة font awesome هي مكتبة من البوتستراب - bootstrap الغنية عن التعريف في مجال البرمجة و تصميم المواقع و تحتوي هذه المكتبة على أكثر من 600 أيقونة و هي مكتبة أسسة للمستخدمين من أجل أخذ أيقونات تعبيرية و توضيفها في المواقع بسهولة و إحترافية.

ماهي مميزات مكتبة font awesome :

تتميز هذه المكتبة بعدة خصائص التي يجدها المستخدم رائعة و مريحة و من بينها :

تعدد الأيقونات  :

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

سهولة التحكم  في الأيقونات :

تتميز أيقونات في هذه المكتبة بسهولة تغيير ألوانها و تصغير أو تكبير حجمها و التحكم بها على أساس أنها خط و ذلك فقط بالcss من خلال بعض الخصائص.

توافقها مع جميع الأجهزة :

تتميز مكتبة font awesome بتوافقها مع جميع الأجهزة سواء كانت حواسيب مكتبية أو هواتف ذكية و غير و كذلك تتميز بدقتها العالية و وضوحا و و دقة من نوع رتينا retina التي تعتبر الأكثر وضوحا ذلك الشيء الذي يجعل المكتبة أكثر إحترافا.

أخري :

المكتبة مجانية 100 بالمئة بجميع أيقوناتها, يمكنك إستدخدامها داخل وسم <i></i> بإعطائها الكلاس الخاص بالأيقونة.

ما أهميتها في المواقع :

توضف أيقونات في المواقع أو في أقسام المواقع أو في أي مكان من أجل التمييز بين الأقسام على سبيل المثال دون كتابة إسم القسم

و كذلك تعطي جمالية و جعل الموقع أكثر إحترافية و عصريا و توضف كذلك في روابط التواصل الإجتماعي وغير ذلك.

إقرأ المزيد

mouhcine

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

ماهو التصميم المتجاوب في القوالب :

تجاوب القالب - responsive template هو جعل القالب متوافق مع عدة أجهزة مثل أجهزة الأندرويد و الأيفون و الأجهزة اللوحية, و أن يأخد القالب قياسات تناسب عرض الجهاز الظاهر عليه القالب حيث و من أجل جعل القالب متجاوب يستخدم فيه إحدى خصائص ال css فقط و هو عكس القالب الثابث - static template الذي يأخد قياسات الحاسوب أو الأجهزة اللوحية على جميع الأجهزة.

مثال على قالب متجاوب :

كيفية جعل القالب متجاوب :

من أجل أ، تقوم بجعل القالب متجاوب ماعليك سوى و ضع هذه الأكواد :

@media screen and (max-width 600px){ }
الأن إذا قمت بالعمل على هذا القياس ستعمل فقط على الأجهزة ذات العرض 600px ومن الأفضل العمل بالنسبة المؤية لجعل القالب أكثر تجاوبا.
و داخل اللامات قم بإدخال الستايلات التي تريد أن تطبقها في قياس 600px.
و كل مرة تريد أن تقوم بتغيير عرض الجهاز قم بنقل نفس الكود ثم غير 600px حسب قياس عرض الجهاز الجديد مع تغيير الستاسيلات الموجودة داخل اللامات.

إقرأ المزيد

mouhcine

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

موقع FlatIcon هو موقع رائع يحتوي على أكثر من 114.500  أيقونة مختلفة و بعدة صيغ :SVG,PNG,PSD,JPEG, GIF بالإضافة إلى خاصية تغيير اللون مباشر في الموقع وقبل تحميل الأيقونة,إذا أردت تحميل أي أيقونة قم بإختيار الأيقونة ثم ستنبثق نافذة جديدة قم بإختيار الصيغة التي تريد ثم قم بالضغط على Free download فمثلا إذا قمت بتحميل الأيقونة بصيغة PSD فعند إدخالها إلى الفوتوشوب فإنها ستحافظ على نفس الجودة رغم تكبيرها أو تصغيرها.

رابط الموقع : هنا. 

إقرأ المزيد

mouhcine