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

面白いウェブサイトをデザインするための方法とテクニック(写真)
他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更新した計画に対して「はい」という返事がもらえないという状況に遭遇したことはありませんか? 「時代遅れではない」とは具体的に何なのかを尋ねても、具体的な基準を明確に述べることができません。気が狂いそうになるまで何度も何度もやり直しするしかないのですが、それでもお客様の笑顔を引き出すことができません...
興味深いウェブサイトデザインの作り方、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 を使用するかについての簡単な分析

推薦する

backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...

MySQL共通ストレージエンジンの機能と使用方法の詳細な説明

この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...

React Nativeプロジェクトフレームワークの構築経験

React Native は、2015 年 4 月に Facebook によってオープンソース化され...

Linux での MySQL マルチインスタンスの展開とインストール ガイド

MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...

Linuxはscpコマンドを使用してファイルをローカルコンピュータにコピーし、ローカルファイルをリモートサーバーにコピーします。

以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...

HTML でナンバープレート番号と州の略語を入力するためのサンプルコード

原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...

Oracle VM VirtualBox の CentOS7 オペレーティング システムのインストール チュートリアル図

目次インストール手順環境設定実行構成インストール手順ダウンロードアドレス: バージョン6.0 最初に...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

MySQL sql_modeクエリと設定の詳細な説明

1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...

Linux で NFS のワンクリック展開を実装する方法

サーバー情報管理サーバー: m01 172.16.1.61サーバー: nfs01 172.16.1....

全体的なユーザーエクスペリエンスを確保する方法

関連記事:ユーザーエクスペリエンスのためのウェブサイトデザイン今朝、GMail がまた不調になり、接...

DockerでLinuxシェルコマンドを実行する方法

Docker でシェル コマンドを実行するには、コマンドの前に sh -c を追加する必要があります...