テンプレートからeコマースのカスタムデザインまで

公開: 2020-05-30

オーダーメイドのスーツやガウンを着たことがありますか? 人生のいくつかの特別な瞬間を除いて、ほとんどの人はそうしません。ほとんどの場合、彼らはラックから選択を選択し、その選択はいくつかの場所で調整されます. ここに裾を入れ、そこにタックを入れると、素晴らしい機能的な服ができあがります. しかし、あなたの人生の中で幸運にも、生地のボルトから才能のある仕立て屋を見つけることができるかもしれません. 彼らはあなたの寸法を取り、あなたが望む作品についてあなたに話します.彼らが作るすべてのステッチには目的と目標があります. これは、基本的に、Web サイトテンプレートとカスタムメイドの Web サイトの違いです。テンプレートをラックから降ろして、いくつかの調整を加えれば、完全に機能するサイトにすることができます。しかし、e コマースのカスタムデザインには、より多くの検討と時間が必要であり、世界に見せたいブランドに合わせて完全に調整されたものになる可能性があります。

1Digital を使用して、私が意味することを説明します例としてエージェンシー。結局のところ、私たちは完璧ではありません。私たちも、すぐに使えるテンプレートの簡単な修正に夢中になることがあります。 Genius eCommerceという姉妹サイトがあります. しばらくの間、WordPress の業界ブログでしたが、数か月前に、e コマースデジタルマーケティングサービスに特化したエージェンシーサイトに変更しました。そのピボットを行ったとき、できるだけ早く何かを立ち上げたかったので、WordPress テンプレートを使用しました。テンプレートサイトを検討する際にクライアントに警告することはすべて、コンバージョンの最適化、速度、ブランドの統一など、Genius eCommerce にとって問題になっていることがわかりました。同じように。そこで私たちは独自の薬を服用し、Genius eCommerce に提供することにしましたボトムアップの e コマースカスタムデザイン。違いは信じられないほどです。

テンプレート

テンプレートは WordPress/Woo-commerce のデザインです。ご覧のとおり、いい感じです。ブランドのフォントと色の一部を使用して、1Digital と視覚的に統一しています。サイト。

また、同じアイコンパックを使用して、1Digital にさらに接続しました。ブランディング。

クライアントとケーススタディの一部を強調するために、いくつかのカスタム開発セクションでテンプレートを具体化しました。

そして、あなたはそれを持っています！完全にサービス可能なテンプレートサイトで、非常に迅速に稼働します。

私たちの SEO アカウントマネージャーである Colin は、この問題のいくつかに最初に気づきました。「サイトの速度は、私が最初に気付いた問題でした」と、サイトの SEO 監査について説明したときに、Colin は私に言いました。「画像が適切に最適化されておらず、サードパーティのスクリプトが最も効率的な方法でサイトに読み込まれていませんでした。」それを超えて、サイトはいくつかのGoogleランキングを見始めていました. 訪問者を再び誘導するために懸命に取り組んできたページが魅力的なものになるようにしたかったのです。「このサイトには何の個性もありませんでした」と Colin は私に言いました。

新しいデザインのロードマップ

クライアントとの e コマースカスタムデザインの最初のステップは、ロードマップを作成することです。私たちは、クライアントが好むサイトを見て、その業界でなぜそのサイトが機能するのか、そのサイトが伝えなければならない本質的なメッセージは何かを理解しようとします。 1デジタル用エージェンシーは、私たちのビジネス全体の大部分と幅について話しますが、Genius eCommerce 私たちが行っていることのマーケティング部門にのみ焦点を当てていました。「アイデアは、1 つの非常に具体的なものに焦点を当てることでした。そのため、デザインは非常にシンプルにする必要があります。」Art, 1Digital の主任デザイナーが教えてくれました。インスピレーションを得るために、Google が使用しているフラットな UI を調べました。

Art はまた、「天才」という言葉を使ってブランドアイデンティティを表現したいと考えていました。「アカデミックで大脳的な感覚を与えたかったのです。天才的なアイデアに結びつけるために」とアートは私に言った。「学術論文を読んでいるように」

新しいロゴを作成する

「新しいサイトには独自のロゴが必要です」と Art 氏は言います。ロゴは、デザインの世界において非常に重要な基盤です。クライアントのために新しいカスタムデザインを開始するときは、ロゴからカラーパレット、グラフィックスタイル、およびブランドの一般的なトーンについてヒントを得ます。「ロゴのアイデアは、デザインの残りの部分とどのように連携したいかを固めたものです」とアートは私に言いました。

