52 أداة لتصميم الويب لمساعدتك على العمل بشكل أكثر ذكاءً في عام 2021

أفضل أدوات تصميم الويب: تصوير جون كابا على Unsplash
(رصيد الصورة: تصوير جون كابا على Unsplash)
صفحة 1 من 2: صفحة 1 اقفز إلى:

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

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

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



أثناء تواجدك هنا ، قد ترغب في التحقق من جولات أفضل خدمات استضافة الويب و ال أفضل منشئي مواقع الويب لعام 2020

كيفية طمس الآثار

إنشاء لافتة JS

انقر على الصورة لمعرفة المزيد وشراء التذاكر الخاصة بك(رصيد الصورة: Future / Toa Heftiba ، Unsplash)

أدوات تصميم كاملة

01. InVision Studio

تهدف InVision إلى أن تكون أداة واجهة المستخدم الوحيدة التي تستخدمها

تهدف InVision إلى أن تكون أداة واجهة المستخدم الوحيدة التي ستحتاج إليها على الإطلاق(رصيد الصورة: InVision)

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

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

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

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

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

02. رسم

حل Sketch محل Photoshop كأداة تصميم واجهة المستخدم المفضلة للعديد من مصممي الويب [الصورة: Bohemian Coding]

حل Sketch محل Photoshop كأداة تصميم واجهة المستخدم المفضلة للعديد من مصممي الويب [الصورة: Bohemian Coding](رصيد الصورة: الترميز البوهيمي)

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

روري بيري ، المدير الإبداعي في سوبيرب ، وقم بالتبديل إلى Sketch في عام 2017 ، وأوصى به بشدة. 'مقارنةً ببرنامج Photoshop ، فإن فرز جميع المستندات الخاصة بك وإجراء المراجعات على Sketch أسهل بكثير' ، بدأ. 'يحتوي Sketch على مستندات صغيرة بينما يحتوي Photoshop على مستندات كبيرة. نظرًا لكونه تطبيقًا يعتمد على المتجهات ، فإن أحجام الملفات أصغر بكثير مقارنةً ببرنامج Photoshop. '

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

يقدم المجتمع المئات من الملحقات Sketch لجعل سير عمل التصميم أسهل وأكثر سلاسة.

الجانب السلبي في Sketch هو أنه متاح فقط على أجهزة Mac ، ولا توجد خطط لدعم أنظمة التشغيل الأخرى. لقد كانت هذه مشكلة ، حيث سيرغب المصممون غالبًا في مشاركة ملفات .sketch مع المطورين الذين يستخدمون Windows. لحسن الحظ ، يوجد الآن تطبيق 'Sketch for Windows' يسمى جنون التي ستفتح وتحرر ملفات .sketch وتزيل معظم هذا الألم - اقرأ عنها في ملف التصدير والتحويل قسم من هذه المقالة.

لا تفوت أهم النصائح لاستخدام سكتش .

03. Adobe XD

يحتوي Adobe XD على واجهة خفيفة تتيح لك إنشاء نموذج أولي بسهولة

يحتوي Adobe XD على واجهة خفيفة تتيح لك إنشاء نموذج أولي بسهولة(رصيد الصورة: Adobe)

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

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

بشكل حاسم ، يتكامل Adobe XD مع بقية Creative Cloud ، مما يعني أنك ستتمكن من استيراد الأصول من Photoshop أو Illustrator والعمل معها بسهولة. إذا كنت تستخدم بالفعل تطبيقات Adobe الأخرى ، فستبدو واجهة المستخدم لطيفة ومألوفة ويجب ألا تقدم الكثير من منحنى التعلم.

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

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

04. أعجوبة

أعجوبة

يأتي Marvel مع أداة اختبار مستخدم متكاملة(رصيد الصورة: Marvel)

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

05. فيجما

أدوات تصميم الويب: شاشة فيجما

تتيح لك Figma تصميم ، ونمذجة أولية ، وجمع الملاحظات مع مصممين آخرين في الوقت الفعلي [الصورة: Figma]

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

فيما يلي بعض ميزاته البارزة:

يوضح مصمم الواجهة الأمامية: 'لدى Figma ميزة USP مماثلة لـ Sketch ، باستثناء كونها تعمل عبر الأنظمة الأساسية' بنيامين ريد . 'عندما استخدمته لإنشاء رمزين ، وجدت سير العمل سلسًا بشكل لا يصدق. لم يستغرق الأمر وقتًا طويلاً للتعلم وكان لدي فائدة إضافية تتمثل في التعاون: يمكنك مشاركة الرسومات مع الآخرين داخل التطبيق.

ويضيف قائلاً: 'كنت أحاول التبديل إلى Linux من أجل عملي وأحيانًا نستخدم Windows ، لذا فإن Figma تبدو منطقية بالنسبة لي من وجهة نظر عملية'.

