Moristapaper

Angle 2 Mockups

February 27, 2018

昨年末から GUI アプリのスタイリングの練習として、Sketch でいくつかコンセプトアートのようなものを作っている。 作ったコンセプトアートの中にはスクリーンに表示される部分だけでなく、そのデバイスも含めたものもある。 デバイスのモックアップは Facebook Design からダウンロードしているが、アートボードから画像ファイルを生成し、ときには画像ファイルを変形させ、モックアップに当てはめる行為が面倒だった。モックアップに当てはめたあとに「やっぱりここの余白を調整したい」等思ったことがあったが、修正するのが面倒でやめたこともあり、健全ではなかった。

そんな中 Angle というものを発見した。Angle は Sketch のモックアップライブラリと、それをアートボードから簡単に生成するプラグインである。 値段は $200 で決して安くはないが、期間限定で $50 になっていたので買ってみた。

Podcast アプリの UI を Angle を使ってモックアップに入れる

上記の画像は、以前作ったポッドキャストアプリで Angle を利用した例。アートボードから画像の生成し、変形してモックアップに入れるまでをコマンド1つでできるので便利。以前面倒だと思って断念したモックアップに入れたあとの微調整も、これならできそうだ。作業量を減らすことでクオリティを高められることもあるので、どんどん効率化すべき。


1つのサービスのデザインをずっとしていると、デザインのより表層的な、グラフィックを作る能力を高める機会は少ないように思う。なのでコンセプトアートという形で、普段開発しているものとは異なるスタイリングを試していきたい。

せっかく Angle を購入したことだし、停滞気味だった Dribbble への投稿を再開しようと思う。


morishitter

プログラミングもするデザイナー / StylefmtPicostyle の作者 / CSS チョットデキル