Flywheelブランドのリフレッシュの舞台裏

このリフレッシュは、明るく美しい方法でブランドを刷新することであり、もちろんいくつかの実用的なことでもあります。 私たちの具体的な目標のいくつかには、成長に合わせて製品を拡張する能力の向上、会社全体にまたがる一貫性のある意図的なデザインの作成、Flywheelとの対話時にすべてをより簡単で楽しいものにすることが含まれていました。

私たちがそれをすべてやってのけた方法に興味がありますか？ Flywheelブランドの刷新に取り入れられた思考、プロセス、会議、スケッチ、しゃれ、調査、カフェイン、紙吹雪のすべてについて学ぶために、舞台裏で私たちに参加してください。

それほど新しくない、新しいロゴ

ちょっとした秘密をご紹介します。更新を開始したとき、実際には、ロゴを磨くためのはるかに小さなプロジェクトとして始まりました（まあ、すべてではありません）。 私たちのブランドは進行中の作業になることを常に知っていましたが、多くの点で、ブランドに大きな変更を加えるための帯域幅がなかっただけです。 しかし、今年はチームが大きく成長しました。完全な更新を実現するためのリソースがあることに気づいたら、その機会を利用して実行しました。

そこで、ブランドの刷新に最初の変更を加えるために、素敵なFlywheelロゴから始めました。

シンプルで読みやすく、本質的に読みやすく、楽しくフレンドリーな精神を体現しています。 大胆でありながら柔らかな外観のFlywheelロゴは、ユーザーが私たちの文化を共有し、私たちと一緒に時間を過ごすように誘います。

少し前後なので、どこから始めたかがわかります。

私たちの古いロゴは常に私たちの心の中で（そして共同創設者のトニーの左前腕に）特別な場所を持っていますが、私たちの価値観とエネルギーを反映するために少し磨きをかけることができることを私たちは知っていました。 これが私たちのリフレッシュが始まった場所であり、それは私たちが正しい軌道に乗っていることを確認するためにたくさんのフライホイールとさまざまな反復を見つめることを含みました。

「元のロゴから離れすぎたくはありませんでした。サイズが小さいものから大きいものまで、デジタルおよび印刷されたさまざまな環境で少しうまく機能しながら、より用途の広いロゴにしたかっただけです。 これは「ホイール」の再発明ではなく、より優れたデザインです。」 –グラフィックデザイナー、Andrea Trew

Museo Sans Roundedフォントのハイブリッドを作成し、角を丸めることで、ロゴをさらに親しみやすくしました（Flywheelのように！）。 また、ロゴマークとワードマークの間、およびその中の文字のスペースを増やすことで、もう少し余裕を持たせました。 物事は古いものに少し限定されすぎていました、そして私たちはすべてオープンで居心地の良い環境を作ることについてです。

これらの小さな調整を行った後、ロゴで達成したいことがもう1つありました。それは、柔軟性の向上です。 ほら、横向きのロゴは多くの状況で素晴らしいですが、時々、長すぎます。 （デザイナー–苦労をご存知だと思います。）そこで、少し背の高いセカンダリロゴを作成しました。

水平バージョンと垂直バージョンの両方に対応した後、次に、ロゴを小さいサイズに拡大縮小する問題に取り組みました。 あなたが小さな小さなスペックで働き始めるまで、アイコンは素晴らしいです。 縮小プロセス中に翻訳で物事が少し失われていることに気づいたので、ロゴマークを簡略化し、太くして、すべての要素（文字自体から側面の「スピナー」まで）がどのサイズでも読みやすく美しいままになるようにしました。

その一歩を踏み出すために、さらに単純化されたロゴ（または私たちがそれを私たちのバグと呼んでいるように）も作成しました。 ロゴマークからいくつかのスポークを削除し、要素間のスペースを増やし、それをほんの少しだけ厚くすることで、バグを幅50ピクセルまで小さくすることができます。 私たちはそれをかなり誇りに思っており、それが行く小さな魔法の場所のすべてを見るのが待ちきれません。

私たちのまばゆいばかりの新しいカラーホイール

この辺りが初めての方は、ちょっとした秘密をご紹介します。明るく美しく、カラフルで素晴らしいデザインが大好きです。 そこで、ブランドの刷新のために単にいくつかの色を選択するのではなく、先に進んで、色合いと色合いを備えたフライホイールカラーホイール全体を設計しました。

プロジェクトを盛り上げて誰かの一日を作るための最も楽しい方法の1つは、明るい色のパンチを加えることだと私たちは信じています。 （紙吹雪についても同じ考えがありますが、それについては後で詳しく説明します！）誤解しないでください。新しいロゴは本当に蜂の膝だと思いますが、私たちにとって幸せな色合いはロゴ自体とほぼ同じくらい重要です。 そのため、ロゴをこれらの素晴らしい色の1つで使用することもできます（もちろん、特別な場合のみ）。

