スタイリッシュなウェブページデザインを作成する方法(グラフィックチュートリアル)

スタイリッシュなウェブページデザインを作成する方法(グラフィックチュートリアル)
「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。
デザイナー:「デザイン案に対する要件は何ですか?」
要求者:「まあ、もう少し寛大であってほしいですね!」
デザイナー:「…」
デザイナー:「何が不満だと思いますか?」
要求者: 「まあ、もう少し豪華だったらいいんですけどね!」
デザイナー: 「...」
デザイナー:「このビジュアルデザインをスタイルの観点からどう思いますか?」
要求者:「悪くないですね。もう少し豪華だったらよかったのですが。」
デザイナー:「…」
これらの会話はまったく誇張されたものではなく、同僚がよく不満を言う話題です。デザイナーたちはこの二つの言葉の前で何度もひざまずいてきました。
しかし、不平を言っても問題は解決しません。この厄介な形容詞を解決するにはどうしたらよいのでしょうか? 簡単な分析は、次の 2 つの異なるタイプのニーズから始まります。
1. ビジネス志向

シンプルなページスタイルはユーザーに好まれやすく、ユーザーに一定の安心感を与えることができます。 IBM を例に挙げると、ページが人々に与える第一印象はプロフェッショナリズムとセキュリティです。フォーカス画像の構成も比較的シンプルです。左側の目を引くスローガンにはシンプルなグラデーションが使われており、右側にもシンプルな幾何学的形状が使われています。以下の例も同様で、おなじみのApple公式サイトなど記載されていないものもあります。

ビジネス目的で設計する場合は、通常、次の 2 つの点に注意する必要があります。
1. 空白スペースを残す。大胆な空白スペースはページに空間感覚を与え、人々に息抜きの印象を与えます。ページの密度の高いコンテンツによる不快感を与えることはありません。
2. できるだけ少ない色を使用します。色が多すぎて、うまくコントロールされていないと全体のバランスが崩れやすくなります。デザインや制作の前に、主な配色と二次配色を決めておきましょう。上記のウェブサイトで使用されている色は、メインカラー 1 色、補助色 1 色、アクセントカラー 1 色と非常にシンプルであることがわかります。ビジネス ページは主にコンテンツの閲覧と情報の表示に重点を置いており、訪問ユーザーに一定の安心感と信頼感をもたらすことができます。したがって、派手な要素の色や代替のデザイン スタイルを使用しないことをお勧めします。
2. 活動の「雰囲気」
このタイプのページ デザインでは、「壮大な」外観を実現するのはより複雑であり、上記の方法は使用できません。たとえば、開会式のページで白い背景、シンプルなグラフィックとテキスト、大きな空白スペースが使用されている場合、良い雰囲気が生まれない可能性があります。このような計画がしばしば却下される理由は、十分な雰囲気が作り出されないからです。したがって、素材を選択するときは、まず山、川、湖、海、パノラマ、または代表的な建物、ロゴなどを考慮し、次に「リボン、鳩、道路、屋根、教会、太陽、高貴な要素」などの肯定的な性質を持つデザイン要素を選択できます。

中国スタイルは、近年デザイナーが好んで使用しているデザインスタイルです。伝統的な中国の要素と最新のデザイン手法を組み合わせています。
代表的な要素としては、水墨画風、書道、古代の物(磁器、三脚など)などがあります。

上記は、著者の「壮大さ」についての単純な理解にすぎません。良いデザインは細部から始まるべきであり、シンプルなデザインスタイルであっても細部まで丁寧に扱うべきです。たとえば、かすかな影、光沢、軽いグラデーションの質感など。全体の状況を把握することによってのみ、自分のスタイルをコントロールすることができます。需要側との良好なコミュニケーション関係を構築し、デザイナー自身のアイデアや提案を表現するように努めます。設計案を修正する際、相手が求める「壮大さ」は、ある要素に問題があるだけかもしれませんが、どの部分に問題があるのか​​はわからないので、漠然とした概念でしか伝えられません。しかし、デザイナーとしては、慎重に考え、まずは新しいフォントを試したり、不要な要素を削除したりするなど、コンテンツの重要な部分を変更するように努めなければなりません。次に、レイアウトの変更を試します。つまり、探索と試行を続け、すべてのニーズを満たす必要があります。

<<:  Vue3 における provide と inject の使用法と原則

>>:  メタタグの詳しい説明(メタタグの役割)

推薦する

フォームデータを取得するための Node.js メソッドの 3 つの例

序文Nodejs はサーバーサイド言語です。開発中、登録やログインなどでは、判断のためにフォームを通...

SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...

Dockeにredisをインストールする方法

1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...

Centos7 esxi6.7 テンプレートの実際のアプリケーションの詳細な説明

1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...

MySQL 8.0.19 インストール詳細チュートリアル (Windows 64 ビット)

目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...

MySQLデータストレージプロセスパラメータの詳細な例

MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...

水平スクロールバーを実装する2つの方法の例

序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...

CSSを使用して複数の画像を中央に水平に表示する方法

まず実装手順について説明します。最終結果 2. コードの実装HTML部分 <div class...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

Vue3を使用してjsで呼び出せるコンポーネントを実装する

目次序文1. 従来のVueコンポーネント1. メインコンポーネントコード: 2. 使用方法3. 成果...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法

会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...

html-cssタグのスタイル設定が機能しない2つの理由

1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...

Node.js コード実行をバイパスするためのヒントのまとめ

目次1. 子プロセス2. nodejsでのコマンド実行2.1 16進数エンコード2.2 ユニコードエ...

Angularプロジェクトにおける共有モジュールの実装の詳細な説明

目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...