أفضل 10 أدوات لبرمجة وتطوير الويب والتطبيقات لعام ٢٠١٧

هناك العديد من أدوات الإنترنت التي يمكن أن تساعدك مع كل شيء من أدوات لبرمجة وتطوير الويب _ كيفية البدء بمدونة أو موقع الكتروني الجديد- أو توفر بعض إلهام تصميم مواقع الإنترنت الذي يطلب بشدة، أدوات النمذجة يمكن أن تساعدنا على حل مشاكل التصميم قبل كتابة حتى سطر واحد من التعليمات البرمجية، النماذج تنقل أفكارنا إلى الحياة، وبذلك يمكن أن نغير طريقة تصميم، عملاء اليوم يريدون أن يروا نماذج تفاعلية؛ وعرض للأفكار ومساعدتهم على رؤية كيف ستأخذ أفكارهم الشكل. إمكانية المشاركة بسرعة مع مختلف تغييرات الأفكار مع العملاء يمكن أن يسرع من عملية التصميم، هذه المرونة تصبح حتى أكثر أهمية عندما نأخذ في الاعتبار العديد من صيغ الأجهزة التي يجب علينا أن نتعامل معها الآن.

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

١- Origami / السعر: مجاني  أدوات لبرمجة وتطوير الويب

Origami بالأصل تم تطويره عن طريق Facebook من أجل مساعدة الفريق على بناء وتصميم المنتجات، الآن هو متاح بشكل مجاني: يمكنك أن تقوم بالتسجيل كمطور آبل، ثم تقوم بتحميل وتثبيت Xcode مع مؤلف Quartz للحصول على Origami وتشغيله على Mac.

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

تصمييمات Sketc وPhotoshop يمكن أن تستورد إلى Origami، وطبقات مشروعك سوف يتم الحفاظ عليها، وعلى استعداد لتكون معرفة برابط، يتم تنشيطها وتحويلها حسب الحاجة،  Origami ليس تطبيق جهاز ذكي يتركز حول تصميم إنما يمكنك يمكنك تصميم مواقع تفاعلية ومحاكاة ميزات مثل إدخال النص، وكاميرا FaceTime  وسحب وإفلات OS X.

يمكنك أن تصدر مكونات النموذج الخاص بك (بما في ذلك الرسوم المتحركة) بنقرة واحدة فقط، لذا المهندسين يمكنهم ان يقوموا بالنسخ واللصق ضمن المشروع،  يتضمن Origami أداة تقديم التي تمكنك من إضافة خلفية مخصصة للتصميم الخاص بك، وعرضه في وضع ملء الشاشة، ومحاكاة الأجهزة المختلفة. كحل نمذجة مجاني، Origami لديه الكثير ليقدمه، على أيّة حال، نقطة الضعف واحدة هي أنه لا يتيح بعدا لعملائك وفريق التصميم بالتعليق مباشرةً على المشروع أو تاريخ الإصدارات.

٢- Webflow / السعر: خطة بداية مجانية (شخصي 16$ في الشهر\ محترف 35$ في الشهر)

تصميم النماذج سريع وسلس مع Webflow، ولكن أين تضيء هذه الأداة حقاً هو عندما يكون النموذج الخاص بك انتهى تماماً، يمكنك تشغيل النموذج الجاهز الخاص بك في موقع إنتاج جاهز بنقرة زر واحدة.

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

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

بشكل اختياري، من السهل القيام بتصدير النموذج ضمن تعليمات برمجية، تعليمات Webflow البرمجية النقية الدلالية يمكنها أن تحفظ ساعاتك الهندسية من مسح التعليمات البرمجية. Webflow يأتي مع قوالب للموقع ومكونات انترنت التي يمكن أن تسحب وتسقط في النموذج الخاص بك، هذه يقوم بتسريع عملية النمذجة، كما أنه يعني أنك لست بحاجة إلى إعادة إنشاء أصول التصميم المستخدمة بشكل شائع.

في أي وقت إن كنت تحتاج إلى مساعدة،

ويمكنك الاطلاع على توثيقات Webflow المفصلة أو مشاهدة فيديوهات لدورات كيف تفعل المفيدة والرائعة، بالطبع إن كنت تستخدم Webflow لأول مرة، وهذا الدعم سيساعد التقليل من منحنى التعلم.

Webflow  تفاعلي بطبيعته، لذا تنسيق موقع الانترنت الخاص بك سوف يكون مثالي لجميع الأجهزة: سطح المكتب، الجوال والأجهزة اللوحية، إذا لم يكن هذا كافياً، يمكنك أن تقوم بتصميم الرسومات التي ستعمل على الأجهزة المحمولة وكافة المتصفحات الحديثة، لم ينتهي عند هذا الحد: Webflow لديه مرونة داخلية، مما يجعل من السهل لوصل نماذجك الحية الى Slack، MailChimp ، Google Drive، وأكثر من 400 من الخدمات الاخرى.

