ما هو موقع Wireframe؟

تعلم كيفية استخدام Wireframes بسيطة لبدء التصميمات الخاصة بك

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

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

الأشياء لتضمينها في صفحة الويب إطارًا سلكيًا:

كيفية بناء سلكي بسيط على شبكة الإنترنت

إنشاء إطار صفحة ويب باستخدام أي قصاصة من الورق لديك في متناول يدك. وإليك كيف أفعل ذلك:

  1. ارسم مستطيلاً كبيرًا - يمكن أن يمثل هذا إما الصفحة بأكملها أو الجزء المرئي فقط. عادةً ما أبدأ بالجزء المرئي ، ثم قم بتوسيعه لتضمين العناصر التي ستكون في الجزء السفلي غير المرئي من الصفحة.
  2. رسم التخطيط - هل هو 2 أعمدة ، 3 أعمدة؟
  3. أضف مربعًا لرسم رأس - ارسم فوق الأعمدة إذا كنت تريد أن يكون رأسًا واحدًا فوق الأعمدة ، أو أضفه فقط إلى المكان الذي تريده.
  4. اكتب "العنوان" حيث تريد أن يكون عنوان H1.
  5. اكتب "Sub-Head" حيث تريد H2 وعناوين أقل. يساعد ذلك إذا جعلتها متناسبة - h2 أصغر من h1 ، h3 أصغر من h2 ، إلخ.
  6. أضف في صناديق للصور الأخرى
  7. إضافة في الملاحة. إذا كنت تخطط لعلامات التبويب ، ارسم مربعات فقط ، واكتب "التنقل" أعلى الصفحة. أو ضع القوائم النقطية في الأعمدة حيث تريد التنقل. لا تكتب المحتوى. مجرد كتابة "الملاحة" أو استخدام خط لتمثيل النص.
  8. أضف عناصر إضافية إلى الصفحة - حدد ما تحتوي عليه من نص ، ولكن لا تستخدم نص المحتوى الفعلي. على سبيل المثال ، إذا كنت تريد زرًا للحث على اتخاذ إجراء في الجزء السفلي الأيسر ، فضع صندوقًا هناك ، ثم ضع عليه علامة "عبارة تحث المستخدم على اتخاذ إجراء". لا تكتب "اشتر الآن!" في هذا المربع.

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

لماذا تعتبر الأقمشة الورقية هي الأفضل للمسودات الأولى

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

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