القائمة النهائية لأفضل الأدوات والموارد المجانية لمطوري الويب الأماميين

بقلم برادلي نايس ، مدير المحتوى في ClickHelp.com - أداة توثيق البرامج

التطوير الأمامي هو تطوير عناصر موقع الويب التي يراها العميل ويتفاعل معها مباشرةً. إنه مزيج من مهارات البرمجة وعلم الجمال.

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

لقد جمعت قائمة من الأدوات والموارد للمطورين الأماميين والتي تندرج في عدة فئات: الألوان ، ومولدات CSS ، والآلات الحاسبة والمحولات ، والطباعة والخطوط ، والأيقونات ، وتحليل نمط الموقع ، والمحررين ، وأدوات المطور ، والاختبار ، والأداء ، التحسين ، والتغذية المرتدة ، والإلهام ، MOOC ، Wireframes ، نماذج بالحجم الطبيعي والنماذج ، أخبار التصميم والمجتمع ، محفظة ، الموارد.

الألوان

Color Hex: أداة ألوان مجانية توفر معلومات حول أي لون

المواد اللون المنتقى

محدد اللون المسطح البسيط: حدد التنسيق الذي ترغب في نسخه إلى الحافظة الخاصة بك مع المحدد في الأعلى. انقر اللون الذي تريد نسخه وسيتم إضافته إلى الحافظة بالتنسيق الذي اخترته.

ColorDrop: أداة مطابقة للألوان ، تتيح لك توفير مجموعات الألوان المفضلة لك.

Palettable: قم بإنشاء لوحات ألوان جميلة بدون معرفة مسبقة بالتصميم.

ColorFavs: إنها أداة رائعة حيث يمكنك بسهولة إنشاء لوحة ألوان عن طريق سحب صورتك وإفلاتها أو إدراج عنوان URL أو تحديد قيم عشوائية.

لون آمن: لوحات ألوان جميلة ويمكن الوصول إليها على أساس إرشادات WCAG لنسب تباين النص والخلفية.

الألوان: لوحة ألوان بسيطة للويب.

SwatchMatic: منتقي الألوان لكائنات العالم الحقيقي. يتيح لك إنشاء لوحات بسرعة أثناء الطيران باستخدام ألوان البذور التي توفرها Mother Nature نفسها. قم بتوجيه كاميرا هاتفك المحمول إلى لون تريده ويخبرك SwatchMatic باسم اللون (بلغات متعددة) وجميع القيم التي تحتاجها لإعادة إنشائها ، بالإضافة إلى أنه يمنحك خمسة ألوان أخرى تتطابق معها بشكل رائع.

uiGradients: تدرجات ملونة جميلة.

بيانات ألوان الويب: يهدف هذا المشروع إلى الإجابة عن أسئلة مثل: ما هو اللون / الألوان الأكثر شيوعًا أو تدرج اللون / الألوان على الويب؟ هل تفضل بعض الصناعات ألوانًا معينة على غيرها؟ ما هي الألوان عموما وجدت معا؟

ألوان تصميم المواد: يساعدك تطبيق الويب الصغير هذا على تصور ألوان تصميم المواد وأيضًا نسخ الألوان بتنسيقات مختلفة بسهولة.

ألوان واجهة المستخدم المادية: تشتمل لوحة ألوان واجهة المستخدم المادية من Google على ألوان أساسية ولهجات يمكن استخدامها للتوضيح أو لتطوير ألوان علامتك التجارية. لقد تم تصميمها للعمل بتناغم مع بعضها البعض.

BADA55.io: BADA55.io يدور حول العثور على أكثر كلمات قدم badass للألوان السداسية في CSS.

Color Hexa: إنها أداة ألوان مجانية توفر معلومات حول أي لون. ما عليك سوى كتابة أي قيم لونية في حقل البحث وستقدم وصفًا مفصلاً وتحويلها تلقائيًا إلى القيمة المكافئة لها في Hexadecimal و Binary و RGB و CMYK و HSL و HSV و CIE-Lab و Hunter-Lab و CIE-Luv و CIE -LCH ، XYZ و xyY.

نسبة التباين: احسب نسب تباين الألوان بسهولة