優れたロゴには、目を引く興味深い視覚要素が必要です。優れたロゴは、ブランドのメッセージを視覚的に表現することもできます。 Genius eCommerce のために決定した新しいロゴの作成に至った進化の一部を以下に示します。 .

グラフィックアートが検討していたいくつかのグラフィックアートが最終バージョンでどのようにまとめられたかを見ることができます。天才を表す原子図と e コマースを表すカートは、ロゴのグラフィック要素のために融合されました。ブランドのメッセージを視覚的に伝えるデザインの一部です。あなたの脳は、これら 2 つのよく知られたシンボルを無意識のレベルですでに理解しています。ロゴは、2 つのコアコンセプトを組み合わせたものです。また、原子内で回転する電子が、genius という単語の点線の「i」を兼ねていることに注意してください。これは、最初は認識できなくても、目を引く興味深い視覚要素です。

カラーパレット

ロゴで使用される色は、サイト全体で使用される色のパレットを設定します。それらは、さまざまな効果のためにさまざまな分野で採用されています。

ロゴの青緑と赤が、ページ上のさまざまなアクションアイテムを強調するためにどのように使用されているかを上で確認できます。 2 つの色は、情報の階層を作成するために使用されます。赤/オレンジはより明るく攻撃的であるため、サイト全体で控えめに使用されています。これを使用すると、「開始する」や「見積もりを依頼する」などの優先度の高いアクションに注意を向けることができます。ティールはわずかに柔らかいため、アクションへの直接的な呼び出しほどではなく、注意を引きたい要素に使用されます. 「当社」や「当社の評判」などの項目。

ティールはページヘッダーにも採用されています。色を使用することで、ページの見出しをメインの見出しとサブの見出しに分割しながら、すべてを 1 行にまとめていることに注目してください。

もちろん、新しいサイトには 2 色以上の色があります。ペンキのスプラッシュが必要な他の場所については、1Digital を参照しました。ブランドパレット。これは、すべてのブランドが持つべきものです。ブランドパレットは、色やその他のグラフィックデザイン要素をどのように使用するかについての一連のガイドラインです。そうすれば、Web から印刷物、会社の T シャツまで、さまざまなメディアで一貫性を保ちやすくなります。

ブランドパレットのこれらの追加の色は、セクションを区別するためにサイトで使用されました。「ユーザーがウェブサイトの別のセクションにいることを示すために、色を使用しています」と Art 氏は言います。以下のページでわかるように、見出しの紫色はプラットフォームページに対応し、オレンジ色はデジタルマーケティングチャネルに対応します。

メインの 1Digital がエージェンシーのブランドカラーであるロゴの水色は、一箇所だけに留めています。当社のメイン Web サイトにリンクするセクションで使用されます。

eコマースカスタムデザインの理由

多くの潜在的なクライアントから、「テンプレートをはるかに迅速かつ安価に展開できるのに、なぜカスタムデザインを待つ必要があるのか?」という質問を受けました。その理由は、私たちが Genius eCommerce で経験したことほど明確ではありませんでした。 . テンプレートはスタイルを設定できます。フォントや色を追加したり、あちこちにいくつかの変更を加えたりすることはできますが、最終的には、他の誰かのために作成されたサイトに小さなパーソナライゼーションを加えることになります. e コマースのカスタムデザインプロセスを経ると、途中のすべての決定が、どんなに小さなものであっても、誰かがあなたのブランドとその背後にあるメッセージについて考えます。ロゴのような大きなものから、フッターのボタンに使用する色のような小さなものまで。途中で下されたこれらの小さな決定のそれぞれの合計は、数値化できません。カスタムサイトをより最適化する方法や、より簡単に変換する方法については常に話していますが、最終的には、これが主な利点であり、そのプロセスを少なくとも 1 回経験するまで説明するのは困難です。カスタムデザインプロジェクトでは、体に合わないスーツを着ることはありません。プロセスのすべての段階であなたの体型を念頭に置いて仕立てられたフォーマルウェアを着ています. このカスタマイズされた外観は、Web サイトを見つけたすべての人に第一印象を与える方法です。

テンプレートにあまりにも長い間悩まされてきた場合は、カスタムのものへのアップグレードを検討する時期かもしれません. 当社の専門の e コマースデザイナーがお客様のストーリーに耳を傾け、ウェブサイトでそれを伝えるお手伝いをします。 1Digital までお問い合わせください代理店と、カスタムの e コマースデザインプロセスがどのように Web サイトの新しい可能性を解き放つことができるかを確認してください。

PDFをダウンロード