ひぐのカメラとプログラミング日記

大学院生の日記です。主にプログラミングとカメラについて。最近はデータ分析・Kaggleにハマっています

Adobe XD でモックアップ書いた【Day6】

こんちは、ぐちです!

 

冷静に休日にブログ書くのは、大体予定入っているし厳しいっすね💦

昨日の進捗を報告したいと思います

 

 

 

昨日はAdobe XDでポートフォリオサイトのモックアップを書きました!↓

 

f:id:zerebom:20180625105113p:plain

 

Cacooの使用を断念

 

zerebom.hatenablog.com

 以前こちらの記事で「Cacoo」というサイトを紹介したのですが、

使ってみると、

 

・機能が少ない

・要素ごとのピクセル幅がわからない

 

などの理由から、やっぱり使用を断念しました(>_<)

DLしなくて済むので、用途を選べばパッと使えていいかもしれないです。

 

 

Adobe XDが強すぎた

 

その代わりに昨日から使い始めた、Adobe XDですが、

色々と便利すぎることがわかったので、こちらを紹介させていただきます。

 

ダウンロードはこちらから↓

creative.adobe.com

 

what is Adobe XD?

Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。

 

とのこと。

AdobeシリーズのUX、UIに特化したソフトです!

 

 

UI/UX用のソフトで有名なのは

「sketch」等ですが、こちらは、買い切りとはいえ数千円します💦

 

XDは小容量で使用する場合は無料となっております!

個人でちょっとWebデザイン始めてみたいなーって方にはオススメかなとおもいます。

 

便利な用法などはいつかまとめたいと思います。。。!

自分が使う上で参考にさせていただいたサイト↓

www.archetyp.jp

 

モックアップの説明

f:id:zerebom:20180625105113p:plain

 

作ってみたのがこちらです!

 

まあ見ての通り

ショボショボ丸なんですが、一作品目なのでお許しください(笑)

 

素人ながら気を付けた点は

 

配色を灰色・水色・濃い水色にして、統一性があるようにした

ことです。

 

本に紹介されていた、製氷機のサイトのカラーコードを真似したのですが、

現在そちらのサイトはリンク切れでした。。。

 

左上にロゴを配置したり、フォントとかももっと最適解あると思うんですが、

とりあえず、モックアップ➡コーディングの流れを掴んでみたかったので、

サクッと作成しました。

 

後にReactで再実装する予定なので、その時にもっとがっつり

デザインしてみたいと思います!

 

では~

google-site-verification: google1c6f931fc8723fac.html