デザイナーと開発者のためのトップ15開発ガイド

開発者とデザイナーにはいくつかの共通点があります。特にアプリとフロントエンドのWeb開発に重点を置いている人は、少なくとも時々お互いに協力する必要があります。 アプリのデザインでタイポグラフィを使用する方法を学習する場合でも、ウェブサイトを構築するデバイスの種類を決定する場合でも、どちらもさまざまな方法で相互に学習できます。

Webデザイナーは、多くの場合、HTML5やCSS3などのテクノロジーを使用してデザインを完成させる必要がありますが、開発者は、ユーザーエクスペリエンスとユーザーインターフェイスについて詳しく調べて、構築するソフトウェアが両方の標準の標準要件に準拠していることを確認する必要があります。 そして、ブラウザはどうですか？ デザイナーと開発者の両方がブラウザーに深く関わっており、その分野でもガイダンスと洞察を得るのに役立ちます。

次の開発ガイドリソースでは、最も人気のあるスクリプト言語の基本を説明し、ツールの使用が非常に便利であるために新しいお気に入りになる可能性のあるツールについて説明します。

Web標準Sherpa

Webは大きな概念であり、非常に多くのことを伴うため、開発者や設計者の観点からWebを操作するための適切なコンテンツを実際に見つけることが難しい場合があります。 Web Standards Sherpaリソースは、CSS、デザイン、コンテンツ、JavaScript、Webパフォーマンス、Web構築のビジネス面、および他の多くのトピックやカテゴリの中でワークフローを完成させるためのヒントについて説明している記事とガイドのリストです。 フロントエンド担当者としてのベストプラクティスが必要な場合は、ここで入手できます。

UXの神話

UX Mythsは、ユーザーエクスペリエンスに関する誤った信念を暴き、読者に、アプリ、ウェブサイト、ソフトウェアでUXにアプローチする方法について新鮮で洞察に満ちた視点を得る機会を提供します。 それぞれのポイントが徹底的に説明され、逆の可能性を示すためにいくつかの例が示されています。

タイプミスポケットガイド

このタイポグラフィ用ポケットガイドは、タイポグラフィの技術の詳細を学びたいと考えているデザイナーにとって最適なコンパニオンです。 この特定のガイドでは、ダッシュ、アポストロフィ、書体、フォントなどの基本について説明します。

Webタイプの状態

タイポグラフィは常に進化していますが、ブラウザは進化していません。 これは、各ブラウザの各機能の機能を個別に調査する必要がある場合があることを意味します。このリソースを使用すると、特に簡単になります。 使用する機能の種類を選択し、さまざまなブラウザでその機能を調べるだけです。

QuirksMode

QuirksModeは、インターネット上のブラウザの互換性情報に関するすばらしいガイドです。 書かれたコンテンツの形で多くの情報を得るわけではありませんが、Web用の開発に関して学ぶのに役立つ多くの事実があります。 互換性テーブルを使用すると、JavaScript、CSS、HTMLなどのテクノロジのブラウザ機能を誰でも調べることができます。

Photoshopのエチケット

Photoshopは間違いなくデザイナーの間で最も人気のあるグラフィックデザインツールであり、ここ数年Photoshopを使用している場合でも、常に新しいことを学び、探求することがあります。 Photoshopエチケットガイドは、レイヤー、エフェクト、デザイン品質などの領域を含む、Photoshopのベストプラクティスのいくつかの側面について説明する6章のガイドです。 すべての章は適度なサイズであるため、新しいことを学ぶのに何時間も立ち往生することはありません。

私のデバイス

デバイスの画面解像度サイズを見つけるのに問題がありますか？ この小さなプラットフォームは、デバイスのサイズとブラウザが実行できる機能の種類について知る必要があるすべての詳細を正確に教えてくれます。 常に移動している開発者に最適です。

画面サイズ