٣- Proto.io / السعر: مدة تجريب مجانية (مستقل 24$ خلال شهر\ شركة 80$ خلال شهر) أدوات لبرمجة وتطوير الويب

مع Proto.io والقوالب الجاهزة من أجل المواقع والتطبيقات تمكنك من الحصول على بداية سريعة في المشروع، التطبيق بالكامل يشغل على الانترنت، لذلك يمكنك تشغيل Proto.io على أي منصة. 

في تجاربي، التطبيق عمل ببطء قليلاً، والصور المستعملة صعبة في بعض الأحيان، أيضاً كل ميزة يظهر أنها تنشئ نافذة جديدة (واحد لكل المشاريع، والبناء والمعاينة الحية)، إذا كنت ترغب في إبقاء عدد من علامات التبويب المفتوحة في أدنى حد ممكن، هذا يمكن أن يكون مزعجاً، على أي حال، هذه اهتمامات صغيرة، ولا تكن بعيدا عن فائدة التي تحصل عليها من الوصول إلى المشاريع الخاصة بك على أي متصفح، يمكنك دائماً اختيار المكان الذي تركته، أينما كنت.

Proto.io أصدرت مؤخرا إضافات التي تمكنك من دمج تصاميم Sketch وPhotoshop من خلال عملية سحب وإفلات (تمرير) بسيطة، عندما تقوم باستيراد ملف، Proto.io  يحافظ على أصولك في الوجود، لذلك لا يتوجب عليك إضاعة الوقت في إعادة تنظيمها، إذا كان قد تم استيراد التصميم الخاص بك إلى  Proto.io، يمكنك المتابعة في القيام بتغييرات على الأصول الخاصة بك في Sketch أو Photoshop، وسوف يتم تحديثها تلقائيا على نماذج Proto.io الخاص بك؛ ليس هناك حاجة للتصدير والاستيراد مرة أخرى.

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

٤- Framer / السعر: فترة تجريب مجانية (99$ دولار) أدوات لبرمجة وتطوير الويب

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

على أي حال، بالنسبة لأولئك الذين يريدون أن يخوضوا التحدي، توثيقات Framer للغة البرمجة منظمة بشكل جيد جدا، مع الكثير من الأمثلة على الكيفية التي تعمل بها اللغة، هناك فيديوهات كيف تفعل، فضلاً عن دورات في Udemy وO’Reilly.

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

هذا لا يعني أنه ليس جيداً للمصممين

ذو الخبرة البرمجية الذين يفضلون كتابة HTML / CSS لبناء نموذج تصميماتهم،  Framer ربما يكون مجرد الأداة التي كنت تبحث عنها: لن تكون مقيد لوجود أدوات السحب والإسقاط من تطبيقات أخرى، وعلاوة على ذلك لأن Framer يستخدم البرمجة إلى بناء النماذج، يمكنك القيام بدمج البيانات في نفس الوقت الى النموذج الخاص بك، من مصادر مثل تويتر وPaarse.

مثل الأدوات الأخرى، Framer يدعم مشاريع Sketch وPhotoshop، وسوف يحافظ أيضا على طبقات التصميم الخاص بك، فائدة أخرى هي أن -على عكس معظم الأدوات الأخرى- يمكنك أيضا استيراد ملفات After Effects، عندما تكون على استعداد لتقوم بمشاركة النموذج الخاص بك، Framer يمكن أن يولد رابط يمكن مشاركته مع عملائك، هذه الروابط القابلة للمشاركة يمكن فتحها على الأجهزة المحمولة بهدف المعاينات حية. وأخيرا، Framer أصدرت مؤخرا تحديث التي تمكنني من نمذجة الواقع الافتراضي. 2016 سوف تكون سنة الواقع الافتراضي، ومع Framer يمكنك البدء بالنمذجة الآن.

٥- Vectr / السعر: مجاني أدوات لبرمجة وتطوير الويب

يمكنك تصميم نماذج الخاصة بك على تطبيق Vectr على الانترنت أو تطبيقات سطح المكتب لأنظمة Mac وWindows، التي هي مؤثرة على اعتبار أن التطبيق مجاني، النماذج تبقى على متزامنة سواء كنت تعمل على تطبيق سطح المكتب أو متصفح الإنترنت، وهذا يحررك ويدعك تعمل كلما كنت جاهز ويضمن لك الوصول الدائم إلى أحدث التغييرات.

