성공적인 UI 키트를 구축하고 마케팅하는 방법

페이퍼 키트의 비하인드 스토리

종이 UI 키트

Creative Tim에서 나와 팀이 직면 한 주요 과제는 취미를 경제적으로 유지하는 방법이었습니다. 이를 위해 우리는 사람들이 실제로 사용하고 싶은 아름다운 UI 키트를 만드는 방법과이를 사용자에게 제공하는 방법을 배워야했습니다. 몇 번의 시도와 많은 노력을 기울인 후, 우리는이 공간에 들어 가려는 사람을 도울 수있는 몇 가지 사항을 이해했습니다.
 
 첫 두 달 동안 파트너 인 Alex는 제품 개발을 담당했습니다. 일부 키트에 대한 견인을 시작한 후 고객으로부터 더 많은 제품을 출시하길 원한다는 의견을 받았습니다. 이것이 제가 제품 코딩에 직접 관여 한 시점이었습니다. 이것이 나의 첫 번째 시도임을 명심하십시오.
 
 이 기사에서는 가장 인기있는 키트 중 하나 인 Paper Kit의 잠재 고객을 만들고 찾은 데 최선을 다할 것입니다. 나는 가능한 한 많은 세부 사항을 제공하려고 노력하므로 결과는 말을 그리는 방법을 설명하는 다음 그림과 같습니다.

몇 년 전에 나는 트위터에서 인용문을 보았다. “나무를 자르려면 6 시간을 줘라. 그러면 도끼를 깎는 데 처음 네 시간을 쓸 것이다.”이것은 에이브 러햄 링컨에 기인한다. 이것은 나에게 많은 의미가 있었고 내가 일에 접근하는 방식에 대한 나의 관점을 정말로 바꾸었다.
 
 나는 작업을 통해 힘을 실어 주었던 사람이었습니다. 수년간의 일을 통해 나는 더 인내심을 갖고, 도끼를 날카롭게하는 법을 배웠다. 이것이 개발 및 UI 키트로 어떻게 해석됩니까? 기본적으로 연구. 코드를 작성하기 전에 인터넷에서 찾은 모든 UI 키트를 검사했습니다.
 
 ThemeForest 및 BootstrapBay와 같은 시장에는 다양한 테마가 있습니다. 대부분은 특정 목적을 위해 만들어졌습니다. 특정 프레젠테이션 사이트를 구축하려는 경우 일반적으로 훌륭한 일을합니다. 그러나 우리는 백엔드 개발자가 복잡한 프로젝트에서 사용할 수있는 것을 만들고 싶었습니다. 그래서 우리는 Airbnb, Uber, Twitter, Paper53 등과 같은 복잡한 사이트로 관심을 기울였습니다. 어떤 요소를 사용합니까? 그들은 어떤 디자인을 선호합니까?

요소

프레젠테이션, 포트폴리오, 소셜 등 다양한 목적으로 많은 사이트를 살펴본 후 핵심 요소 목록을 작성했습니다.

  • 버튼
  • 입력
  • 확인란 / 라디오
  • 항해
  • 쓰러지 다
  • 진행률 표시 줄 / 슬라이더
  • 메뉴
  • 타이포그래피
  • 이미지
  • 알림
  • 라벨
  • 회전 목마

여기에는 페이지를 작성하는 데 필요한 기능의 90 % 이상이 포함됩니다.

설계 및 개발

현재 디자인에서 가장 큰 트렌드 중 하나는 머티리얼과 iOS 플랫 룩이었습니다. 나는 그것들을 정말로 좋아했지만 그들은 내 스타일이 아니었다. 재미 있고 재미 있고 따라하기 쉬운 것을 만들고 싶었습니다. Dribbble 및 Behance와 같은 디자이너를위한 많은 매체를 사용했습니다. 그러나 나는 결국 내가 사용했던 정말 멋진 사이트 인 Paper 53과 Headspace의 디자인을 결정했습니다. 나는 그들이 멋지게 보이고 당신이 그들을 탐색 할 때 진정 진정 효과가 있다고 생각했습니다.
 
 그래서 부트 스트랩의 기본 클래스를 다루기 위해 6 가지 색상의 색상 팔레트를 만들었습니다. 모든 배경은 한 장의 종이와 비슷하며 애니메이션은 종이의 움직임을 모방하기위한 것입니다. 글꼴의 경우 Google Fonts에서 제공하는 무료 글꼴을 사용했습니다. 몬 세라 트라고합니다.
 
 키트는 매우 유용하지만 종종 사람들은 키트 사용법을 이해하지 못합니다. 그래서 로그인, 프로필 및 랜딩 페이지의 3 가지 예제 페이지를 만들어서 만들 수있는 것을 보여줍니다. 사람들은 프로젝트를 만들 때 직접 사용할 수도 있습니다.

