UIトレースやってみた〜Twitter編〜

デザインとは無縁だった未経験者が
UIUXデザイナーを目指していく成長記録をつけています。

今回はUIトレースのTwitter編。

学ぶ必要のあることが多すぎて少し彷徨いかけていましたが
UIUXデザインコミュニティBONOですでにデザイナーとして
現場でご活躍されている方と会話する機会がありました。

そこで私の状況・性格なら今は楽しいと思える学びで勢いをつけながら
UIトレースでFigmaにもっと慣れていくと良いのでは？
というアドバイスを受けることができました！

ということで、2回目のUIトレースにチャレンジ。

前回はカイさんの動画でお手本を見ながらApp Storeを
UIトレースしています。

今回の目標

所要時間：10時間（前回は12時間）
目的：余白、フォント、色、配置、ブロッキングなどを知っていく
　　　Figmaに慣れる

成果

所要時間は9時間で考察まで終えました👏

左がスクショした画面、右がUIトレースになります。
＊完璧なコピーよりも目的を達成することを優先しています。

ホーム画面

検索画面

スペース画面

考察

意識したこと

まずダークモードをやめて細かい色使いやエフェクトを
見ることができるようにしました。笑

極力フォントサイズ・幅や色は忠実に再現。
使い回せるアイコンやフレームはそのまま流用して
オートレイアウトが使えそうな箇所はどこか考えました。

実際にアプリを触りながら表示されているコンテンツの
役割が明確になるようにしました。

前回のフィードバックから、
余白は文字と文字の間まで細かく分析し、
ブロッキングの考え方を改善しました。

気づき

・フォントの大きさ・余白の種類はApp Storeに比べると
　かなり少ない
・フォントサイズでいうと検索画面のPRやスペースのライブが
　大きくなっているのでそこを利用してほしいという意図がある？
・ホーム画面と検索画面の余白の取り方が少し似ている
・右下の新規投稿ボタンは浮いているように見えるよう
　エフェクトがかかっている
・色は基本3色に絞られている（App Storeもそうだった）
・同じ分類の文字の縦幅は一番狭い6pxで統一されている
・一番多く使われていたのは14px。

振り返り

Figmaの使い方に少しずつは慣れてきましたが
まだまだここはどうしたらうまく作れるのか？と思い
Figma講座の動画に戻ったり調べたりすることが多いです。

そうやって少しずつ学んでいくのだと思いますが
もどかしいですね・・・😂

ただ、思ったより前回より早く終えられたので
着実に成長しているのだと信じて努力し続けます！✨

UIトレースは引き続き定期的に取り入れて
Figmaの使い方とアプリ制作の傾向を知っていきます。

次回のUIトレースはInstagramの予定です。
それではまた！