خمسون ظلال رمادية لمصممي الويب:

COLOURlovers: المستخدم خلق ومشتركة لوحة الألوان الإلهام

كولور: مولد لوحة الألوان

Paletton: أداة لإنشاء مجموعات الألوان

Chrome Daltonize !: Daltonization هي تقنية لكشف التفاصيل للمستخدمين المكفوفين بالألوان ، مما يسمح لهم بمشاهدة ما سيفتقدونه لولا ذلك

مولدات CSS

CSS3.me: هذا واحد هو الحد الأدنى للغاية وأنيقة ، ولكن أيضا وظيفية للغاية. يمنحك القدرة على تغيير وضبط نصف قطر الحدود ، وإسقاط الظل ، والتدرج ، والعتامة.

مولد CSS3: إنه مولد وظيفي ومصمم بشكل جيد. أعتقد أن هذا هو واحد من المفضلة ، لأن التصميم وواجهة المستخدم نظيفة للغاية.

CSS3-Tricks Button Maker: يمكن التحكم بالكامل في هذا المنزلق من خلال منزلق السحب والإفلات.

CSS3 Button.net: قد يكون تصميم هذا التصميم غير متوفر ، لكنه يوفر خيارات أكثر بكثير من التصميم السابق. يوفر إمكانية إضافة ألوان متعددة للظلال والظلال الداخلية والحدود والخطوط. قد يكون من الصعب معرفة ذلك في البداية ولكنك ستحصل عليه إذا كنت تلعب معه لبضع دقائق.

في نهاية المطاف مولد التدرج CSS: مولد التدرج CSS

CSS3 Button Generator: يمنحك هذا الزر زرًا كبيرًا واحدًا لمعالجة الظل والحدود واللون ، علاوة على ذلك يمنحك القدرة على تحرير التحويم.

دائرة نصف قطرها الحدود: هذا هو أداة صغيرة الحد الأدنى ، وهذا هو عملي وبسيط للغاية. كل ما تفعله هو تعيين مقدار الحافة المستديرة التي تريدها في كل زاوية. ثم تقوم فقط بالتحقق من نوع بادئة المتصفح التي تريد تضمينها ، وهذا كل شيء.

مولد خلفية متدرجة CSS ملون: إنشاء خلفية CSS

EnjoyCSS: الكل في واحد مولد CSS

CSS MenuMaker: إنشاء تنقل سريع الاستجابة للموقع

مفتاح تشغيل / إيقاف تشغيل الوجه: قم بإنشاء مفاتيح تشغيل / إيقاف تشغيل CSS3

CSSmatic: التدرج ، دائرة نصف قطرها الحدود ، مربع الظل والضوضاء مولد الملمس

واجهة المستخدم موكب أداة حية: زر ، نموذج ، أيقونة ، منشئ الشريط

CSS سهم من فضلك: CSS مولد مولد

معرض أنماط CSS3: معرض أنماط CSS3

مولد التصميم: إنشاء تخطيط CSS

Tridiv: محرر يستند إلى الويب لإنشاء أشكال ثلاثية الأبعاد في CSS

الآلات الحاسبة والمحولات

DPI Love: ابحث عن DPI / PPI من أي شاشة

CSS Inliner: مضمّن CSS تلقائيًا لبريدك الإلكتروني

كود تجميل: تجميل ، والتحقق من صحة ، تصغير ، تحليل وتحويل JSON ، XML ، جافا سكريبت ، CSS ، HTML ، إكسل

PXtoEM: تحويل وحدات البكسل إلى EM

دلاء الكثافة: محول كثافة الشاشة لنظامي Android و iOS

محول الكثافة: محول الكثافة بكسل

هل هذه شبكية العين ؟: DPI / PPI عرض آلة حاسبة

اختبار NTH: اختبار nth-child و nth-of-type

الطباعة والخطوط

خطوط Google: خطوط الويب مفتوحة المصدر

Fontspiration: أداة بناء لخلق روائع مطبعية متحركة ممتعة.

Gridlover: أداة لإنشاء نظام مطبعي بمقياس معياري وإيقاع عمودي.

