إعادة تصميم متجر تصميم داخلي رقمي (دراسة حالة)

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

لدي عميل يسمى Design Cafe (دعنا نسميه DC). إنه متجر تصميم داخلي مبتكر أسسه اثنان من المهندسين المعماريين الموهوبين للغاية. إنهم ينتجون تصميمات مخصصة للسوق الهندي ويبيعونها عبر الإنترنت.

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

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

انطلاق

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

مقابلات أصحاب المصلحة

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

نقاط الألم الرئيسية لديهم:

• لم يكن موقع الويب مستجيبًا.
• لم يكن هناك تمييز واضح بين العملاء الجدد والعائدين والمحتملين .
• لم يتم الإبلاغ عن نقاط بيع DC بشكل واضح.

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

تحديد الأهداف

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

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

مقاييس رئيسية

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

• تقصير وقت التحويل (الوقت الذي يحتاجه المستخدم للاتصال بـ DC) ،
• زيادة معدل طلب الاستمارة ،
• زيادة الرضاء العام الذي يحصل عليه المستخدمون من موقع الويب.

سنتعقب هذه المقاييس عن طريق إعداد أحداث Google Analytics بمجرد أن يكون الموقع على الإنترنت والتحدث مع العملاء المتوقعين الذين يأتون إلى المتجر من خلال موقع الويب.

نصيحة مفيدة: لا تركز على الكثير من المقاييس. يكفي حفنة من أهمها. قياس الكثير من الأشياء سيضعف النتائج.

اكتشاف

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

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

بيانات

يمكننا الإشارة إلى بعض بيانات Google Analytics من موقع الويب:

• ذهب معظم المستخدمين إلى المطبخ ، ثم إلى غرفة النوم ، ثم إلى غرفة المعيشة.
• ربما يرجع معدل الارتداد المرتفع بنسبة 80٪ + إلى سوء فهم رسالة العلامة التجارية والتدفقات غير الواضحة وعبارات الحث على اتخاذ إجراء (CTAs).
• كانت حركة المرور في الغالب متنقلة.
• وصل معظم المستخدمين إلى الصفحة الرئيسية ، 70 ٪ منهم من الإعلانات و 16 ٪ مباشرة (معظمهم من العملاء العائدين) ، والباقي مقسم بالتساوي بين Facebook و Google Search.
• 90 ٪ من حركة المرور على وسائل التواصل الاجتماعي جاءت من Facebook. قد يكون من المفيد توسيع نطاق الوعي بالعلامة التجارية إلى Instagram و Twitter.

المنافسين

هناك الكثير من المنافسة المحلية في هذا القطاع. فيما يلي بعض الأنماط المتكررة:

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

المستخدمون

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

تحدثنا مع خمسة مستخدمين (ثلاثة عملاء حاليين واثنين من العملاء المحتملين) وأرسلنا استبيانًا إلى 20 آخرين (خلط العملاء الحاليين والمحتملين ؛ انظر استبيان Design Cafe).

مقابلات المستخدم

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

ارتبك جميع المستخدمين بشأن الهدف الرئيسي للموقع. بعض آرائهم:

• "إنه يفتقر إلى التدفق المناسب."
• "أحتاج إلى مزيد من الوضوح في العملية ، لا سيما فيما يتعلق بالجداول الزمنية."
• "أحتاج إلى مزيد من المعلومات التعليمية حول التصميم الداخلي."

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

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

كانت اللمسة الشخصية وخدمة العملاء والأسعار وجودة المواد هي الدوافع الرئيسية لاختيار العاصمة. أصر الناس على أن يكونوا قادرين على رؤية سعر كل عنصر على الصفحة في أي وقت (التصميم السابق لم يكن له أسعار على الملحقات).

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

الدراسات الاستقصائية

نتائج الاستطلاع تتداخل في الغالب مع المقابلات:

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

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

تخطيط

نظرة عامة على رحلات المستخدم

ساعدنا التحدث مع العملاء في اكتساب رؤية مفيدة حول السيناريوهات الأكثر أهمية بالنسبة لهم. قمنا بعمل مخطط تقارب مع كل ما جمعناه وبدأنا في تحديد الأولويات والجمع بين العناصر في أجزاء.

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

كانت النتيجة سبع عبارات مشكلة من وجهة نظر قررنا تصميمها من أجل:

1. يحتاج العميل الجديد إلى مزيد من المعلومات حول DC لأنه يحتاج إلى دليل على المصداقية.
2. يحتاج العميل العائد إلى الوصول السريع إلى التصميمات لأنهم لا يريدون إضاعة الوقت.
3. يجب أن يكون جميع العملاء قادرين على تصفح التصميمات في أي وقت.
4. يرغب جميع العملاء في تصفح التصميمات ذات الصلة بأذواقهم ، لأن ذلك سيقصر وقت البحث.
5. يحتاج العملاء المحتملون إلى طريقة للتواصل مع DC من أجل شراء تصميم.
6. يحتاج جميع العملاء ، بمجرد قيامهم بالطلب ، إلى البقاء على اطلاع دائم بحالة طلباتهم ، لأنهم بحاجة إلى معرفة ما يدفعون مقابله ومتى سيحصلون عليه.
7. يرغب جميع العملاء في قراءة دراسات الحالة حول المشاريع الناجحة ، لأن ذلك سيطمئنهم على أن DC على دراية بأمورها.

باستخدام هذه القائمة ، توصلنا إلى حلول تصميم لكل رحلة.

على متن الطائرة