نماذج Vectr يمكن أن تتم مشاركتها عن طريق روابط ودمجها داخل تطبيقات مثل Slack من أجل تعاون قوي، وبالاضافة، أولئك الذين شاركت النماذج بالأحجام الطبيعية معهم يمكنهم أن يشرحوا عليها ويقوموا بتحريرها.

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

٦- Atomic / السعر: فترة تجريب مجانية (مبتدئ 15$ خلال الشهر\ محترف 254 خلال الشهر) أدوات لبرمجة وتطوير الويب

مع واجهة المستخدم الجميلة والبديهية، وسهلة الاستخدام وجدول زمني للرسوم سهل الاستخدام، Atomic يعطي انطباع أول رائع،  Atomic هو تطبيق ويب يتطلب  Google Chrome، والذي قد يشكل نقطة ضعف من أجل المصممين الذين يقومون باستخدام Safari، Firefox أو متصفحاتWindows ، أيضا، لا توجد تطبيقات سطح المكتب متاحة.

 إن كنت قد استخدمت After Effects لنمذجة الرسوم، سوف تشعر أنك فعلاً في المنزل مع الجدول الزمني لرسوم Atomic، هذا يمنحك المرونة والسيطرة التي تحتاج اليها من أجل صقل تعاملك: فقط اضغط على زر التشغيل لمشاهدة تغييراتك والرسوم تعمل. عندما تكون سعيداً بالنسبة للتصميم الخاص بك، يمكنك مشاركته مع رابط معاينة على أي جهاز، ومن الممكن أيضا جمع ردود الفعل عل التصميم من عملائك والفريق عبر التعليقات المضمنة.

الميزة المفضلة بالنسبة إلي من هذه الأداة هي خيار التاريخ، والذي يسمح لك بالتراجع لرؤية التكرارات السابقة وإنشاء نسخ جديدة من أي نقطة، بالنسبة لأولئك الذين يصممون على IOS، Atomic قامت بإصدار معدات IOS مع مكتبة من عناصر التصميم من أجل IOS، لتمكين النمذجة السريعة. وأخيرا، يمكنك إضافة CSS مخصص مباشرة إلى Atomic، ومن الممكن أيضاً تصدير CSS، لذلك يمكنك ببساطة القيام بالنسخ واللصق في المشروع الخاص بك.

٧- Easee / السعر: مجاني بالميزات الأساسية (ميزات غير محدودة 10$ خلال الشهر)

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

مع Easee، يمكنك سحب وإسقاط طبقات من Sketch وPhotoshop وتبدأ النشاط، Easee سوف يأخذ الرسوم السلسة التي تم إنشاؤها في التطبيق، وتصديرها إلى CSS، بحيث يمكنك استيرادها إلى مشروع الانترنت الخاص بك، يمكنك أيضا عرض المعاينة المباشرة من الرسوم المتحركة الخاصة بك على شبكة الإنترنت. يمكنك أن تبدأ باستخدام Easee مع خطة الأساسية وبإمكانك الترقية إلى خطة غير محدودة مقابل 10 $ خلال شهر، والذي يوفر لك مشاريع رسومية غير محدودة وتصديرات CSS.

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

٨- InVision / السعر: مجاني أدوات لبرمجة وتطوير الويب

Invisiom يمكن القول انها أداة النمذجة الأكثر شعبية في العالم،
الفريق يقوم باستمرار بإضافة ميزات جديدة لمساعدة مصممي النماذج بشكل أكثر كفاءة، أفضل ميزة في InVision هي ربما إدارتها لردود الفعل على المشروع، العملاء وفرق التصميم يمكنهم أن يقدموا تعليقات مباشرة على النموذج، يتم تجميع هذه في مكان واحد، لذلك لن تفقد ابداً المسار لردود الفعل.

توصيل حالة المشروع إلى العميل الخاص بك والفريق أمر مهم؛
مع صفحة إدارة مشروع InVision، يمكنك تنظيم مكونات التصميم في حال سير عمل،
يمكنك تعيين أعمدة من أجل قائمة مهام،
خلال عملية التنفيذ، يحتاج معاينة، والموافق عليه،
والسحب والإسقاط لمكونات التصميم الخاص بك في العمود المناسب.

على سبيل المثال، إذا كنت على وشك العمل على الصفحة الرئيسية،
يمكنك سحب مكونات التصميم العمود “في النفيذ”، الآن،
عندما يشاهد العميل الخاص بك أو الفريق لوحة الحالة،
سوف يعرفون على الفور ما الذي يجري العمل عليه،
إذا كنت قد استخدمت في أي وقت مضى Trello في بيئة تطوير رشيقة،
فهذا سوف يكون مألوف جدا بالنسبة لك.

