วิธีสร้างและทำตลาดชุด UI ที่ประสบความสำเร็จ

เรื่องราวเบื้องหลัง Paper Kit

ชุด UI กระดาษ

ความท้าทายหลักที่ฉันและทีมงานของ Creative Tim ได้ประสบมาตั้งแต่วันที่ 1 คือวิธีที่จะทำให้งานอดิเรกของเราเป็นวิธีที่ประหยัดในการสนับสนุนตัวเอง ในการทำเช่นนี้เราต้องเรียนรู้วิธีสร้างชุดคิท UI ที่สวยงามที่ผู้คนต้องการใช้และวิธีนำพวกเขามาต่อหน้าผู้ใช้ หลังจากความพยายามสองสามครั้งและความพยายามมากมายเราได้เข้าใจสองสิ่งที่เราคิดว่าสามารถช่วยให้ทุกคนพยายามเข้ามาในพื้นที่นี้
 
 ในช่วงสองสามเดือนแรกอเล็กซ์หุ้นส่วนของฉันรับผิดชอบการพัฒนาผลิตภัณฑ์ หลังจากที่เราเริ่มฉุดชุดอุปกรณ์บางตัวเราก็ได้รับคำติชมจากลูกค้าของเราว่าพวกเขาต้องการให้เราเปิดตัวมากขึ้น ดังนั้นนั่นคือจุดที่ฉันได้รับตัวเองเข้ามาเกี่ยวข้องโดยตรงกับการเขียนโค้ดสำหรับผลิตภัณฑ์ โปรดจำไว้ว่านี่เป็นความพยายามครั้งแรกของฉัน
 
 ในบทความนี้ฉันจะพยายามอธิบายให้ดีที่สุดเท่าที่จะทำได้ในการสร้างและหาผู้ชมสำหรับชุดที่เป็นที่นิยมที่สุดของเรา: ชุดกระดาษ ฉันจะพยายามให้รายละเอียดมากที่สุดเท่าที่จะเป็นไปได้ดังนั้นผลลัพธ์ที่ได้คือภาพนี้ซึ่งอธิบายวิธีการวาดม้า:

สองสามปีที่ผ่านมาฉันเห็นข้อความพูดบนทวิตเตอร์ มันเป็นเช่นนี้:“ ให้เวลาฉันหกชั่วโมงในการตัดต้นไม้และฉันจะใช้ขวานสี่คมแรก” มันมาจากอับราฮัมลินคอล์น นี่ทำให้ฉันรู้สึกอย่างมากและเปลี่ยนมุมมองของฉันเกี่ยวกับวิธีการทำงานของฉัน
 
 ฉันเคยเป็นคนประเภทที่ทำอะไรไม่ได้จริง ๆ ทำงานผ่านงานต่างๆ ในช่วงเวลาหลายปีที่ทำงานฉันได้เรียนรู้ที่จะอดทนเพิ่มขวานของฉันให้คมขึ้น สิ่งนี้แปลไปสู่การพัฒนาและ UI Kit ได้อย่างไร โดยทั่วไปการวิจัย ก่อนที่จะเขียนโค้ดใด ๆ ฉันได้ตรวจสอบ UI Kits ทั้งหมดที่ฉันพบบนอินเทอร์เน็ต
 
 ตลาดต่างๆเช่น ThemeForest และ BootstrapBay มีหลากหลายรูปแบบ ส่วนใหญ่สร้างขึ้นเพื่อวัตถุประสงค์เฉพาะ พวกเขามักจะทำผลงานยอดเยี่ยมถ้าคุณพยายามสร้างไซต์งานนำเสนอที่เฉพาะเจาะจง แต่เราต้องการสร้างบางสิ่งที่ผู้พัฒนาแบ็คเอนด์สามารถใช้กับโครงการที่ซับซ้อนได้ ดังนั้นเราจึงเปลี่ยนความสนใจของฉันไปยังเว็บไซต์ที่ซับซ้อนจริง ๆ เช่น Airbnb, Uber, Twitter, Paper53 เป็นต้นพวกเขาใช้องค์ประกอบใดบ้าง พวกเขาชอบการออกแบบอะไร?