페이퍼 키트로 만든 페이지 등록종이 키트로 만든 프로필 페이지.

개발은 모든 구성 요소에 대해 SASS 파일을 작성하는 것을 의미했습니다. 이 Sass 파일은 CSS로 컴파일되어 Bootstrap 이후에 추가되었습니다. 따라서 이미 Bootstrap 프로젝트를 보유한 사람은 사용자 정의 파일을 추가하고 새로운 디자인을 얻을 수 있습니다. 부트 스트랩의 일부 기본 요소에 대해서만 기본 애니메이션 만 사용했기 때문에 Javascript 수정은 최소화되었습니다.
 
 요소를 개발 한 후 모든 브라우저 및 장치 화면에서 요소를 테스트했습니다. 이 작업을 수행하는 가장 좋은 도구는 다음과 같습니다. 그리고 이미지를 추가하는 마지막 부분. 나는 Paper 53에서 내가 좋아하는 예술가들과 연락을 취해 그림을 사용할 수 있는지 물었다. 그리고 그들은 행복했습니다 :)
 
 좋은 소식은 이전의 모든 준비 작업을 완료하는 데 총 3 주가 소요되었다는 것입니다. 이우 우우!

승진

모든 준비가 완료되면 키트를 Paper Kit에 게시했습니다. 우리는 또한 키트를 두 명의 친구와 공유하여 그들이 우리가 놓친 버그를 발견하면 알려줄 수 있습니다. 모든 것이 녹색으로 바뀌면 키트를 알리는 인바운드 이메일 마케팅 캠페인을 진행했습니다 (이미 Creative Tim을 구독 한 사용자에게). 피드백은 긍정적이어서 일부 커뮤니티에 연락했습니다. 우리는 Hacker News, Product Hunt, Reddit에 대해 큰 반응을 얻었습니다. 더욱이 일부 사람들은 그것을 집어 들고 자신의 작업에 사용했습니다. 비디오 자습서를 수행 한 Chris Pena를 예로 들어 보겠습니다.

Creative Tim에서 무료로 제공되는 Paper Kit.

키트를 만드는 데 사용한 대부분의 항목은 오픈 소스이므로 우리는 모든 사람에게 무료로 배포 할 수 있다고 생각했습니다. 그래서 우리는 GitHub에 레포를 만들었고 모두가 그것에 기여할 수 있습니다.

유지

라우 칭한 후, 우리는 우리가 돌봐야 할 새로운 것들을 발견했습니다.

우리가 계속 활동을 유지하는 가장 좋은 방법은 사용자가 지불 할 수있는 PRO 버전을 만드는 것입니다. 그래서 우리는 처음 키트 계획을 세웠을 때 우리가 간과했던 기능들을 되돌아 보았습니다. 우리는 그 요소들을 가지고 더 큰 팩을 만들었습니다. 이 제품은 인기를 얻었으며 무료 키트를 사용하는 많은 사람들이 제품을 더욱 쉽게 업그레이드하고 개발하는 데 만족했습니다.
 
 이를 통해 동일한 디자인의 대시 보드도 개발할 수있었습니다. 이것은 백엔드에 잘 통합됩니다. 따라서 프리젠 테이션과 사용자가 페이퍼 키트를 사용하여 상호 작용하는 부분을 작성하는 경우 Paper Dashboard는 훌륭한 관리자가됩니다. 우리는 또한 그것을 공개 소스로하여 긍정적 인 평가를 받았습니다.

종이 대시 보드

앞으로는 더 많은 버전의 제품을 만들 계획입니다. 스케치는 이미 사용 가능하며 PSD 버전도 구축 중입니다. 우리는 Angular 버전을 만들기 시작했습니다. 이것은 사용자의 가장 큰 요청 중 하나입니다. 그리고 우리는 ReactJS, VueJS 등을 조사하고 있습니다.

당신이 우리와 협력에 관심이 있다면, cristina@creative-tim.com으로 나에게 이메일을 보내