في هذا المقال، قمت بتجميع أفضل 50 مصدر مجاني لمصممي الويب لعام 2014.

يوجد مكتبات لإنشاء ولتحريك (animating) أيقونات SVG وإنشاء رسوم بيانية بـCSS، وتطبيقات ويب لإنشاء خطوط من SVG، واضافات جي كويري التي تدعم اللمس، ومكتبات جافا سكريبت لإنشاء صور GIF متحركة … والكثير من الأدوات الرائعة الأخري.

ولمساعدتك في إيجاد ما تبحث عنه بالتحديد قمت بتقسيم المصادر إلي: اضافات وأدوات جافا سكريبت، مكتبات وأدوات وإطارات عمل CSS، أدوات وخدمات علي الويب.

اضافات وأدوات جافا سكريبت مجانية “JavaScript”

lightSlider اضافة سلايدر جي كويري خفيفة ومتجاوبة “responsive”.

BttrLazyLoading هي اضافة جي كويري تقوم بتحميل الصور في الموقع أو التطبيق عند نقطة الرؤية (viewport).

Gridscrolling.js اضافة جي كويري تضع الأقسام والتعليقات في Grid، وتوفر تنقل سلس بالأسهم وتوفر خريطة عامة.

Adaptive Backgrounds هي اضافة جي كويري تقوم باستخراج اللون السائد في الصور واضافته للخلفية.

 jNottery هي اضافة جي كويري تمكنك من أن اضافة ملاحظات لصفحات الويب وإنشاء رابط مختصر لها ومشاركتها.

 HideSeek اضافة جي كويري بسيطة للبحث المباشر وقابلة للتخصيص.

fontFlex هي اضافة جي كويري لتغيير حجم الخط بشكل ديناميكي بناء علي عرض المتصفح أو الcontainer.

Gif Shot هي مكتبة جافا سكريبت يمكنها إنشاء صور GIF متحركة من الفيديوهات أو الصور.

Ideal Image Slider سلايدر بسيط به العديد من المميزات الرائعة.

SVG Morpheus هي مكتبة جافا سكريبت تمكنك من جعل أيقونات الـSVG تتحول transition من أيقونة لأخري بأسلوب الـMaterial Design.

Shuffle Images هي اضافة جي كويري تعرض أكثر من صورة في صورة واحدة بمجرد تحريك المؤشر علي الصورة.

 Timesheet.js مكتبة جافا سكريبت بسيطة لإنشاء جداول زمنية بـHTML.

Face Detection اضافة جي كويري رائعة لاكتشاف وتحديد الوجوه في الصور والفيديوهات.

Sweep.js مكتبة جافا سكريبت خفيفة حجمها (5kb مضغوطة) والتي تمكنك من عمل تحولات transitions بألوان متعددة.

Data Img اضافة جي كوويري بسيطة لمعالجة الصور وجعلها مستجيبة responsive.

Vivus.js مكتبة جافا سكريبت خفيفة والتي تمكنك من تحريك وعمل تأثيرات للـSVG، وجعلها تظهر وكأنها تُرسم.

pagePiling.js اضافة جي كويري لإنشاء أقسام متتالية فوق بعض والتنقل بينهم بطريقة رائعة.

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

Gif Player هي اضافة جي كويري تمكنك من اضافة أزرار تحكم (البدأ – التوقف) للصور المتحركة.

Naver اضافة جي كويري والتي تقوم بتحويل نظام التنقل الأساسي (القائمة) تلقائيا إلي نظام تنقل مناسب للموبايل (قائمة الـ hamburger menu).

مكتبات وأدوات وإطارات عمل CSS مجانية

Materialize هو CSS Framework  خفيف معتمد علي Google’s Material Design. ويأتي في شكلين مختلفين، الأساسي بCSS & JS، والشكل الآخر نسخة Sass والتي تعطيك امكانية أكبر في التحكم في المكونات.