اكتب Genius: ابحث عن السرد المثالي للخط لمشروعك التالي.

Type Nugget: Type Nugget هي أداة تنضيد عبر الإنترنت تمنحك تحكمًا دقيقًا في قاعدة قوية لنوع hella غرامة على الويب - كل ذلك عبر واجهة مستخدم ممتعة.

TypeWonder: اختبار خطوط الويب على أي موقع حي

ملائمة النص: مكون إضافي مسج لنفخ نوع الويب

TypographyEditor: Typography Editor هو أداة مجانية وعبر الإنترنت لإنشاء ملصقات وصور مطبوعة.

فقط اكتب لي:

Typecast: تطبيق قائم على المتصفح لإنشاء تصميمات جميلة وواقعية ومتسقة تعتمد على الطباعة.

السنجاب الخط: اختار اليد الخطوط على شبكة الإنترنت مجانا

Dafont: أرشيف الخطوط القابلة للتحميل بحرية

Font Space: تنزيل الخطوط الجوده الخطوط

اكتب Genius: العثور على التحرير والسرد الخط المثالي

ما الخط: تحديد الخط من الصورة

FontStruct: FontStruct هي أداة مجانية لبناء الخطوط برعاية شركة FontShop الرائدة في مجال التجزئة على مستوى العالم. يتيح لك FontStruct بسرعة وسهولة إنشاء خطوط مبنية على أشكال هندسية ، مرتبة في نمط شبكي ، مثل البلاط أو الطوب.

التقليب النموذجي: أداة طباعة ، اكتب الكلمة التي تريد رؤيتها وعرضها على الفور في المحارف الموجودة على جهاز الكمبيوتر الخاص بك.

أداة تبديل الخطوط: معاينة كيف ستبدو مواقع الويب مع خطوط من Webtype.

tinytype: جدول توافق يعرض خطوط النظام الافتراضية المتاحة عبر منصات متنقلة مختلفة.

Typetester: مقارنة خطوط الويب من Adobe Edge و Google و Typekit

شجار: معرفة الفرق بين الخطوط جوجل

أفضل الخطوط الحرة 2016: مجموعتي من الخطوط المجانية لهذا العام

الرموز

أيقونات تصميم المواد: حزمة رموز تصميم 750 حرفًا من تصميم Google

Iconogen: يمكنك إنشاء favicons و Windows 8 Tiles وأيقونات Apple Touch و Android و iOS

ماركا: أيقونات جميلة قابلة للتحويل

ممتاز الخط: الرموز ناقلات قابلة للتحجيم التي يمكن تخصيصها على الفور

ماكي: أيقونة مجموعة لرسم الخرائط على شبكة الإنترنت

الدفعة: 300+ الرموز لتصميم الويب واجهة المستخدم

Fontello: رمز مولد الخط

Fontastic: إنشاء خط الرمز الخاص بك

Iconmonstr: مجموعة كبيرة من الرموز الرمزية من فنان ألماني

Octicons: رمز الخط الذي أطلقته جيثب

GlyphSearch: ابحث عن الرموز من Font Awesome و Glyphicons و IcoMoon و Ionicons و Octicons

رمز البطيخ: مكتبة الرموز SVG للويب

Entypo: مجموعة من 411 من الصور التوضيحية المتقنة التي أعدها دانيال بروس

الأحجار الكريمة: مجموعة الرموز المجانية 600+ ، يأتي في 3 أحجام مختلفة (16px ، 32px ، 64px)

Typicons: أيقونات مكافحة ناقلات مجانية مضمنة في webfont لسهولة استخدامها في واجهات المستخدم الخاصة بك

تحليل نمط الموقع

Stylify Me: نظرة عامة على دليل أنماط الموقع ، بما في ذلك الألوان والخطوط والحجم والتباعد

StyleStats: أداة بسيطة لجمع إحصائيات CSS لموقع ويب

الألوان: اكتشف اللون الأكثر شيوعًا أو تدرج الألوان لموقع الويب

Type-o-matic: امتداد المستعرض الذي يعثر على جميع الخطوط الموجودة في الصفحة

SnappySnippet: استخراج CSS و HTML بسهولة من العنصر المحدد

