子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

子ども向けウェブサイトの視覚構造レイアウト設計手法の分析
1. 温かくて優しい
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
関連アドレス: http://www.web-designers.cn/post.aspx?id=2481
高輝度、低彩度の黄色と緑色は柔らかく温かみのある雰囲気を演出し、重要な情報は高彩度の緑と赤で強調表示されます。背景にランダムな大きさの円が重ねられ、夢のような愛らしい雰囲気を醸し出しています。雲のような曲線のエッジ、ロゴとナビゲーションのステッチ、ナビゲーション バーの背景のピン、赤ちゃんの日記のステッカー、赤ちゃんの写真のハングタグ、テキスト タイトルの手書きフォントなど、その他のデザイン要素はすべて、デザイン スタイル全体に使用され、全体的に温かみのある雰囲気を作り出しています。
2. 春が来て、すべてが生き返る
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://tf.dtbaker.com.au/preview/?theme=26&style=0
こちらのデザインも、至る所に柔らかな緑が広がり、ちょうど到来した春のように柔らかな印象を与えます。カラースキームは、高明度、中低彩度の黄色と緑の2色の組み合わせを採用しています。ナビゲーションには、連続した雲のような弧と手書き風のフォントも使用されており、かわいらしく温かみのある雰囲気を醸し出しています。メインビジュアルのイラストは、デザイン全体の雰囲気を高める上で非常に重要な役割を果たしています。木に掛けられたバナーにはブログのロゴが書かれており、興味をそそります。しかし、Web ページのような正方形のレイアウトは非常に従来型であり、創造性と画期性に欠けています。
3. 色鮮やかで明るい春
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
関連アドレス: http://themeforest.net/theme_previews/92492-kids-toys
非常に高い彩度と明度を持つ空、雲、山、太陽、草、さまざまな漫画の動物や植物で構成されたイラストの背景は、全体的な雰囲気を作り出す上で最も重要な要素です。背景を全体のデザインに溶け込ませるために、ロゴバナーは鳥によって空中に吊り下げられ、検索ボックスを引っ張る飛行船も青空に浮かんでいます。メインコンテンツエリアの左側にある水彩インクと手形、右側に飛び出すダイナミックな星の形が、楽しく愛らしい雰囲気をさらに高めています。雲の形をしたナビゲーションバーとかわいい手書きのテキストは少し荒いですが、それでも同じデザインスタイルを継承しています。メインコンテンツエリアにある2枚の明るく楽しい家族写真は、人々に春と暖かさを感じさせます。
4. 新鮮で柔らかい
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
関連アドレス: http://tf.dtbaker.com.au/preview/?theme=22
低彩度、高明度の緑がかった青の広い領域がこのデザインに穏やかで新鮮、そして柔らかい心理的感覚を与えます。ピンク、赤、黄色、緑の地元の色と組み合わせることで、デザイン全体が過度に単調な配色から脱却します。このデザインで注目すべきその他のデザイン要素は次のとおりです。1. チェック柄に似た背景素材。2. メインコンテンツ領域の雲型の縁。3. ロゴ、ナビゲーションテキスト、タイトルの手書きフォント。4. 曲線のタグとボタン。5. 各コンテンツ領域に追加された控えめなイラスト背景。
5. 柔軟なレイアウト
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://www.freesam.com/
このデザインの第一印象は、枠組みを破った情報レイアウトと、多数の断片化された情報ブロックです。情報領域ごとに異なるデザイン手法が、人々の探索意欲を掻き立てます。ページ全体に可愛らしいスタイルが貫かれており、白と彩度の高い明るい緑とオレンジの組み合わせがページに爽やかな印象を与えています。手描き風のイラストは子供向けのウェブサイトには欠かせない要素であり、ウェブサイト全体の雰囲気を大きく高めることができます。円形や大きな丸みを帯びた枠のデザインスタイルも、ページ全体のスタイルにマッチしています。常に現れるタグとパンチングカレンダーのデザインは互いに響き合い、さまざまな情報領域を分割するという機能的な目的を果たします。最も重要なのは、このデザインが以前のデザインのメインコンテンツ領域のフレームワークの制限を打ち破り、レイアウトがより自由になったことです。子供向けのウェブサイトとしては、このような創造的なアプローチが必要です。
6. 温かい雰囲気
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://kidsplus.shinhan.com/
雰囲気たっぷりのフルFlash韓国サイトです。雰囲気作りは、黄色とオレンジ色の大規模な使用に直接関係しています。メインカラーはこの2色ですが、この2色に限定されるわけではありません。ピンク、紫、青、緑もこのデザインに登場しますが、色の割合で見ると、それらははるかに少ないため、全体の雰囲気を圧倒したり、薄めたり、矛盾させたりすることなく、配色を豊かにすることができます。ページ全体が黄色一色になっているわけではありません。下部フッターの白色は、開いたグリーティングカードのようなメインビジュアルに安定した水平面を与えるだけでなく、デザイン全体に通気性のある心理的感覚を加えています。漫画のパターンがグラデーションの黄色い背景の広い領域に重ね合わされ、デザインにレイヤーが追加され、デザインのトーンが作成されます。ロゴの多色パズルスキームは、背景のパズルパターンを反映しています。視線を下に伸ばす大きな丸いタグをナビゲーションデザインスタイルとして使用し、手書きの漫画フォントを使用しています。関連するアクティビティコンテンツの右側にある円形のタグも同様のデザインを採用しています。このデザインでは丸みを帯びた白いストロークが繰り返されていることがわかり、これは子供向けの Web サイトのデザインに対する細かい配慮と言えます。
7. 爽やかでエレガントなオリエンタルスタイル
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://www.agabangncompany.com/cha/index.jsp
メインビジュアル部分には、広い白地、ぼやけた水彩画の背景、温かみのある家族写真を配置し、柔らかく新鮮な印象を与えるデザインに仕​​上げています。ナビゲーションなどのページ上の要素は過度に装飾されておらず、それがこのデザインを大胆にしています。しかし、レイヤースタイルの効果を追加しないと、ぎこちなくデザインらしくないと感じることが多いです。その理由は、私たちの頭の中にデザインの大まかな方向性がなく、惰性で盲目的に突き進んでいるからです。最終的なデザインがどのようなものになるのか、どこに向かっているのか、まったくわかりません。このデザインにより、私たちはより大きなスケールでデザインのアイデアを学ぶことができ、さまざまなデザイン手法を試して、デザインをさらに進めていくことができました。
8. 幼少期の創造性の重要性
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://www.toysrus.co.kr/index.jsp
青い背景は、玩具展示ホールとメイン情報エリアの色の間に鮮明なコントラストを形成し、メイン情報エリアを背景から際立たせます。開いたおもちゃ箱のアイデアは、ウェブサイトのテーマに関連しているだけでなく、楽しさも増します。このアイデアは、具体的なデザインの作業を開始する前に完成しました。そのため、Web サイトをデザインする場合、Photoshop を開く前に行う作業は、実際にはデザインの方向性を決める上で非常に重要な役割を果たします。この部分には、優れた Web サイトを設計するために不可欠な調査段階とスケッチが含まれます。
9. 落ち着いた配色
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://www.babymeal.co.kr/
これは、黄色、オレンジ、茶色の配色を使用したデザインの例です。基本的には同じ色相と異なるレベルの色の組み合わせなので、大きな飛躍のあるさまざまな配色よりも全体的に落ち着いた雰囲気になります。このウェブサイトの事業は乳幼児に栄養のある食事を提供することなので、温かみのある落ち着いた配色の方が適しています。
10. 下部が少し壊れている
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM
ウェブサイトアドレス: http://www.gymboree.co.kr/
さまざまな高明度および高彩度の色の使用は、子供向けの Web サイトのデザインにおいて今でも最も一般的なアイデアです。このウェブサイトのホームページには比較的多くの情報が掲載されています。メインビジュアルより上の部分は構造が明確で視覚的な体験も良好ですが、メインビジュアルより下の部分は列が多すぎて構成が明確でなく、少し断片的に見えます。 「遊び」「アート」「音楽」「家族」の 4 つの並行セクションを視覚的にもっと明確に分割し、タイトル テキストを周囲の本文テキストから飛び出させると、視覚効果はもっと良くなるかもしれません。しかし、デザイナーはメインの情報エリアに白や明るいグレーなどさまざまな色を使い、爽やかで清潔な雰囲気を演出しようとしていることがわかります。しかし、情報の構成と視覚的な表現は十分ではなく、より詳細かつ思慮深いものにすることができます。

