ブルータリストデザイン

ブルータリズムは1920年代半ばに出現した建築様式ですが、その上昇は少し遅れて1950年代と1960年代に発生しました。 シンプルで誠実なスタイルが特徴でした。 ブルータリズムでは、形態は機能に従います。

ブルータリストの建物は通常、特定の機能ゾーンを表す塊を形成する反復的なモジュラー要素で構築され、明確に明確に表現され、統一された全体にグループ化されます。 コンクリートは、その生々しく気取らない正直さのために使用されているため、エリートボザール様式で建設された高度に洗練され装飾された建物とは劇的に対照的です。

かっこいいですよね？ しかし、このブログがテクノロジーとWordPressに関するものである場合、なぜアーキテクチャについて話しているのか疑問に思われるかもしれません。 理由は簡単です。ブルータリズムは、Webの世界にも適用できるデザイントレンドです…

Webの起源とそのグラフィックの進化

私たちの若い読者にとって、ウェブは常に存在しているように見えますが、現実から遠く離れたものはありません。 歴史の最初のウェブページは1991年に「最近」公開されましたか？ そして、あなたが見ることができるように、それは非常に単純でした：

最初のWebページは、ハイパーリンク付きの単なるテキストでした。 しかし、技術が進歩するにつれて、追加できるリソースの数が増え、イノベーションの可能性が急速に広がりました。

インターネットの初期の頃は、「優れたデザイン」が何であるかを正確に知る人は誰もいませんでした（印刷物の世界からの荷物はすべてありましたが）。最初のウェブマスターは、効果的なページレイアウトを作成して、コンテンツ。 すべてテーブルに基づいた90年代初頭のデザインを覚えていますか？

確かに、これらのデザインは視覚的なレベルでは多かれ少なかれ「機能」していましたが、内部的には絶対的な惨事でした。 HTML構造はページの最終的な外観のみに焦点を当て、コンテンツ自体を完全に無視したため、結果にはまったくアクセスできませんでした。 しかし、私たちは皆、「ウェブを構築する」方法を学んでいました…

カラーパレット、フラットまたはリアルなアイコン、アニメーション…組み合わせると「デザイントレンド」となる細部が行き来します。 しかし、今日は一定しているように見える傾向があります。それは、ルースが数日前にアップルとその設計原則を見たときに話し合ったシンプルさです。

しかし、現実はこれよりも複雑です。 すべてのWebサイトが同じ傾向に従うわけではありません。 世界的なトレンドから離れて他の道を探求する人々がいます。 彼らは型を壊します。 おそらく彼らは次のトレンドを生み出すことさえあります…

Web上のブルータリズム

ブルータリズムという用語は、フランス語の「打放しコンクリート」または「生コンクリート」に由来します。 したがって、ウェブ上でブルータリズムについて話している場合、「具体的」ではなく「生っぽさ」について話していることは明らかです。 ブルータリストアーキテクチャは、ビルディングブロックとして使用するマテリアルに忠実であることを望んでおり、それはWeb開発者としても努力すべきことです。 少なくとも、ブルータリストのWebサイトを作成したい場合。

これは疑問を投げかけます：私たちがウェブを構築するために使用する「材料」は何ですか？ これらはHTMLとCSSだと思われるかもしれませんが、HTMLとCSSは、具体的なミキサーやクレーンの構築とはWebにとって重要であり、プロジェクトを「構築」するために使用するツールです。 したがって、私たちがWeb上で扱う「原材料」はコンテンツです。 そして、それはあなたを驚かせるべきではありません。なぜなら、私たちがコンテンツが王様であると言及するたびに、このウェブサイトでそれについて非常に長い間話し合ったからです。

ブルータリズムはその素材に忠実であるため、Web開発者やデザイナーとして、私たちも自分の仕事に正直であり、Webサイトが何であるかを知っている必要があります。 ウェブは雑誌ではありません。 それらはアプリではありません。 彼らは看板ではありません。 では、なぜそれらはこれらのいずれかに似ている必要がありますか？

Web上のブルータリストの設計原則

ここに、ブルータリストのWebサイトを設計するときに覚えておくべきいくつかの基本原則があります。

1 –コンテンツはどこでも機能する必要があります

CSSスタイルを使用せずにWebページを作成し、HTMLタグのみを使用して正しく構造化しようとすると、このWebサイトは世界中のすべてのブラウザーで完全に機能することがわかります。 それは最も美しいウェブサイトではありませんが、それは機能します。 画面のないブラウザでも機能します（はい、アクセシビリティについて話しています）。 そして、コンテンツが王様なら、それは素晴らしいです！

コンテンツは、CSSのない世界で機能し、意味をなさなければなりません。 Webページのスタイリングは、独自のブランディングを確実に行うのに役立ちますが、それを破り、ブルータリズムの原則から離れることもあります。

2 – Webとのユーザーインタラクションは制限されており、HTMLによって明確に定義されています

CSSとJavaScriptを使用すると、以前は不可能と思われていたインタラクション、優れたアニメーション、息を呑むようなトランジションを備えた、ネイティブアプリのように見えるWebサイトを作成できます。 しかし、これはすべてコンテンツとはまったく関係ありません…では、ブルータリストのWebサイトで便利なインターフェイスをどのように設計するのでしょうか。

デフォルトでは、ユーザーはボタン、リンク、およびフォームを介してのみWebサイトを操作できます。 また、「クリック」できるのはリンクとボタンだけです。 そのため、生で表示することが重要です。

Webの開始以来、ハイパーリンクは明確なパターンに従っています。 通常のテキストに似ていますが、色は青で、スタイルには下線が引かれています。 ハイパーリンクにアクセスすると、ハイパーリンクの色が紫色に変わり、訪問者はハイパーリンクに既にアクセスしたことがわかります。 私たちは本当にこの純粋さから離れるべきでしょうか？

一方、ボタンは、実生活に存在する要素であるボタンを表しています。 ボタンは、実際の生活とWebの両方で押すことができるものであるため、同じように動作することが期待されます。 ボタンがボタンのように見え、ボタンを操作すると外観が変わることを確認してください。 また、使用する必要がある場合にも使用します。たとえば、フォームの横に、入力した情報がサーバーに送信され、応答とともに別のページに移動することをユーザーに約束します。

3 – WebサイトはWebブラウザーに存在するため、ユーザーにWebサイトを「参照」させます

ブラウザには前後に移動するボタンがあることをご存知ですか？ 私たちは皆このパターンに慣れているので、あなたがそうしていることを知っています…。 それでも、一部のWebサイトは、今日このパターンを破っています。 シングルページアプリケーション（SPA）は、JSを使用してコンテンツを動的にロードします。一部のアプリケーションは、ブラウザーに前のステージに戻るオプションがあることを無視して、コンテンツをロードします。 ブルータリストのデザインはウェブに忠実であり、ユーザーが慣れているパターンやルールを破ることはありません。

4 –ユーザーはコンテンツを垂直方向にスクロールできます

ウェブサイトは雑誌や本ではないので、（原則として）コンテンツをページ分割する必要はありません。 多くのウェブサイトがそうする唯一の理由は、記事を読むために、読者が複数のページを訪問することを余儀なくされるので、人為的に訪問を増やすことです。 これをしないでください！

ブルータリストのウェブサイトでは、コンテンツは一度に表示され、読者は自分のペースでコンテンツを消費し、自分に合ったスクロールをすることができます。 本当に重要なもの、つまりコンテンツを表示して使用するために、不必要な操作でユーザーを邪魔する必要はありません。

どう思いますか？

私はブルータリストの原則が好きです。 デザイナーでない場合は、これらの原則を適用するのは非常に簡単です。デフォルトの外観のままにする（または少し調整する）だけです。 しかし、あなたはどう思いますか？ あなたはそれが好きですか？ 醜くて時代遅れだと思いますか？ 下のコメント欄でお知らせください！

Unsplashのberenicemelisによる注目の画像。