المحررين

CodePen: عرض للتقنيات المتقدمة مع شفرة المصدر القابلة للتحرير

JS Bin: قرص مباشر لـ HTML و CSS و JavaScript ومجموعة من المعالجات

CSSDeck: مجموعة رائعة من CSS و JS Creations لمساعدة مطوري الواجهة والمصممين

Dabblet: ملعب CSS تفاعلي وأداة لمشاركة الكود

Liveweave: Liveweave عبارة عن ملعب HTML5 و CSS3 و JavaScript لمصممي ومطوري الويب

Adobe Edge Reflow: أداة تصميم تستكمل سير عمل التصميم الخاص بك لمساعدتك في إنشاء تصميمات سريعة الاستجابة لجميع أحجام الشاشة

webflow: أداة إنشاء مواقع الويب بالسحب والإفلات لإنشاء مواقع ويب مستجيبة احترافية

Macaw: يوفر نفس مرونة محرر الصور المفضل لديك ولكنه يكتب أيضًا HTML الدلالية والدلالة الرائعة على CSS

ادوات المطورين

Chrome DevTools: مجموعة من أدوات تأليف الويب وتصحيح الأخطاء المضمنة في Google Chrome

النخير: جافا سكريبت عداء المهام لأتمتة المهام

LiveReload: يتم تطبيق تعديلات CSS وتغييرات الصور مباشرة دون الحاجة إلى الضغط على زر التحديث

Bower: حل لمشكلة إدارة الحزمة الأمامية

Yeoman: نظام بيئي للمولد ، وهو مكون إضافي يمكن تشغيله باستخدام أمر "yo" لإقامة مشاريع كاملة أو أجزاء مفيدة

هل يمكنني استخدام: جداول دعم المتصفح الحديثة لدعم تقنيات الويب الأمامية

HTML5 من فضلك: ابحث عن HTML5 ، CSS3 ومعرفة ما إذا كانت جاهزة للاستخدام

قيم CSS: مرجع CSS ، الخصائص والقيم

مشغلات CSS: مرجع لا يقدر بثمن حول كيفية تأثير CSS على الأداء

اختبارات

التحقق من صحة علامات W3C: للتحقق من صلاحية علامات مستندات الويب في HTML و XHTML و SMIL و MathML

HTML_CodeSniffer: التحقق من شفرة مصدر HTML والكشف عن انتهاكات لمعايير الترميز المحددة

التحقق من صحة W3C CSS: تحقق من مستندات HTML (CSS) و (X) مع أوراق أنماط

CSS Lint: يشير إلى مشاكل في كود CSS الخاص بك

JS Lint: برنامج JavaScript يبحث عن مشاكل في برامج JavaScript

المبيدات: CSS تخطيط التصحيح

PhantomCSS: اختبار الانحدار البصري / CSS باستخدام PhantomJS

QUnit: إطار اختبار وحدة جافا سكريبت

متصفحات: اختبار متصفح منصة الصليب

المسؤول: راجع كيف سيبدو موقعك على الأجهزة الأكثر شعبية

Opera Mobile Classic Emulator: استخدم محدد الملف الشخصي لتفرخ مثيلات Opera Mobile Classic المتعددة بدقة وضوح وكثافة بكسل وواجهة المستخدم

أداء

اختبار سرعة موقع Pingdom: اختبار وتحليل وقت تحميل الصفحة المباشرة

WebPagetest: اختبار سرعة موقع الويب من مواقع متعددة في جميع أنحاء العالم

رؤى PageSpeed ​​Insights: تحليل الموقع واقتراح طرق لجعله أسرع

GTmetrix: تصنيف موقع الأداء ويقدم توصيات لإصلاح هذه المشكلات

YSlow: يحلل ويقدم اقتراحات لتحسين أداء الصفحة

Perfmap: خريطة أداء أداء للموارد المحملة في المتصفح

الاقوي

CSSCSS: تتيح لك معرفة مجموعات القواعد التي قامت بتكرار التصريحات

الهيليوم: أداة جافا سكريبت لفحص موقعك وإظهار CSS غير المستخدمة

