كيفية بناء وتسويق مجموعة ناجحة واجهة المستخدم

القصة وراء مجموعة الورق

ورقة كيت واجهة المستخدم

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

وقبل عامين رأيت اقتباس على تويتر. يبدو الأمر هكذا: "أعطني ست ساعات لأقطع شجرة وسأقضي الأربعة الأولى في شحذ الفأس". ويعزى ذلك إلى أبراهام لنكولن. لقد كان هذا الأمر منطقيًا بالنسبة لي وغيرت وجهة نظري حقًا على الطريقة التي أتناول بها العمل.
 
 اعتدت أن أكون نوعًا من الخرافات ، فعلي من خلال المهام. خلال سنوات عملي ، تعلمت أن أكون أكثر صبراً ، وشحذ الفأس. كيف يترجم هذا إلى تطوير و UI Kit؟ أساسا ، البحث. قبل كتابة أي سطر من التعليمات البرمجية ، قمت بفحص جميع مجموعات واجهة المستخدم التي وجدتها على الإنترنت.
 
 الأسواق مثل ThemeForest و BootstrapBay لديها مجموعة كبيرة ومتنوعة من السمات. بنيت معظمها لغرض معين. عادة ما يقومون بعمل رائع إذا كنت تحاول إنشاء موقع تقديمي محدد. لكننا أردنا أن نبني شيئًا يمكن للمطور الخلفي استخدامه مع مشروع معقد. لذلك حولنا انتباهي نحو المواقع المعقدة الحقيقية مثل Airbnb و Uber و Twitter و Paper53 وما إلى ذلك. ما هي العناصر التي يستخدمونها؟ ما التصميم الذي يفضلونه؟

العناصر

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

  • وصفت
  • المدخلات
  • مربع / الراديو
  • التنقل
  • اسقاط
  • أشرطة التقدم / المتزلجون
  • القوائم
  • طباعة
  • صور
  • إخطارات
  • ملصقات
  • دائري

هذه تغطي أكثر من 90 ٪ من الوظائف التي تحتاجها لبناء صفحة.

التصميم والتطوير

واحدة من أكبر الاتجاهات في التصميم في الوقت الحالي كانت المظهر المادي ونظام iOS. لقد أحببت تلك الأشياء حقًا ، لكنهم لم يكونوا من أسلوبي. كنت أرغب في بناء شيء مرحة وممتعة وسهلة المتابعة. ذهبت في الكثير من الوسائل للمصممين ، مثل Dribbble و Behance. لكنني استقرت في النهاية على تصميم بعض المواقع الرائعة التي استخدمتها بنفسي: Paper 53 و Headspace. اعتقدت أنها تبدو رائعة وكان لها تأثير مهدئ حقًا عند التنقل فيها.
 
 لذلك قمت بإنشاء لوحة ألوان مع 6 ألوان ، لتغطية الفئات الأساسية لبرنامج Bootstrap. تحاول جميع الخلفيات أن تشبه ورقة من الورق وتهدف الرسوم المتحركة إلى تقليد حركات ورقة. بالنسبة للخطوط ، ذهبت بخط مجاني مقدم من Google Fonts. يطلق عليه مونتسيرات.
 
 يمكن أن تكون المجموعة مفيدة للغاية ولكن في كثير من الأحيان لا يفهم الناس كيفية استخدامها. لذلك قمت بإنشاء 3 صفحات مثال: تسجيل الدخول وملف التعريف والصفحة المقصودة لإظهار ما يمكنك بناء عليه. يمكن للناس أيضا استخدامها مباشرة عند بناء مشاريعهم.

سجل صفحة مصنوعة من ورقة كيتصفحة الملف الشخصي المصنوع من مجموعة ورق.

التطوير يعني إنشاء ملفات SASS لكل المكونات. تم تجميع ملفات Sass هذه إلى CSS وإضافتها بعد Bootstrap. لذلك ، يمكن لأي شخص لديه بالفعل مشروع Bootstrap فقط إضافة الملفات المخصصة والحصول على التصميم الجديد. كانت تعديلات Javascript ضئيلة للغاية لأننا لعبنا فقط مع الرسوم المتحركة الافتراضية لبعض العناصر الافتراضية في Bootstrap.
 
 بعد تطوير العناصر ، اختبرناها على جميع شاشات المتصفح والجهاز. أداة عظيمة للقيام بذلك هي هذا. والجزء الأخير من إضافة الصور. لقد تواصلت مع بعض الفنانين المفضلين لدي على الورقة 53 وسألتهم عما إذا كان من الجيد استخدام رسوماتهم. وكانوا سعداء للقيام بذلك :)
 
 والخبر السار هو أن اتخاذ جميع الاستعدادات السابقة أدى إلى وقت تطوير إجمالي قدره 3 أسابيع. Iuhuu!

ترقية وظيفية

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

تقدم Paper Kit كتنزيل مجاني على Creative Tim.

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

اعمال صيانة

بعد الضحك ، اكتشفنا أشياء جديدة كان علينا الاهتمام بها.

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

ورقة لوحة القيادة

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

إذا كنت مهتمًا بالتعاون معنا ، أرسل لي رسالة بريد إلكتروني على cristina@creative-tim.com