كيفية الحصول على قيمة من wireframes

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

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

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

عملية مصمم جديد:

الصورة الائتمان: جولي تشو

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

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

عملية مصمم كبير

الصورة الائتمان: جولي تشو

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

طلاء سيارة مكسورة ، بصرف النظر عن مدى أهمية وظيفة الطلاء ، لا يجعل السيارة مفيدة.

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

إطارات سلكية مفيدة

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

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

وانشاء

هيا بنا نبدأ. احصل على دفتر ملاحظات (أنا أحب Borden & Riley’s Paris Paper for Pens) وارسم شبكة تضم 20 مستطيلًا صغيرًا على الأقل. إذا كنت تعمل على واجهة مستخدم جوال ، فاجعلها تقريبًا نسبة العرض إلى الارتفاع للجهاز الذي تصمم له. بالنسبة لواجهة مستخدم سطح المكتب ، اجعلها نسبة العرض إلى الارتفاع لشاشة الكمبيوتر.

هذه العملية

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

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

إذا كنت تحاول العثور على أفضل طريقة لتخطيط شاشة ، فيمكنك إنشاء مفتاح مثل: T (title) ، V (فيديو) ، RV (مقاطع فيديو ذات صلة) ، Sub (التنقل الفرعي) ، إلخ ، مما يسمح عليك التركيز على التخطيط بدلاً من عناصر واجهة المستخدم:

اسكتشات لصفحة فيديو عميل لم يتم إصدارها

أو ربما links للارتباطات بالوثائق و للتحليلات:

رسومات لواجهة مستخدم لوحة القيادة غير المفرج عنها

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

اسكتشات لتطبيق iOS في iero

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

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

كرر العملية

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

الآن ، خذ الأفكار الواعدة وارسمها بأمانة أعلى. ارسم مربعات أكبر على صفحة جديدة — أجد أن المربعات الأربعة في صفحة بحجم A4 تعمل بشكل جيد. في هذه المرحلة ، نحاول معرفة ما إذا كانت الأفكار تصمد بمزيد من التفاصيل:

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

الخطوات التالية

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

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

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

المكافأة: تطبيق هذه التقنية على أشياء أخرى غير التصميم

بينما كنت أعمل في Medium ، أخبرني Nick Fisher ، الذي كتب العديد من التغريدات متوسطة الحجم ، أنه كثيرا ما يكتب تغريدة بعشر طرق مختلفة قبل اختيار واحد للنشر. يجبر نفسه على كتابتها بطرق مختلفة قبل أن يستقر على الطريق الصحيح.