اذهب إلى المحتوى

أدوات مجانية لرسم الإطارات الهيكلية Wireframe لمواقع الإنترنت والتطبيقات


Mohammad Hout

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

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

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

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

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

أداة فيجما Figma

كل ما تحتاجه في أداة واحدة.

01image.png

  • نوع المنتج: تطبيق عبر المتصفح.

  • حدود النسخة المجانية: 3 مشاريع ومحررَين اثنين.

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

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

أداة ميرو Miro

السبورة التعاونية.

02image.png

  • نوع المنتج: تطبيق عبر المتصفح.
  • حدود النسخة المجانية: 3 سبورات.

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

أداة أدوبي اكس دي Adobe XD

كل ما تحتاجه في أداة واحدة.

03image.png

  • نوع المنتج: تطبيقات سطح المكتب لنظامي التشغيل ويندوز وماك.
  • حدود النسخة المجانية: كامل مزايا البرنامج، لكن خلال مدة تجريبية أقصاها 7 أيام فقط.

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

أداة InVision Studio

كل ما تحتاجه في أداة واحدة.

04image.png

  • نوع المنتج: تطبيقات سطح المكتب لنظامي التشغيل ويندوز وماك.
  • حدود المستوى المجاني: 3 مستندات، 10 مستخدمين.

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

تتيح لك نسخته المجانية إمكانية إنشاء 3 مستندات وتضمين 10 مستخدمين نشطين؛ أما حساب المحترفين، فيتيح لك إمكانية إنشاء عدد غير محدود من المستندات، لكنه رغم ذلك يَحُد من المستخدمين النشطين إلى 15 مستخدمًا فقط.

أداة Wireframe.CC

أداة تصميم إطارات هيكلية.

05image.png

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

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

أداة كاكو Cacoo

أداة الرسم التخطيطي.

06image.png

  • نوع المنتج: تطبيق عبر المتصفح.
  • حدود النسخة المجانية: 6 صفحات.

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

أداة Jumpchart

أداة تخطيط المواقع وإدارة المشاريع.

07image.png

  • نوع المنتج: تطبيق عبر المتصفح.
  • حدود النسخة المجانية: مشروع واحد، مع 10 صفحات، ومستخدمين اثنين، وتخزين 10 ميجابايت.

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

أداة MockFlow

أداة تصميم واجهة المستخدم.

08image.png

  • نوع المنتج: تطبيق عبر المتصفح (تطبيقات سطح المكتب لنظامي التشغيل ماك وويندوز متوفرة فقط مع النسخ المدفوعة).
  • حدود النسخة المجانية: مشروع واحد، و3 صفحات.

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

تطبيق Wirefy

  • تطبيق إنشاء أطر هيكلية وظيفية.
  • نوع المنتج: تطبيق عبر المتصفح.
  • الترقية: مجاني.

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

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

المزيد من الخيارات

رغم أنه من المؤكد أن أحد هذه الأدوات المذكورة أعلاه ستلائم متطلباتك، إلا أننا سنذكر بعض الأدوات الأخرى التي يمكنك استكشافها:

  • Draw.io: وهو تطبيق عبر المتصفح مفتوح المصدر ومخصص لرسم المخططات. يحتوي على مكتبة كبيرة من الأشكال ويدعم الطبقات، كما يتيح لك إمكانية حفظ ملفاتك بتنسيق XML على جوجل درايف، أو دروب بوكس، أو GitHub.
  • Mydraft.cc: وهي أداة إطار هيكلي مفتوحة المصدر تعمل عبر المتصفح ولا تتطلب منك إنشاء حساب، بحيث تبقى ملفاتك على موقع الأداة، لتعود اليها لاحقًا عبر حفظ رابط مشروعك.
  • Whimsical: تطبيق تعاوني للعصف ذهني، يعمل في بيئة المتصفح.

ربما لاحظت أن بعض التطبيقات الرئيسية في هذا المجال لم تذكر في هذه القائمة مثل (بالساميك Balsamiq، وأكسورAxure، وجليفي Gliffy، ويو اكس بين UXPin، وموكابس Moqups)، إلا أن هذا المقال قد خُصِّص لكي يشمل فقط الأدوات المجانية، لكن في حال لم تكن الميزانية مشكلة، فيمكنك بالتأكيد تجربة أحد التطبيقات المدفوعة، والتي تأتي جميعها بنسخة تجريبية محدودة المدة حتى تتمكن من تقييمها قبل الشراء.

ترجمة -وبتصرّف- للمقال 9 Free-to-Use Wireframing Tools لصاحبته Kasturika.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...