1900年代のデザインの歴史から学ぶ！デザインの基本とは
今当たり前に使っているスマートフォンのデザインの基本はどこにあるのか。19世紀まで遡ってデザインの本質について解説しています。建築物や物のデザインからトレンドがあり、デジタルなデザインへと継承されている歴史をぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Dmitry Fadeyev氏によって投稿されました。
Bootflat
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome. Download (Version 2.0.4) MIT Licensed - Version 2.0.4 Learn more Designed for e
「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG
フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。 なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。 あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。 ※制作環境はPhotoshop CS6以上が必要です。 ロングシャドウをPhotoshopの3D機能で作る方法 3Dオブジェクトに変換 レイヤーに右クリックして、テキストレ
最近のWebデザイン界隈におけるフラットデザインブームってなんか間違ってませんか？ | ベイジの社長ブログ
iOS7の発表で、フラットデザインというものがより一層注目されているように思います。その前からも、私のFacebookのフィードやGunosyには、フラットデザイン関連の記事が、ほぼ毎日のように流れてきており、注目のほどがうかがえます。 ただ、このフラットデザインブームに強い違和感を覚えるのは私だけでしょうか。特にPCサイト向けのWebデザインにフラットデザインを取り入れよう、みたいな動きに関しては、何かが間違っているような気がするのです。その思いを整理するため、少しまとめてみました。 そもそもフラットデザインが成立する条件は？ 私が初めてフラットデザインという言葉を聞いたときに思い描いたのは、単にグラデーションや影といった立体表現を行わないデザイン、という程度のものでした。もちろん、フラットデザインとは端的にはそういうことなのだとは思いますが、デザインから立体の概念を消し去ることは、表層
GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
Shunter • [和訳] フラットピクセルズ ~ フラットデザインとスキュアモーフィズムの戦い ~
最近、来るiOS7でフラットデザインが取り入れられ、それによってリリースが遅れているというニュースがありました。 iOS 7、大幅アップデート過ぎて公開が遅れるかも - Gizmodo アップル、次期「iOS」で「フラット」なUIデザインを採用か 実は、個人的に実世界の物をメタファーにデザインを組むことを絶対美だと信していた節があったので、このニュースは衝撃でした。 そんな時、このトピックに関する面白いブログ記事を見つけました。「flat pixels ~The Battle Between Flat Design & Skeuomorphism~」です。 Skeuomorphism（スキュアモーフィズム）とはソフトウェアのUIに過去の実世界の物の特徴を取り込むデザイン手法のことなのですが、これとメトロUIに代表されるFlat Design（フラットデザイン）について、よく比較しま
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに～みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design Fonticons
流行に乗っていいの？フラットデザインの落とし穴
Flat UI - Free Bootstrap Framework and Theme