更新する前は、実際には2色または3色しか使用していませんでした（正直なところ、常に一貫した色合いであるとは限りませんでした）。 Flywheelブランドに忠実でありながら、より柔軟にクリエイティブになりたいと考えていたので、堅牢で気まぐれな方法で実験するための十分なスペースを提供する、明るく鮮やかな色のパレットの作成に着手しました。 メールヘッダーからソーシャルメディアグラフィック、アプリケーションのアイコンまで、Flywheelブランド全体でこれらのフレンドリーな顔料を見つけることができます。 ご覧のとおり、私たちはそれをとても楽しんでいます。

私たちの遊び心のある新しいフォント

そうです、私たちのブランドの刷新には、Flywheel自体と同じくらい気まぐれで魅力的な4つの新しいフォントも含まれています！ タイポグラフィは小さな変更のように思えるかもしれませんが、ユーザーに大きな影響を与えると考えています。 そのため、効果的な階層と魅力的な見出しを作成するために、さまざまな状況で使用できるいくつかのフォントを選択しました。

私たちの主なフォントは、見出しと小見出しに使用される、より大胆なサンセリフ書体であるMuseoSansRoundedです。 フライホイールのワードマークとルックアンドフィールが似ているこの書体も、非常に読みやすく、かなり幾何学的で、使いやすい丸みを帯びた角が特徴です。

バランスの取れた対照的に、2番目の書体はArcherです。これは、甘くて魅力的で、少し気まぐれな、より薄くてセリフな書体です。 このフォントは、半太字のイタリックのバリエーションが特に気に入っており、最も一般的には小見出しに使用されます。

真のフライホイールファッションでは、ブランドの刷新に2つの派手なフォントを追加して、見出しやグラフィックに特別な何かを追加しました。 Heartwellは、手作りの要素を備えた大胆な書体で、ペイントされたブラシスイープの外観を実現するのに最適です。

スムージーはファンシーでありながら、私たちが十分に手に入れることができないエレガントで気まぐれな外観で、スペクトルの反対側にあります。

人間的要素

私たちはデジタル世界のデジタル企業であるという事実にもかかわらず、私たちの仕事で現実世界の要素を使用することには本当に特別なことがあると思います。 そのため、私たちが作成する作品には、見事な写真とフラットなデザインの組み合わせが、見慣れた顔とともによく見られます。 Flywheelは常にホスティングの世界を人間化することを目指してきましたが、それを実現するために、私たち自身の超人的な従業員を自慢するよりも良い方法はありますか？ たとえば、下の写真を撮ります。 それは、私たちの幸福エンジニアの1人であるブライアンです。私たちの顧客の1人のために一日を節約する前に、彼の内なるスーパーマンをチャネリングしています。

写真だけでなく、私たちが作成するすべてのデジタルおよび物理的な作品は、どんなに小さく見えても、愛情と意図的なデザインで作られています。 重要なのは細部であると信じているので、私たちはあらゆる場面でお客様に卓越した体験を提供するために、さらに上を行きます。 ランディングページのアセットであろうと、エージェンシーパートナーの手作りのスワッグボックスであろうと、私たちは構築するすべてのものに人間的な要素を追加しようとします。 （それは、私たちのオフィスで紙吹雪のバケツのようなものを見つける理由でもあります。それは理にかなっています、私たちは約束します。）

さて、これはすべて非常に迅速にまとめられたように見えるかもしれませんが、私たちはこれらすべての決定を打ち出すのに数ヶ月を費やしました。 ロゴの反復から色の微調整、パッケージの実験（私たちが思っていたよりもボックスについて多くを学んだ）まで、すべての動きは、Flywheelの正しい動きを確実にするために意図的かつ慎重に選択されました。

正しく理解すると、いくつかのことが起こり始めました。 1つ目は、新しい色やアイコン、フォントに少し興奮し、電子書籍の表紙、ソーシャルメディアのグラフィック、メールのデザインにゆっくりと忍び込み始めたことです。 （私たちのせいにすることはできますか？どうすれば待つことができますか？）

2つ目は、新しいブランドをより広範囲に導入できるようになったということです。 まず、Flywheelアプリケーションです。

驚くべき新しいフライホイールアプリ

楽しい新しいフォントと美しく明るい色で武装し、Flywheelアプリに目を向けました。 インターフェースとFlywheelダッシュボードについては、常に多くの肯定的なフィードバックを受け取っているため、機能したものを維持し、改善できる要素のみを変更したいと考えていました。 クライアントがサインアップページを最初に操作してからサイトを公開する瞬間まで、Flywheelのエクスペリエンスをよりシンプルでスムーズに、そして使用するのが楽しいものにすることを目指しました。

ただし、Flywheelアプリの再設計は、フロントエンドだけではありませんでした。 私たちの開発者はまた、コードを最新化し、信じられないほどの未来に向けて私たちをセットアップするための強固な基盤を構築することに着手しました。 JavaScriptをガッツリし、コードをオーバーホールすることで、アプリをよりクリーンでクリアな、そしてはるかにモダンなものにすることができました。 多くの新しいテクノロジーを使用して、コードをブラウザーにできるだけ早く到達させ、お客様のエクスペリエンスを向上させました。