CSS Tidy: فتح محلل CSS ومحسن

ضاغط CSS: ضغط CSS لزيادة سرعة التحميل

حفر CSS: ألق نظرة على جميع خصائص CSS ، وتواترها وأشكالها

JavaScript Minifier: تصغير JavaScript الخاص بك

FF Subsetter: تقليل حجم ملف الخط لتحسين استخدام عرض النطاق الترددي

Compressor.io: قلل حجم صورك مع الحفاظ على جودة عالية

البادئة المجانية: أضف بادئة المتصفح الحالي إلى أي كود CSS فقط عند الحاجة

العفريت البقرة: إنشاء CSS لأوراق العفريت

TinyPNG: ضغط ضياع متقدم لصور PNG

الصور المتكيّفة: يكتشف حجم شاشة الزائر ويقوم تلقائيًا بإنشاء وتخزين وتوصيل الإصدارات المناسبة من الصور المقاسة

ردود الفعل

الارتداد: أضف ملاحظات على التصميم وشاركه مع أشخاص آخرين

تصميم قطرة: أداة لجمع تعليقات التصميم

نظرة خاطفة: شاهد واستمع إلى فيديو مدته 5 دقائق لشخص حقيقي يستخدم موقعك

وحي

CoDrops: CoDrops لها أسبوعية جماعية (أو نحو ذلك) مشهورة للغاية ، وهي في الأساس عبارة عن جولة من الموارد الكبيرة والعناصر الملهمة لمصممي الويب وغيرهم من التصميمات. شعبية جدا ومفيدة للغاية.

Designrfix - إلهام تصميم الجرافيك - البرامج التعليمية ومصادر تصميم الويب: مدونة أخرى للتصميم الجرافيكي وتصميم الويب.

OneXtraPixel - تصميم وتطوير مجلة على الإنترنت

تقوم OXP ، وهي مجلة إلكترونية للمصممين والمطورين ، بمشاركة النصائح والبرامج التعليمية والأدوات والموارد والمقالات الأخرى حول التصميم والتطوير.

MonsterPost: TemplateMonster هي شركة قوالب في الغالب ، ولكن لديها أيضًا مدونة رائعة مستمرة. الأمر لا يتعلق فقط بالأشياء الخاصة بهم - بل يتأكدون من أنها توفر الكثير من الأشياء الرائعة لتصميم الويب.

FromUpNorth - إلهام التصميم عالي الجودة

DesignShack: مرة أخرى يتم تقاسم ثروة من الموارد مع مجتمع التصميم.

تصميم Vandelay: الكثير والكثير من الموارد الممتازة ، المجانية ، والمقالات ، والصفقات ، ووردبريس الأشياء وغيرها الكثير.

DesignM.ag: DesignM.ag هي مجتمع للمصممين ومصممي الويب والمطورين.

Reddit Web_design

ليست في الحقيقة مدونة ، بل هي رواية فرعية.

ومع ذلك ، تضمن ميكانيكا reddit upvoting أن أي شيء يرتفع إلى القمة يعد قراءة أساسية لمصممي الويب. تحظى بشعبية كبيرة ، واحدة من أكبر subreddits.

Abduzeedo - إلهام التصميم والدروس التعليمية: Abduzeedo هو واحد من هؤلاء ، حيث ستجد ملخصات إلهام التصميم التي يجب أن تراها للمصمم الذي يريد البقاء على قمة الاتجاهات ومعرفة ما هو أحدث وأكبر الأشياء الموجودة حوله.

tutorialZine - مكان واحد لتعليمات تطوير الويب عالية الجودة: إنها مجلة تعليمية معظمها لتعليمات تطوير الويب. الدروس مكتوبة بشكل جيد وسهلة المتابعة.

eWebDesign: eWebDesign هو مصدر آخر لأحدث وأكبر المقالات من خبراء تصميم الويب. ميزات قصص حول تصميم المواقع الإلكترونية ، وتطوير الشبكة والبرامج التعليمية. إنها في الواقع رسالة إخبارية ، لذا يمكنك إدخال الأشياء مباشرة في صندوق الوارد الخاص بك!

