ウェブサイトのデザイン: デザインにおけるミニマリストスタイルの適用に関する簡単な説明

みなさんこんにちは、アムです。今日は、Weibo での実際のプロジェクトに基づいて、ミニマリストスタイルのデザイン体験の一部を皆さんと共有したいと思います。現代の都市生活では、私たちは毎日、騒々しく混雑した道路や地下鉄、あらゆる種類の広告に直面し、さまざまな電子メールやメッセージを処理しなければなりません。そこで私たちは、心の中である種の体験、つまりミニマリズムを追求します。MUJI、Apple、IKEAなどの有名ブランドはすべてこのスタイルの推進者であり、その製品も大きな成功を収めています。

ミニマリズムとは、物事をシンプルにすることで被写体を際立たせる写真撮影技法です。人生においては、人生に対するリラックスした姿勢です。デザインにおいては、簡潔なデザイン技法です。

Weibo のデザイン体験についても同様です。複雑な視覚的干渉を排除し、ユーザーに快適でリラックスできる視覚体験を提供することに努めました。

1. 微博都市プロジェクト

Weibo Local Project のデザインに関しては、インスピレーションを与えてくれた写真家に感謝しなければなりません。

ドイツの写真家ヨーゼフ・シュルツ（1966年オランダ生まれ）

ローカルプロジェクトでは、ユーザーのログイン IP に基づいてログイン場所を決定する必要があります。雰囲気を演出するには、地域の習慣や文化を反映したヘッダー画像が必要です。どうすればいいでしょうか? どうすればユーザーにくつろいでもらえるでしょうか?

食べ物、風景、建築をテーマにしたいと思っていたところ、偶然この写真作品群を見つけました。余計な光の効果がなく、映像がきれいで見ていて気持ちが良いです。しかし、一見単純なものでも、実は普通の写真よりも角度や構図に多くの注意が必要です。例えば、次の写真セットは平面構成と遠近法の原則を追求しています。内容は単調に見えますが、構図感は非常に強いです。

そこで、都市建築を使って表現することにしました。まず、インターネットでいくつかの大都市のランドマークとなる建物を探し、それらを簡略化して洗練させ、建物の主な特徴を概説しました。香港を例に挙げましょう。

まずは香港を代表する夜景を見つけました。

次に、簡単な建物の骨組みを描いて、色付けを始めます。そういえば、面白いことをお話ししましょう。宮崎さんのスタジオでは、「男の子」のグループがスケッチや構造図を描く役割を担い、「女の子」のグループが色付けを仕上げます。

【最終効果画像】

他の都市の設計プロセスも同じなので、詳細は説明しません:)

残念ながら、このプロジェクトはさまざまな理由によりオンライン公開後すぐに削除されたため、ご覧になれなかった可能性があります。へへ～

このプロセスで学んだちょっとした経験をまとめると、同じような商品ページを扱うときは、フラットなシルエットグラフィックを使用し、デザインにリズム処理を加えてから、色を使って絵を引き立てることを検討できます。視覚効果が得られます。皆さんに活用していただければ幸いです。

次のプロジェクトは誰もが毎日使用しています。小さくて気づきにくいですが、ユーザーの認知的負担を大幅に軽減します。アイコンを使用すると、必要なものをすぐに見つけることができ、ユーザーに明確なガイダンスを提供できます。

2. Weiboアイコンデザイン

このアイコンは、昨年末、Weibo を改訂する必要があったとき (V4) に作成されました。以前のアイコンには、スタイルの一貫性がなかったり、サイズがさまざまであったりするなど、多くの問題がありました。

整理後のアイコンです。アイコンにはクリスタルテクスチャはなく、テクスチャの整形もあまり施されていません。主なデザインスタイルはミニマリストであり、Weibo 全体の体験の「軽快」と「薄さ」の精神と一致しています。

Weiboの新バージョンと旧バージョンの公開ボックスを比較してみましょう。アイコンの明瞭さとミニマリストデザインスタイルの視覚効果がはっきりとわかります。旧バージョンのアイコンには不要なハイライトや立体的な効果が多くありましたが、これらの効果では期待した効果が得られず、認識度が大幅に低下していました。

3. グラフィックデザイン

まず、チャートの色調を定義します。このチャートと上記の 2 つのデザインの違いは、色によって識別されることです。したがって、色の選択は特に重要です。チャートは時々かなり退屈になるので、暖色に比べて目に優しく、ユーザーの退屈や嫌悪感を軽減できる寒色を選択しました。

微妙な光と影を追加しますが、全体的な方向性は依然としてミニマリストです。

[円グラフ]

オプションを追加する際、メインカラーに合わせて他のオプションの色を展開する必要がありますが、少し注意点があります。似たような色なので、左右で色を区別できるように、各色が表示される位置を指定する必要があるため、開発者向けに色仕様を作成しました。

[グラフチャート]

曲線チャートでも同様で、一部の影は弱く、細部の変化が強調表示されます。

要約すると、ミニマリズムはシンプルという意味ではなく、冗長性を拒否するという意味です。

読んでくれてありがとう:)

最後に、いくつかの推奨ウェブサイトをご紹介します。

http://www.josefschulz.de/ (記事の最初に登場した写真家のウェブサイト)

https://www.mint.com/t/012-c/ (チャートがいいですね)