目指せ！UIデザイナー 〜UIトレース編〜
今日はUIデザイナーになるための入り口も入り口、
UIトレースについてです。
参考にしたサイト
Figmaの基本操作からアニメーションを使ったプロトタイプまで、操作に少し慣れていた私でも大満足な内容でした。
これを見るまでは、アートボードの上に透過させたスクショ画面を置いてトレースしていましたが、
グリッドを置いて8の倍数で設計するという、8ポイントグリッドシステムを導入する事でトレースの速度が速くなり、デザインルールを徹底することができました。
Figmaのプロトタイプデータを置いておきます。(触ると動きます！)
次はカイクンさんのこちらの動画を参考にしてYOUTUBEのトレースをしました。
こちらもプロトタイプまでの説明があり、とても分かりやすかったです。
やはりテキスト余白やは8の倍数、もしくは偶数になっていました。
Figmaのプロトタイプデータ置いておきます。
次はBONOのロードマップに沿って、Twitterのトレースをしました。
主な主要カラーは3色。
・背景は白
・協調させたいテキストは＃313131
・グレー
・目立たせる必要があるボタンやアイコンはブルー。＃2F98DA
アイコンもFigmaのペンツールを使って1から作ってみました。ペンツールである程度のアイコンは作る事ができますが、時間がかかるのであまり効率はよくなさそうです。
次回も引き続き、スマホアプリのトレースしていこうと思います。
ご精読ありがとうございました。
村田ばび
この記事が気に入ったらサポートをしてみませんか？