FlutterでDesktopアプリ開発2 ~ロゴデザイン~

前回flutterでのシステムトレイ常駐アプリの開発方法のざっくりとした調査が終わったので今回はデザインフェーズ。


遷移図(超雑)

Alt text

メニュー
Timer設定画面
Stopwatch設定画面
Timer実行画面
Stopwatch実行画面

とりあえず最初期のアプリでは作業の種別を選んでタイマーやストップウォッチを実行するようにはせずに、 ただ単にタイマーとストップウォッチ機能だけの簡単なアプリを作ろうと思う。


アイコンアイデア

とりあえずアイコンがないとやる気が出ないので作る。 アプリの名前は「ケルン」みたいな名前にしようと思っていて、 ケルンや登山する時に道標的な役割を果たしてくれるので、このアプリも 作業をする上でのチェックポイントというか道標的な役割を担えればよいなという願いを込める。 で、ケルンから連想して同デザインするか。

参考イメージ Alt text これがケルン。

Alt text これはFloating Pointsっていうアーティストの昔のアルバムのジャケ

こんな感じで積み重なってる感じにすると決める。(そのまんまだが)


アイコンデザイン ~Affinity Designer~

詳しい使い方は描かないけど AFFINITY Designerでデザインした。iPad miniでもだいたいいける。 Alt text


画面デザイン ~Figma~

Alt text Figmaで画面イメージ固める。

Alt text メニューの部分こんなでよいかな。それっぽい。画像圧縮しすぎてアイコン潰れてるけど。。

Alt text Dockのアイコン


Desktopアプリの画面デザイン

次やります。