poriringooのブックマーク / 2016年11月17日

poriringoo id:poriringoo

2016年11月17日のブックマーク (3件)

ワイヤーフレームは実寸で作るべし
アプリでもウェブサイトでも、設計段階で、ワイヤーフレームを作る場面は多いと思います。手書き、PowerPoint、Cacoo、Illustrator、Sketchと、ワイヤーフレームを描くツールはさまざまですが、守るべきルールが1つあります。それは実寸で（実比率で）作るということです。ワイヤーフレームは場所取り合戦ワイヤーフレームとは、「何を、どこに、どのくらいの大きさで」表示するのかを設計する、画面設計書です。実際に画面を実装する段階で悩まないように、事前に設計図を作るのが目的です。画面のなかで、伝えたい事、目立たせたい機能は山ほどあります。それらをすべて大きく目立つところにレイアウトすることはできません。機能をグルーピングし、強弱をつけて画面に配置してゆく必要があります。まさに、画面要素の場所取り合戦なのです。実装前にワイヤーフレームでお客様と共有全ての画面を、デザインした画
poriringoo 2016/11/17
ワイヤーフレーム
リンク
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
poriringoo 2016/11/17
webデザイン

タイポグラフィー
リンク
[CSS]レスポンシブ対応のグリッドシステムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッドシステムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッドシステムを実装するテクニックを詳しく解説します。かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。グリッドの実装に必要な準備グリッドシステムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
poriringoo 2016/11/17
レスポンシブ

グリッドシステム
リンク
- 2016年11月18日
- 2016年11月17日
- 2016年11月16日