Webサイトやモバイルサイトのワイヤーフレームがたくさん!でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」

最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。

そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。

UI TITES

http://pixelbuddha.net/ui-tiles/

こちらは72個もモジュールがあり無料でダウンロードができます。

PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤーフレームを作ることができます。

UX KITS

http://uxkits.com/

こちらは有料になりますが、WEBサイトのフローチャート&サイトマップとモバイルのフローチャート、そしてそれをカードにしたものなどがあります。

モバイル用はWebに比べてあまり例がないのでとても参考になります。

Webサイト用

このようにサイトマップ風にしてフローチャートやグローバルナビゲーションなどにすると複数で作業するときにとてもわかりやすいですね。

モバイル用

モバイル用もこのようにサイトマップにするとすごいわかりやすい!

自分はあまりモバイルでここまで作ったことがないのでとても勉強になりました。

イラストレーターデータはPC用は$29、モバイル用は$35でした。

Pinterestで参考になるUX/UI系のボード

https://www.pinterest.com/_f7/gui-great-ui-collection/
レイアウトの他にアイコンなどもまとめられています。

https://www.pinterest.com/yukihariguchi/mobile-ui/

モバイルサイトやAPPのUIがまとめられています。

https://www.pinterest.com/johnynaka/web-ui-design/

WEBサイトやUIが大量にまとめられています。ずっとみてられます。

過去にまとめたPinterest系の記事

以前、WEBデザインクリップでまとめたロゴやグラフィックやポートフォリオなどのオススメのピンタレストをまとめた記事です。

ピンタレストにお気に入りのボードをフォローしておくと便利なので使ったことない人は是非使ってみてください。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事