Spacing, grids, and layouts
The organization of space is key to every great design. Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned. This foundational scaffolding is a requirement for all design systems. In this guide, we’ll walk through the basics of defining spatial base units, creating relationship rules with grids, and br
iOS - Auto Layoutの設計ベストプラクティスと、Viewの種類ごとのテクニック集 - Qiita
Auto Layoutを使って既存アプリをiPhone 6(S)/6(S) Plus対応した際に得た知見をまとめてみました。 以下、上級編となります。 ※iOS 9で導入されたStack ViewについてはiOS 8を切れない事情で使えませんでしたorz... ※下記のサンプルに使用したStoryboardファイルはこちらです。 https://gist.github.com/ypresto/ee3b2f592b40936c11ec ※設計が悪くて画面サイズ変わるとぶっ壊れちゃう箇所をUnit Testで把握するライブラリ書きました https://github.com/ypresto/AutoLayoutLint http://qiita.com/yuya_presto/items/742a9e6dd95667bd62c9 詳解編 Auto Layoutの仕組みやPriority、Int
The future of layout with CSS: Grid Layouts – Mozilla Hacks - the Web developer blog
In this article we’ll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the day in some browsers. But before we dive into what this new CSS technique is all about and how to use it, let’s quickly review grid theory. My really short introduction to grid theory I am not a designer nor did I know much about grid theory befo
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
Automating Layouts Bring Flipboard's Magazine Style To Web And Windows | TechCrunch
Automating Layouts Bring Flipboard’s Magazine Style To Web And Windows 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 edition to be reviewed and manually tweaked before publication. When you read Flipboard, articles and photographs are laid out in a series of pages you ca
A Typographic Approach to Email
In our on-going pursuit of trying to improve readability and usability of digital products and services, one thing that’s always struck us as odd is the way typography of email applications has been left untouched since the early days of the internet. Even modern applications released in the post-pc era mostly forget about this, focusing on new ways of managing your inbox, various forms of social
ブレークポイント
このWebサイトのスタイルではブレークポイントがレイアウト向けに3つ、フォント・サイズ向けに4つ設定されている。なんと7段変速！ なんでそうなってるのかとかそういう話を書きたくなったので書く。 レイアウト向け 主にデザインが格納できるのか、バランスはどうかみたいな理由でブレークポイントを設定している。Mobile Firstで書いているのはパフォーマンス的な問題なので、本当はもっと理由駆動でMedia Queriesを書きたい。em単位を使っているためユーザーのズームやフォント設定などは考慮される。だいたい標準は16pxであることは既知だけどそれに依存しないのでマイナーな標準を採用しているブラウザーとか大きめのフォント・サイズを愛用している人のブラウザーとかでもおかしくならない(可能性が高い)。 小さめのスクリーン On small screen グローバルなヘッダーとフッターがセンタリン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Harvard Film Archive
Grid Item Animation Layout - Demo 1
Mediatoolkit
Make a Resume for Free in Minutes – Resume Builder
https://yconst.com/web/freetile/
CSS 20 stunning examples of CSS 3D transforms