نماذج مواقع الويب: 4 طرق شائعة للاستكشاف

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

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

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

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



إنشاء لافتة JS

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

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

01. أدوات تجربة المستخدم من طرف إلى طرف

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

كيف ترسم الفراء في الفوتوشوب

UXPin

تفتخر UXPin بالنماذج الأولية القوية ، والنماذج بالأحجام الطبيعية ، والوثائق ، وتسليم المطورين

إذن ، كيف تتراكم هذه الأدوات لإنشاء نماذج بالحجم الطبيعي؟ يمكنهم معالجتها دون أي مشكلة - وبعد ذلك البعض. باستخدام UXPin ، على سبيل المثال ، يمكنك إنشاء نماذج بالأحجام الطبيعية مع حالات وتفاعلات متعددة. حتى أنه يحاكي بعض ميزات Photoshop و Sketch من خلال تضمين أداة Pen.

على الجانب الآخر، استوديو من InVision ، يسمح ببعض تحرير الرسوم المتحركة الأنيق ؛ في حين Adobe XD يتيح لك فتح ملفات Photoshop و Sketch داخل تصميمات XD الخاصة بك ، وتطبيق الألوان والرموز والتدرجات الخطية وأنماط الأحرف.

أفضل كراسة الرسم للقلم والحبر

استوديو InVision

يهدف Studio by InVision إلى إنشاء سير عمل شامل

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

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

  • الاخلاص : ما مدى قوة أداة التصميم المرئي والتفاعلي؟
  • التناسق : ما الميزات التي تضمن اتساق التصميم في عملك؟
  • صحة : هل العناصر التي تعمل معها تعكس 'مصدر الحقيقة' في مؤسستك؟
  • تعاون : هل يمكنك التعاون مع أصحاب المصلحة أو المصممين الآخرين؟
  • تسليم المطور : كيف تنشئ الأداة المواصفات والأصول للمطورين؟

02. أدوات مخصصة بالحجم الطبيعي

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

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

المبروز

كم من الوقت يستغرق تجفيف الألوان المائية
أدوات مثل Framer متخصصة في التفاعلات

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

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

03. برمجيات التصميم الجرافيكي

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

فوتوشوب CC

يوفر Photoshop تحكمًا دقيقًا ، ولكن قد يكون مبالغة في استخدام نماذج بالأحجام الطبيعية البسيطة

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

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

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

الفرق بين محطة العمل وجهاز كمبيوتر الألعاب

يمكن سحب النماذج بالأحجام الطبيعية إلى UXPin

يمكن سحب النماذج التي تم إنشاؤها في Photoshop أو Sketch وإسقاطها في UXPin

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

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

04. نماذج بالحجم الطبيعي مشفرة

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

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

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

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

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

اقرأ أكثر: