UI & UX Design Tips by Jim Raptis.
Social LoginSocial login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
アプリのUIデザインで使っているツール 10選+
2年前に同じ趣旨の記事を書いたが、いろいろ変わったのでまた書いてみよう！ Sketch 3（Mac） + Sketch Mirror（iOS） もう、Sketch以外でデザインするのはイヤだ、と思ってしまうほどパワーのあるデザインツール。ベクターベースのグラフィックツールなので、Adobe Illustratorと近いのだけど、もっと機能が絞られていて、UIデザイン寄り。いろいろと細やかに気がきいていて、好きなところを書ききれない感ある。起動が早い、ファイル保存も早い、数字書く窓でそのまま計算できる、ファイル書き出しするとき1.5倍とか3倍とか自由に拡大縮小できる、実機プレビューがリアルタイムかつ容易。 iPhone実機でデザイン確認するときは、iOSアプリSketch Mirrorでつなげることができる。リアルタイムで変更が見れる。昔はいろいろバグがあったけど、だいぶ安定して安心して使え
アプリデザインの参考になるUI/UXデザインギャラリーサイト10選 - 株式会社モンスターラボ
オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ① User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
成果につながるLP制作のノウハウ記事14選|初心者～上級者のお悩み別テクニック集 | LISKUL
世の中にランディングページに関する記述は無数に存在します。 しかし、情報量が多すぎて探している記事を発見することが困難だと感じている人も多いのではないでしょうか。 そんなあなたのために、過去リスクルに投稿されたランディングページに関する記事を「これから作りたい」「さらに獲得を伸ばしたい」などのステージ別にまとめてみました。 初めてのランディングページ製作や、既存ランディングページの改善の際には、ぜひとも参考にしてみてください。（参考：ランディングページ制作会社の一覧 ≫） ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。 新しくLPを作る方へ│成果の出るLPの作り方ランディングページは作り方次第で成果が2倍3倍と大きく変わります
ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか？ 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず！ そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
ビビッドな色使いが目を引く、フラットなUIデザインのアプリまとめ | Goodpatch Blog
Feedly: Your Google Reader, Youtube, Google News, RSS News Reader 14（無料） カテゴリ: ニュース, エンターテインメント 販売元: DevHD – DevHD Inc Website RSSフィードリーダーのFeedly。メインカラーとして鮮やかな黄緑を使っており、カテゴリー部分では色を多用しています。慣れればどのカテゴリーかぱっとわかりそうで良いですね。 Infomatic Website Infomaticは自分のTwitterやFacebookの使用状況を統計で確認できるアプリ。残念ながら日本のアップルストアではダウンロード出来ませんが、青をベースとした配色が綺麗ですね。 Figure
2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog
こんにちは！ 先月の頭に書いた記事「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」が 今でもかなり多くの方に読んでいただけているようでとても嬉しいです。今回のブログは「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」でご紹介した「メトロUI（フラットデザイン）」にフォーカスした記事です。 （下記はDesignmodoの記事「Flat Design: Can You Benefit from the Trend?」の翻訳です） 最近よくフラットデザインが取り入れられているWebサイトやアプリを見かけます。このトレンドはWindows 8とGoogleの新デザインがリリースされた事で人気になり、他のサイトなどでも取り入れられ始めました。デザインの装飾をたくさん使わず、フラットデザインはメッセージや製品、アイデアをユーザーに伝えるシンプルな方法です。ぜひ今のトレ
優れたUIデザインを作る為に重要なことは何か | Goodpatch Blog
こんにちは、だいきです。 また勉強になる海外のUIに関する記事を見つけたので翻訳してみました！ （この記事は Visual StudioというブログのWhat’s Important in UI Designという記事の翻訳ブログです。） 最近「ユーザーインターフェイスのデザインはオプションでなくなった / “Good UI Design Is No Longer Optional”」という記事が話題となり、 多くのUIデザインは人間の目の構造をもとに作られていると指摘されました。 （参照: “Good UI Design Is No Longer Optional”） ユーザーインターフェースがデザインのオプションでなくなったということは事実ですが、Webサイトの全体像を構築した後下のような質問が出てくると思います。 どんな画面/ フォーム/ ウィンドウ/ ダイアログを作れば良いのか？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【随時更新予定】推しのFigma Pluginまとめ｜三上蒼太 / Sota Mikami
ユーザー体験設計とウェブサイト構築から導く企業ブランディング
Nyle Engineering Blog
Sidebar Transitions
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
ウェブのレイアウトやUIデザインの参考になるPinterestのボードのまとめ