استخدام Wireframes لتبسيط عملية التنمية الخاصة بك
يعد إنشاء wireframe إحدى الخطوات الأولى التي يجب اتخاذها قبل تصميم موقع ويب.
يساعدك wireframe على تنظيم وتبسيط العناصر والمحتوى داخل موقع ويب وهو أداة أساسية في عملية التطوير.
إن wireframe هو في الأساس تمثيل مرئي لتخطيط المحتوى في تصميم موقع الويب .
يعمل wireframe كنموذج أولي يُظهر موضع ميزات الصفحة ، مثل الرأس والتذييل والمحتوى والأشرطة الجانبية والتنقل.
كما يحدد أيضًا وضع العناصر داخل مناطق المحتوى هذه. إذا كنت ترغب في تطوير موقع يتطابق بدقة مع متطلبات العميل ويقلل من تنقيحات المشروع ، فإن wireframing سيبقيك على الطريق الصحيح.
فوائد سلكيالأرفف
يمنح إنشاء إطار سلكي العميل والمطور والمُصمِّم فرصةً لإلقاء نظرة فاحصة على بنية موقع الويب ويتيح لهم إجراء التنقيحات بسهولة في وقت مبكر من العملية.
يوفر الإطار السلكي المزايا الرئيسية التالية:
- فهو يمنح العميل عرضًا مبكرًا عن قرب لتصميم الموقع (أو إعادة التصميم).
- يمكن أن يلهم المصمم ، مما أدى إلى عملية مبتكرة أكثر مرونة.
- يعطي المطور صورة واضحة للعناصر التي سيحتاجون إلى رمز.
- يجعل الدعوة إلى العمل على كل صفحة واضحة.
- من السهل التكيف ويمكن عرض تخطيط أقسام عديدة من الموقع.
أدوات لتطوير السلكي
لديك العديد من الأدوات للاختيار من بينها عند إنشاء wireframe:
- دائمًا ما يكون الرسم اليدوي على الورق نقطة بداية جيدة لأي مصمم. يوفر طريقة سريعة وسهلة للتركيز والتنظيم. إذا كنت دقيقًا جدًا في الرسم ، يمكنك حتى استخدام هذا كإطار سلكي نهائي. (انظر الشكل 1.)
- مخطط انسيابي أو برنامج رسم خرائط للعقل ، مثل برنامج Visio . تأتي خيارات البرامج هذه مزودة بعناصر مضمّنة مسبقًا تسمح لك بإنشاء عروض تخطيط انسيابي لسلافة wireframe الخاصة بك بسهولة.
- برمجيات الويب النمطي ، مثل Gliffy أو Balsamiq . تم إنشاء أدوات كهذه خصيصًا لغرض توليد إطارات سلكية ، ولديها إمكانات سهلة الاستخدام للنماذج الأولية.
- برامج الرسومات ، مثل Photoshop أو Illustrator. وتتمثل فائدة استخدام هذه الأدوات في إمكانية تحويل إطار العمل السلكي مباشرة إلى نموذج مصور من تصميم الموقع ؛ ومع ذلك ، الجانب السلبي هو أنه سيكون عليك إنشاء جميع العناصر باليد.
- (X) تشبه إطارات wireframes HTML تقريباً المواقع الفعلية نفسها. يمكنك وضع wireframe مع التعليمات البرمجية قبل تطبيق الأنماط ، أو يمكنك إنشاء تخطيط بدقة عالية الدقة ، يشبه إلى حد كبير التصميم النهائي. (انظر الشكل 2).
في نهاية المطاف ، يجب على المطور أو المصمم اختيار الأداة التي يفضلونها. أنا شخصياً استخدم Photoshop لأني أحب الطريقة التي تنظم بها العملية وبسهولة يمكنني تحويل الملف إلى نموذج معين.
مثال على إطار سلكي
يعتمد مستوى التفاصيل في إطار سلكي على عدة عوامل ، منها: مقدار التوجيه والمحتوى الذي قدمه العميل ، ومدى تعقيد المحتوى ، ومدى مساهمته في العملية ، ومقدار التفاصيل التي ترغب في تضمينها .
في ما يلي أمثلة لإطارات الأسلاك التي تم إنشاؤها باستخدام أدوات مختلفة وتعرض مستويات مختلفة من التفاصيل والألوان:
الشكل 1: تم استخدام هذا المخطط السلكي البسيط لموقع شركاء Coastal Capital على الويب (الذي تم تغيير اسمه الآن باسم شركاء Broad Reach Retail) لإنشاء نماذج بالأحجام الطبيعية ، وفي النهاية ، التصميم النهائي. بواسطة مايك روده .
الشكل 2: إطار HTML ذو دقة منخفضة للغاية. يفيد في عرض شكل الموقع قبل إضافة التصميم. مفيدة جدا للمستخدمين المعاقين بصريا.
الشكل 3: إطار سليل منخفض الدقة لـ احتضان الحيوانات الأليفة الجماعة بقلم جيسي بينيت-تشامبرلين من 31 ثري .
الشكل 4: نموذج أولي لأداة مؤتمرات اجتماعية مبنية على Tiddlywiki للاستخدام في Le Web 3. الملاحظات لمرافقتها في tiddleleweb.tiddlyspot.com . إطار سلكي بواسطة فيل هوكسورث.
الشكل 5: يعتمد هذا على الاستخدام المتقدم لنظام نشر المدونات (WordPress). بواسطة Mattheiu Mingassson أو Activeside استراتيجيات الإنترنت والاستشارات .
الشكل 6: إطار سلكي لـ احتضان الحيوانات الأليفة الجماعة بقلم جيسي بينيت-تشامبرلين من 31 ثري .
الشكل 7: إطار سلكي مع لون وصور. صفحة المؤلف wireframe من قبل Bokhandel .
الشكل 8: إطار سلكي آخر مع لون. من جانب Mattheiu Mingassson من Activeside استراتيجيات الإنترنت والاستشارات .
أفضل الممارسات
لتحقيق أفضل النتائج ، إليك عدة أشياء مهمة يجب وضعها في الاعتبار عند تطوير إطار سلكي:
- بساطة. المفتاح هو إبقاء الأمر بسيطًا بما فيه الكفاية ليصبح واضحًا للعميل وأن يكون مرناً للمصمم ، ولكنه مفصل بما فيه الكفاية لتوجيه المبرمج. كما ذكرنا ، يمكنك إنشاء إطار سلكي عالي الدقة ، ولكن القيام بذلك في وقت مبكر من عملية التطوير قد يكون مربكًا للعميل ، الذي قد يخطئه في مسودة نهائية.
- العمل بتدرج الرمادي. عند إنشاء عناصر لسلك إطار ، فمن الأفضل العمل بتدرج الرمادي بحيث يمكنك التركيز على التخطيط دون تشتيت الانتباه بواسطة التصميم. إذا تم إعطاؤك شعارًا بالألوان الكاملة ، فحوله إلى تدرج الرمادي أيضًا. للتمييز بين العناصر المختلفة وتصنيفها ، قم بعرض الأشكال والخطوط العريضة بظلال مختلفة من اللون الرمادي.
- استخدم wireframes جنبًا إلى جنب مع ملف sitemap. إن wireframe عبارة عن تمثيل مرئي لملف sitemap جيد ، وليس بديلاً. يعد sitemap أداة مفيدة لأي موقع ويب وسيكون بالتأكيد مفيدًا للإشارة إليه أثناء عملية التطوير.
- ركز على النتيجة المرجوة. احصل على فهم واضح للطريقة التي يريد بها عميلك من المستخدمين الرد على الصفحة قبل إنشاء إطار العمل السلكي الخاص بك. يجب أن تكون العبارات التي تحث المستخدم على اتخاذ إجراء واضحة للغاية بمجرد النظر إلى إطار العمل السلكي.
- إنشاء إطار سلكي كامل الحجم إذا كان لموقع ويب. سيعطي هذا تمثيلًا أكثر دقة للصفحة الفعلية.
- تخطيط العناصر عن طريق تأمين المحتوى مقدمًا. في سيناريو أفضل حالة ، سيكون العميل قد زودك بالفعل بالعناصر التي يجب أن تظهر في كل صفحة ، مثل الشعار ، والإعلانات ، ومشغلات الفلاش والفيديو ، والميزات ، وأقسام التنقل ، والعناصر الجانبية ، والعناوين ، والتذييل. إذا لم تكن لديك هذه المعلومات حتى الآن ، فابدأ بالاجتماع مع عميلك واحصل على (أو أنشئ) ملف sitemap. إذا كنت تعيد تصميم العناصر الحالية ، فيمكنك جمعها من مراجعة دقيقة للموقع. في هذا السيناريو ، تأكد أولاً من تأكيد العميل الخاص بك أنك لن تكون مطالبًا بإضافة عناصر أو إزالتها ، لأن عدم امتلاك فهم واضح لتوقعاته سيؤدي إلى إبطاء العملية.
التدرج الرمادي مقابل اللون
عند إنشاء إطار سلكي ، يساعد العمل بتدرج الرمادي على الحفاظ على التركيز على الوظيفة الأساسية للعملية ، وهي وضع اللمسات الأخيرة على التصميم ، وليس التصميم (راجع الشكل 3). هناك خطر آخر يتمثل في العمل بالألوان هو أن العميل قد يخطئ في إطار السلكي الخاص بالحقل النموذجي النهائي.
ومع ذلك ، يمكن أن يكون اللون مفيدًا عند عرض موقع كل دعوة تحث المستخدم على اتخاذ إجراء. نظرًا لأن صفحة واحدة قد تحتوي على عدة عبارات تحث المستخدم على اتخاذ إجراء ، فمن المهم تحديد أولوياتها. يمكن أن تساعد الإطارات المختارة في تحديد العبارة التي تحث المستخدم على اتخاذ إجراء لجذب نظر المستخدم أولاً.
لقد عملت مؤخرًا على مشروع يحمل شعارًا نابضًا بالحياة ، والذي كان ، في هذه الحالة ، الدعامة الأساسية للعمل لأنه يمثل مجلة تم إطلاقها حديثًا.
عند استخدام اللون ، يمكنك معرفة ما إذا كانت عناصر معينة تغلب على العبارة الأساسية التي تحث المستخدم على اتخاذ إجراء. ولا تزال هذه العملية تندرج تحت نطاق إطار السلكي ، بدلاً من تصميم النماذج بالحجم الطبيعي ، لأن مواقع العناصر لا تزال قيد التحديد.
يمكن أن يضاف اللون تدريجياً إلى الإطار السلكي كلما تقدم المشروع ، وهو أكثر كفاءة من المضي قدماً في النماذج بالأحجام الطبيعية قبل أن يتم إغلاق موقع العناصر. عند القيام بذلك ، يمكن أن تساعدك برامج الرسومات على التبديل مباشرة إلى نموذج بالأحجام الطبيعية عندما تكون جاهزة.
ما يجب تجنبه
مثل الجوانب الأخرى من عملية التطوير الخاصة بك ، يمكن أن يكون إطار العمل المزوَّد (wireframing) عثراته إذا لم يتم تنفيذه بشكل صحيح. إليك بعض النصائح حول ما يجب تجنبه لتحقيق أفضل النتائج:
- الكثير يحدث على الصفحة. اترك مساحة بيضاء وافرة بحيث لا يبدو التصميم مشغولاً أو مزدحمًا.
- التركيز على اللون والتصميم. Wireframing هو من أجل تحديد تخطيط وموقع العناصر. على الرغم من أن إطار العمل السلكي يمكن أن يؤثر في التصميم ، إلا أن إضافة الرسومات واللون قد لا يؤدي إلا إلى صرف الانتباه عن الهدف.
- الكثير من التفاصيل. يمكنك دائمًا إضافة المزيد من التفاصيل في وقت لاحق ، ولكن إذا قمت بتضمين الكثير في البداية ، فقد يخلط العميل الإطار السلكي للنموذج النهائي.
إذا كنت مهتمًا بمعرفة المزيد عن wireframes ، مجلة Wireframe مورد رائع يشارك العينات ، ويناقش التقنيات ، ويحل المشاكل المتعلقة بهندسة المعلومات.
يوفر إنشاء wireframe لموقع العميل الخاص بك أداة اتصال فعالة لجميع الأطراف المعنية.
حتى بناء إطار سلكي بسيط سيوفر الوقت على المدى الطويل ويسهل عملية التطوير للمصمّم والمطور والعميل.
مكتوبة حصرا ل WDD من قبل اريك شيفر.
هل تستخدم wireframes للتصميم الخاص بك؟ ما هي بعض من أفضل الطرق لإنشاء wireframes فعالة؟