องค์ประกอบ

หลังจากผ่านเว็บไซต์จำนวนมากที่มีจุดประสงค์ที่แตกต่างกัน: การนำเสนอผลงานเครือข่ายสังคมเราได้สร้างรายการองค์ประกอบที่เป็นแกนหลัก:

  • ปุ่ม
  • ปัจจัยการผลิต
  • ช่องทำเครื่องหมาย / วิทยุ
  • การเดินเรือ
  • หล่นลง
  • แถบเลื่อน / แถบเลื่อน
  • เมนู
  • วิชาการพิมพ์
  • ภาพ
  • การแจ้งเตือน
  • ป้ายชื่อ
  • ม้าหมุน

ซึ่งครอบคลุมกว่า 90% ของฟังก์ชั่นที่คุณต้องใช้ในการสร้างหน้า

การออกแบบและพัฒนา

หนึ่งในแนวโน้มที่ใหญ่ที่สุดในการออกแบบในขณะนี้คือวัสดุและรูปลักษณ์แบนของ iOS ฉันชอบสิ่งเหล่านี้จริงๆ แต่พวกเขาไม่ใช่สไตล์ของฉัน ฉันต้องการสร้างบางสิ่งที่ขี้เล่นสนุกและง่ายต่อการติดตาม ฉันใช้สื่อเป็นจำนวนมากสำหรับนักออกแบบเช่น Dribbble และ Behance แต่ในที่สุดฉันก็ตัดสินเกี่ยวกับการออกแบบไซต์ที่เจ๋งจริง ๆ ซึ่งฉันใช้เอง: Paper 53 และ Headspace ฉันคิดว่าพวกเขาดูดีและพวกเขามีผลสงบเงียบจริงๆเมื่อคุณสำรวจพวกเขา
 
 ดังนั้นฉันจึงสร้างจานสี 6 สีเพื่อครอบคลุมคลาสพื้นฐานสำหรับ Bootstrap พื้นหลังทั้งหมดพยายามเลียนแบบกระดาษและภาพเคลื่อนไหวมีความหมายเพื่อเลียนแบบการเคลื่อนไหวของแผ่นกระดาษ สำหรับแบบอักษรฉันไปกับแบบอักษรฟรีที่เสนอโดย Google แบบอักษร มันเรียกว่ามอนต์เซอร์รัต
 
 ชุดมีประโยชน์มาก แต่บ่อยครั้งที่คนไม่เข้าใจวิธีใช้ ดังนั้นฉันจึงสร้างหน้าตัวอย่าง 3 หน้า: เข้าสู่ระบบโปรไฟล์และหน้า Landing Page เพื่อแสดงสิ่งที่คุณสามารถสร้างได้ ผู้คนสามารถใช้พวกเขาโดยตรงเมื่อสร้างโครงการของพวกเขา

ลงทะเบียนหน้าทำด้วยชุดกระดาษหน้าโปรไฟล์ที่ทำด้วยชุดกระดาษ

การพัฒนาหมายถึงการสร้างไฟล์ SASS สำหรับทุกองค์ประกอบ ไฟล์ Sass เหล่านี้รวบรวมไปยัง CSS และเพิ่มหลังจาก Bootstrap ดังนั้นคนที่มีโครงการ Bootstrap สามารถเพิ่มไฟล์ที่กำหนดเองและรับการออกแบบใหม่ได้ การแก้ไข Javascript นั้นมีเพียงเล็กน้อยเนื่องจากเราเล่นกับภาพเคลื่อนไหวเริ่มต้นสำหรับองค์ประกอบเริ่มต้นบางอย่างใน Bootstrap เท่านั้น
 
 หลังจากการพัฒนาองค์ประกอบเราทดสอบพวกเขาในทุกเบราว์เซอร์และหน้าจออุปกรณ์ เครื่องมือที่ยอดเยี่ยมในการทำเช่นนี้คือ และส่วนสุดท้ายของการเพิ่มภาพ ฉันได้ติดต่อกับศิลปินที่ชอบของฉันใน Paper 53 และถามพวกเขาว่าการใช้ภาพวาดของพวกเขาดีหรือไม่ และพวกเขามีความสุขที่ได้ทำ :)
 
 ข่าวดีก็คือการทำให้การเตรียมการทั้งหมดนำไปสู่การพัฒนาเวลาทั้งหมด 3 สัปดาห์ Iuhuu!