画面サイズは異なるアプローチを取り、代わりに、異なる画面サイズ、オペレーティングシステム、および固有のアスペクト比に関するハードデータを出力します。 右側の隅にある個々のアイコンをクリックすると、タブレットとコンピューターの同じ情報を表示できます。 WebデザイナーとWeb開発者の両方に最適です。

デバイスメトリクス

Googleのデバイスメトリクスは上記の2つのサイトに似ていますが、リストにデバイスを少し追加し、各デバイスの重要な開発情報の概要も示しています。 アプリやウェブサイトを構築するデバイスの種類を知っている場合は、この情報を知ることが重要になる可能性があります。

開発ツールの秘密

今日の各ブラウザには、開発者ツールと呼ばれるものがあらかじめ組み込まれています。 これはブラウザ用の個別のコンソールパネルであり、開発者の視点から誰でも各Webサイトを探索できます。 JavaScriptコンソールを使用して、カスタムのクライアント側コードを実行したり、Webサイト構造の要素を検査したり、ネットワークやファイルのアクティビティを監視したりすることができます。 ブラウザの開発者ツールはそれぞれ異なります。このリソースは、お気に入りのブラウザの開発者ツールを最大限に活用する方法に関する記事とチュートリアルの特定のリストです。

CSSガイドライン

CSSはウェブのコーティングです。 CSSがなければ、私たち人間が服を着ていないのと同じように、Webは裸になります。 また、私たちの周りには非常に多くのCSSがあるため、Webに公開するCSSが最適化され、最新の標準に準拠していることを保証する、非常に実用的な基本と標準規制を理解することが重要です。

この特定のスタイルガイドは、スタイルガイドではなく、標準化されたCSSがどのように機能するか、および開発者と設計者が作成するCSSが可能な限り最高の品質であり、作成がはるかに簡単になるように異なる方法で実行できることについての洞察を目的としています。大規模なだけでなく、維持します。

CSSチートシート

CSSは巨大なスクリプト言語であり、毎年成長を続けています。 時々、物事の流れの中で、言語の非常に基本的な構文を忘れることがあります。その時点で、このCSSチートシートのようなサイトは本当に便利になり、いつでも戻ることができるように一度ブックマークするだけで済みます。 初心者に強くお勧めします。

ブラウザのハック

フロントエンドWeb開発者は、ブラウザーで多くの時間を費やし、実験、コードの実行、いじくり回しなどを行います。各開発者が何年にもわたって進歩するにつれて、誰もが簡単に使用できる興味深いスニペットやトリックをいくつか残しています。彼らの開発ワークフロー。 メディアクエリのハック、セレクターのハック、さらにはお気に入りのすべてのブラウザーのクールなJavaScriptハックについても学びましょう。 GitHubプルリクエストを使用して、独自のヒントやコツを共有することもできます。

ブラウザダイエット

Web開発の現在の傾向は、パフォーマンスに関するものです。 品質を損なうことなく、可能な限り最高のパフォーマンスを実現するために最適化する方法。 そして、これがブラウザダイエットガイドのすべてです—ウェブ用に最適化する方法です。 これは、妥協することなく変更または完全に削除できるさまざまなJavaScript、HTML、およびCSS機能を文書化した洞察に満ちたヒントと経験レポートのリストです。

＆何;

amp-30,000以上のHTML文字エンティティと一般的なUnicode文字、8859-1文字、引用符、句読点、アクセント付き文字、記号、数学記号、ギリシャ文字、アイコン、およびマークアップの迅速でインタラクティブなリファレンスは何ですか-重要な＆国際化文字。 それが機能する方法は、ウェブサイトの上部にあるロードボタンをクリックし、検索機能を使用して、プロジェクトまたはそれを使用する予定の他の場所で使用したい文字の種類を見つけることです。 アプリやデザインにスパイスを加えることができるユニークなアイコンやキャラクターで何時間も遊ぶことができるような豊富なリソース。