Cách xây dựng và tiếp thị một bộ giao diện người dùng thành công

Câu chuyện đằng sau Bộ giấy

Bộ giao diện người dùng giấy

Thách thức chính mà tôi và nhóm của tôi tại Creative Tim đã phải đối mặt kể từ ngày 1 là làm thế nào để biến sở thích của chúng ta thành một cách tiết kiệm để duy trì bản thân. Để làm điều này, chúng tôi đã phải học cách xây dựng UI Kits đẹp mà mọi người thực sự muốn sử dụng và làm thế nào để có được chúng trước người dùng. Sau một vài lần thử và rất nhiều nỗ lực, chúng tôi đã hiểu được một vài điều mà chúng tôi nghĩ có thể giúp bất cứ ai cố gắng vào không gian này.
 
 Trong vài tháng đầu tiên, đối tác Alex của tôi phụ trách phát triển các sản phẩm. Sau khi chúng tôi bắt đầu có lực kéo trên một số bộ dụng cụ, chúng tôi đã nhận được phản hồi từ khách hàng nói rằng họ muốn chúng tôi phát hành thêm. Vì vậy, đó là điểm mà tôi đã tham gia trực tiếp vào việc mã hóa cho sản phẩm. Hãy nhớ rằng đây là lần thử đầu tiên của tôi.
 
 Trong bài viết này, tôi sẽ cố gắng giải thích tốt nhất có thể những nỗ lực của tôi trong việc tạo và sau đó tìm khán giả cho một trong những bộ dụng cụ phổ biến nhất của chúng tôi: Bộ dụng cụ giấy. Tôi sẽ cố gắng cung cấp càng nhiều chi tiết càng tốt, vì vậy kết quả giống như bức tranh này mô tả cách vẽ con ngựa:

Một vài năm trước tôi đã thấy một trích dẫn trên twitter. Nó diễn ra như thế này: Từ Cho tôi sáu giờ để chặt một cái cây và tôi sẽ dành bốn cái đầu tiên để mài rìu. Nó được gán cho Abraham Lincoln. Điều này rất có ý nghĩa đối với tôi và thực sự thay đổi quan điểm của tôi về cách tôi tiếp cận công việc.
 
 Tôi đã từng là một người thực sự hoàn hảo, tiếp sức cho các nhiệm vụ. Qua nhiều năm làm việc tôi đã học được cách kiên nhẫn hơn, mài rìu. Làm thế nào điều này dịch để phát triển và UI Kit? Về cơ bản, nghiên cứu. Trước khi viết bất kỳ dòng mã nào, tôi đã kiểm tra tất cả các Bộ dụng cụ UI tôi tìm thấy trên internet.
 
 Các thị trường như ThemeForest và BootstrapBay có rất nhiều chủ đề. Hầu hết chúng được xây dựng cho một mục đích cụ thể. Họ thường làm một công việc tuyệt vời nếu bạn đang cố gắng xây dựng một trang web trình bày cụ thể. Nhưng chúng tôi muốn xây dựng một cái gì đó mà một nhà phát triển back-end có thể sử dụng với một dự án phức tạp. Vì vậy, chúng tôi đã chuyển sự chú ý của tôi sang các trang web phức tạp thực sự như Airbnb, Uber, Twitter, Paper53, v.v ... Họ sử dụng những yếu tố nào? Họ thích thiết kế nào?

Các yếu tố

Sau khi đi qua rất nhiều trang web với các mục đích khác nhau: trình bày, danh mục đầu tư, xã hội, chúng tôi đã đưa ra danh sách các yếu tố cốt lõi:

  • nút
  • đầu vào
  • hộp kiểm / đài
  • dẫn đường
  • thả xuống
  • thanh tiến trình / thanh trượt
  • thực đơn
  • kiểu chữ
  • hình ảnh
  • thông báo
  • nhãn
  • băng chuyền

Chúng bao gồm hơn 90% chức năng bạn cần để xây dựng một trang.

Thiết kế và phát triển

Một trong những xu hướng lớn nhất trong thiết kế tại thời điểm này là Vật liệu và giao diện phẳng iOS. Tôi thực sự thích những thứ đó, nhưng họ thích phong cách của tôi. Tôi muốn xây dựng một cái gì đó vui tươi, vui vẻ, dễ làm theo. Tôi đã đi rất nhiều phương tiện cho các nhà thiết kế, như Dribbble và Behance. Nhưng cuối cùng tôi đã giải quyết được thiết kế của một số trang web thực sự thú vị mà tôi đã sử dụng: Paper 53 và Headspace. Tôi nghĩ rằng chúng trông tuyệt vời và chúng có tác dụng làm dịu thực sự khi bạn điều hướng chúng.
 
 Vì vậy, tôi đã tạo một bảng màu với 6 màu, để bao gồm các lớp cơ bản cho Bootstrap. Tất cả các hình nền đang cố gắng giống với các tờ giấy và hình ảnh động có nghĩa là bắt chước các chuyển động của một mảnh giấy. Đối với các phông chữ tôi đã đi với một phông chữ miễn phí được cung cấp bởi Google Fonts. Nó gọi là Montserrat.
 
 Một bộ có thể rất hữu ích nhưng mọi người thường không hiểu cách sử dụng nó. Vì vậy, tôi đã tạo 3 trang ví dụ: Đăng nhập, Hồ sơ và Trang đích để hiển thị những gì bạn có thể xây dựng với nó. Mọi người cũng có thể sử dụng chúng trực tiếp khi xây dựng dự án của họ.