การส่งเสริม

เมื่อทุกอย่างพร้อมแล้วเราได้โพสต์ชุดลงบนชุดกระดาษ เราได้แชร์ชุดนี้กับเพื่อนอีกสองคนเพื่อให้พวกเขาสามารถแจ้งให้เราทราบหากพวกเขาพบข้อบกพร่องใด ๆ ที่เราพลาด เมื่อทุกอย่างได้รับแสงสีเขียวเราได้ทำแคมเปญการตลาดผ่านอีเมลขาเข้าบางชุด (สำหรับผู้ใช้ที่สมัครใช้งาน Creative Tim แล้ว) ความคิดเห็นเป็นบวกดังนั้นเราจึงออกไปยังชุมชนบางแห่ง เราได้รับการตอบรับที่ดีในข่าวของ Hacker, Product Hunt, Reddit ยิ่งไปกว่านั้นบางคนหยิบมันขึ้นมาและใช้มันเพื่องานของพวกเขาเอง ยกตัวอย่าง Chris Pena ซึ่งเป็นผู้สอนวิดีโอด้วย

Paper Kit ให้ดาวน์โหลดฟรีบน Creative Tim

เนื่องจากรายการส่วนใหญ่ที่เราใช้ในการสร้างชุดนั้นเป็นโอเพ่นซอร์สเราจึงคิดว่ามันยุติธรรมเท่านั้นที่เรายังปล่อยให้ทุกคนฟรี ดังนั้นเราจึงสร้าง repo บน GitHub และทุกคนสามารถมีส่วนร่วมได้

ซ่อมบำรุง

หลังจากปล่อยมันเราค้นพบสิ่งใหม่ที่เราต้องดูแล

วิธีที่ดีที่สุดสำหรับเราในการสนับสนุนกิจกรรมของเราในการก้าวไปข้างหน้าคือการสร้างเวอร์ชัน PRO ที่ผู้ใช้จะสามารถชำระได้ ดังนั้นเราจึงหันกลับไปดูคุณสมบัติที่เรามองข้ามเมื่อเราวางแผนสำหรับชุดอุปกรณ์ครั้งแรก เราใช้องค์ประกอบเหล่านั้นและสร้างชุดที่ใหญ่กว่า ผลิตภัณฑ์เป็นที่นิยมและผู้คนจำนวนมากที่ใช้ชุดฟรีมีความสุขที่จะอัพเกรดและพัฒนาผลิตภัณฑ์ของพวกเขาได้ง่ายขึ้น
 
 นี่ทำให้เรามีเวลาในการพัฒนาแดชบอร์ดด้วยการออกแบบเดียวกัน นี้รวมอย่างดีสำหรับส่วนหลัง ดังนั้นหากคุณกำลังสร้างงานนำเสนอและส่วนที่ผู้ใช้โต้ตอบกับการใช้ชุดกระดาษ Paper Dashboard สร้างขึ้นเพื่อผู้ดูแลระบบที่ยอดเยี่ยม เราได้เปิดแหล่งที่มาและได้รับความคิดเห็นในเชิงบวก

แดชบอร์ดกระดาษ

ในอนาคตเราวางแผนที่จะสร้างเวอร์ชันเพิ่มเติมสำหรับผลิตภัณฑ์ ร่างพร้อมใช้งานแล้วและเรากำลังสร้างเวอร์ชัน PSD เราได้เริ่มสร้างเวอร์ชันเชิงมุมนี่เป็นหนึ่งในคำขอที่ใหญ่ที่สุดจากผู้ใช้ของเรา และเรากำลังมองหา ReactJS, VueJS เป็นต้น

หากคุณสนใจที่จะร่วมมือกับเราโปรดส่งอีเมลมาที่ cristina@creative-tim.com