أفضل 50 أداة ومصدر مجاني لمصممي الويب 2014

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

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

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

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

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

free_web_design_resources_01

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

free_web_design_resources_02

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

free_web_design_resources_03

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

free_web_design_resources_04

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

free_web_design_resources_05

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

free_web_design_resources_06

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

free_web_design_resources_07

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

free_web_design_resources_08

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

free_web_design_resources_09

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

free_web_design_resources_10

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

free_web_design_resources_11

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

free_web_design_resources_12

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

free_web_design_resources_13

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

free_web_design_resources_14

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

free_web_design_resources_15

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

free_web_design_resources_16

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

free_web_design_resources_17

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

free_web_design_resources_18

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

free_web_design_resources_19

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

free_web_design_resources_20

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

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

free_web_design_resources_21

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

free_web_design_resources_22

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

free_web_design_resources_23

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

free_web_design_resources_24

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

free_web_design_resources_25

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

free_web_design_resources_26

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

free_web_design_resources_27

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

free_web_design_resources_28

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

free_web_design_resources_29

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

free_web_design_resources_30

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

free_web_design_resources_31

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

free_web_design_resources_32

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

free_web_design_resources_33

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

free_web_design_resources_34

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

free_web_design_resources_35

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

free_web_design_resources_36

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

free_web_design_resources_37

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

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

free_web_design_resources_38

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

free_web_design_resources_39

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

free_web_design_resources_40

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

free_web_design_resources_41

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

free_web_design_resources_42

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

free_web_design_resources_43

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

free_web_design_resources_44

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

free_web_design_resources_46

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

free_web_design_resources_47

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

free_web_design_resources_48

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

free_web_design_resources_49

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

free_web_design_resources_50

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

free_web_design_resources_51

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

free_web_design_resources_52

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

free_web_design_resources_53

 

المصدر

مقالات ذات صلة

4 تعليقات

  1. أحمد عادل
    24 ديسمبر,2014 في 9:30 م - Reply

    موضوع جميل جداً .. ومفيد لي شخصيا في الشغل .. شكراً 🙂

  2. أيمن أبوالنصر
    25 ديسمبر,2014 في 2:34 م - Reply

    فعلا مجموعة اكثر من رائعة لكل من يعمل في تصميم وتطوير الويب.
    أحييك على الجهد الكبير المبذول.

  3. h-tag
    5 يناير,2015 في 2:03 م - Reply

    شكراً على الموضوع الرائع

  4. ماجد
    5 يناير,2015 في 7:45 م - Reply

    لدي سؤال :

    هل أضافات Jquery هذه ممكن تؤثر على أداء الموقع ؟

    بمعنى لو هناك شخص قام بأضافات اكثر من ١٠ اضافات jquery هل هذه سوف تؤثر على أداء الموقع ؟

    وشكرا على الاضافات الجميله التي أحتفظ ببعضها في المفضله