كاتب محتوى مستقل وفنّي ديفيد ايستوود لديها أيضًا أشياء جيدة لتقولها عن Figma. لقد كانت أيضًا أداة مفيدة حقًا عندما احتجنا إلى السخرية من MVTs بسرعة ؛ في بعض الأحيان إضافات صغيرة إلى تخطيط موجود. نحن نحب أنه يمكنك بسرعة إنشاء تصميمات لسطح المكتب والجهاز اللوحي والجوال.

06. مصمم التقارب

يتميز Affinity Designer بقوة على iPad كما هو الحال في سطح المكتب [Affinity Designer]

يتميز Affinity Designer بقوة على iPad كما هو الحال في سطح المكتب [Affinity Designer](رصيد الصورة: Serif)

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

'إن نسبة التكبير التي تبلغ 1000000 في المائة كانت مجرد نعمة ؛ إنه مفيد بشكل خاص عند العمل مع الفن المتجه ، حيث يمكنك الاقتراب حقًا. ميزات التراجع والمحفوظات مفيدة حقًا: يتيح لك التقارب الرجوع إلى ما يزيد عن 8000 خطوة! '

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

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

لا تفوت أدلة استخدام شخص بكسل ، ال شخص تصدير و ال أداة القلم في مصمم التقارب. لاحظ أيضًا أن Serif يصنع أيضًا بديلاً لبرنامج Photoshop ، صور التقارب وبديل InDesign ، ناشر التقارب ؛ وكلها تلعب معًا بشكل جيد.

نماذج بالأحجام الطبيعية والنماذج الأولية

07. UXPin

UXPin: أدوات تصميم الويب

يتيح لك UXPin وضع نموذج أولي مع حالات تفاعلية ومنطق(رصيد الصورة: UXPin)

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

توجد مكتبات عناصر متكاملة لنظام التشغيل iOS و Material Design و Bootstrap ، بالإضافة إلى مئات من مجموعات أيقونة مجانية ، لمساعدتك في طريقك. أدخلت UXPin أيضًا مؤخرًا ميزات إمكانية الوصول لضمان بقاء تصميماتك متوافقة مع معايير WCAG ، والتي نشيد بها.

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

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

08. Proto.io

تساعدك هذه الأداة في إنشاء نماذج أولية نابضة بالحياة

تساعدك هذه الأداة في إنشاء نماذج أولية نابضة بالحياة(رصيد الصورة: Proto.io)

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

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

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

09. بلسمق

واجهة بلسمق

Balsamiq رائع للتخطيط الشبكي السريع(مصدر الصورة: بلسميك)

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

10. ProtoPie

ابدأ باللعب باستخدام أجهزة الاستشعار الأصلية باستخدام هذه الأداة

ابدأ باللعب باستخدام أجهزة الاستشعار الأصلية باستخدام هذه الأداة(رصيد الصورة: ProtoPie)

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

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

11. MockFlow

موكفلو

هذه الأداة رائعة للاستهزاء بالأفكار التقريبية(رصيد الصورة: MockFlow)

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

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

جهاز لوحي للرسم البياني huion new 1060 plus

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

12. Adobe Comp

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

من المحير أن Adobe لم ترى أنه من المناسب تضمين التصدير المباشر إلى XD - إنه جنون! - على الرغم من طلب طويل الأمد التي كانت قيد المراجعة لما يبدو إلى الأبد. ومع ذلك ، فإن التصدير إلى Photoshop مدمج (جنبًا إلى جنب مع Illustrator و InDesign) ، وبمجرد إجراء التعديلات على نموذج بالحجم الطبيعي الخاص بك يتم إجراء ذلك في محرر الصور في كل مكان ، يمكنك بعد ذلك التصدير من هناك إلى XD. على الرغم من هذه الخطوة الإضافية غير المرغوبة في رحلة مستخدم Adobe devotee wireframer ، فإن Comp تستحق تمامًا إدراجها في هذه القائمة من خلال إمكانات الانتقال إلى أي مكان وسهولة الاستخدام وواجهة المستخدم الرائعة.

13. فلينتو

واجهة فلينتو

صمم الحالات السابقة واللاحقة ، وسيقوم Flinto بإيجاد الفرق والتحريك من أجلك(رصيد الصورة: Flinto)

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

ضع في اعتبارك أن هذا هو نظام iOS فقط ، لكنه سيشعر بأنه مألوف عند بدء استخدامه. هناك وثائق عبر الإنترنت لمساعدتك في طريقك ، والاستيراد من Sketch و Figma واضح أيضًا.

14. المحور

واجهة المحور

واجهات معقدة Wireframe مع البيانات الديناميكية(رصيد الصورة: Axure)

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

تتضمن عملية التسليم في Axure إنشاء مواصفات شاملة تساعد المطورين على إنشاء منتج نهائي يتوافق مع تصميماتك.

15. جاستن ميند

جاستن ميند

يتكامل Justinmind مع أدوات مثل Sketch و Photoshop(رصيد الصورة: JustInMind)

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

