成功するUIキットを構築して販売する方法

ペーパーキットの裏話

紙UIキット

私とCreative Timのチームが1日目から直面した主な課題は、私たちの趣味を経済的に維持する方法でした。これを行うには、人々が実際に使用したい美しいUIキットを構築する方法と、ユーザーの前でそれらを取得する方法を学習する必要がありました。数回の試行と多大な努力を重ねた結果、この分野に参入しようとしている人を助けることができると思われるいくつかのことを理解しました。
 
 最初の数か月間、パートナーのアレックスが製品の開発を担当しました。いくつかのキットに注目を集め始めた後、より多くのリリースを望んでいるというお客様からのフィードバックを受け取りました。そのため、製品のコーディングに直接関与するようになりました。これが私の最初の試みであったことに留意してください。
 
 この記事では、最も人気のあるキットの1つであるPaper Kitのオーディエンスを作成し、見つけるための努力をできる限り説明しようとします。できるだけ詳細に説明しようとするので、結果は次の図のように、馬の描き方を説明しています。

数年前、私はツイッターで引用を見ました。 「木を切り倒すために6時間与えてください。最初の4回はxを研ぐために費やします。」これはアブラハムリンカーンに起因します。これは私にとって非常に理にかなっており、仕事へのアプローチ方法に対する私の見方を本当に変えました。
 
 私はかつて本当にうんざりするような人間で、タスクを実行してきました。私の長年の仕事を通して、私はより忍耐強くなり、xを研ぐことを学びました。これは開発キットとUIキットにどのように変換されますか?基本的に、研究。コードを書く前に、インターネットで見つけたすべてのUIキットを調べました。
 
 ThemeForestやBootstrapBayなどの市場には、多種多様なテーマがあります。それらのほとんどは、特定の目的のために構築されています。特定のプレゼンテーションサイトを構築しようとしている場合、彼らは通常素晴らしい仕事をします。しかし、バックエンド開発者が複雑なプロジェクトで使用できるものを構築したかったのです。そこで、Airbnb、Uber、Twitter、Paper53などの実際の複雑なサイトに注意を向けました。どの要素を使用していますか?彼らはどんなデザインを好みますか?

要素

プレゼンテーション、ポートフォリオ、ソーシャルなど、さまざまな目的を持つ多くのサイトを通過した後、コアとなる要素のリストを作成しました。

  • ボタン
  • 入力
  • チェックボックス/ラジオ
  • ナビゲーション
  • 落ちる
  • プログレスバー/スライダー
  • メニュー
  • タイポグラフィ
  • 画像
  • 通知
  • ラベル
  • カルーセル

これらは、ページを構築するために必要な機能の90%以上をカバーしています。

設計と開発

現時点でのデザインの最大のトレンドの1つは、マテリアルとiOSのフラットな外観です。私はそれらが本当に好きでしたが、彼らは私のスタイルではありませんでした。遊び心があり、楽しく、フォローしやすいものを作りたかったのです。 DribbbleやBehanceのようなデザイナーのためにたくさんの媒体を使いました。しかし、最終的に私は自分で使用したいくつかの本当にクールなサイトの設計に落ち着きました:Paper 53とHeadspace。私はそれらが素晴らしく見え、あなたがそれらをナビゲートしたときに本当に心を落ち着かせる効果があると思った。
 
 そこで、Bootstrapの基本クラスをカバーするために、6色のカラーパレットを作成しました。すべての背景は紙のシートに似ており、アニメーションは紙の動きを模倣するためのものです。フォントについては、Google Fontsが提供する無料のフォントを使用しました。モントセラトと呼ばれます。
 
 キットは非常に有用ですが、多くの場合、人々はキットの使い方を理解していません。そこで、ログイン、プロファイル、ランディングページの3つのサンプルページを作成して、それを使って何を構築できるかを示しました。人々は、プロジェクトを構築するときにそれらを直接使用することもできます。

Paper Kitで作成したページを登録するPaper Kitで作成されたプロファイルページ。

開発では、すべてのコンポーネントのSASSファイルを作成しました。これらのSassファイルはCSSにコンパイルされ、Bootstrapの後に追加されました。そのため、すでにBootstrapプロジェクトを持っている人は、カスタムファイルを追加して新しいデザインを取得するだけです。 Bootstrapの一部のデフォルト要素に対してデフォルトのアニメーションのみを使用したため、Javascriptの変更は最小限でした。
 
 要素を開発した後、すべてのブラウザおよびデバイス画面でそれらをテストしました。これを行うための優れたツールはこれです。そして、画像を追加する最後の部分。 Paper 53でお気に入りのアーティストの何人かと連絡を取り、図面を使用してもよいかどうかを尋ねました。そして、彼らはそうして喜んでいた:)
 
 幸いなことに、以前の準備をすべて行うと、開発期間は3週間になりました。いふう!

昇進

すべての準備ができたら、キットをPaper Kitに投稿しました。また、このキットを数人の友人と共有しているので、見逃したバグを見つけた場合は彼らに知らせてくれます。すべてが順調に進んだら、キットを発表するインバウンドメールマーケティングキャンペーンをいくつか行いました(Creative Timで既に購読しているユーザーに)。フィードバックはポジティブだったため、一部のコミュニティに連絡しました。 Hacker News、Product Hunt、Redditで大きな反響がありました。さらに、それを拾って自分の仕事に使用した人もいました。ビデオチュートリアルを行ったクリス・ペナを例に取ります。

ペーパーキットは、Creative Timから無料でダウンロードできます。

キットを作成するために使用したほとんどのアイテムはオープンソースであったため、すべての人に無料でリリースすることも公正であると考えました。そこで、GitHubにレポを作成し、誰もがそれに貢献できるようにしました。

メンテナンス

声をかけた後、私たちは世話をしなければならない新しいことを発見しました。

前進を続けるための最善の方法は、ユーザーが支払い可能なPROバージョンを作成することでした。そこで、最初にキットの計画を立てたときに見落としていた機能を振り返りました。これらの要素を取り入れて、より大きなパックを作成しました。この製品はヒットし、無料キットを使用した多くの人々は、製品をより簡単にアップグレードして開発できることを喜んでいます。
 
 これにより、同じデザインのダッシュボードも開発する時間ができました。これはバックエンドにうまく統合されます。したがって、プレゼンテーションと、ユーザーがペーパーキットを使用して対話する部分を作成する場合は、 Paper Dashboardは優れた管理者に役立ちます。また、それをオープンソース化し、肯定的なレビューを受けました。

紙のダッシュボード

将来的には、製品のより多くのバージョンを作成する予定です。スケッチはすでに利用可能であり、PSDバージョンも作成しています。 Angularバージョンの作成を開始しました。これはユーザーからの最大のリクエストの1つです。そして、ReactJS、VueJSなどを検討しています。

弊社とのコラボレーションに興味がある場合は、cristina @ creative-tim.comにメールを送信してください