Building Better UI Designs With Layout Grids — Smashing Magazine
A grid is like invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together. Grids help designers to build better products by tying different design elements together to achieve effective hierarchy, alignment and consistency, with little effort. If executed properly, your designs will appear thoughtful and orga
インタフェースデザインにおけるグリッドの利用
グリッドを利用することで、デザイナーはまとまりのあるレイアウトを作成できるようになり、エンドユーザーは流し読みしやすくなってインタフェースが使いやすくなる。優れたグリッドは、さまざまな画面サイズや向きに適応して、プラットフォーム間の一貫性を保ってくれる。 Using Grids in Interface Designs by Kelley Gordon on July 17, 2022 日本語版2022年12月5日公開 ニューヨークに行って通りを歩いたことがある人なら、街の作りが格子（グリッド）状になっているおかげで、ある場所から別の場所に移動する方法を見つけることはさほど難しくない。街が格子状になっているとわかっていることで地元の人も観光客もあちこち移動しやすいのと同じように、Webページのグリッドはユーザーとデザイナー両方のガイドになる構造を提供してくれる。グリッドが一貫した基準点にな
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
[JS]確認用の美しいグリッドをウェブページに表示する -The Heads-Up Grid
ウェブページの確認用にグリッドをオーバーレイで表示するjQueryのプラグインを紹介します。 似たものはいくつかありますが、Responsive Web Designに対応したものを紹介するのは始めてです。 The Heads-Up Grid デモページ [ad#ad-2] デモページのグリッドは右上のスイッチで表示・非表示を切り替えられ、表示された確認用のグリッドはマウスホバーでハイライトされます。 The Heads-Up Gridの設置 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルに指定します。 <link href="headsupgrid/hugrid.css" type="text/css" rel="stylesheet" /> <script src="headsupgrid/jquery-1.6.2.min.js"></script>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
