見出し画像

SketchでUIトレース ~Twitter~

プロフィール画面とタイムラインの2画面をトレースし、フォント、カラー、マージンをまとめました。

このブログを参考にしました!


トレースの仕方はこの記事がめちゃくちゃ参考になるかと思います!


【プロフィール画面】

左がスクショで右がトレースしたもの
ああ ツイートを晒してしまって恥ずかしい、、、w
おやすみモードの方がタブメニューのところに区切りがはいるのでトレースしやすかったです。
iphoneXやっぱ画面長いなあ〜


【タイムライン】

友達のツイートなので、ぼかしました


フォント

・和文、英文ともios標準
・20px、15pxBold、15px、14pxBold、14pxが使われている


・通常時とおやすみモードのフォントの灰色は同じように見えるが違った!
・さらに、灰色のようで、mainカラーの青色がまじってる!
・通常時のフォントは黒色のようで、mainカラーの青が混じってる!!!!
ふつうに使ってるときは全く気づかなかった!!!!!!

・おやすみモード時は背景色2つ


マージン(余白)

・ツイート同士などの塊と塊には16px
・塊の中でさらに中身がある場合、4px
うまく説明できない、、、

・8や12(一箇所だけ出てくるけど)がないことにより、4と16でジャンプ差ができてまとまりがよくみえるのかな?


その他

今回トレースしてないナビゲーションバーのアイコンを含め、アイコン、ボタン丸みをおびていて親しみやすい印象
色はメインカラーの青を足して、完全な灰色や黒にしてないことで無意識に統一感がでてるのかな


はじめてブログを書きました〜〜〜〜〜
めちゃくちゃ苦手でかなり時間がかかった、、、!

この記事が気に入ったらサポートをしてみませんか?