apeescape2.com
  • メイン
  • その他
  • モバイル
  • 収益性と効率性
  • 製品ライフサイクル
Uiデザイン

ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来

ウェブサイトはより混沌とし、雑然としていて、洗練されていませんか?良いデザインのルールは破られていますか?ウェブは醜くなっていますか?これは新しいトレンドですか?

あなたがほとんどのデザイナーのようで、何が起こっているかに細心の注意を払っているなら、あなたはその言葉を聞いたことがあるでしょう ブルータリズム しばらくの間リリースされています。ブルータリストのWebサイトは、長い間業界のベストプラクティスであった使いやすいインターフェイスから離れ、代わりに欠陥のある手動でコーディングされたHTMLサイトに焦点を合わせています。デザイナーは私たちが知っているようにUXのルールを捨てており、すべてが少し混乱しているように感じています。

アドレス可能な市場とは何ですか

洗練された現代的なデザインの原則は非常に一般的であるため、スタイル上の選択とはほとんど考えられません。 「良い」ウェブデザインとは、一般的にミニマリズムのルールに従うものを意味します。クリーンでシンプルで整頓されたインターフェース-しかし、これは常にそうであるとは限りません。時計を数十年前に戻しましょう。

ウェブの誕生

Webデザインは、1991年に 最初のウェブサイト 。インターネット革命は、第1世代のHTMLを使用した最初の純粋なテキストベースのWebサイトから始まりました。

1991年に最初のワールドワイドウェブサイト

1991年8月6日に公開された最初のウェブサイト「デザイン」。

次に、誰もが確実に覚えているクレイジーなアニメーションサイトをすべて備えたFlashが登場しました。 CSS(カスケードスタイルシート)の開発が始まり、 ウェブデザイナー コード内の背景色、テキストサイズ、テキストスタイルなどの拡張機能をさらに細かく制御できます。 JavaScriptは、ドロップダウン、高度なナビゲーション、およびエラーチェックWebフォームを提供してくれました。

最初は、「ウェブデザイン」の本当の意味を誰も知らず、ウェブのパイオニアたちは試行錯誤しながらデザインパターンを確立しました。ウェブデザインの原始時代は、形式的なセマンティクスとアクセシビリティにほとんど注意を払わず、構造よりも美学を選択するデザインを使用していました。

1998年のGoogleウェブサイト

Googleウェブサイト-1998

設計者は、レイアウトを構築および構造化するために、テーブル、ネストされたテーブル、非表示の1ピクセルスペーサーファイルなどのHTML要素に大きく依存し、より複雑な複数列のレイアウトを作成できるようにしました。かなり退屈なインターフェースを作りました。

2000 CNN.comWebサイト

CNN.comのウェブサイト-2000

2004年エンロンのウェブサイト

エンロンウェブサイト-2004

2000年代半ばに、ウェブサイトはその構造の背後にあるより慎重な思考で生まれました。ナビゲーションはブラウザの上部にあり、カテゴリは左側のバーに配置されていました。 Webページは短くて狭く、コンテンツはユーザーにスクロールを強制しないように多くのページに分散されていました。デザイナーは何がうまくいくかを学び、より良いサイトを構築し始め、その過程で基準とベストプラクティスを設定しました。

ますます多くのデザインオプションとともに、画像とテキストが全体に詰め込まれたノイズの多いUIが混在しています。しかし、一部の規律あるデザイナーは、依然としてミニマリズムを選択しました。

ミニマリストの美学

デザインのトレンドは行き来します。ただし、ミニマリズムは、古くから存在しているデザイン言語です。これは、デザインの最も単純で最も重要な要素を使用することによって達成される、フォームの簡素化に焦点を当てたデザイン哲学です。

