10 أدوات نماذج أولية لا بد من امتلاكها لمصممي الويب

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

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

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

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

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

إنفيجن

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

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

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

تطبيق InVision

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

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

بروتوبي

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

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

• منحنى تعليمي فعال للغاية ، اشترك وابدأ في البناء على الفور.
• استخدم الميزات المتقدمة لإضافة عناصر تفاعل عميق ، بما في ذلك حركات الإيماءات الأكثر شهرة.
• استفد من المتغيرات والصيغ لتنفيذ طبقات التصميم المخصصة. يساعد على إضافة تفاعلات أكثر واقعية.
• حوّل تصميماتك من Sketch أو Adobe XD أو Figma إلى نماذج أولية تفاعلية للغاية في ProtoPie ، وارفع مستوى سير عملك بالكامل.
  
• متوفر لنظامي iOS و Android حتى تتمكن من اختبار نماذجك الأولية على أي جهاز على الفور.

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

بروتويو

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

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

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

فيما يلي بعض الميزات الأخرى التي ستحب استخدامها:

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

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

مسودة

ماذا عن أداة التصميم التي تمنحك كل اللبنات الأساسية للنماذج الأولية خارج الصندوق؟ هذا هو المنطلق لـ Draftium. تطبيق ممتاز يركز على التعاون في الوقت الفعلي بين فريق التصميم الخاص بك. واحدة من الميزات الأفضل لـ Draftium هي مكتبة القوالب التي يزيد عددها عن 300+.

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

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

يستخدم المستقلون والوكالات والمصممين في جميع أنحاء العالم أداة تصميم Product Hunt 2018 هذه لإنشاء نماذج أولية مثالية للصور.

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

جاستن ميند

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

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

نحن لسنا متحمسين فقط لمنتجنا ولكننا متحمسون لكل شيء آخر يتعلق بتقديم أفضل تجربة ممكنة لمستخدمينا. نحن نعمل بجد لتزويد جميع عملاء Justinmind في جميع أنحاء العالم بخدمة دعم استثنائية.

طاقم جوستينميند

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

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

المحور

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

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

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

فيما يلي بعض الميزات البارزة الأخرى:

• سواء كنت تنشئ رسومًا بيانية أو رحلات عميل أو إطارات سلكية ، يساعدك Axure RP في توثيق المشكلات وإطلاع الجميع على نفس الصفحة.
• احصل على إعلامات حول أحدث التغييرات والمناقشات عبر البريد الإلكتروني أو Slack أو Microsoft Teams.
• العمل مع المشاريع عالية الدقة ومنخفضة الدقة.
• قم بإنشاء تفاعلات معقدة مثل تسجيل دخول المستخدم ومعاينة الوسائط أثناء التنقل.

في الوقت الحالي ، يتوفر Axure لأنظمة Windows و macOS. علاوة على ذلك ، فإن أول 30 يومًا لك هي في المنزل (فترة تجريبية). يجب أن يكون هذا أكثر من وقت كافٍ للعمل في العديد من المشاريع ومعرفة أين يكون Axure مناسبًا لاحتياجاتك.

المبروز

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

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

أطلقنا Framer منذ أربع سنوات لبناء طريقة بسيطة للأشخاص لإضفاء الحيوية على تصاميمهم الثابتة باستخدام التعليمات البرمجية. Now Framer هو تصميم تفاعلي كامل ونماذج أولية وأداة تعاون موثوقة من قبل الفرق في Dropbox و Pinterest و Twitter والمزيد. وقد بدأنا للتو.

Framer، Inc.

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

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

استوديو اوريغامي

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

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

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

ألفا

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

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

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

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

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

مرحلة

من المحتمل أن تكون المرحلة هي أحدث منتج في هذه الجولة. في الواقع ، التطبيق متاح فقط كـ "وصول مبكر" ولكن سيتم إصداره في وقت ما في عام 2019. جاء الإعلان الأول في عام 2018 ، حيث أوضح الفريق ما هي رؤيتهم وكيف تبدو خارطة الطريق. بكل إنصاف ، يبدو هذا وكأنه أداة تصميم ويب جيدة لإضافتها إلى ذخيرتك.

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

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

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

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

خاتمة

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

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

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