リフレッシュについての誰もが好きな部分は、それが白紙のようなものだったということです–それは私たちに全面的に決定と変更をする機会を与えてくれました。 アニメーションの扱い方から色の使用方法まで、すべてが柔軟で拡張可能な方法で、会社のすべての資料で一貫しています。

たとえば、ドロップダウンメニューを考えてみましょう。 通常、2番目の項目を選択しようとしていて、マウスの動きが速すぎて誤ってメニューから完全に離れてしまう場合を除いて、誰も実際にそれらについて考えることはありません。 この更新により、デザイナーと開発者は、そのような小さな問題について考え、それらを磨き上げて、ユーザーのエクスペリエンスを向上させることができました。 そのため、Flywheelアプリに誤ってドロップダウンメニューを残す代わりに、不器用な状態をサポートし、マウスを修正しすぎた場合に調整します。

「誰も注意を払わない、あるいは必ずしも気付かない微妙な変化ですが、本当に重要で、人々をフライホイールに恋させるのは、そのような目に見えないデザイン体験です。」 –フロントエンドエンジニア、ウィルライリー

アプリに加えた小さな変更をすべてリストアップすることはできますが、それは実際には重要ではありません（そして、自分でそれらを見つけるよりもはるかに魔法ではありません）。 特定のボタンやインタラクションについてではありません。 それは全体としてのリフレッシュとそれに加えられたすべての変更についてです。 私たちが行った小さな変更には、明確な目的があります。

「この更新には、変更のために変更するだけではないことを確認するための多くの実験が含まれていました。 私たちは、私たちの価値観と、Flywheelとのやり取りを改善するためのお客様のニーズに細心の注意を払いました。」 –リードプロダクトデザイナー、Adam Trabold

私たちの幸せな新しいホームページ

最後に、もちろん重要なことですが、Flywheelサイト全体を刷新することに着手しました。 ご想像のとおり、最初のステップは新しいブランドガイドラインを実装することでした。 すべてのフォントスタイルを更新し、サイトを新しいブランドカラーでペイントし、ページ間の一貫性の問題を修正しました。 そこに立ち寄ることもできましたが、ブランドスパンキンの新しいホームページでこのリフレッシュをさらに一歩進めることにしました！

他のすべてが大変身になっているので、ホームページを除外するのは間違っていると感じました。 これはFlywheelエクスペリエンスの重要な部分であるため、私たちは最善を尽くして、お客様（および間もなく登場するお客様）に本当に際立った何かを提供したいと考えました。 また、ホームページの背後にある戦略を再検討して、最も重要な情報を見つけやすく、理解しやすいものにする機会も与えてくれました。

「Flywheelでは、私たちはデザイナーのためであり、代理店のためです。そのため、ブランドと製品が彼らに語りかけるようにする責任があります。 それが、リフレッシュについて私が最も興奮していることです。私たちは正しい方向に大きく前進し、これからやりたいことの基盤ができました。」 – Nick Chickinelli、プロダクトデザイナー

いくつかの最終的な考え

私たちのブランドの中核をなすものとして、私たちは実際にはあまり変化していませんでした。 私たちは今でもあなたがいつも知っていて愛しているフライホイールと同じです。 私たちのビジネスは同じであり、私たちの価値観も同じであり、私たちのロゴも（ほとんど）同じです。 このリフレッシュは、Flywheelブランドをよく見て、私たちが誰になり、今も目指しているかを反映するように磨き上げたことを意味します。 それは私たちがさらに速い勢いで前進し続けることを可能にする基礎です。

「確固たるブランドがなければ、すべてが崩壊する傾向があります。 一貫性のある、認識可能なブランドを持つことは、会社のすべての部分をまとめる接着剤です。 私たちが作成したガイドラインは、クライアントの生活を楽にするより良いソリューションでより良い問題を解決するのに役立ちます。」 –グラフィックデザイナー、Andrea Trew

ボタンがクリックされたときに微妙にアニメーション化する方法であろうと、ランディングページのレイアウトであろうと、私たちはデザインが重要であると心から深く信じています。 これは、Flywheelを回転させ続ける7つの価値の1つであり、デザイナーや代理店を念頭に置いてプラットフォームを構築した理由の1つです。

「私たちはホスティングスペースを超えて素晴らしい会社を目指しています。そのため、私たちが誰であるかを実際に伝え、製品の品質を反映するブランドを持つことは非常に重要でした。それがこのリフレッシュで達成したことだと思います。」 –ダスティ・デビッドソン、CEO兼共同創設者

これはほんの始まりに過ぎず、Flywheelをさらに改善するために、この更新を拡張するのが待ちきれません。

さて、あなたは私たちのリフレッシュの舞台裏を見てきたので、あなたはどう思いますか？ コメントであなたの考えを聞いて、素晴らしいものを改善し、構築し続けることができるようにしたいと思います！