可変グリッドレイアウト_-_fakephotographer
可変グリッドレイアウト Tue April 6, 2010categoriesweb tagswebdesign comment0trackback0可変グリッドレイアウト 情報を整列しやすいグリッドレイアウトが「960 Grid System」などテンプレートの普及もあってよく見かけるようになった。グリッドレイアウトはフォーマットが統一され並列で単調なものになりがち、創意工夫して設計したいところです。 そして、「960 Grid System」と同じように良く見かけるようになった「可変グリッドレイアウト」は、jsプラグインを利用してウィンドウサイズを変えるとコンテンツが再配置されるというもの。イメージとしては新聞ですね。 昔から紙面のようなテーマは海外では見られましたが、ソースコードにおける問題や、情報の強弱などデザイン性の低下など不便な面もあり一部でしか採用されていませんでした。その不
ステキングなフォームデザインまとめ
Previously I put together a showcase of interesting and creative blog comment design. It was a fun exercise and fascinating to see the different approaches taken to the standard comment format. Wildvuur Going through this process, I was also struck by the creativity of the design work that went into some of the comment forms on these sites. As I’ve been traversing the web since, I’ve been noting s
Webデザインにおける9つの誤り | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Magazine 9 Common Usability Mistakes In Web DesignにおいてWebデザインでおかされがちなユーザビリティデザインに関する9つの過ちが紹介されている。同じくこれまでSmashing Magazineに掲載された2009年 Webデザイントレンド31選やUIデザインを改善する10の方法の内容と一部かぶる項目もある。新しくWebデザインに取り組む場合にも既存のサイトのデザインをリファクタリングする場合にも適用できる内容だ。 9 Common Usability Mistakes In Web Designで紹介されている9のポイントをまとめると
jQueryでよくつかうインターフェイスをまとめた「Toolkit with 6 Awesome jQuery User Interface components」
jQueryでよくつかうインターフェイスをまとめた「Toolkit with 6 Awesome jQuery User Interface components」 タブメニュー・ツールチップ・スライドショーなどなど様々なWEBインタフェースを提供してくれるjQueryプラグイン化されていますので、実装もかなり簡易にでき、制作者にとってはありがたい存在です。今日紹介するのはjQueryでよくつかうインターフェイスをまとめたツールキット「Toolkit with 6 Awesome jQuery User Interface components」です。 各インターフェイス毎に様々な動きを実装できます。さらにToolキットは必要に応じてカスタマイズしてダウンロードできます。 詳しくは以下 ■tabs 様々なタブメニューを生成することが可能です。 ■tooltip 半透明からシンプルなものまで
リンクの設置時に気をつけたい15のポイント | コリス
Wwohn.comのエントリー「The 15 rules of quality hyperlinks」から、リンクの設置時に気をつけたい15のポイントの意訳です。 The 15 rules of quality hyperlinks 「ここをクリック」などではなく、リンク先を明確に表現する。 title属性を使用する。 テキストリンクを青い下線以外にする場合、明確に分かるようにする。 テキストリンクには、シェード効果や明るいグレーを使用しない。 visitedを設定して、訪問済みを明示する。 リンク切れは、なるべく早く修正・削除をする。 PDFのようなダウンロードリンクは、クリックする前に分かるように明示する。 一行に続けて複数のリンクを記述しないで、リストやビュレットを使用して間隔を持たせる。 テキストリンクは、一行まるごとにしないで、なるべく短くする。 リンクを新しいウインドウで開くよ
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
ユーザーに有用な12種類の効果的なナビゲーション
ユーザーに有用なウェブサイトをナビゲートする12種類のナビゲーションをOnextrapixelから紹介します。
スタンダードな画面パターン13選 – creamu
サイトのインターフェースを設計したい。 そんなときに参考になるのが、『Designing Web Interfaces: 12 Standard Screen Patterns』。スタンダードな画面パターン13選だ。 以下にご紹介。 Master/Detail 垂直か水平レイアウト。ナビゲーション固定で操作画面をユーザに認識しやすいようにしている Column Browse 垂直か水平レイアウトで、始めのカラムからユーザをナビゲーションしていく仕組みを提供している Search/ Results キーワードでダイレクトにユーザをナビゲートするときに使われる Filter Dataset 検索条件を絞り込んで精度を上げるときなどに使われる Forms フォーム画面はユーザビリティとデザインについて考え抜かれていなければならない Palette/ Canvas ファイルを作成するときなどに使わ
UIデザインを改善する10の方法 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Dmitry Fadeyev氏がSmashing Magazineにおいて10 Useful Techniques To Improve Your User Interface Designsというタイトルのもと、Webページのデザインを改善するための10のテクニックを紹介している。内容を要約すると次のとおり。 ブロックリンクを活用する。たとえば a { display: block; padding: 6px; } のようにインラインをブロックに変更してさらにパディングを指定する。幅を指定する必要がないうえ、リンク対象が広くなりクリック漏れが少なくなる 英字の場合、上下のバランスを考える。ボタンやラベ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIにも工夫がある、クリエイティブなオンラインショップサイト集
[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu
[CSS]スタイルシートで実装するナビゲーション集 -CSS Menus | コリス
[CSS]ボタンやナビゲーションを実装するスタイルシートのチュートリアル集
要素ごとに分けられたウェブデザイン集『Pattern Tap』 - DesignWalker
http://www.designwalker.com/2009/08/user-interface.html
[CSS]軽快に動作するタブコンテンツを実装するスタイルシート
インタビュー2009（１）ウェブデザイナーの中村勇吾氏「旧世代サイトを見直したい」インターネット-最新ニュース:IT-PLUS
IDEA * IDEA