apeescape2.com
  • メイン
  • ブランドデザイン
  • 革新
  • エンジニアリング管理
  • Uxデザイン
Uxデザイン

長年にわたるボタンデザイン–ドリブルタイムライン

ボタン。彼らと一緒に、インターネットでの買い物を完了し、銀行のアプリにログインし、最も個人的な情報を記入したフォームを送信します。ウェブデザインは信じられないほどのペースで成長しており、スタイルは月ごとに変わっているようです。わずか数年で、テキストリンクからスキューモーフィズム、フラットデザインに移行しました。ナビゲーションはウェブデザインの最も重要な要素の1つであり、行動を促すフレーズのボタンはその最も強力なツールです。

この記事では、8年間のWebボタンの設計履歴を以下に基づいて追跡します。 ドリブル 。

ドリブルボタンのタイムライン

2009年に、Dribbbleが作成されました。これは、現在のプロジェクトの小さな部分を共有した世界中のデザイナーのためのプラットフォームです。 Dribbbleを使用すると、過去8年間のボタンのトレンドとデザインのストーリーをたどることができます。 ボタンスタイルのインタラクティブなタイムラインを作成するために、数千回のドリブルショットを実行しました。



上のボタンをクリックして、ドリブルタイムラインを参照してください。

2009年

今年、インターネットは40周年を迎え、最初の「ショット」がDribbbleに登場します。ボタンのデザインはグレースケールによって支配されています。繊細なグラデーション、丸みを帯びた角、影がほとんどすべてのボタンデザインに表示されます。この美学は、ネイティブシステムボタンを指します。

2009ボタンデザイン

Wojciech Dobry、 ダン・セダーホルム 、 ジョシュブライアント 、 ドリブル 、 サラ・パーメンター 、 マシュー・スミス 。

2010年

Instagramが作成された年。ボタンの形は大きく変わることはありませんが、より多くの色、より多くの詳細(内側の影など)、そしてはるかに装飾的なタイポグラフィがあります。

ccorpとscorpの違い

2010ボタンデザイン

Wojciech Dobry、 Morgan Allan Knutson 、 トロイ・バーグランド 、 クラウディウ・チョバ 、 リアム・マッケイ 、 ジャレッド・クリステンセン 。

2011

CSS3は今年初公開され、インターネットユーザーの数は10億人に増えています。スキューモーフィズムは今でも君臨しており、多くのデザイナーがこのスタイルを非常に創造的な方法で開発しています。ここには影や照明を適用するためのルールはありませんが、これらすべての要素が各プロジェクトに存在することは確かです。

2011画像コラージュ

Wojciech Dobry、 ジュリアン・レンボイ 、 クラウディウ・チョバ 、 ミーガンフィッシャー 、 ジョシュ・ヘムズリー 、 ジョナサンモレイラ 。

2012年

スキューモーフィズムの衰退と最終形態、そしてフラットデザインの恥ずかしがり屋の始まり。今年はスキューモーフィズムの最も発達した形態であり、一部のデザイナーはこのスタイルでマスターレベルに到達し、他のデザイナーは何か新しいものを探し始めました。

ビジュアルデザイナーは何をしますか

2012ボタンデザイン

Wojciech Dobry、 エドゥアルドサントス 、 マイク|クリエイティブミント 、 メイケル・ルーマン 、 イアン・コリンズ 、 Dawid Liberadzki 。

ApeeScapeデザインブログを購読して、eBookを受け取ります

2013年

今年、Appleは間違いなくスキューモーフィズムから移行し、iOS7をリリースします。間違いなく、今年は今日も続くトレンドの始まりであり、フラットなデザインです。 Dribbbleのほぼすべてのデザイナーは、一瞬のうちに、アプリやWebボタンに3次元を与える試みを断念し、フラットになることを決定します。

javascriptは現在の日付と時刻を取得します

2013ボタンデザイン

Wojciech Dobry、 コスミンキャプテン 、 エディ・ロバノフスキー 、 ジョナサンモレイラ 、 たのねりき 。

2014年

Googleはマテリアルデザインをリリースしました。ただし、多くの設計者はこのスタイルに完全には従いません。誰もが突然ゴーストボタンスタイルやフラットボタンを使い始めたので、今年はかなり興味深い年です。それらはDribbbleのほとんどのショットに表示されます。鮮やかな色の2つのピクセルボーダー—それが2014年です。

