Daily UI 33日目のお題は「Customize Product」。
グラフ作成アプリの画面を制作します。
制作過程
今回は4時間弱くらいでした。
リサーチ
Dribbbleや既存のグラフ作成アプリを参考にしました。部分的に参考にするため、違う分野のアプリも少し見ています。
要件定義
ChatGPTに要件を詰めてもらいました。
合わせて、必要な項目も考えます。
ラフ
ここは割愛。
ワイヤーフレーム
制作したワイヤーフレームがこちら ↓
左がグラフのデザインをカスタマイズできるタブ、右がグラフにデータを追加していくタブです。
ビジュアル
もう少し手を加えたのがこちら ↓
入力フォームのデザインを、下線から枠線に変更しました。より入力できそうな感じが出たかなと思います。少し色をつけたのがこちら ↓
完成
制作した画面がこちら ↓
データを追加するタブの画面 ↓
青字の「編集」ボタンを押すと、データの並び替えや削除ができる想定です。
デザインのポイント
背景のあしらい
今までは白一色のことがほとんどだったんですが、今回は画面上部を濃いめの色にし、背景をグレーにしました。これで度々課題に感じていたラフっぽさが解消された気がします。
制作してみて
最近の制作だと、個性を出したいと思ってよく見るデザインを避けていたんですが、先に王道のデザインにしてから少し崩す方がやりやすいかもと思いました。