Trang đăng ký được làm bằng Kit giấyTrang hồ sơ được làm bằng Kit giấy.

Sự phát triển có nghĩa là tạo các tệp SASS cho mọi thành phần. Các tệp Sass này đã được biên dịch thành CSS và được thêm vào sau Bootstrap. Vì vậy, ai đó đã có dự án Bootstrap chỉ có thể thêm các tệp tùy chỉnh và nhận thiết kế mới. Các sửa đổi Javascript là tối thiểu vì chúng tôi chỉ chơi với các hình động mặc định cho một số thành phần mặc định trong Bootstrap.
 
 Sau khi phát triển các yếu tố, chúng tôi đã thử nghiệm chúng trên tất cả các màn hình trình duyệt và thiết bị. Một công cụ tuyệt vời để làm điều này là điều này. Và phần cuối cùng của việc thêm hình ảnh. Tôi đã liên lạc với một số nghệ sĩ yêu thích của tôi trên Giấy 53 và hỏi họ liệu có ổn không khi sử dụng bản vẽ của họ. Và họ rất vui khi làm như vậy :)
 
 Tin tốt là làm cho tất cả các chuẩn bị trước đây dẫn đến tổng thời gian phát triển là 3 tuần. Iuhuu!

Khuyến mãi

Khi mọi thứ đã sẵn sàng, chúng tôi đã đăng bộ tài liệu lên Paper Kit. Chúng tôi cũng đã chia sẻ bộ này với một vài người bạn để họ có thể cho chúng tôi biết nếu họ tìm thấy bất kỳ lỗi nào chúng tôi bỏ lỡ. Khi mọi thứ bật đèn xanh, chúng tôi đã thực hiện một số chiến dịch tiếp thị qua email thông báo bộ công cụ (cho người dùng đã đăng ký trên Creative Tim). Phản hồi rất tích cực vì vậy chúng tôi đã tiếp cận với một số cộng đồng. Chúng tôi đã nhận được phản hồi tuyệt vời trên Hacker News, Product Hunt, Reddit. Thậm chí, một số người đã nhặt nó lên và sử dụng nó cho công việc của chính họ. Lấy ví dụ Chris Pena, người đã làm một video hướng dẫn với nó.

Paper Kit được cung cấp dưới dạng tải xuống miễn phí trên Creative Tim.

Vì hầu hết các vật phẩm chúng tôi sử dụng để tạo ra bộ sản phẩm đều là nguồn mở, chúng tôi nghĩ rằng nó chỉ công bằng, chúng tôi cũng phát hành nó miễn phí cho mọi người. Vì vậy, chúng tôi đã tạo một repo trên GitHub và mọi người đều có thể đóng góp cho nó.

Bảo trì

Sau khi lau nó, chúng tôi phát hiện ra những điều mới mà chúng tôi phải chăm sóc.

Cách tốt nhất để chúng tôi duy trì hoạt động của mình tiến lên phía trước là tạo một phiên bản PRO mà người dùng sẽ có thể trả tiền. Vì vậy, chúng tôi đã nhìn lại các tính năng mà chúng tôi đã bỏ qua khi lần đầu tiên thực hiện kế hoạch cho bộ sản phẩm. Chúng tôi lấy những yếu tố đó và xây dựng một gói lớn hơn. Sản phẩm này đã thành công và rất nhiều người sử dụng bộ công cụ miễn phí đã sẵn lòng nâng cấp và phát triển sản phẩm của họ dễ dàng hơn.
 
 Điều này đã cho chúng tôi thời gian để phát triển một bảng điều khiển với thiết kế tương tự. Điều này tích hợp độc đáo cho back-end. Vì vậy, nếu bạn đang xây dựng bản trình bày của mình và phần mà người dùng tương tác với việc sử dụng bộ Giấy; Bảng điều khiển giấy làm cho một quản trị viên tuyệt vời. Chúng tôi cũng đã mở nguồn và nhận được đánh giá tích cực.

Bảng điều khiển giấy

Trong tương lai, chúng tôi dự định tạo ra nhiều phiên bản cho sản phẩm. Phác thảo đã có sẵn và chúng tôi cũng đang xây dựng phiên bản PSD. Chúng tôi đã bắt đầu tạo phiên bản Angular, đây là một trong những yêu cầu lớn nhất từ ​​người dùng của chúng tôi. Và chúng tôi đang xem xét ReactJS, VueJS, v.v.

Nếu bạn muốn hợp tác với chúng tôi, hãy gửi email cho tôi tại cristina@creative-tim.com