スタンフォード大学図書館のウェブサイトリニューアルについて - ささくれ
2012年8月28日にスタンフォード大学図書館のウェブサイトがリニューアルされました． 自分の観測範囲ではですが，けっこうあちこちで話題になっていたように思います．図書館が何十館もあるような巨大な大学の事例は気になりますよね……． レビューというほどじゃありませんが，ざっくり紹介したいと思います． 外観から リニューアル前 http://www-sul.stanford.edu/ ちょっと古めのデザインという印象を受けます．ヘッダ下部には3つのセレクトボックス（各図書館の開館時間へのナビゲーションもこれで）が並び，中段では各コンテンツへのリンクが「Catalogs & Search Tools」「Research Help」「Libraries & Collections」「Services」「How to...」「About SULAIR」の6つに分類されています． リニューアル後 ht
レスポンシブ デザイン用のレイアウトやナビゲーションなどのパターンのまとめ -This Is Responsive
レスポンシブ デザインのレイアウト、ナビゲーション、画像、フォームのパターンをはじめ、有益なリソースなどをコレクションしているサイトを紹介します。 This Is Responsive レスポンシブ デザインのパターン レスポンシブ デザインのリソースとニュース レスポンシブ デザインのパターン まずは、レイアウトやナビゲーションなど、レスポンシブ デザイン用のパターンから。 Responsive Patterns 下記にいくつかピックアップしました。
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
実例から学ぶ、固定表示されるナビゲーションを賢く使うポイント | コリス
Netontwerp 正方形のグリッドが特徴的なウェブサイトで、ナビゲーションは真ん中に配置されています。サイトは1ページで構成されており、ナビゲーションのラベルをクリックするとスライドのアニメーションでコンテンツが表示されます。 ナビゲーションは各コンテンツに溶け込むようにデザインされており、こういった使い方は小さいサイトには素晴らしいソリューションとなるでしょう。 Black Estate Vineyard このサイトも1ページで構成されたもので、半透明な背景を使用したナビゲーションが配置されています。各コンテンツは半透明のナビゲーションの後ろにスクロール表示され、ユーザーは迷うことがないでしょう。 半透明の背景を使用する一番の利点は、さまざまなビューポートのサイズでも不具合が生じないことです。
[JS]複数のパネルをウィザード形式に実装するスクリプト -Smart Wizard
複数のパネルを順番に表示するウィザード形式のコンテンツをフレキシブルなスタイルで実装するスクリプト「Smart Wizard」をFivelistから紹介します。 Smart Wizard demo デモでは4つのステップがあるコンテンツが実装されており、各ステップに進む際は「Next」ボタンをクリックして移動することができます（※ステップでは移動しません）。 前のステップに戻る際は「Back」ボタンかステップのナビゲーションで操作ができます。 デモは他にも、ステップが垂直に実装されたタイプもあります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
[CSS]水平に配置するパネルをスマートに実装するスタイルシート
[CSS]ドロップリストとフライアウトを効果的に組み合わせたナビゲーション
[JS]ページの目次を自動生成するスクリプト -Automatically generate TOC