ミニマリズムはウェブデザインに限ったことではありません。そのデザインの理想を包含するあなたの周りのすべての要素を考えてください。ミニマリストのデザインを、Nest、Apple、Herman Miller、および多くの[ミニマリストデザイナー](https://www.toptal.com/designers/digital)に影響を与えた他の多くのデザインと簡単に結び付けることができます。

最小限のNestHomeデバイスの設計

Nestはシンプルで目立たない製品デザインを提供します

ハーマンミラーイームズローズウッド670/671ラウンジとオットマンチェア、ミニマリストデザイン

時代を超越したかけがえのないオフィスのためのクラシックなイームズラウンジチェア

AppleのミニマリストデザインのMacBookPro

エレガントでミニマリストなスタイルはAppleの名刺です

ハーマンミラーのデザインを今日素晴らしいものにしているものは何ですか?それらは、時代を超越した外観を持つ、単にうまく設計されたオブジェクトです。彼らのデザインは現代の家やインテリアにぴったりで、今日でも新鮮でモダンな感じがします。彼女の作品の多くはミニマリストの外観でデザインされており、特定のファッションに結び付けることはできません。彼らはまだ時の試練に耐えます。

adobe xdccとは

彼の時代の最も有名なグラフィックデザイナーの一人のミニマリストデザイン、 ヨゼフミューラーブロックマン 、ハーマンのものと非常に似ています。ミラー: 時代を超越した 。ミューラーブロックマンは、1940年代から1950年代にかけて、ミニマリズムを受け入れ、支配しました。 スイスのデザインスタイル 。

無関係または無関係な装飾は、彼のグラフィックデザインから削除されました。デザインの各要素には目的がありました。このアプローチの背後にあるデザイン思考は、ミニマリストのデジタルデザインを今日非常にうまく機能させるものです。

ヨゼフ・ミューラー・ブロックマンによるポスター

Josef MullerBrockmannによるクリーンでモダンなタイポグラフィとポスターデザイン

デジタル時代にミニマリズムがどのように確立されたか

歴史は常に私たちに到達する方法を見つけます。印刷デザインの場合と同様に、ミニマリズムとその背後にある哲学は、Webデザインやその他のデジタルアーティファクトに適合しました。ほんの数年前、光るボタン、線、テキストの段落がすべて注目を集めてウェブサイトがどのように見えたかを考えてみてください。

それから来ました スキューモーフィズムの傾向 デザイナーがデジタル空間の実際のオブジェクトを模倣する要素を設計した場所。革の詰め物を覚えていますか iCal de Apple ?

最小限のデザインは実際には意図的なものです。 これは、不要なものをすべて取り除き、最も注目を集めると思われる要素に焦点を当てた設計アプローチです。 コンテンツに重点を置く 。

ミニマリストのウェブデザインのスプラッシュ画面

3つの簡単な言葉を使用してデジタルエージェンシーのコアの強みに焦点を当てる- コンボイ

Chylakホーム画面のWebサイト

このミニマリストのeコマースデザインは衣服に重点を置き、不要な気を散らすものをすべて排除します。 - チラック服

ミニマリストのiOSアプリのデザイン

追加の混乱なしで、ユーザーは、ミニマリストのアプリ設計で主要なユーザーインターフェイス要素に集中します。 投資家の 。

ミニマリストデザインの利点

ミニマリストデザインのアプローチは、見た目だけでなく、さまざまな理由で採用されました。ユーザーの行動、プロセスに関する理解を深める デザイン思考 との増加 最初のコンテンツデザインプロセス この考え方を前進させるのに役立ちました。最近のモバイルユーザーの大幅な増加は、UXと使いやすさに重点を置いた、ミニマリズムへの強力な加速ポイントとなっています。

ユーザーはいつでもインターネットにアクセスできるようになり、 プロダクトデザイナー 彼らは、その瞬間の文脈で絶対に不可欠なものを提供することに焦点を当てる必要があります。つまり、適切なものを適切な方法で適切なタイミングで提供し、設計はその最も基本的な特性に帰着します。

モバイルの使用は現在 すべてのWeb訪問の半分以上 、およびこのレートは増加するだけです。レスポンシブデザインはゲームのルールを変更し、強制しました デザイナー 「違った考え方」をする。今日、これまで以上に、レスポンシブまたはアダプティブデザインは、ミニマリストデザインアプローチが非常に重要であるモバイルデバイスの世界で必要です。

平均的なユーザーにとって、ミニマリズムは設計が最も簡単なことのようです。最小限のビジュアルコンテンツを使用して完璧なバランスを取り、最大限のエレガンスを備えた基本的な要素のみに集中することは、非常に非常に困難です。

ミニマリズムの未来

ミニマリズムは、実際のトレンドや単純な承認フェーズではなく、時代を超えたコンセプトであり、優雅さと洗練さを放っていると考える必要があります。時代を超越した古典的ですが、20世紀初頭の実装以来すでに見てきたように、進化し、改善されます。

例えば、 Googleマテリアルデザイン これは、ミニマリズムに着想を得た「フラット」デザインアプローチの最初の大きな進化の1つでした。 Googleのデザイナーは物事をシンプルかつ最小限に抑えましたが、 影の効果と動きと深さの概念 。素材は、特定のひねりを加えたフラットなデザインを取り入れています。それは、現実世界の素材を模倣しています。

マテリアルデザインウェブサイトのデザインガイド-Google

マテリアルデザインウェブサイトのデザインガイド-Google

ミニマリズムの欠点

人生の他の要素と同様に、私たちは常に賛否両論を見なければなりません。今日のウェブサイトは味がなく、ほとんどすべて同じであると多くの人が主張しています。あなたが知っている、テキストオーバーレイ付きの大きなヒーロー画像やビデオ、テキスト付きのアイコンの列など。誰でも数分で、お互いによく似た10のサイトを思いつくことができます。これは、絶えず変化するオンラインの行動や好みを反映していますか?

デザインと一般的なユーザーの行動に対するデザインの一貫性は、すべてのデザインで非常に重要ですが、ユニークであることの価値を忘れることはできません。怠惰になったのでしょうか、それとも独自性からより効果的なユーザーエクスペリエンス戦略に考えを転用したのでしょうか。

ミニマリストデザインのランディングページ

うまく実行されましたが、独創性に欠けています。製品、テキスト、テキスト付きサムネイルのビッグヒーロー画像。

ウェブデザインにおけるブルータリズム

その堅牢性と快適または簡単に見えることへの懸念の欠如において、残忍さは、今日のユビキタスなミニマリストWebデザインの軽さ、楽観主義、および軽薄さに対する若い世代の反応と見なすことができます。

好きな人もいれば嫌いな人もいれば、理解できない人もいます。 ブルータリストのウェブサイト 。

取る クレイグズリスト 例として。 Craigslistは、ブルータリストのWebサイトの「おじいちゃん」と見なす必要があります。それは審美的に満足のいくものではなく、決して現れないでしょう www.awwwards.com 。黒のテキスト、青のリンク、白の背景。かわいくない。それが機能するからである必要はありません-そしてそれは本当にうまく機能します。大騒ぎや混乱なしに、奇妙な可動部品なしで、売買する必要があるものを見つけてください。

ブルータリストの才能を持つCraigslistのウェブサイト

クレイグズリスト それは青い絆の塊です。スケルトン、機能的なユーザーインターフェイス。

1996年の設立以来、Craigslistは、その非常に実用的なデザインにもかかわらず、またはおそらくそのために、人気を維持しています。過去20年間、デザインは大きく変わっていません。

おそらくCraigslistの例に触発されて、ブルータリストスタイルが復活しています。以下は、ブルータリストスタイルを使用したうまく実行されたデザインの優れた例です。

デザインスクールブルータリストのウェブサイトを購入する

グローバルベンチャーキャピタルの洞察とトレンド2016
デザインスクールを購入する 粒子の粗いグラデーションの背景に、乱雑なカードのスタックとして作品のギャラリーを表示します。

ブルータリストのウェブデザインの例

Concept83 インスピレーションを得るために初期のインターネットからインスピレーションを得ました。

ブルータリストのウェブサイトのデザイン例

クリエイティブショーオフユトレヒト ブルータリストのデザインスタイルで明るい色を使用します。

ブルータリストのウェブデザインのウェブサイトの例

のウェブサイト上の型破りなブルータリストのデザインレイアウト Slugz

これらのブルータリストのウェブサイトは大いに注目を集めています。なぜこれらのウェブサイトは突然とても人気があるのですか?一部のデザイナーがウェブの均質化に飽きたからですか?

UXデザインが最重要であり、ユーザーの行動とコンテンツの焦点が最初に重要である時代には、これらのサイトのUXは(意図的に)悪いものです。ミニマリズムの原則に反して、これらのデザインは、デザインがいたるところにあるテキストと画像のコラージュに直面しています(ここでも意図的に)。

ブルータリズムの簡単な歴史

ブルータリストのデザインスタイルは新しいものではありません。のクイック検索 ウィキペディア スタイルは実際には1950年代から1970年代半ばまでのブルータリスト建築から来ていることがわかります。 ブルータリズム モダニズム建築運動が続いています。 ミニマリズム それが鍵でした。

ル・コルビュジエ 彼はこの運動の最も偉大な先駆者の一人でした。彼のキャリアは、ヨーロッパ、日本、インド、南北アメリカで設計された建物で50年に及びました。

この用語はフランス語の単語「 キモい ル・コルビュジエが彼の材料の選択を説明したように、「原油」については グロスセメント 」、生コンクリート。超機能的なデザインは、モダニズムと握手しているように、実用性を提供するためだけに設計されたようで、喜ばないように見えました。

ブルータリズムは大量生産された社会に対処しようとします、そしてそれは仕事で混乱していて強力な力から粗野な詩を引き出します。これまで、残虐行為はスタイリスト的に議論されてきましたが、その本質は倫理的です。 -アリソンとピーター・スミスソン、新しいブルータリズム、建築設計(1957年4月)

ブルータリストのデザインは、形より​​も機能を選択して、外観をフラットに拒否します。ブルータリストのデザイナーは、最小限の労力でデザインを実行することに誇りを持っています。 入手可能な最も安い材料 、より正直で反ブルジョアの結果を達成するために。

ブルータリストスタイルで建てられたモントリオールのハビタット67団地

1967年4月27日、ハビタット67として知られるサフディの都市型住宅団地がモントリオールで開催される万国博覧会で開かれました。

デジタル時代のブルータリズム

ブルームバーグ ニュースサイトに独自の方法でスタイルを採用しています。デザインはほとんど人目を引くものであり、生の機能に明確に焦点を当てています。

ブルームバーグのブルータリストのウェブサイト

ブルームバーグのホームページ

ブルータリズムは確実に復活しています。醜い、粗野な、従来のデザインはなく、サスペンス効果と表面的な装飾がいたるところにあります。多くの純粋主義者は、この傾向を厳しく、厳しく、険しく、不快で、対立的で、皮肉なものだと考えています。それは意図されています。

概要-ブルータリストのウェブデザイン

アウトライン 、オンラインマガジンは、その編集スタイルに反する派手で華麗なブルータリストスタイルを選びます。

ブルータリズムは、デザインに対してより原始的なアプローチを取り、Webデザインのコアであるコードに再び焦点を合わせます。ブルータリズムはしばしば「醜い」デザイントレンドとして描かれますが、私たちはそれを超えて見なければなりません。ブルータリスト運動の背後にある哲学は、物事を「醜い」ものにするのではなく、粗雑で飾り気のないものにすることです。

今日のブルータリストサイトは、90年代のDIYウェブに基づいており、美しいファサードの背後に機能を隠すのではなく、裏返しのアプローチに焦点を当てていると言えます。

不和ボットを取得する方法

人気のソーシャルメディア共有サイトのUIデザイン Reddit それは、申し分のない生で箱型で、90年代後半のウェブタイポグラフィ、洗練されていない重いコントロール、そして垂直方向に呼吸する余地がほとんどありません。

RedditのブルータリストUIデザイン

Reddit 最初のウェブの明るい青色のリンクを含む機能に賭けます。

デザイナーのPierreButtinは、一連の再設計されたモバイルアプリで、ブルータリズムを新たな極限に引き上げました。彼の最新のプロジェクトでは、 ブルータリストの再設計 Buttinは、Facebook、Instagram、Twitter、その他の人気のあるアプリを、重いテキストレイアウトとフラットなレイアウトで、ブルータリストスタイルで作成しています。

ブルータリストスタイルのFacebookアプリのデザイン例

再設計されたFacebookモバイルアプリ ブルータリストスタイル 。

ブルータリストスタイルのTwitterアプリのデザイン例

クリーンでクリアなTwitterデザインスタイル、 ブルータリストの変化 。

ブルータリズム対。ミニマリズム

ブルータリズムとミニマリズムは、比較的見られるべきではなく、物事を見る新しい方法とデザインへの別のアプローチとして見られるべきです。ブルータリズムは、現在のサイトとアプリケーションの均質化に対する衝動ですが、以前は デザイナー 彼らはブルータリストのアプローチを使用してウェブサイトのデザインを始めることさえできます、彼らは最初に彼らが破ろうとしている規則を知らなければなりません。

従来のミニマリストデザインが残忍なものに取って代わられることはありません。ブルータリズムは、現状に挑戦するデザイン文化、「最高」と言われることにうんざりしている文化と見なさなければなりません。

次のプロジェクトでこれらのスタイルを選択するとき、正しいことも悪いこともありません。ただし、廃業して次のWebサイトやアプリをブルータリストのデザインスタイルでデザインする前に、対象者を知っていることを確認してください。あなたが会社とあなたの聴衆がそれを評価すると思うならば、危険を冒してください。

残忍なウェブデザインが注目を集めており、ブランド認知度は非常に急速に高まっています。ルールは破られるように作られています。あえてウェブをウェブにします。少し変だとしても、あえて目立ち、少し大胆に。

Node.jsでの安全なRESTAPIの作成

技術

Node.jsでの安全なRESTAPIの作成
Windows 10開発:古い問題に対処し、開発者に新しい扉を開く

Windows 10開発:古い問題に対処し、開発者に新しい扉を開く

技術

人気の投稿
WebRTCアプリケーションを構築する1年:スタートアップエンジニアリングの教訓
WebRTCアプリケーションを構築する1年:スタートアップエンジニアリングの教訓
PHPメモリ内のオブジェクトと参照の概要
PHPメモリ内のオブジェクトと参照の概要
AngularJSからReactに切り替えた理由
AngularJSからReactに切り替えた理由
すべてのデザイナーが聞くべき13のポッドキャスト
すべてのデザイナーが聞くべき13のポッドキャスト
Laravelゼロダウンタイム展開
Laravelゼロダウンタイム展開
 
Unity with MVC:ゲーム開発をレベルアップする方法
Unity with MVC:ゲーム開発をレベルアップする方法
プロスポーツフランチャイズ評価
プロスポーツフランチャイズ評価
小さなデータ、大きな機会
小さなデータ、大きな機会
マイクロインタラクションによるより良いUX
マイクロインタラクションによるより良いUX
ネットプロモータースコアが十分ではありません:ユーザー調査が必要です
ネットプロモータースコアが十分ではありません:ユーザー調査が必要です
人気の投稿
  • サーバーサイドレンダリングとは
  • これらのうち、プロジェクトから利用可能なキャッシュフローの合計額の尺度として使用されるのはどれですか
  • Windows用のコマンドラインツール
  • cは何に使用されますか
  • 良いデータベースを作るもの
  • Webアプリケーションの脆弱性トップ10
カテゴリー
データサイエンスとデータベース リモートの台頭 モバイルデザイン 人とチーム エンジニアリング管理 革新 ツールとチュートリアル ヒントとツール 分散チーム ブランドデザイン

© 2021 | 全著作権所有

apeescape2.com