gridless.design
historydesignersdevelopersaboutget rid of grid“Blasphemy, I need structure and order!” The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout. History of the design grid Back to top
The Stack
Flow elements require space (sometimes referred to as white space) to physically and conceptually separate them from the elements that come before and after them. This is the purpose of the margin property. However, design systems conceive elements and components in isolation. At the time of conception, it is not settled whether there will be surrounding content or what the nature of that content
レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages
ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。 SaaS Pages SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。 ナビゲーションバー 目標到達のプロセスから遠ざかる方向にナビゲートしない。 分かりやすいCTAボタンがある。 ユーザーエクスペリエンスを向上させるスティッキーバー。 開発者向けのドキュメントなど、特別なリンクを含めたい場合。 Navbar ヒーローヘッダ 独自のセールスポイントを強調する。 「今
Auto Layout for Sketchで複数の画面サイズのデザインを効率化しよう
Sketchで作ったデザインをObjective-CやSwiftで書き出すツール「Sketch to Code」を開発中のAnimaから、Sketch用プラグインの「Auto Layout for Sketch」がリリースされました。 Auto Layout for Sketch Animaって何？という方はこちら！ これまで書いたAnima関連の記事 使い方 インストール まずはこちらのページからプラグインをダウンロードします。 ダウンロードしたSketchプラグインのファイルを開くと自動的にインストールされます。 ※Sketch to Codeのβ版をインストールしている場合、Sketch to CodeにAuto Layoutが上書きされてしまいます。Sketch to Code β版にはAuto Layout機能が含まれているのでインストールの必要はありません。 デザインを作成する
ゼロからはじめるデザインの基礎 -レイアウト-｜オンライン動画授業・講座のSchoo（スクー）
■デザインの基礎 これからデザインをはじめる人が知っておきたい、デザイン基礎を学ぶコースです。 『そもそもデザインってなんだろう？』という根本的な部分から、レイアウト、色、文字、デザインの考え方などを、各回ごとのテーマに沿って行っていきます。また、グラフィックデザインにおける実務での応用例などもお話しします。 第一回では「デザインとはなにか」「レイアウトの基本」について学んでいきます。前半ではデザイナーの種類や、デザイナーになる為に必要なちからを学び、後半ではレイアウトについて、レイアウトの４大原則、視線の誘導方法を学んでいきます。授業を通してデザインの基礎を固めていきましょう。 ■授業のアジェンダ ・デザインってなんだろう ・レイアウトのルール ・視線を誘導する
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
【Objective-C】 Auto Layout + Storyboard で高さ可変のUITableViewCellを作成する
はじめに 高さ可変のテーブルビューセルを作成する方法はいくつかありますが、今回は「Storyboard」上で「Auto Layout」を設定することで実現してみます。環境は以下の通りです。 Xcode 5.1.1 SDK 7.1 Development Target 7.0 完成図 ↑こんな感じに仕上がります。 「Master-Detail Application」テンプレートに手を加えていきます。「Master-Detail Application」は画面上部のプラスボタンを押すと、現在時刻を表示するセルが増えるサンプルですが、セルのラベルを２つに増やし、高さが可変のラベル(ランダムな文字列を表示)と高さ固定のラベル(時刻を表示)が表示されるようにします。また、ラベルの高さに合わせてセルの高さも変わるようにします。 実装 プロジェクト作成 XcodeのFileメニューから New → P
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
単なる流行りじゃない？！水戸黄門型レイアウトが定番化した理由を考えてみた
定番っていいですよね。わずかな退屈さはありつつも、安心できます。 スニーカーならオールスター、スマホならiPhone、ビールならスーパードライみたいな。 Webサイトにも2012年ごろから急増し、現在では定番化したレイアウトパターンがあります。 ちなみにこのパターン▼ その代表例、Evernoteのサイト▼ http://evernote.com/intl/jp/ このパターンで商材となっているものの多くが、物理的なプロダクツではなくクラウドなど新しめのウェブサービスで、皆さんも頻繁に遭遇するのではないでしょうか。 グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。時代劇の定番だし。 ※あくまでイメージです 定番化して今もなお増え続けている理由をちょっと考えてみました。 多分この辺じゃないかなーと A. 整然とし
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
Layout in Flipboard for Web and Windows — Flipboard Engineering
At Flipboard, we are working hard to build the world’s best personal magazine—a magazine made just for you, filled with the stories you care about most. Magazine layout design plays a key role in telling those stories. Good layout design frames a story and impacts how you are informed by the content. For example, in the hallways of Sports Illustrated, editors hang up every page of the print editio
Android UI Cookbook for 4.0 輪講会 vol.1 - プログラマってこんなかんじ？？
Androidの会福岡支部メンバー数人で輪講会をはじめました。 今回のお題は通称 yanzm本2 と言われている、 Android UI Cookbook for 4.0 ICSアプリ開発術 です。 実はちょっと前に Effective Java 第2版 の輪講をやってみたのですが、 それがまたなかなかおもしろくて。 「人に伝えること」を前提にして熟読＋理解 実際に説明 議論 をするとこれがまた異常に充実感があるというか。 みんなでやいやい言いながら興味のあることを勉強するのはやっぱり楽しいですね。 「おい、勉強くらい本読んで1人でやれよ」と言われたらそれまでなんだけどもｗ というわけで、こんな感じで輪講会を進めてます。 進め方 各自予習必須 説明担当の人が本を音読しながら説明 サンプルアプリ動かしながら内容確認 説明してるときに気になった点、疑問点などを皆で議論 次回どこまでやるか＋次回
AndroidのUIで，レイアウトXMLの記述を簡素にするための，７つの基礎知識 - 主に言語とシステム開発に関して
AndroidプログラミングのTOPへ AndroidアプリのUIは，レイアウトXMLに記述する。 が，これが結構面倒くさい。 各ビューごとに大量の属性をコーディングすることになり， あとから見返すと，何の目的で属性を付与したのか不明だったりする。 また記述量が多いと，その分だけ変更時の修正作業量も増えてしまう。 どうすれば，AndroidのレイアウトXMLの記述をシンプルに短くできるか？ 下記では，基本的なTipsを７つ列挙する。 （１）IDE上で自動整形して見やすくする （２）複数のプロパティを，スタイルXML中でまとめて一括指定する （３）共通部分をincludeする （４）独自の性質を持ったViewを作成する （５）アプリ全体のスタイルをテーマに集約する （６）XMLに書かず，コードで動的に操作する （７）HTML5を使う （１）IDE上で自動整形して見やすくする まず，本質的でな
» 同じサービスで比較！iPhoneアプリとAndroidアプリのUI設計の違い | Webnoborder
スマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか？ 今回は、iPhone、Androidでアプリを提供しスマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか？ 今回は、iPhone、Androidでアプリを提供しているサービスのUI設計の違いを比較してみました。 はじめに iPhoneとAndroidのアプリを比較してみたところUI設計には傾向があり、大きく３つのパターンに分類できることがわかりました。 実例を踏まえながらパターンを紹介していきます。※当然、例外はあります。 また今回はUI設計思考を見ているため細かいUIや
シンプルでフリーな使えるCSSのレイアウト集７１５:phpspot開発日誌
715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making layout grids work for you | Figma
Amazon.co.jp: もっとクイズで学ぶデザイン・レイアウトの基本: ハラヒロシ, ハヤシアキコ, 平本久美子, ヤマダジュンヤ: Digital Ebook Purchas
Study: People read more on sites with modern designs. They also remember more. | Poynter.
デザイナーが教える「快適AndroidアプリのXMLレイアウト」
