UIトレースレッスン01-1 | note

詳しく言うと前にやったこともあるので01ではないのですが、UPするのは今回が初めてなので01で。過去トレースも機会があったらUPしてみようと思います。

トレースしたもの

PC版noteトップページ

使用したアプリケーション

Adobe XD…使い方練習も兼ねて
Google Chrome…いつもお世話になっています
Adobe Photoshop 2020…スクショを拡大して確認する用
Adobe Illustrator2020…SVGなんかのデータを作る用

作業時間

4時間程度（PC版のみ）

感想

意外にも背景は#fffでした。何色か入っているのかと思っていました。
アイコンフォント系は自作なのかなぁ。Fontawesomeではなかったです。私はサボったのでFontawesome使いました。今回ここからSP版→コーディング練習もする予定なので、あまりコード見ないようにしていたので不明です。コーディングするときにわかるかな。
グレーの使い方が繊細で、そうか、実際のノートの罫線もあるけど目立たないもんなぁ、などというデザイナー１年生みたいなことを考えました。
コンテナ部分は940px。自分のサイトもこのくらいに設定したときに狭いかなと不安だったので、仲間がいた気分になりました。
無限スクロールできるタイプのページってフッターが確認しづらいなと思いました。有限ページにはあるはずなので今度また調べてみようと思います。
marginやpaddingは８の倍数で統一されていました。きれい。

というわけでこんな感じで。勉強になったなぁ。今回も最後まで読んでいただきありがとうございました、ではまた。