ما هو الهيكل الشبكي؟ سيظهر لك هذا البرنامج التعليمي لتصميم UX.

الخطوة الأولى لتصميم موقع على شبكة الإنترنت: التخطيط السلكي.

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

تمنحك Wireframes فكرة عن صفحات الهيكل العام التي ستتخذها ، وكيفية تدفق التنقل.

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

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

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

فيما يلي بعض الخطوات التي سنغطيها في هذه المقالة (وفي الفيديو التعليمي المصاحب):

  1. تخطيط خريطة الموقع
  2. إنشاء إطار سلكي للصفحة الرئيسية
  3. استخدام العلامات في الإطارات الشبكية
  4. مكونات الهيكل السلكي (الرأس والقائمة والتذييل)
  5. وضع إطار سلكي لصفحة الميزات وصفحة الاتصال
  6. إطارات سلكية مستجيبة للجوّال

الخطوة رقم 1: تخطيط خريطة الموقع

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

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

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

توفر لك خرائط المواقع نظرة عامة موجزة عن مكان وجود العناصر وكيفية ترابطها.

في مثالنا ، سننشئ خريطة موقع بسيطة تحتوي فقط على الصفحة الرئيسية وصفحة الميزات وصفحة اتصل بنا.

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

الخطوة رقم 2: إنشاء إطار سلكي للصفحة الرئيسية

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

  • مربعات مع خطوط قطرية من خلالها لتمثيل الصور
  • خطوط أفقية لتمثيل فقرات النص
  • ودائرة بها حرف L لتمثيل شعارك.

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

يفيد هذا أيضًا في تنظيم كل قسم في مستطيلات يمكننا لاحقًا نسخها ولصقها على صفحات أخرى (خاصةً في الرأس والتذييل).

دعونا أيضًا ننشئ قسمًا آخر لمقدمة عن الشركة (من نحن) وقسم الراعي (مع شعارات وصور الرعاة).

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

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

الخطوة # 3: استخدام الترميز في Wireframes

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

في مثالنا ، لنقم بترميز الصفحة الرئيسية وتسمية كل جزء من المحتوى بنص أحمر.

تتضمن الجوانب التي تريد ترميزها عناصر مثل الأقسام والعناوين ونماذج جهات الاتصال وما قد تكون الصور.

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

الخطوة # 4: أضف مكونات أخرى للإطار السلكي مثل Header و Menu و Footer

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

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

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

الخطوة رقم 5: صفحة الميزات وصفحة الاتصال

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

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

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

الخطوة رقم 6: اصنع إطارًا سلكيًا مستجيبًا للجوال

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

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

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

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

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

استنتاج

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

يعتبر Wireframing هو الأسلوب المثالي لذلك ، لأنه يستغرق وقتًا أقل بكثير من قيام المصمم بعمل نموذج أولي لواجهة المستخدم.

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

إطارات شبكية سعيدة.

آمل أن يحظى هذا المقال بإعجابكم. إذا كنت لا تعرف من أنا ، فأنا أدريان من أستراليا؟ لدي قناة صغيرة على Twitter و YouTube ، لذا إذا كنت تريد معرفة المزيد عني أو الاستمتاع بالمحتوى الخاص بي ، فراجعني في وقت ما؟

  • يوتيوب: //youtube.com/adriantwarog
  • تويتر: //twitter.com/adrian_twarog