[B! UI] crystalineのブックマーク

アニメーションが心地よいマテリアルデザインのUIサンプル５選

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

crystaline 2016/10/14

リンク

「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門Webメディアのリニューアルで使った手法 | THE BAKE MAGAZINE

「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法こんにちは、BAKEのデザイナー井手口です。前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の

crystaline 2016/08/31

リンク

InstagramやAirbnbなどのUIデザインに見る新しいトレンド

ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。「コンプレクション・リダクション」とは「コンプレクション・リダクション」なんて聞いたことがありませんか？　聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。編注：Complexionは「顔色」「血色」という意味で、Reducti

crystaline 2016/08/30

リンク

Atomic Designの考え方と利点・欠点 – wkr.

Atomic Design はデザインシステムを作る方法論となります。デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。日本だとAbemaTV（アベマ TV）で使われています。（Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。各コンポーネントの詳細は次のとおりです。

crystaline 2016/07/19

リンク

「直感的」かどうか、決めるのは受け手。送り手が使うのはやめよう。 - outtakes

「直感的に」は、人によって定義するところが違い過ぎる。「わかりやすく（説明します）」同様、それを決めるのは受け手。送り手としてはNGワードにした方がよさそう。「直感的に」の意味を大きく分けると、次のように大別できる。手順の説明が不要ダイレクトに触っているような操作感スピーディに／スムーズに操作できることちなみに、コトバンクやgoo辞書では次のように定義されている。コトバンク勘などを働かせて物事を感覚的にとらえるさま。「―におかしいと思う」 goo辞書推理などによらず、瞬間的・直接的に物事の本質を見てとるさま。直覚的。「―に判断する」総合すると、元々「説明がいらない」ことを指していたが、どんどん意味が広がってインフレ化。なんか「直感的」って言っておけば勝ちっぽい雰囲気…というか、時代のムード。最悪なのが、iOS 7。直感的とは到底思えない。 iOSは、UIへのある程度の経験値がな