SketchでUIトレース ~Twitter~

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

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

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

【プロフィール画面】

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

【タイムライン】

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

フォント

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

色

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

マージン(余白)

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

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

その他

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

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