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
こちらは有料になりますが、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デザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら