Webデザインを形作る20の最も熱い傾向は来ます2016
年が経つにつれて時が進むにつれて、多くの新しいデザインのトレンドが近づいています。 Webデザインの分野は、新しいツール、ワークフロー、および使用可能なレイアウトを構築するためのベストプラクティスによって常に変化しています。.
どの傾向が最も注目を集めるかを予測するのは困難です。それでも最近の歴史は、山火事のように成長している傾向のパターンを示しています。私は2015年に勢いを増してきた20のユニークなトレンドをまとめました。.
1. UIデザイン用スケッチアプリ
スケッチはすぐにPhotoshopに至るまでのすべてのUIデザインタスクのためにPhotoshopを置き換えています 低忠実度ワイヤフレーム に 忠実度の高いモックアップ＆アイコンデザイン.
Sketch Appは、Webおよびモバイルデザイナーのために特別に作られたMac専用のアプリケーションです。それはどんなインターフェースのためにもベクトル要素を作り出すためにより滑らかな作業環境を提供します、それでもそれはあなたがテキスト効果と層スタイルのようなあなたがPhotoshopから期待する多くの機能を保持します.
SketchがWindows用にリリースされるという証拠はありませんが、それでもOS Xユーザーにとっては重要な選択となっています。簡素化されたワークフローとより安い値段は、アドビにそのお金のための実行を与えています。 Sketchが最高のUIデザインエクスペリエンスを提供し続けるのであれば、2016年以降も確実に成長し続けるでしょう。.
2.ブラウザベースのIDE
デスクトップIDEは、Notepad ++からXcodeおよびVisual Studioまでの範囲のオプションで何十年も前から出回っています。 IDEを使用すると、提案や構文の強調表示（他の機能の中でも）を使用してコードを簡単に書くことができます。.
しかし、伝統的にIDEはデスクトップアプリケーションとしてリリースされています。ここ数年で、ブラウザベースのクラウドIDEが劇的に増加しています。これらはWebブラウザ以外のソフトウェアを必要としません。それは開発者がインターネットにアクセスできるどんなコンピュータからでもコードを書くことを可能にします.
クラウドIDEは、コードスニペットを自分のアカウントに保存して共有または個人用ストレージに保存できるWebアプリケーションのように機能します。 CodePenは、Jade / HamlやLESS / SCSSのようなカスタム前処理とともにHTML / CSS / JSをサポートする最も人気のあるIDEの一つです。.
Mozilla Thimbleは、コーディングしながら学習したい開発者向けのもう1つのIDEです。また、Codeplyは、ファイルをダウンロードせずにBootstrapやZurb's Foundationのような特定のレスポンシブフレームワークをテストするのにも最適です。.
3. Free Sass / SCSSミックスイン
プリプロセッサは何年もの間流行してきましたが、ごく最近になってWebデザイン/開発の分野全体にわたって広く普及するのに十分な主流になりました。今日ではSass / SCSSがそんなに多くを提供することができるときにバニラCSSを書くのは奇妙に思えます.
1つの利点はSass mixinライブラリーの供給が増えていることです。単純なミックスインは、コードスニペットやCSSで繰り返し可能なコードを生成するための基本的な関数のようなものです。あなたはいつでもあなた自身のものを書くことができますが、多くの開発者は無料のミックスインをオンラインでリリースするのに十分親切でした.
Bourbonのようなライブラリに入っているミックスインもあれば、スタンドアロンのアイテムになることもできるミックスインもあります。 GitHubでSass / SCSSミックスインを検索して、見つけられるものを確認してください。.
カードのレイアウト
ウェブサイトのカードレイアウトは、数年前にPinterestによって最初に普及し、それ以来、コンテンツの多いウェブページのトレンドとなっています。 jQuery Masonryのような無料のプラグインを使用して、さまざまな高さと幅のアニメーションカードでこのレイアウトスタイルを模倣することができます。.
カードレイアウトは、スキャン可能な大量のデータを含むページに最適です。 Google Nowのランディングページでは、カードレイアウトを使用してGoogle Nowアプリのオプションのカードを宣伝しています。.
あなたは、カードレイアウトをより動的なグリッドとして考えることができます。そして、より多くのアイテムを一緒にリストするために必要最低限のものにコンテンツを最小化することに焦点を合わせます。 UGSMAGやThe Next Webなどのオンライン雑誌は、最近の投稿コンテンツを紹介するために使用されるカードレイアウトの完璧な例です。.
5.カスタム解説者の動画
大企業でも小企業でも、カスタムの説明ビデオの傾向に注目しています。これらはしばしばクレイジーエッグの例のようなアニメーションで作成されます。しかし、他のビデオはInstagram Directのような実際の映像に依存しています.
説明ビデオの目的は、製品またはサービスの仕組みを説明することです。訪問者は機能のリストを読み飛ばしても、製品がどのように動作するのかわからない場合があります。ビデオはすべてを視覚的に明確にし、わずか数分で重要なものをカバーします.
あなたがカスタムの解説ビデオを作ることにあなたの手を試したいならば、このUdemyコースをチェックしてください。ランディングページデザインのためのビデオに焦点を当てた詳細な研究です.
6.ライブ製品プレビュー
ランディングページのデザインは、インターネットの高速化とブラウザ機能のおかげで、驚くべき成長を遂げました。私が気づいた1つの主要な傾向はホームページか注文のランディングページの生きているプロダクトプレビューの追加です.
例えばSlackの製品ページを見てください。それはSlackインタフェースをカバーするビデオツアーとベクトルグラフィックを特徴とします。これらの製品プレビューは、潜在的なユーザーに製品の動作を垣間見ることを目的としています。.
Webydoは、ホームページでライブアニメーションを再生しているもう1つの素晴らしい例です。これにより、訪問者は手動で製品をデモすることなくWebydoの動作を確認できます。しかし、製品のプレビューをアニメーションに頼る必要は必ずしもありません。 Iconjarは単純なPNGスクリーンショットを使用して、製品の概要と機能を説明します。.
7.自動タスクランナー
フロントエンド開発の世界は、Webサイト作成のための新しいベストプラクティスのほんの一握りで大きく変わりました。 GulpやGruntのようなタスクランナー/ビルドシステムは、以前は手作業で行われていた大量のタスクに対して、はるかに頻繁に使用されています。.
自動化は、短期間でのターンアラウンドと品質コードの策定の生命線です。機械がミスをすることはないので、自信を持って自動化できるほど、理論上の問題も少なくなります。.
タスクランナーがどのように機能するのかを説明しているRedditの投稿をチェックしてください。これらのツールは基本的に、カスタムJSまたは他の人によって書かれたスクリプトのいずれかで、ワークフローの一部を自動化するJSコードを実行します。.
8.ネイティブJSモバイルアプリ
私は仕事に適したツールを使うことを大いに支持しています。モバイルアプリ開発の場合、これはAndroid用のJava、iOS用のObjective-C / Swiftを意味します。.
しかし、モバイルアプリを構築するためだけに、誰もが新しい言語を習得したいわけではありません。ありがたいことに、ネイティブアプリケーションがNativeScriptやReact Nativeなどの代替ライブラリで作成されコンパイルされることがより簡単になっています。.
モバイルアプリのプログラマーになるためのギャップは、JavaScriptを介してモバイルアプリを作成する機能によって短くなっています。 PhoneGapは、HTML / CSS / JSコードに基づくもう一つの選択肢です。.
作成プロセスは大きく異なりますが、JSは新しい言語を学ぶことなくモバイルアプリケーションを構築したいコーダーのためのソリューションになりつつあります.
9.設計用コラボレーションツール
インスタントメッセージングとグループチャットは10年以上前から存在しています。しかし、これらのリソースは伝統的に平文に頼っていてファイルを添付することができます。.
新しいトレンドとして、チャットアプリケーション内でライブデザイン文書を共有することができます。注目すべきは、注釈とコメントを文書の上に直接重ねることができる一例です。これにより、デザイナーはチームの全員と直接作業を共有することができます。.
Slackは、現時点で最も人気のあるチャットアプリケーションで、多くの同様の機能をサポートしています。 Slackのユーザーベースは、Slackの機能を大幅に向上させ、ハングアウト、MailChimp、さらにはWordPressなどの他の製品と結び付くような拡張機能を作成することに強い関心を寄せています。.
レスポンシブフロントエンドフレームワーク
Bootstrapのようなフロントエンドのフレームワークは何年も前から存在しており、個人的なものから専門的なものまで、プロジェクトで有用であることを証明し続けています。レスポンシブデザインはフレームワークへの道を強制し、バックエンドだけでなくフロントエンドコードへの需要を生み出しました（Django、Laravelなど）。.
2016年に移行すると、レスポンシブフロントエンドフレームワークとWebプロジェクトでのそれらの価値について、もっと詳しく読むことになると思います。多くの開発者が、Foundation 6のリリースとBootstrap 4のパブリックv1リリースを熱望しています。.
あなたがチェックアウトするかもしれない他のあまり知られていないフレームワークはGumbyとPure CSSを含みます.
11. UXデザインへのより大きな焦点
より多くのデザイナーや開発者が注目を集めるにつれて、ユーザーエクスペリエンスデザインの分野は急速に成長し続けるでしょう。 UIデザインはUXデザインの一部ですが、それは最終的な目標ではありません。 UIは目的を達成するための手段であり、その目的は素晴らしいユーザーエクスペリエンスです。.
たった5年前、私はUXについて、あるいはそれがインターフェース設計にどのように適用されるのかについてほとんど知らなかった。現在、UX Stack Exchangeや無料のUX電子ブックなどのリソースがあります。ユーザーエクスペリエンスについてあまりよく知らないのであれば、UXの原則をどのような形式のデジタルインターフェースに適用することができるかを検討し学習するのに最適な時期です。.
12.パッケージマネージャ
デジタルパッケージマネージャは急速に成長しているため、現代のWeb開発では事実上必要条件となっています。 BowerやNPMのようなソリューションは、新しいプロジェクトを始める時間を大幅に節約することができます。.
新しい技術を習得するには時間がかかり、学習曲線もあります。しかし、すべてのフロントエンド（またはバックエンド）開発者が知っておくべきことが1つあれば、それはパッケージマネージャです。端末コマンドについてある程度の知識が必要ですが、いったんプロセスに慣れてしまえば、元に戻ることは決してないでしょう。.
13.高度なUIアニメーション
CSS3への移行は、ウェブ上でのアニメーションの長期的傾向の始まりにすぎません。現在、アニメーション専用のCSSおよびJavaScriptライブラリが多数あります。あなたがどこを見ればいいか知っていれば、私は決して夢に見たことがなかったものが今構築されて無料で利用可能です.
アニメーションは良いデザインのための必要条件ではありません。しかしそれはきちんと使用されたときよい設計をすばらしい設計にすることができます.
アニメーション化されたインターフェースの傾向に注目し、さまざまなWebサイトから何を取り除くことができるかを確認してください。 Webアニメーションはディズニーの映画ではないので尊重して扱うべきであることを忘れないでください。アニメーションを穏やかに使用して、デザインの煩わしさや気を散らす要素にならないようにインターフェイスを強化します。.
14.コードを学ぶデザイナー
今年注目されている話題は、コードを学ぶデザイナーの場合です。設計者の中にはコードを書くのは自分の仕事ではないと感じている人もいれば、それが標準になっていて受け入れられるべきだと思う人もいます.
私はこの問題についての熱い議論や興味深い投稿を読んだだけで、感情的な反応を引き出すように思えます。良いデザインは、コードのないきれいな絵です。それでも両方に焦点を合わせるには、デザイナーが工芸品の練習に費やす時間を短縮する必要があります。.
それで決定的な答えはありますか？フロントエンドのコーディングを知っているデザイナーにとって、仕事の実行可能性が増すと主張する人もいるでしょう。しかし、誰かがコードを書きたくないとしたらどうでしょうか。競争するだけで学ぶ価値がありますか?
最も明確な答えは、あなたが望むことなら何でもすることです。しかし、このトピックは、2016年まで議論を続ける可能性が高い多くのデザイナーにとって、まだテーブルの上にあるようです。.
15.無料のオンラインツールとWebアプリケーション
以前はすべてのプログラムは、あなたが何をする必要があってもデスクトップから実行されていました。しかし、今日、私は無料でオンラインで利用可能なWebアプリケーションの数に一貫して驚いています。.
URLのエンコード/デコードから完全に無料のMarkdownエディタまで、すべてが揃っています。 GoogleドライブでもMicrosoft Office製品をブラウザに取り込んでいます（これも完全無料）。.
現在のレベルのコンピューティング能力とWebブラウザからの同種の標準は、一見無制限の機会を提供します。レジュメ作成から画像圧縮までの複雑なタスクは、ブラウザウィンドウから直接処理できます。.
16. Webコンポーネントの成長
Webコンポーネントは開発者にとって複雑な問題を解決しようとしています。 WebComponents Webサイトには、開発者がこのトピックに飛び乗るための優れたリソースと資料があります。.
モジュラーWebコンポーネントを理解する方法がわからない場合は、この記事をチェックして詳細を確認してください。.
コンポーネントは、主流の地位に特にまでは拡大していませんが、それらは世界中のプロの開発者によって議論されています。 Googleは、JSとHTMLを介してWebコンポーネントを追加するために使用されるフレームワークであるPolymerをリリースしました。.
これはまだ主要なクライアントプロジェクトで使用するのに実用的ではないかもしれません。しかし、その技術は利用可能であり、少しの練習であなたは簡単に概念を習得することができます。詳細を学び、いくつかのコードサンプルを見るには、モジュラーWebコンポーネントに関するこのCSS-Tricksの投稿を通して読むことができます。.
17.オンライン学習リソース
コンピューターの快適さからあらゆるスキルを習得する最も簡単な時間が今だということを私たちは皆知っています。オンラインコースは、新しいコースやウェブサイトが毎年出現して指数関数的に成長しているようです。.
私たちはオンライン学習の台頭が見られるだろうということをこれまで以上に自信を持って感じます。 TreehouseやCodeSchoolなどの有名なサイトでは、BitfountainやLearn-Verifiedなどの新しいサイトと並んで素晴らしいコースを提供しています。.
あなたが学びたい科目があるならば、おそらくあなたがオンラインでコースがある - おそらくあなたがUIデザインやアプリ開発のようなデジタル技術を学びたいと思うならば.
18.サーバーサイドJavaScript
サーバーサイドのJSには過去の選択肢がありましたが、Node.jsほど速く浸透したものはありません。 JavaScript開発者たちはこのライブラリに恋をし、PythonやPHPのような他のバックエンド言語と直接競合しているのを見ました。.
Nodeを使用すると、開発者はフロントエンド+バックエンドコードの両方に単一の言語を使用してWebサイトを構築できます。そしてNode Package ManagerのようなリソースはNode.jsにさらに多くの価値を与えます.
私が言うことができることから、Nodeはまだ上昇傾向にあり、業界の愛好家からの牽引力を得続けています。 Nodeを学ぶつもりであるかどうかにかかわらず、それが2016年の主要な傾向として成長し続けることは間違いありません.
19.タッチ対応Webサイトの機能
スマートフォンブラウザは、後方互換性を維持するために、すべてのWebサイトで常にタッチ機能をサポートしています。それでも最近では、タッチイベントを処理するという特定の目的で、Webサイトに追加されるプラグインとカスタム機能が増えていることに気付きました。.
PhotoswipeやDragend.jsなどのプラグインは、タッチスクリーンディスプレイ上でのスワイプやタップを処理するために構築されています。 Web開発者はレスポンシブWebサイトを構築するだけでなく、タッチ対応Webサイトも構築しているようです.
あなたが周りを検索するならば、あなたはタッチイベントだけに頼るウェブのために造られたいくつかの本当に印象的な機能を見つけるでしょう.
20.ウェブ上の材料設計
グーグルによるマテリアルデザインの発表は、Androidデザイナーにとって大成功でした。材料設計は、Androidスマートフォン用のユーザーインターフェイスを作成するプロセスを簡素化することを目的とした設計言語と見なされています.
時間の経過とともにWebデザイナーはこれを心にとめ、Googleの新しいデザイン言語に基づいてWebサイト全体を構築しました。材料設計のトレンドは、モバイルアプリケーションだけでなくWebデザインの世界へと移行しているようです。.
重要なWebサイトを構築したい人々は、車輪を再発明する必要すらありません。 Material UIやMaterialiseのような無料のライブラリは、マテリアルデザインの基盤の上に新しいレイアウトを構築するためのカスタムコードを提供します。.
閉鎖
これらの傾向を見れば、Webサイトの構築プロセスを容易にするために、Webコミュニティからの真の協調的な取り組みが見られることは明らかです。私たちは皆、日々のワークフローで時間を節約したいと思っています.
Webが始まって以来、多くのテクノロジが登場してきましたが、それに代わるのはより良い代替手段です。これらの2016年のトレンドにより、Webサイトの構築がより簡単になり、はるかに複雑にならなくなる、より統一された一連の設計手法が推進されています.
