やってみよう！Adobe XD Creative Challenge シーズン1

今回は、気がついたらAdobe XD Creative Challenge シーズン1 week1の最初の作品の審査をすることになり、合わせて参考作品を投稿したのでご紹介です。

Adobe XDの動作するプロトタイプ下よりどうぞ。

S1_01_eCommerce-yuguchi

今回の参考作品のダウンロードとちょっとした解説の前にすこしだけCreative Challengeをご紹介します。

Adobe XD Creative Challenge シーズン1とは？

こちらのブログで発表されました。

Adobe XDでデザインしよう！PSDから始めるUI/UXデザインチャレンジ | Adobe XD Creative Challenge シーズン1 #AdobeXD #Challenge | Adobe Blog

頑張るとXDグッズがもらえる…かも？！というプレゼントつきの「作品作りしながらXDの操作を身につけられる」企画です。

参加は簡単！

1. アンロックされたチャレンジ（課題）のテンプレートファイルをダウンロード
2. デザインとプロトタイプを作成
3. 作り方の解説をする動画（CC道場）を確認
4. 分からないことがあったらXDUGのFacebookで質問
5. プロトタイプの共有リンクを作成
6. 共有リンクをハッシュタグ #AdobeXD #Challenge を付けてツイート

さて、投稿方法がわかったところで、つくりましたよー！だけではもったいないのでちょっとだけ解説します。

参考作品XDファイルのダウンロードと解説

参考作品のXDファイルのダウンロード

参考作品として作るということだったので、ステップとお題以外の機能はできるだけ使わないように作っています。

アセットをバッチリ準備した

デザインのモチーフやテーマが与えられているわけではないので、身近なところから色を作成しそれを元にテイストを決めました。アイデアがどうしても出ないときにもおすすめです。

カラーテーマ作成にはAdobe Captureを使用しています。足りない色はフラットUIの色から浮かない青を選択しました。

写真をベクターに変換するiOS、Android用アプリ | Adobe Capture

残念ながらXDのCCライブラリからはカラーテーマに直接アクセスできないのですが、スクリーンショットで取り込んでしまえば他のツールを使わなくても利用できます。

リピートグリッドとテキストデータの使用

製品名だけのテキストファイルが配布されていたので、価格の方も作りました。追加したUIを見るとわかりますが、今回は作成しなかった別レイアウトのことも考えてのことです。

T-Shirt-price.txt

￥1,500(税込み)
￥1,800(税込み)
￥1,200(税込み)
￥3,200(税込み)

オーバーレイのパターンを増やした

課題であるオーバーレイを使うチャンスが1度だったのでスライドインする買い物かごを追加しました。

できる限りファイル自体は単純な作りにしています。参考になれば幸いです。

まとめ

作品作りしながら作りながらXDの操作を身につけられる、Adobe XD Creative Challenge シーズン1 week1 の締切は 2019/4/26（金）15:00

プロトタイプURLと  #AdobeXD #Challenge をつけてTweetして

みんなで参加しましょう！