2014ボタンデザイン

Wojciech Dobry、 エリックホフマン 、 ラミル・デロゴングン 、 メイソン・ヤーネル 、 コリン・ガルヴェン 、 ビルSケニー 。

2015年

Googleによるマテリアルデザインの発表を聞いてからわずか数か月後、 UIデザイナー このガイドラインに恋をします。下に繊細な影があるボタンの平らな表面は、マテリアルデザインが現在のトレンドに大きな影響を与えていることを示しています。このスタイルをプロジェクトに適用している人の数を確認してください。

2015ボタンデザイン

Wojciech Dobry、 ビクターエリクソン 、 レオ・レ​​オン 、 ジョージ・ヴァシャギン 、 ホアングエン 、 Joshua Krohn 。

2016年

デザイナーは退屈するので、マテリアルやフラットデザインと組み合わせる新しい要素を考え出します。ボタンの表面には、3次元を強調するのではなく、ボタンの素材自体を強調するグラデーションが表示されます。ボタンはカラーシャドウを取得し、光り始めます。

2016ボタンデザイン

Wojciech Dobry、 アナスタシアアンドリチュク 、 グレブ・クズネツォフ 、 ガニプラディタ 、 クリストフォーチェバン 、 ベンミンゴ 。

2017年

今年はあと8年でどうなるのかとても気になります。これまでのところ、今年は、一方で、ミニマリズムとフラットデザインの年です。その一方で、私たちはまだ新しい形を探しています。私たちは技術的に制限されていない段階にあります。私たちはトレンドとファッションの枠組みによってのみ制限されています。

2017ボタンデザイン

私はクラインです 、 アントン・アヘイチャンカ 、 Vera voishvilo 、 ジョージ・ヴァシャギン 、 ガニプラディタ 。

Pythonは金融でどのように使用されていますか

次は何ですか?

ボタンのスタイルはどのくらい進化し続けますか?私は知らない。私は彼らがそうすることだけを知っています。進化の理由はさまざまです—技術の変化、デザイナーの意識の高まり、退屈。

ボタンが別の変更を待っていることは否定できません。多分この変化は彼らの死になるのでしょうか?ジェスチャー、直感的なインタラクション、AR、VR、サウンドインターフェースを使用しても、何年にもわたって取り組んできたボタンは必要ですか?

•••

ApeeScapeデザインブログの詳細:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法

NgrxとAngular2チュー​​トリアル:リアクティブアプリケーションの構築

技術

NgrxとAngular2チュー​​トリアル:リアクティブアプリケーションの構築
Brexitが金融サービスセクターに与える影響

Brexitが金融サービスセクターに与える影響

財務プロセス

人気の投稿
落ち着いて:批判を戦略的に受け止めてください
落ち着いて:批判を戦略的に受け止めてください
開発者向けのiOS9スポットライト検索の謎を解き明かす
開発者向けのiOS9スポットライト検索の謎を解き明かす
フロントエンドアーキテクト
フロントエンドアーキテクト
経済的な堀はまだ重要ですか?
経済的な堀はまだ重要ですか?
安全な設計–UXセキュリティの概要
安全な設計–UXセキュリティの概要
 
安全で健全–パスワードUXへのアプローチ方法
安全で健全–パスワードUXへのアプローチ方法
プロダクトマネージャーのためのカスタマージャーニータッチポイント
プロダクトマネージャーのためのカスタマージャーニータッチポイント
財務データの視覚化へのアプローチ方法
財務データの視覚化へのアプローチ方法
ビジュアルシェルフライフ–Webデザインのイラストが古くなる理由
ビジュアルシェルフライフ–Webデザインのイラストが古くなる理由
株式を最大限に活用する-元リサーチアナリストからの教訓
株式を最大限に活用する-元リサーチアナリストからの教訓
人気の投稿
  • グーグルウォレットハックにお金を追加する
  • 実生活でのゲシュタルト原則の例
  • プログラミング言語の開発方法
  • クラスメソッドからルビー呼び出しクラスメソッド
  • グーグルマテリアルデザインの使い方
カテゴリー
設計プロセス Kpiと分析 モバイルデザイン ツールとチュートリアル リモートの台頭 Uiデザイン 計画と予測 人とチーム ブランドデザイン その他

© 2021 | 全著作権所有

apeescape2.com