Drawing Stencils, Pads and Accessiories for Designers & Developers.
Drawing Stencils, Pads and Accessiories for Designers & Developers.
企画書も原稿も、まずアイディアを紙に書き出すことから始める。そうすることで散らばっていたアイディアが洗練されてまとまっていく。スマホアプリ、ウェブサイト、タブレットのデザインを考えるときも紙から始めるとはかどるよね。 今回はそんなワイヤーフレームの作成に便利なテンプレートをご紹介。UI STENCILSは各デバイスのスケッチブックやステンシルを販売しているおすすめサイト。 UI Stencils Browser Sketch Pad. from Design Commission on Vimeo. Pad Sketch Sheets iPadのスケッチシート。簡単なスケッチはグリッドなしバージョンで、詳細スケッチはグリッドありを活用して。 iPad Idea Sheet 日本語のサイト。原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の3種類。画面内で縦横
このブログではないですが、Google Analyticsを見るとスマートフォンからのアクセスが結構あったので、スマートフォン向けのサイトを作ってみようと思いました。 ただ、スマホ向けのサイトは作ったことがないので、まず実際に色んなサイトを見て参考にしようと思い、ギャラリーサイトを調べてみました。 国内ギャラリー まずは国内サイトです。iPhoneが中心になっています。この3つのほかにも色々ありましたが、内容的には似ているので、更新頻度や使いやすさなどを基準に選びました。 iPhoneデザインボックス 画像が大きく見やすいです。個別ページでは画像も多くPCサイトとの比較もあってとても使いやすいです。カテゴリもしっかりしています。 iPhoneデザインアーカイブ 掲載サイト数が多く、更新頻度もかなり高いです。 スマートフォンサイト集めました。 すっきりしたデザインで見やすいです。カテゴリも業
カテゴリがしっかり分けられていて 凄く見やすかったのでご紹介。iPhone やAndroid向けのUIパターンギャラリー です。アプリデベロッパーさんや アプリデザイナー、モバイル向けの デザインの参考にいかがでしょう。 パターンギャラリーはもうすでにいくつもありますけど、ここは特にちゃんと分けてくれているので見やすい印象でした。 左サイドに大まかなカテゴリーがあります。それぞれには更に細かいパターンに分けられています。たとえば、ナビゲーションならリストタイプ、メガメニュー、カルーセル真紀など。 こちらは検索のカテゴリ。検索ボックスや、オートコンプリート、ソート機能付きなどなど。 インビテーション・・・サイトツアーみたいなやつです。こういうのあんまり紹介されてませんよね。 パターンはその場でLightbox風に表示するのでページ推移も必要ありません。 みたいな感じのパターンギャラリーです。
WEBデザインとアプリデザインのためのフリーUIパッケージ「18 free UI elements packs for your web designs and apps」 インターフェイスを製作するときに時間を節約しながら、クオリティを保ちたいときに、ユーザーインターフェイスに必要なパーツをパッケージした素材が便利です。今日紹介するのはWEBデザインとアプリデザインのためのフリーUIパッケージを集めたエントリー「18 free UI elements packs for your web designs and apps」です。 Modern Web UI Set 様々なタイプのUIの素材が用意されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Mobility: set of mobile UI elements アプリケーショ
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。 実在するサイトが課題です! 題材にさせていただくのは、東京都江東区で幼児向けのプリスクール(就園準備スクール)を運営する「プレイグループ木場校」さんのWebサイトです。 プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。 今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。 ゴールの設定とコンテンツの選定 スマートフォンの
An Illustrator Wireframing Toolkit | eleqtriq iPadやスマホのテンプレが詰まったイラレ用のワイヤーフレーム作成キット。 次のようなデザインのワイヤーフレーム作成キットが公開されています。 イラレなので拡大してもクオリティは損なわれないところがメリットですね。 iPad、スマホだけではなく通常のPC用も含まれているので幅広く使えそうです。 紙に印刷してハイクオリティな資料をサクッと作る場合に活用できるかも。 関連エントリ WEBサイトのクールなワイヤーフレームを作成する際に使えるPSD オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
Captcha security check coolcoding.com is for sale Please prove you're not a robot View Price Processing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く