InVision دائما تعلن عن ميزات جديدة،

وأصدرت مؤخرا واحدة تدعى Borads،
وهي المكان الذي تعيش المشاريع الخاصة بك فيه،
ويمكن أيضا أن تستخدم كأداة تقديك، مدير أصول من أجل المشاريع،
ومكان لإنشاء moodboards أو الاستديوهات،
يمكنك حتى مشاركة هذه الـmoodboards أو الاستديوهات مع العملاء وفرق التصميم،
لذا يمكنهم أن يقدموا ردود فعل مباشرة.

قائمة ميزات InVision يبدو أنها لا تنتهي:
يمكنك استيراد ملفات التصميم من Sketch أو Photoshop،
أصول للتصميم الرسومي، ربط الصفحات من أجل محاكاة المواقع بنفس الوقت،
ومعاينة النماذج على الأجهزة المحمولة،
وهناك أيضا الإصدار بالتحكم مع تاريخ غير محدود،
اختبار المستخدم مجاني غير محدود،
والتكامل مع تطبيقات مثل Slack، Dropbox، Box وغيرها الكثير،
InVision  لا تزال تغير قواعد اللعبة في هذا المجال،
ولا يبدو أنها سوف تتباطأ.

٩- Adobe Comp / السعر: مجاني أدوات لبرمجة وتطوير الويب

الإصدار الأخير عن آيباد برو أخبرنا بأن العديد من التصميمات تستخدم الأجهزة اللوحية لتطوير المشاريع، 
Adobe Comp يوفر الأدوات التي تحتاجها لتحويل تعابير الرسم الطبيعية إلى رسومات جاهزة للإنتاج.

مع Adobe Comp، يمكنك إنشاء علامة،
طبقات إنترنت والأجهزة المحمولة التي تتكامل بسلاسة مع
Photoshop، Illustrator و InDesign،
أيضا، إذا كنت تستخدم الأصول المرتبطة،
إجراء تغيير في أحد البرامج سوف يسبب تحديث للأصول كل مكان موجودة فيه.
Comp يعمل مع  Adobe Stock وTypekit،
وبالتالي يوفر لك الصور والرسوم،
ومئات من الخطوط التي يمكن بسهولة أن تدمج
 عندما تعمل على نموذج التصميم الخاص بك،
هذه هي الميزة المفضلة لدي،
لأن هذا يعني تقريبا أي رسم أو خط متاح في متناول يدك.

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

١٠- Principle / السعر: فترة تجريب مجانية (99$ دولار) أدوات لبرمجة وتطوير الويب أدوات لبرمجة وتطوير الويب

 Principle مبني من قبل مهندس آبل السابق لـ OS X،
ويأتي مع تطبيق نظام التشغيل iOS ليعكس النماذج الحية،
  Principleلديه ميزة تسجيل التي يمكن من خلالها تصدير النماذج الى فيديو أو صورة GIF  المتحركة،
والتي يمكن أن يتم مشاركتها على Dribbble،
تويتر أو في أي مكان آخر ترغب به!

Principle متاح فقط لنظام التشغيل  Ma،
وإن كنت قد استخدمت Sketch،
واجهة Principle سوف تبدو مألوفة جدا،
  Principle يستخدم ألواح الرسم لتحريك المكونات بين الأوضاع، لذا بينما تعمل على النموذج الخاص بك،
يمكنك أن تشاهد معاينة مباشرة للتصميمات الخاصة بك في أعلى الجانب الأيمن للنافذة،
بدلا من ذلك، يمكنك عكس التصاميم الخاصة بك على جهاز IOS.

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

* الخلاصة

لقد اطلعت في الأعلى على 10 أدوات لبرمجة
وتطوير الويب نمذجة لاستخدامها في عام 2016.
وكما ترى الخيارات وفيرة،
وسوف يكون من الصعب اختيار واحد فقط،
أنصحك أن تجرب أي منها يكون قد أثار اهتمامك،
وانظر ما الذي يعمل على نحو أفضل بالنسبة لك،
وعملائك، وفريقك، الهدف النهائي هو للسماح لأفكارك
وتصميمك من أخذ مرحلة مركزية،
لذلك اختبر أدوات مختلفة وتحقق من التحديثات
التي قد تعطيك ما تبحث عنه،
مع الكثير من الخيارات الرائعة المتاحة بالفعل،
وستجد قريبا أداة النمذجة المناسبة
لتجلب أفكارك الى الحياة.