アプリUI制作のチュートリアルで学ぶSketchの使い方 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第1回ではSketchの魅力についてお伝えしました。今回は、スマートフォンアプリの「Sign upページ」を例に、基本的なUIをデザインする上で必要なSketchの操作を説明します。Sketchの使い方だけでなく、UIデザインに役立つTipsも紹介します。 ※文中の（A）などはショートカットキーです。積極的に使って覚えていきましょう！ Sign upページは、以下の手順で作成します。 アートボードを用意する ナビゲーションバーを置く ユーザーアイコンの画像を丸く切り抜き配置する 入力欄を作成する ボタンを作成する 解説の中では細かい数値や色については触れませんが、同じ数値で作成したい方は図を参考にしてください。また、今回作成する「Sign upページ」のSketchデータはこちらからダウンロードできます。
最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ
ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。 余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。 詳細は以下から。 最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ Cima is Live 筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。 Birds of Paradise
UI Summary | UIデザイン制作に役立つキュレーションサイト
カテゴリー Android (25) Android Wear (2) Apple Watch (8) iOS (33) IoT (2) iPad (4) Material Design (21) Photoshop (17) Sketch (2) UIデザインの基礎 (12) UIデザインの考え方 (44) UXデザイン (23) Windows (2) お知らせ (1) まとめサイト (27) アニメーション (6) イベント (8) インタビュー (10) インタラクションデザイン (9) ウエアラブル (9) カンパニー・クリエイター (45) イラストレーター (3) デザイナー (13) ガイドライン (21) グラフィックデザイン (1) ゲーム (1) コミュニティ (2) サービスデザイン (2) スマホサイト (1) チュートリアル (4) ツール・サービス (51)
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
UIデザイナー必見！ アプリの導入画面で使われる主な４つの手法
ユーザーがそのアプリの中で一番最初にふれる画面は、アイコンと同じくアプリの「第一印象」になると考えても間違いないくらい、大切な部分です。 だからこそ導入画面は、ユーザーの気持ちになって、ユーザーのことを考え、しっかりと設計しなければなりません。 今回はそんなアプリの導入画面によく使われる、４つの手法をご紹介します。 スプラッシュ まずはおそらく最も多くのアプリが採用しているスプラッシュという手法です。 ホームからアプリのアイコンをタップしたときに出る画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われます。 たとえばツイッター公式クライアント。 アプリを起動したときの、この画面ですね。 みなさんご存知かと思いますが、ツイッターは少し特殊なスプラッシュで、 こんな風にどんどん鳥がせまってきて背景にコンテンツがあるという、面白いスプラッシュを導
Houzz｜ハウズ｜
新規登録またはログインして続行することにより、Houzz 利用規約およびプライバシーポリシーに同意したものとみなされます。Houzzがマーケティング目的で自分のメールアドレス宛にメールを送信することに同意します。設定から、いつでも停止できます。
Mike Matas Blog
Kevin ScottBill BarnesJake CohenAdam MengesMarkus BeissingerZach StiggelboutRamon GilabertMike Matas
Page not found | abdz.do
When I started this blog, way back in 2006, I had no clue how long it would last. I actually had no idea I could even write about something for more than a couple of days. It is funny how things go. Once I read in a book that the secret of happiness was low expectations. That explains why, for over a decade, I have been running this site. It also explains why you might end up on this page. Not los
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
Googleが119時間のテストをしてわかった「モバイルサイト設計25の指針」｜男子ハック
@JUNP_Nです。GoogleがGoogle AdSenseに関する最新情報を伝える公式ブログ「Inside AdSense」にて、119時間にもわたるユーザービリティテストを行った結果をまとめて公開しています。詳細は以下。 モバイルサイトの最適化は必須！モバイルの特性を理解したサイト設計が必要img via：モバイルサイト設計の指針 Googleがシカゴとサンフランシスコで119時間にもわたるユーザービリティテストの結果をまとめています。調査対象はAndroid、iOSの両方のユーザーで、商品の購入やサイト内を調べるなどの操作を行い、各サイトでの体験を調査委とともに評価したそうです。 関連：スマホに特化したアクセス解析「Pt engine」スマートフォンサイトのヒートマップが凄い！ この調査の結果で明らかになったことをまとめたものが「モバイルサイト設計を成功させる25の指針」となってい
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
2013のトレンド Top10を振り返る - UI編
今年の初めに2013年の予想記事 “2013年トレンド予測 カテゴリー別 Top3 | Tech / UX / Mobile / Online Marketing“を書いてからはや1年、気づくともう年末。振り返ってみると今年はインターネット・デザイン・スタートアップを取り巻くトレンドがめまぐるしく変化した一年となりました。その中でも最も進化が著しかったのがUI (ユーザーインターフェイス) と UX (ユーザーエクスペリエンス) です。今回はサイトや、アプリ、デバイスを利用するユーザーの使い易さと利用体験に直接影響を及ぼすUIについて2013年のトレンドをまとめてみました。 2013年のUIトレンドTop10 レスポンシブデザイン化が加速 フラットデザインの氾濫 タイポグラフィーの重要さが上昇 Flash終了のお知らせ 大きな画像を背景に利用 余白の有効活用 パステルカラーを積極的に採用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Airbnb Design Patterns - Pttrns
Tripstr
http://www.lobagola.com/
Haraldur Thorleifsson
マテリアルデザイン参考
Page not found | abdz.do
Products