WebAppers: الكثير من المصادر المفتوحة وموارد الويب المجانية.

WebNeel - إلهام التصميم والفن والتصوير والرسوم المتحركة

CSS Mania - CSS Galleries: هذا هو موقع معرض CSS الأكثر شعبية. مرة أخرى ، موقع جيد جدًا لمشاهدة تصاميم الويب المبتكرة.

أهم 9 مدونات لتصميم المواقع الإلكترونية تحتاج إلى متابعتها

MOOC

مقدمة في تصميم الأشياء اليومية: غنية بالمعلومات لأي شخص مهتم بالتصميم: الأشخاص العاديين والفنيين والمصممين وغير المصممين على حد سواء

تفاعل النماذج الأولية: تعلم الطرق المختلفة للنماذج الأولية عن طريق الرسم والبناء والاختبار

مقدمة في تصميم الجرافيك: تعلم مبادئ التصميم الجرافيكي الأساسية (الخطوط والألوان والصور والخلفيات والتخطيطات) وكيفية تطبيقها.

مقدمة إلى HTML و CSS: تعرف على كيفية تحويل نماذج بالحجم الطبيعي للتصميم الرقمي إلى صفحات ويب ثابتة

تطوير الويب: تعلم المفاهيم الأساسية لتطوير الويب من المؤسس المشارك لـ Reddit & Hipmunk Steve Huffman.

أساسيات تصميم الويب المتجاوبة: تعرف على أساسيات تصميم الويب المتجاوب مع Google Pete LePage

الصور المتجاوبة: تعرف على كيفية العمل مع الصور على الويب الحديث ، بحيث تبدو صورك رائعة وتحميلها بسرعة على أي جهاز

لوحة HTML5: تعلم كيفية استخدام اللوحة القماشية ؛ كيفية صنع التراكيب باستخدام الأشكال والصور والنصوص ؛ كيفية إنشاء تأثيرات وعوامل تصفية على الصور وكيفية إنشاء صور متحركة.

تطوير تطبيقات Android: تعرف على كيفية إنشاء تطبيق Android

أساسيات JavaScript: تعلم أساسيات برمجة JavaScript

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

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

اختبار جافا سكريبت: تعلم كيفية كتابة تطبيقات جافا سكريبت بثقة ، وذلك باستخدام سير عمل أحمر-أخضر-ريفاكتور

بناء تجارب الويب عبر الأجهزة المحمولة: تعرف على كيفية إنشاء تجارب رائعة على الويب عبر الأجهزة المحمولة.

تصميم UX لمطوري الأجهزة المحمولة: يمكنك الغوص في التقنيات التي يستخدمها المصممون الكبار لتخطيط التطبيقات المدهشة ونموذجها قبل كتابة أي كود

أساسيات UIKit: قم ببناء سلسلة من التطبيقات البسيطة لتصبح أكثر راحة مع إطار عمل UIKit وإتقان المكونات الأكثر استخدامًا على نطاق واسع

مقدمة إلى jQuery: تعلم كيفية قراءة وثائق jQuery وفهمها.

مقدمة إلى AJAX: تعرف على كيفية عمل طلبات غير متزامنة مع JavaScript (باستخدام وظيفة jQuery في AJAX) ، واكتساب فهم أفضل لما يحدث بالفعل عند القيام بذلك

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

تصميم Gamification: تعلم أساسيات Gamification مع نهج عملي للغاية

السلكي ، نماذج بالحجم الطبيعي والنماذج

اوريغامي: أداة مجانية لتصميم واجهات المستخدم الحديثة التي أنشأتها Facebook

Cacoo: إنشاء مخططات ، خريطة موقع ، مخطط انسيابي ، خريطة ذهنية ، إطار سلكي ، مخطط UML ومخطط شبكة

الأعجوبة: حوّل صور Dropbox أو سطح المكتب إلى نماذج ويب وتطبيقات جوال لأي جهاز واحصل على ملاحظات

Placeit: إنشاء نماذج بالحجم الطبيعي iPhone و نماذج بالحجم الطبيعي iPad

MockFlow: خدمات عبر الإنترنت لتخطيط وبناء ومشاركة العمل للمصممين

