こんちにはmorimoriです。
プログラマの皆さんデザインの勉強してますか?
UI/UXが重要視されてきている昨今。業務用のシステムUIみたいなデザインじゃかっこ悪いですよね。とは言え、デザインってどうやって勉強したら良いか分からない方は多いかと思います。
ここで自分がプログラミングに入門した時のことを思い出して下さい。本やネットにのっているコードを取り敢えず真似して書いたことがあると思います。デザインもまずはインプットをするよりもアウトプットで手を動かした方が楽しいし、学ぶことも多いとでしょう。
という事で、今日は自分がこれ良いなと思ったデザインの勉強法を紹介したいと思います。
使用するツール
Sketch
Pinterest(web)
デザイン開始!!!
まずPinterestで良さげなデザイン画像を調達します。
次にSketchを開いて適当にArtboardを作成して、その上に先程調達した画像をドラックドロップで載せます。
グリッドラインの設定もしておきましょう。マージンやオブジェクトのサイズなんかを測るのに参考になります。隣に真似して作成していくためのArtboardを追加します。
追加したArtboardに模写して行きます。色を設定する際に便利なのがSketchの機能として、color Pickerのスポイトマークをクリックすると画面上のどこからでも色を採取することをができます。これで色を完璧にコピペできますねw
こんな感じで模写しながら、表示位置、サイズ、色などを勉強していきます。
アイコンはGoogleのサイトなんかにもあるので、似たようなものを貰ってきて設定します。色も変えられるので便利ですw
こんな感じで模写できました!! 細かいところは気にしないw
まとめ
結構上手く模写できるのでやってて楽しくなってきます。
Sketchの使い方を覚えるのにも良いかもしれません。
ではエンジョイデザイン!!!!!