UIに関するichrsnpiのブックマーク (3)

  • 分かりやすいUIを考えるときに参考にしたい34のアイデア | mah365

    GoodUIというサイトでは、サイトのコンバージョンを上げるときに参考にしたい34のアイデアを紹介しています(どんどん追加されるようです)。とても参考になったので、タイトルだけ日語訳してお伝えしたいと思います。あえて意訳しているところもありますが、英語的に完全に間違っている部分があれば、ご指摘下さい。 マルチカラムレイアウトにするより、シングルカラムレイアウトにしてみよう。 すぐにクロージングするより、プレゼントを与えてみよう。 UIを断片化させるより、似たような機能を統合してみよう。 自分で自分自身を語るより、ブランドのある誰かに語らせてみよう。 重要なアクションは1回だけ見せるより、何回も繰り返して表示してみよう。 クリックできる・選択できるアイテムは、ぼかさず明確にスタイルしてみよう。 選んで欲しいものを並列で並べるより、オススメを強調してみよう。 いちいち確認を取るより、Undo

    分かりやすいUIを考えるときに参考にしたい34のアイデア | mah365
  • レスポンシブなアイコングリッド作成チュートリアル:phpspot開発日誌

    Blueprint: Responsive Icon Grid | Codrops レスポンシブなアイコングリッド作成チュートリアル パネル型のタブレット風UIでレスポンシブにしたい場合に参考にできそうなデモとサンプルです。 1つのグリッドがマウスオーバーでハイライトされるあたりもいい感じに動作してます。 スマホ、タブレット向けのサイトなんかで使えそうなUIになっているので、こうしたデザインのサイト制作の時に使えそう 関連エントリ HTML5&CSS3で作成されたレスポンシブかつフリーなテンプレートが入手できる「HTML5 Up」 レスポンシブでクールなドロップダウンメニュー実装例 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 HTML5&CSS3なクールでレスポンシブが良い感じのイメージギャラリー実装jQue

  • ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン

    さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った

    ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
    ichrsnpi
    ichrsnpi 2013/09/13
  • 1