16. السوائل

واجهة السوائل

كيفية تعتيم الصورة في Photoshop CS6
السائل رائع لتصميم واجهة المستخدم السريع(رصيد الصورة: سائل)

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

17. التفاعل

يساعد التفاعل على إبقاء الجميع على نفس الصفحة [صورة: تفاعل]

يساعد التفاعل على إبقاء الجميع على نفس الصفحة [صورة: تفاعل](رصيد الصورة: التفاعل)

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

أطر التصميم والمكتبات

18. Bootstrap

أدوات تصميم الويب: Bootstrap screengrab

يحتوي Bootstrap القديم المفضل على بعض التحديثات الجديدة القوية

التمهيد هي بالتأكيد ليست أداة جديدة ، ولكنها أحدثت ثورة في التطوير وتستمر في تشكيل كيفية بناء الأشياء على الويب.

في وقت كتابة هذا التقرير ، قدم الإصدار الأخير (4.4.1 ، الذي تم إطلاقه في نوفمبر 2019) حاويات مستجيبة جديدة سائلة حتى نقطة توقف معينة ، وفئات .row-cols جديدة مستجيبة لتحديد عدد الأعمدة عبر نقاط التوقف بكفاءة.

أطلق Bootstrap أيضًا مؤخرًا مكتبة أيقونات مفتوحة المصدر خاصة به ، أيقونات Bootstrap ، وهو مصمم للعمل مع مكونات Bootstrap.

أعثر على أفضل ثيمات Bootstrap المجانية في دليلنا .

19. بدء التشغيل 3

إنشاء موقع Bootstrap بدون كتابة رمز [صورة: Designmodo]

إنشاء موقع Bootstrap بدون كتابة رمز [صورة: Designmodo](رصيد الصورة: Designmodo)

إذا كنت تحب Bootstrap ولكنك لا تريد الخوض في التفاصيل الأولية ، فإن Startup 3 هو الطريقة السهلة ؛ إنه تطبيق عبر الإنترنت يحتوي على قوالب وموضوعات مضمنة لإنشاء مواقع الويب استنادًا إلى Bootstrap 4 مع شبكة من 12 عمودًا. يمكنك إنشاء موقعك دون كتابة تعليمات برمجية باستخدام واجهة السحب والإفلات ، لكنك ستحتاج إلى بعض المعرفة بـ HTML و CSS لإنهاء الأمور.

20. Vue.js

أدوات تصميم الويب: vue.js screengrab

لا تستخدم في مكتبات JavaScript المعقدة؟ Vue.js مثالي لك [الصورة: Vue.js]

Vue.js هو إطار عمل لبناء واجهات المستخدم ، ويستخدم DOM الظاهري. كما يوحي الاسم ، تركز مكتبة Vue الأساسية على طبقة العرض.

انظر إلى مثال رمز مأخوذ من مستندات Vue ، والذي يستخدم مدخلات المستخدم ويوضح أناقة المكتبة. سنبدأ بـ HTML:

{{ message }}

Reverse Message

لاحظ معالج v-on المخصص الذي يستدعي ملف عكس الرسالة طريقة. ها هي JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

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

21. معمل الأنماط

أدوات تصميم الويب: صورة شاشة لـ Pattern Lab

يعتمد مختبر الأنماط على التصميم الذري [الصورة: معمل الأنماط]

Pattern Lab هو أداة تصميم جميلة تعتمد على الأنماط تم إنشاؤها بواسطة Dave OIsen و Brad Frost. يعتمد على مفهوم التصميم الذري ، والتي تنص على أنه يجب عليك تقسيم تصميمك إلى أصغر أجزائه - الذرات - ودمجها لتشكيل مكونات أكبر قابلة لإعادة الاستخدام - جزيئات وكائنات - يمكن تحويلها بعد ذلك إلى قوالب قابلة للاستخدام.

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

22. تصميم المواد

التصميم متعدد الأبعاد هو مجموعة من المبادئ من Google [صورة: Google]

التصميم متعدد الأبعاد هو مجموعة من المبادئ من Google [صورة: Google](رصيد الصورة: جوجل)

تصميم المواد هي لغة مرئية من Google تهدف إلى الجمع بين المبادئ الكلاسيكية للتصميم الجيد والابتكارات في التكنولوجيا والعلوم لإنشاء أساس متماسك ومرن لموقعك على الويب.

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

إنشاء لافتة JS

(رصيد الصورة: Future / Toa Heftiba ، Unsplash)

انضم إلينا في أبريل 2020 مع تشكيلتنا من نجوم JavaScript المتميزين في GenerateJS - المؤتمر الذي يساعدك على بناء JavaScript أفضل. احجز الآن في generateconf.com

الصفحة التالية: أدوات تصميم مواقع الويب المتخصصة لمعالجة أي مشكلة

  • 1
  • اثنين

الصفحه الحاليه: صفحة 1

الصفحة التالية الصفحة 2