UI
Polymer
レイアウト

Polymer でモックをデザインする

参考 : Polymer でモックをつくる

Polymer + React = Polyreact

Polyreact 上にレイアウトをデザインします。

1. Webプロトタイプのレイアウト構成原則

原則 : 一覧 → 詳細

原則 よりシンプルになると、Webのメリットが薄くなります。
原則 より複雑になると、プロトタイプの域を超えてしまいます。

再帰 : 一覧 → 詳細(一覧) → (詳細)

しかし、原則 の再帰は OK です。

2. 一覧のデザイン

ベーシックなプロフィールページを作成してみましょう。
以下のように、一覧画面を Polymer でデザインしてみました。

2-1. content-element

image-content-element
codepen-content-element
CodePen で見る - Chrome のみ対応

2-1-1. contents-full-element

codepen-contents-full-element
CodePen で見る - Chrome のみ対応

2-1-2. contents-half-element

codepen-contents-half-element
CodePen で見る - Chrome のみ対応

2-2. content-label-element

image-content-label-element
codepen-content-label-element
CodePen で見る - Chrome のみ対応

2-2-1. contents-square-element

codepen-contents-square-element
CodePen で見る - Chrome のみ対応

2-3. content-timeline

codepen-content-timeline
CodePen で見る - Chrome のみ対応

3. 詳細のデザイン

プロトタイプの段階で、詳細画面のデザインは手間が掛かります。
コンテンツを Markdown で管理し、そのまま表示しましょう。

3-1. content-github

codepen-content-github
CodePen で見る - Chrome のみ対応

4. 組み合わせる

Polyreact 上で、ルーティングを適切に実装すると、
Polymer によるデザイン案を、Web アプリケーションとして実演出来ます。

4-1. GitHub

修正内容

4-2. スクリーンショット

4-2-1. Featured ページ : /

root-screen-shot

4-2-2. About ページ : /about

about-screen-shot

4-2-3. Article ページ : /article

article-screen-shot