Foundation for Apps إطار عمل للواجهة الأمامية (Sass) لتطوير تطبيقات ويب مستجيبة بشكل كامل.

Schema هو إطار عمل مرن للواجهة الأمامية (Less) يساعدك في إنشاء واجهات معقدة.

Flexbox Grid هو نظام شبكي يعتمد علي خاصية flex display.

Blueplate اضافة جي كويري خفيفة لإطار الواجهة الأمامية Webplate. لاضافة نظام CSS متجاوب ومكتبة Sass إلي الـframework.

Magic Animations مكتبة CSS3 للرسوم المتحركة (animation) ولاضافة تأثيرات رائعة.

Material UI اطار CSS يجمع عناصر وتأثيرات Google’s Material Design .

 Kouto Swiss اطار CSS متكامل لStylus. يأتي مع مجموعة كبيرة من mixins،functions والأدوات المساعدة. ليناسب احتياجاتك.

Tumblr-Cog-Loaders مكتبة رسوم متحركة رائعة لأيقونات التحميل. مبنية بالSVG وCSS فقط.

CSS Plot مكتبة صغيرة لإنشاء رسوم بيانية بالـCSS.

Animate.css مجموعة من الرسوم المتحركة (animations) التي يمكنك استخدامها في مشاريعك.

Material Design for Bootstrap ثيم لـ  Bootstrap 3  يمكنك من استخدام Google’s Material Design.

Imacss مكتبة لتحويل ملفات الصور لـ data URIs  واضافتهم في ملف الCSS كـ background images.

NightTabs  حل رائع لإنشاء تابات مستجيبة بدون استخدام الجافا سكريبت.

CSSDevices مكتبة CSS لأجهزة أبل الفلات(flat). فهي تمكنك من اضافة لقطات (screenshots) من موقعك في أجهزة ابل الفلات المنشأة بالـ CSS.

CSS-On-Diet معالج (preprocessor) جديد بني خصيصا للمصممين.

Marka مجموعة من الأيقونات المتحولة الجميلة مصممة لتعمل علي الويب.

 أدوات وخدمات علي الويب

Font Flipper أداة علي الويب لتجربة وتصفح الخطوط المثبة علي جهازك.

Font Family Reunion أداة تمكنك من معرفة الخطوط الافتراضية علي أنطمة التشغيل المختلفة.

Type-Finder أداة تساعدك في اختيار عائلة الخطوط المثالية font family عن طريق الإجابة عن بعض الأسئلة.

BADA55.io أداة تساعدك في إيجاد الألوان المشابهة للكلمات.

Glyphter أداة قوية وسهلة الاستخدام لإنشاء خطوط من SVG.

SVG Circus أداة علي الويب لإنشاء لودر تحميل متحرك بSVG.

Fibonacci هو مولد لتصميم تخطيات صفحات الويب باستخدام Flexbox، دون الحاجة لتعلم HTML, CSS.

EnjoyCSS هو مولد CSS3 متقدم مع واجهة استخدام سهلة والتي تسمح لك بتعديل الـ styles  بسرعة وبدون تكويد.

بني لهواة تصميم الخطوط، Glyphr Studio هو أداة مجانية علي الويب غنية بالعديد من المميزات لتصميم الخطوط.

PatternBolt مكتبة ومولد لخلفيات SVG pattern والتي يمكنك تحميلها ك CSS أو SCSS .

LoremFlickr هي خدمة image placeholder بسيطة ومجانية. حيث يتم سحب صور من Flickr لديها رخصة المشاع الإبداعي.

StyleStats مكتبة Node.js وأداة علي الويب لجمع وعرض احصائيات CSS للمواقع.

SC5 Styleguide أداة مفيدة تساعدك في توليد style guides من stylesheets.

Compressor.io أداة لضغط الصور. تدعم صيغ JPEG, PNG, GIF & SVG .

TinyJPG أداة علي الويب لتقليل وضغط حجم صور JPEG.

 

المصدر