私たちが気に入っているウェブサイト：気まぐれ

気まぐれ：まばゆいフローチャート、ワイヤーフレーム、マインドマップ作成アプリケーション。最近、そのウェブサイトのデザイン、特に製品ページが優れていることがわかりました。たとえば、マインドマップ機能を導入するページでは、マーケティングWebサイトで製品を直接体験できます。

とても賢いのではありませんか？これはすべてのおかげです<canvas></canvas>要素の力。もちろん、SVGを使用して同様の効果を達成することもできますが、SVGを選択するときに<canvas></canvas>それらの間には常にぼやけた境界があります。

しかし、デザインの観点から、私は「広告は製品」というこのアイデアが好きです。また、一般的な登録プロセスを放棄し、アプリケーションの価値をユーザーに直接表示するのが好きです。ほとんどの製品は、ユーザーがその価値を体験するために初心者ガイドを登録および完了する必要がありますが、気まぐれなことはそうではありません。広告自体は製品です！

また、私はこのウェブサイトのデザインが本当に好きです。各製品機能には独自のテーマがあり、閲覧時に製品のデモンストレーションがより目を引くようになります。それは小さな詳細ですが、サイトの残りの部分を探索し、そこにある素晴らしいUI要素を見たいと思うようになります。

また、ワイヤーフレームに直接ジャンプできる実際の例も気に入っています。ここには、アプリケーションがどのように革命をもたらしたり、マインドマップの芸術を変えることができるかについてのマーケティングはありません。それはすべて、最初に製品自体を見せることです。

しかし！ナビゲーションに戻りましょう。これらのアイコンにタグを付けることは興味深い決定です。それは美しいですが、各アイコンとはどういう意味ですか？クリスは以前の記事でこの質問について議論しました：アイコンはコンテンツですか？つまり、数十年にわたってソフトウェア設計分野でアイコンをマークするかどうかについての議論です。 Jef Raskin（1980年代のオリジナルMacintoshのデザイナーの1人）は、彼の優れた本のHuman-Computerインターフェイスに、マークのないアイコンを残してはならないと述べています。多分それは少し多すぎるかもしれませんが、この場合、これらのアイコンをマークするのは悪いことではないと思います。なぜなら、それらは製品固有であり、マインドマップのアイコンは毎日見ることができるものではないからです。

気まぐれなタイポグラフィも非常に興味深いものです！彼らはDINの次のフォントを使用していますが、少なくとも私にとっては、視覚的なデザインで少し外れています。 Din Nextは、見過ごされやすいフォントです。リードを奪い、コンテンツを中心にするように設計されています。

しかし、フォントの成功は、その大胆な視覚デザイン、つまり波のようなライン、浮かぶ円、三日月形のどこにでも、すべてUIに登場することだと思います。そうは言っても、UIのビジュアルが非常に強いとき、フォントがあまりにも顕著であることを望まないかもしれません。私はポジティブな意味で強いことを意味します。

ただし、このようなインターフェイスを設計するには、色のアクセシビリティを考慮する必要があります。 Stacie Arellanoは、なぜ色のコントラストが非常に重要であるかについての以前の記事を書きました：

数学的な方法を使用して、 2つの色の間に十分なコントラストがあるかどうかを知ることができます。

W3Cには、成功したコントラストガイドを含むWebコンテンツアクセシビリティガイド（WCAG）2.1というドキュメントがあります。数学を始める前に、到達したい、またはそれを超えるコントラスト比スコアを知る必要があります。合格スコア（AA）を取得するには、ほとんどのテキストのコントラスト比は4.5：1で、大きなテキストは3：1です。

ここでは気まぐれな数字をチェックしませんが、特にUIが明るくカラフルな背景に多くの白いテキストがある場合は注意を払う価値があります。私は何度もこの間違いを犯しましたが、とても簡単な場所です。しかし、ユーザーがUIのテキストを読むことができない場合、それは大きな問題です。

要するに、Whimsicalの製品Webサイトはさわやかです。それは強い視覚的影響を持ち、製品の価値と機能を「説明」ではなく「デモンストレーション」によって伝えることができることを示しています。

これは質問を思い出させます：あなたが最近訪れたWebサイトはあなたの注意を引き付けましたか？

以上が私たちが気に入っているウェブサイト：気まぐれの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。