The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
ずっと使える、デザインの基本まとめました。【2020年改訂版】
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
ベータリリース開始！BacklogのUIアップデート (2) 〜変更点とデザイナーのこだわり編〜 | Backlog ブログ
仕様や画面は現行バージョンと異なる可能性があります。 Backlogの最新版についてはこちらからご確認ください。 こんにちは。最近海外ドラマがマイブーム。Backlog Refresh UI Webデザイン担当の中川です。 先日公開したベータリリース開始！BacklogのUIアップデート (1) 決意に至る経緯 では、Backlog Refresh UI の経緯についてご説明させていただきました。 第2弾のこの記事では、BacklogのUIをアップデートさせるために、実際にどういうことをして、どう変わったのか、デザインという観点からご説明します。 今回のリニューアルのコンセプト まず、今回のリニューアルで、やること、やらないことを決めました。 やること 画面をスッキリさせる モダンなUIにする やらないこと 大規模な画面構成の変更 既存機能の削除 やらないことを決める上で大切にしたのは、な
デザインを引き立てる！高品質かつ無料のPSDファイルまとめ
デザイン作業を行うなら必ずといっていいほど持っておきたいのが"PSDファイル"です。皆さん、活用していますでしょうか。 商品パッケージなどのデザインを確認したり、ポートフォリオ掲載用のモックアップを作ったり、ホームページのデザインに使ったり……と様々な使い方ができて便利です。 今回は、知っているだけでトクをする！持っておくと便利なテンプレート、モックアップを中心に無料のPSDファイルをピックアップしてご紹介します。 作業時間を短縮したい、表現の幅を広げたい、という方はぜひダウンロードしてみてください。 無料でダウンロードできるPSDファイルまとめ 1. Simple Resume Template vol12 http://www.pixeden.com/resumes-templates/simple-resume-template-vol12 シンプルに見やすくまとめた履歴書のPSDテ
イラスト、アニメの視覚演出を徹底追究する「エフェクト表現の物理学」 - MdN Design Interactive
株式会社エムディエヌコーポレーションは、イラストやアニメの視覚演出“エフェクト”の描き方をまとめた「MdN EXTRA Vol.4エフェクト表現の物理学 爆発＋液体＋炎＋煙＋魔法を描く イラストからアニメまで」を3月31日に発売する。A4変型判／120頁／オールカラー／1500円（税抜き）。 普段何気なく見ているアニメ、それぞれの物語・世界観は人物とその背景の絶妙なバランスによって成立する。本書は背景の物理表現演出「エフェクト」に着目し、その仕組と描き方を実例をもと丁寧に解説している。 爆発／水・液体／炎／煙・雲／魔法の描き方や、エフェクトのプロたちのインタビューも掲載。エフェクトの仕組みを追究していくと、その緻密な計算に「なるほど！」と驚き＆納得の連続だ。煙の動き方、水のはね方、炎のゆらめき……今まで見てきたアニメやイラストを見るのがより楽しくなる！
初心者でもデザイナーのように文字の見た目を劇的によくする「カーニング」をマスターするための9つのポイント
優れた無料フォントはたくさんありますが、フォントによっては文字を並べた時に文字同士の間隔が不自然になってしまうことも。そんな時は文字間隔を調整するカーニングを行うことでデザインをよくすることができますが、どのようにすれば適切にカーニングができるのか、初心者でも使える9つのポイントがまとめられています。 A Beginner’s Guide to Kerning Like a Designer – Design School https://designschool.canva.com/blog/kerning/ 文字と文字の間隔は、単純に同じ距離であれば自然に見えるというわけではありません。以下の画像では左側の「Type」の文字間隔が全て等しく、右側は同じではないのですが、実際に人間の目で認識されると自然に見えるのは右側になります。これは、それぞれの文字によって持っている「空間」の大きさに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
美しいWebデザインのECサイトのみを収集しているデザインギャラリー・「Beautiful Stores」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP