هل تحتاج إلى بعض الإلهام في تصميم المواقع؟ أو ربما تحتاج لمساعدة في كيفية بدء مدونة؟ مع استمرار زيادة تعقيد عمليات إنشاء موقع على الإنترنت، فإنه لحسن الحظ، تزيد أيضاً نوعية وعدد الأدوات التي ينتجها مجتمع الويب لمساعدتك.في الأسطر القليلة القادمة، سوف تجد أفضل 10 أدوات مجانية لتصميم المواقع و بعض المصادر التي تُنتج ممتلكات خالية من حقوق التأليف والنشر وفريدة من نوعها بالنسبة لك، والتي تحل مشكلة العثور على الموسيقى والصور والتعامل مع الحقوق المرتبطة بها. * قم بالضغط على صورة الاداة للمزيد من المعلومات.
1. CSSFilters أفضل 10 أدوات مجانية لتصميم المواقع
تقوم بتوليد فلاتر الصور عن طريق سحب شريط التمرير. هذه الأداة تحصل على هدايا من CSSGram عن طريق Una Kravets، والتي تعتبر مكتبة لإعادة إنشاء فلاتر انستجرام باستخدام فلاتر CSS ومزج الأنماط.
2. Social Colors
إن زيارة مواقع التواصل الاجتماعي واحد تلو الآخر، واستخدام منتقي الألوان للحصول على ألوان العلامة التجارية الخاصة بهم هي وسيلة مربكة وأيضاً تُشكل خطر إلهاء كبير. ولتسريع هذه المهمة، وحمايتك من الوقوع في اي خطأ، قامت Material UI بإضافة قسم Social Colors لموقعهم. وهنا يمكنك سحب قيمة اللون ودرجته لكل المواقع الكبيرة بضغطة واحدة.
3. Feature.js
هي أداة متصفح صغيرة للكشف عن المكتبات، يبلغ حجمها 1KB فقط. ولا تقوم بعمل أي إختبارات حتى تطلب منها ذلك، وبالتالي فهي سريعة ومفيدة لبناء مواقع مُحسنة تدريجياً. وقد شمل المؤلف بعض الملاحظات التفصيلية للبدء باستخدام الأداة، ويمكنك أن ترى أي ميزة تعمل في متصفحك فقط بتحميل الموقع.
4. Loud links
قم بإضافة أصوات تفاعلية ساحرة لعناصر الواجهة الخاصة بك مع مكتبة الجافا سكريبت الصغيرة هذه. فقط كل ما تحتاج هو إضافة بضعة أسطر من التعليمات البرمجية، وسوف تبدأ الأصوات بالعمل عند النقر أو عندما تحوم حولها بالماوس.
5. Flexbox Playground
احصل على مجموعة من خصائص Flexbox عن طريق تجربة هذه الخلفيات من قبل Gabi Siquès.
6. The Performance Budget builder
إن العمل على وضع خطة أداء قبل البدء في التصميم تعطيك فكرة عن عدد الخطوط والصور التي يمكنك استخدامها حتى لا تضيع وقتك في إنشاء شيء لن يتم تنفيذه. يمكنك أن تفعل ذلك عن طريق جدول بيانات، ولكن Brad Frost قام بتطوير هذه الأداة المفيدة مع واجهة لطيفة لتوفير العناء عليك. كما يأتي معها أيضاً شرح لكيفية استخدام الأدواة وروابط بعض المصادر المفيدة.
7. Unique Gradient Generator
هذه الأداة تستخدم نهجاً غير عادياً لإنشاء صور خلفيات بنمط bokeh-style. حيث يتم تحجيم عينة صغيرة من مصدر الصورة لملء نافذة المتصفح، وتقوم وظيفة تجانس صورة المتصفح بإنشاء التأثيرات المتدرجة. استخدم مفاتيح الأسهم للتحرك في جميع أنحاء مصدر الصورة والعثور على بقع من الألوان مثيرة للاهتمام.
8. Jukedeck
تجنب الإزعاج الناتج من التعامل مع حقوق موسيقى الخلفية عن طريق صُنع موسيقى خاصة بك. سوف تجد في هذه الأداة كل الخيارات والأنواع التي تحتاجها، وكل ملف يتم إنتاجه يكون مختلف كلياً عن الآخرين.
9. Scrawl
Scrawl هي أداة لإنشاء فن هندسي
تفاعلي تم تطويرها على يد Sam Gentle.
كل سطر في الأداة لديه مجموعة معينة من الخصائص التي تُمكنك
من إنشاء رسومات هندسية عن طريق اختيار أماكن وضع الخطوط.
10. es6-cheatsheet
حسّن معرفتك ومهاراتك في ES6 عن طريق هذه الأداة السريعة.
سوف تجد من خلالها العديد من النصائح والخدع وأفضل الممارسات ومقتطفات الأكواد لمساعدتك في القيام بعملك بطريقة أسرع وأفضل.
ما رأيكم في هذه الأداوت، وأيها المفضل بالنسبة لكم؟ شاركونا ارائكم في خانة التعليقات.
