【Sketch】プログラマのためのデザイン勉強方法

こんちにはmorimoriです。

プログラマの皆さんデザインの勉強してますか?

UI/UXが重要視されてきている昨今。業務用のシステムUIみたいなデザインじゃかっこ悪いですよね。とは言え、デザインってどうやって勉強したら良いか分からない方は多いかと思います。

ここで自分がプログラミングに入門した時のことを思い出して下さい。本やネットにのっているコードを取り敢えず真似して書いたことがあると思います。デザインもまずはインプットをするよりもアウトプットで手を動かした方が楽しいし、学ぶことも多いとでしょう。

という事で、今日は自分がこれ良いなと思ったデザインの勉強法を紹介したいと思います。

使用するツール

Sketch

Pinterest(web)

デザイン開始!!!

まずPinterestで良さげなデザイン画像を調達します。

次にSketchを開いて適当にArtboardを作成して、その上に先程調達した画像をドラックドロップで載せます。

f:id:nooootion:20180309193405p:plain

グリッドラインの設定もしておきましょう。マージンやオブジェクトのサイズなんかを測るのに参考になります。隣に真似して作成していくためのArtboardを追加します。

f:id:nooootion:20180309193812p:plain

追加したArtboardに模写して行きます。色を設定する際に便利なのがSketchの機能として、color Pickerのスポイトマークをクリックすると画面上のどこからでも色を採取することをができます。これで色を完璧にコピペできますねw

f:id:nooootion:20180309201035p:plain

f:id:nooootion:20180309194531p:plain

こんな感じで模写しながら、表示位置、サイズ、色などを勉強していきます。

アイコンはGoogleのサイトなんかにもあるので、似たようなものを貰ってきて設定します。色も変えられるので便利ですw

material.io

こんな感じで模写できました!! 細かいところは気にしないw

f:id:nooootion:20180309220937p:plain

まとめ

結構上手く模写できるのでやってて楽しくなってきます。

Sketchの使い方を覚えるのにも良いかもしれません。

ではエンジョイデザイン!!!!!