كانت الصفحة الرئيسية السابقة لـ Design Cafe مربكة. كان بحاجة لتقديم مزيد من المعلومات حول الأعمال التجارية. تسبب نقص المعلومات في حدوث ارتباك وكان الناس غير متأكدين من ماهية العاصمة. قسمنا الصفحة الرئيسية إلى عدة أقسام وصممناها بحيث يلبي كل قسم احتياجات إحدى الفئات المستهدفة:

1. بالنسبة للزوار الجدد (التدفق الأرجواني) ، قمنا بتضمين رحلة قصيرة عبر نقاط البيع الفريدة الرئيسية (USPs) للخدمة وطريقة عملها وبعض قصص النجاح وخيارًا لبدء اختبار النمط.

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

3. تركنا جزءًا صغيرًا في نهاية الصفحة (التدفق البرتقالي) للموظفين المحتملين ، يصف ما يحبه في DC و CTA الذي ينتقل إلى صفحة الوظائف.

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

تصفح التصاميم

لقد أجرينا اختبار النمط لمساعدة المستخدمين على تضييق نطاق نتائجهم.

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

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

مقارنةً به ، كان اختبار النمط ميزة بسيطة نسبيًا:

1. يبدأ بالسؤال عن الألوان والقوام والتصاميم التي تعجبك.

2. يستمر في السؤال عن نوع الغرفة.

   

3. في النهاية ، يعرض قائمة منسقة من التصاميم بناءً على إجاباتك.

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

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

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

تواصل معنا

يجب أن يكون الاتصال بـ DC بسيطًا قدر الإمكان. قمنا بتنفيذ ثلاث طرق للقيام بذلك:

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

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

حالة الطلب

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

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

دراسات الحالة

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

التحضير للتصميم المرئي

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

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

التصميم المرئي

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

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

بسيط ، أنيق ، سهل ، حديث ، ورك ، حاد ، شجاع ، جودة ، فهم ، تجربة جديدة ، راقية.

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

الطباعة

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

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

الألوان

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

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

هذا ما قررناه في النهاية:

كانت الطريقة التي قدمنا ​​بها كل متغيرات الأنواع والألوان هذه من خلال التكرارات على الصفحة الرئيسية.

النماذج الأولية

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

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

نظام المكونات

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

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

النماذج الأولية مع الكود

نصيحة مفيدة: اعمل على نموذج أولي أولاً. يمكنك إنشاء نموذج أولي باستخدام HTML و CSS و JavaScript الأساسيين. أو يمكنك استخدام InVision أو Marvel أو Adobe XD أو حتى تطبيق Sketch أو أداة النماذج الأولية المفضلة لديك. لا يهم حقًا. الشيء المهم هو أن تدرك أنه فقط عندما تضع نموذجًا أوليًا سترى كيف سيعمل تصميمك.

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

أدوات الانتقاء والعمليات

أتمتة Gulp كل شيء. إذا لم تكن قد سمعت به ، فراجع دليل Callum Macrae الرائع. مكّننا Gulp من التعامل مع جميع الأنماط والنصوص والقوالب ، كما أنه ينتج إصدارًا مصغرًا جاهزًا للاستخدام من الكود.

بعض المكونات الإضافية لـ Gulp الأكثر أهمية التي استخدمناها هي:

• بلع-postcss
  هذا يسمح لك باستخدام PostCSS. يمكنك تجميعها بمكونات إضافية مثل cssnext للحصول على إعداد قوي ومتعدد الاستخدامات.
• المتصفح- مزامنة
  يؤدي هذا إلى إعداد خادم وتحديث طريقة العرض تلقائيًا عند كل تغيير. يمكنك ضبطه على التشغيل عند بدء تشغيل "gulp watch" ، وستتم مزامنة كل شيء عند الضغط على "Save".
• المقاود gulp-compile-handbars
  هذا هو تنفيذ المقاود لـ Gulp. إنها طريقة سريعة لإنشاء قوالب وإعادة استخدامها. تخيل أن لديك زرًا يظل كما هو طوال التصميم بأكمله. سيكون رمزًا في Sketch. إنه نفس المفهوم بشكل أساسي ولكنه ملفوف في HTML. متى أردت استخدام هذا الزر ، ما عليك سوى تضمين قالب الزر. إذا قمت بتغيير شيء ما في القالب الرئيسي ، فإنه ينشر التغييرات على كل زر آخر في التصميم. أنت تفعل ذلك لكل شيء في نظام التصميم ، وبالتالي فأنت تستخدم نفس النموذج لكل من التصميم المرئي والكود. لا مزيد من نماذج الصفحات الثابتة!

المكونات والقوالب

كان علينا مزج CSS الذري مع CSS القائم على الوحدات لتحقيق أقصى استفادة من كلا العالمين. تعامل Atomic CSS مع جميع الأنماط العامة ، بينما تعاملت وحدات CSS مع حالات الحافة.

في CSS الذرية ، الذرات عبارة عن فئات CSS غير قابلة للتغيير تؤدي شيئًا واحدًا فقط. استخدمنا Tachyons ، مجموعة أدوات ذرية. في Tachyons ، كل فئة تقوم بتطبيقها هي خاصية CSS واحدة. على سبيل المثال ، يرمز .b إلى font-weight: bold ، و .ttu تعني text-transform: uppercase . ستبدو الفقرة ذات النص الكبير الغامق كما يلي:

 <p class="b ttu">Paragraph</p>

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

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

تصميم التفاعلات الدقيقة في المتصفح

كان نموذجنا الأولي عالي الدقة لدرجة أنه أصبح الأساس الأمامي للمنتج الفعلي - استخدم DC كودنا ودمجه في سير العمل. يمكنك التحقق من النموذج الأولي على https://beta.boyankostov.com/2017/designcafe/html (أو العيش على https://designcafe.com).

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

تسجيل خروج

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

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

الوجبات الجاهزة

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