面白いウェブサイトをデザインするための方法とテクニック(写真)

面白いウェブサイトをデザインするための方法とテクニック(写真)
他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更新した計画に対して「はい」という返事がもらえないという状況に遭遇したことはありませんか? 「時代遅れではない」とは具体的に何なのかを尋ねても、具体的な基準を明確に述べることができません。気が狂いそうになるまで何度も何度もやり直しするしかないのですが、それでもお客様の笑顔を引き出すことができません...
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM
あなたのデザインを見た人を笑顔にするにはどうすればよいでしょうか? この記事は、「興味深いデザイン」について議論するための出発点にすぎません。
「面白い」というのは、「退屈」、「時代遅れ」、「安っぽい」、「独創性がない」、「目立たない」、「目立った点がない」などの反意語のようです。面白いデザインを作ることで、そのような否定的なコメントを避けることができるかもしれません。
抜け道を見つけたような気がしますか? でも...「面白い」とは何でしょうか? 感じ方は人それぞれです。あなたが面白いと思うことが、彼が面白いと思うこととは限りません。これは完全に制御不能なことのようです。私が次に言うことはナンセンスかもしれないと疑っているに違いありません。しかし…ぜひ最後まで読んでください。この記事は、誰もが「面白い」と思う特別な共通点を見つけることについてです。
まず最初にお聞きしたいのですが、「面白いデザイン」とはどのようなものですか? 質問を受けたデザイナーたちは次のように答えました。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

しかし、これらの言葉はまだ非常に抽象的です。どのようなデザインがクールで魅力的でしょうか? 予想外の驚きを与えることができますか? 写真をご覧ください:
①【繊細で繊細なやりとり】http://www.extrememusic.com/
面白いインデックス ★★★★★
ダイナミックなナビゲーション、細心の注意を払ったインタラクション(マウスオーバー効果など)、適切なサウンドフィードバック、エレガントでスムーズなシーン遷移、絶妙なビジュアルテクスチャなど、すべてがゲームに多くの魅力を加えています。
さらに、右上隅のナビゲーションは暗闇で燃える火のようで、暗い背景に対して特に輝いています。しかし、すべてのユーザーのコンピューターが完全なフラッシュ実装に対応できるわけではないことに注意する必要があります。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

②【マウスオーバーのハイライト】http://steedicons.com/
面白いインデックス ★★★★★
マウスオーバーすると、画像全体が「虫眼鏡」で覆われ、手描き風のスタイルがカジュアルで面白く見えます。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

③【手描き漫画風】http://www.cosmicsoda.com/
面白いインデックス ★★★★★
シンプルな手描きスタイル、柔らかいブラシのコピーの背景、点線は実線よりも明らかに生き生きしています。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

④【高画質・大画像】http://www.moodyinternationalllc.com/
面白いインデックス ★★★★★
デザイナーの意図が表れているのは、高品質の大きな画像、太字のフォントの使用、画像のインタラクティブな回転、マウスオーバー後のスクロール応答、2 つの「{}」のエコーだけではありません。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑤【動は静よりよい】http://uk.burberry.com/store/
面白いインデックス ★★★★★
このページには、静止画像と動画像がいっぱいです。マウスオーバーすると、一部の静止画像は動的に表示され、その他の画像は黒のグラデーションの背景に注釈付きで表示されます。マウスオーバーすると次に何が表示されるかは誰にもわかりません。そのため、ただちらっと見るだけでは済まなくなります。これにより、マウスを各画像に移動して、より詳しく見たいという欲求が刺激されます。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑥ 【素晴らしい転機】http://riotindustries.com/#becominghuman
面白いインデックス ★★★★★
さまざまな驚きのトランジション効果、ページの右方向への移動、長いイメージ キューと短いイメージ キューの間のスムーズなトランジションが、あなたの興味をそそります。さらに、スクリーンショットは「傾いた」角度で全員に提示されており、非常に芸術的です。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑦【アニメーション】http://demo.templateworld.com/universal-css-templates/m-29062010b/index.html
面白いインデックス ★★★★★
たった 1 つの優れたアニメーションで、Web ページ全体をサポートできます。まるで積み木遊びのよう。立体的なバナーに一目惚れしましたよね?
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑧ [雑誌風レイアウトとイラスト] http://www.templateaccess.com/wpdemos/wp220/
面白いインデックス ★★★★★
大きな芸術的なイラストと、控えめながらも洗練された背景色で要点を際立たせた、高品質な雑誌のような内容です。美しい写真は、多くの場合、一段落のテキストよりも魅力的です。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑨【型破りな道を行くからこそ、目立つことができる】http://mydesk.metabrain.com/
面白いインデックス ★★★★★
線や枠に縛られず、長方形でも円形でもなく、背景から飛び出し、「私のデスク」のさりげない配置がすぐに目を引きます。
公式サイトのバナー素材は、宣伝するアプリの背景と一致しており、テーマが明確で、純粋で清潔感があります。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑩【イラストスタイル】http://www.meomi.com/about.html
面白いインデックス ★★★★★
このような Web サイトを見ると、開くとすぐにその Web サイトを詳しく調べたくなるでしょう。洗練されたコンテンツ伝送フレームワークを備えているため、勝利を収めました。ウェブページ全体を絵画のように見せると、すべてが違って見えます。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