Justinmind: wireframes التفاعلية للويب والجوال

Wireframe.cc: الحد الأدنى من أداة wireframing مجانية

أخبار التصميم والمجتمع

/ r / web_design: تصميم ويب فرعي

/ ص / تصميم: تصميم subreddit

/ r / قابلية الاستخدام: تجربة المستخدم أو تصميم الواجهة أو العناصر الفرعية الفرعية

/ r / تجربة المستخدم: تصميم تجربة المستخدم subreddit

تبادل المكدس: تصميم الجرافيك: سؤال وجواب للمتخصصين في تصميم الرسوم والطلاب والمتحمسين

تبادل المكدس: تجربة المستخدم: سؤال وجواب للباحثين والخبراء تجربة المستخدم

Front-end Front: هو المكان الذي يمكن لمطوري الواجهة الأمامية طرح الأسئلة ومشاركة الروابط المهمة وإظهار أعمالهم إلى بقية المجتمع.

الأناناس: محور الدروس والأدوات والأصول للمطورين والمصممين

Lockerdome: شبكة اجتماعية قائمة على الاهتمامات

مصمم الأخبار: مجتمع من الناس في التصميم والتكنولوجيا

DesignFloat: أخبار تصميم نصائح ونصائح

The Web Blend: مجتمع للمصممين والمطورين والمدمنين على التكنولوجيا

أخبار التصميم: موقع يحتوي على مقالات إخبارية وموارد وبرامج تعليمية كتبها المصممون والمطورون

محفظة

Behance: منصة رائدة على الإنترنت لعرض واستكشاف العمل الإبداعي

Dribbble: مكان لعرضه وإخباره والترويج له واكتشافه واستكشافه

البضائع: منصة النشر الشخصية التي تهدف إلى إنشاء أدوات يمكن الوصول إليها وسياق شبكي لتعزيز تعرض الأفراد الموهوبين على الإنترنت

DeviantArt: مجتمع عبر الإنترنت ، يعرض أشكالًا مختلفة من الأعمال الفنية التي صنعها المستخدم

مصادر

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

الأزرار: مكتبة أزرار CSS تم إنشاؤها باستخدام Sass & Compass

Bootflat: Open UI KIT مفتوحة المصدر تعتمد على Bootstrap 3.3.0 CSS framework

Animate.css: مكتبة عبر متصفح للرسوم المتحركة CSS

CSS Shake: يهز CSS الرسومات والرموز لصفحتك أو التطبيق

أنماط خفية: أنماط محكم tilable مجانية

Placehold.it: العناصر النائبة للصورة

Holder.js: العناصر النائبة للصور الجانبية

Hammer.js: أضف إيماءات اللمس المتعدد إلى صفحة الويب الخاصة بك

Textillate: البرنامج المساعد بسيط للرسوم المتحركة النص CSS3

الجدول الزمني JS: الجداول الزمنية المصممة بشكل جميل والتي هي سهلة الاستخدام وبديهية

Modernizr: مكتبة JavaScript التي تكتشف ميزات HTML5 و CSS3 في متصفح المستخدم

النظير: إنشاء محفظة قابلة للتصفية لموقع الويب الخاص بك

البوليمر: يجعل إنشاء أي شيء أسهل وأسرع من زر إلى تطبيق كامل عبر سطح المكتب والجوال وما بعده

CodyHouse: مكتبة مجانية من HTML ، CSS ، شذرات JS

Cheetyr: مجموعة من أوراق الغش والاختصارات للمصممين والمطورين

النشرة: مكتبة جافا سكريبت مفتوحة المصدر للخرائط التفاعلية الصديقة للجوال

خرائط متواضعة: مكتبة مجانية للخرائط التفاعلية

Templated: مجموعة من 846 من قوالب مواقع CSS و HTML5 المجانية ، صممتها وصممتها Cherry + AJ

GraphicBurger: تصميم الموارد المقدمة مجانا للمجتمع

أتمنى لك نهارا سعيد!

برادلي نيس ،
إدارة المحتوى على ClickHelp.com - أفضل أداة توثيق عبر الإنترنت لبائعي SaaS