<<:  Momentsで写真を整理するためのCSSコード

>>:  Lua モジュールを使用して WAF を実装する Nginx の原理の分析

推薦する

Dockerコンテナシェルスクリプトの実行ステータスを監視する方法

シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

Nginx キャッシュ ファイルと動的ファイルの自動バランス設定スクリプト

nginx Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー...

MySQLクエリインターセプトの詳細な分析

目次1. クエリの最適化1. MySQLチューニングの概要2. 小さなテーブルが大きなテーブルを動か...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

HTML タグ tbody の使い方と説明

tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用​​する必要があります...

Vueはel-tableを使用して列と行を動的に結合します

この記事の例では、el-tableを使用して列と行を動的にマージするVueの具体的なコードを参考まで...

WebStormはVue3統合APIのソリューションを正しく識別できません

1 問題の説明Vue3 の統合 API は、defineComponent やその他の関数が認識でき...

CentOS 7 で MySQL 接続数が 214 に制限される問題の解決方法

問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...

バージョン管理ツール Rational ClearCase の紹介

Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...

docker compose を使用して consul クラスタ環境を構築する例

領事の基本概念サーバーモードとクライアントモードサーバー モードとクライアント モードは、consu...

HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...

CentOS 7.5 が Varnish キャッシュサーバー機能を導入

1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...