⑪【太字フォント】http://www.danieldiggle.com/design/
面白いインデックス ★★★★★
第一印象は「トレンディ」です。なぜトレンディなのかを詳しく分析してみましょう。暗い背景の使用により、メインコンテンツが強調され、暖かみのある大きなフォントとの鮮明なコントラストが形成されます。誇張された大胆な大きなタイトルと大きなフォントは、まさに強調したい重要なポイントであり、ユーザーの注目をすぐに引き付けます。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

これら 11 の Web サイトを見た後、あなたは魅了されましたか?
まだ少し抽象的だと思うなら、ウェブサイトを面白くする 9 つの要素を次に示します。もちろん、本質は最後に残しておきます。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM
最後に、行動を起こすことです。「退屈なデザインなど存在しません。あるのは怠惰なデザイナーだけです。」デザインにはパッケージングとメイクアップも必要です。これらの要素を使用して、元々退屈なデザインを装飾し、興味深いものにしましょう。
事例を共有していただいた以下の皆様に感謝申し上げます。
興味深いウェブサイトデザインの作り方、PSチュートリアル、123WORDPRESS.COM

<<:  HTML の順序なしリストタグと順序付きリストタグの使用例

>>:  MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

推薦する

cmd と python での MySQL の一般的な操作についての簡単な説明

環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...

Linux コマンドラインで他のユーザーと通信する方法

Linux のコマンドラインで他のユーザーにメッセージを送信するのは簡単です。これを行うコマンドは多...

HTML の相対パス (Relative Path) と絶対パス (Absolute Path) の詳細な理解

私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...

Linux システムにおける時間設定の概要

1. 時間の種類は次のように分けられます。 1. ネットワーク時間(タイムゾーンの設定、ntpサーバ...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

MySQLデータ行と行オーバーフローのメカニズムの詳細な説明

1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...

超詳細なMySQL使用仕様の共有

最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...

iframe ページで js 関数を呼び出すには js を使用します

最近、私は毎日論文提案に取り組んでいます。自分のスキルを発揮して、再びWebをデザインしたくてうずう...

MySQL で置換操作を使用したときにデータ損失が発生する問題の解決策

序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...

JS を使用して航空機戦争の小さなゲームを実装する

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

JavaScript 関数のカリー化

目次1 関数カリー化とは何ですか? 2 カレーの役割と特徴2.1 パラメータの再利用2.2 早期復帰...

HTML ページジャンプコード

次のコードを index.html などのデフォルトのホームページ ファイルとして保存し、ルート デ...

Linux システムで MySQL データベースにリモート接続する方法のチュートリアル

序文最近、職場でこの要件に遭遇し、リモート接続を確立するのに 1 時間以上かかりました。ローカル コ...

FlashFXP FTP クライアント ソフトウェア登録クラッキング方法

FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...