あなたの”いつか”リストにまだwebデザインの基礎を学んでいますか？ なぜまだ始まっていないのですか？ 私たちは、あなたが今月のwebデザインの学習を開始するのに役立つ30のヒントとリソースを一緒に入れてきました（そして多分自分自身に新しいキャ）

グラフィックデザイナー、プリントデザイナー、そして何か新しいことを学ぶか、ウェブサイトに侵入するために探しているクリエイティブは、先延ばし あなたがその最初の一歩を踏み出さない毎日は、他の人の後ろにさらに一日あなたを残します！

あなたの最初のウェブサイト、業界のベストプラクティス、および大いに多くを作成する方法を学習を開始するには、これらの手順に従ってく

ウェブサイトを開始

webデザインの学習を開始する最良の方法は、それをやって これは、デザインの著者であるDavid Kadavyからのアドバイスです<><ハッカー。私はあなたがブログを開始することをお勧めします。

私はあなたがブログを開始することをお勧めします。 私はちょうどwebデザインの遊び場を持っているブログを開始し、7年後、私は主題に関するベストセラーの本を立ち上げました。 ブログのような個人的なプロジェクトを持つことは、あなたが新しいことを試すことができる場所を与え、あなたが台無しにした場合、あなたの上司p>

あなたは大規模なウェブサイトや狂気のデザインから始める必要はありません。 ウェブサイトと遊びなさい、事を働かせるものが把握しなさい。 （そして、あなたのウェブサイトの仕事を作っているものに精通し始めることができるように、コードを検査することを確認してください。)

すぐに始めたいですか？ Wixのようなウェブサイトビルダーは、ウェブサイトに入るものの概念とビルディングブロックを学び始めると、スタイリッシュなウェブサイトデザイン

あなたができるすべてを読む

読書を開始します。 あなたはこのブログにいるので、あなたはおそらくデザインの世界で何が起こっているかを追跡するために使用されています。 読み続けてください。

ウェブサイトのデザイン、トレンド、テクニック、ベストプラクティスについてできることはすべて読みます。 あなたがソーシャルメディア上で賞賛デザイナーに従ってください。

同様にあなたのウェブサイトのデザインの読書のための広いネットをキャストします。 いくつかのコードを学ぶために基本について読んで、設計理論について読んで、チュートリアルと現在の記事を読んでください。あなたが最も明確な人ではない場合は、それらのスキルをブラッシュアップします。

効果的なコミュニケータになります。

あなたが最も明確な人ではない場合は、それらのスキルをブラッシュアップします。 ウェブサイトの設計の大きい部分はコミュニケーションである。

ウェブサイトの設計者は、デザインが解決する必要があるどのような問題を把握するために定期的にクライアントと通信する必要があります。

Tuts+を購読&Envato要素

また、あなたが優れたTuts+学習リソースにアクセスするEnvato要素への購読を検討してくださ

Tuts+最新の高度なアプローチと開発に至るまで、基本的な技術から、グラフィックとwebデザイン上の定期的なコースを公開します。 それは専門家のインストラクターによって教え、完全に自己ペースです。 また、あなたのwebデザインの仕事にプラグインするグラフィックス、テンプレート、および多くを見つけるための素晴らしいリソースであるEnvato要素へのア

Htmlで考える

HTML、またはハイパーテキストマークアップ言語は、ウェブサイトのデザインの礎石です。 HTMLは、ウェブサイトの構造を作成するのに役立ちますスケルトンであり、あなたが言語を読むことができれば、ウェブサイトのデザインの世界は、W3Schoolsには、何が起こるのか、それがどのように機能するのかを正確に確認するために画面上で遊ぶことができる何百ものHTML例を含む素晴らしいHTML （あなたが想像したよりも直感的に見つけるかもしれません。HTMLは良いスタートですが、あなたはCodeacademyからほぼすべてのプログラミング言語を学ぶことができます。 無料のツールセットでは、インタラクティブな活動やゲームを使用してコードを作成することができます。必要なときに必要な場所でCodeacademyコースを選択し、必要に応じて開始および停止することができます。

学ぶ対象を選ぶ–web開発、プログラミング、データサイエンス–または集中する言語–HTML&CSS（始めるのに最適な場所）、Python、Java、SQL、Rubyなど。

CSSを理解することを学ぶ

CSS、またはカスケードスタイルシートは、HTML、またはXMLとSVGで書かれた文書のプレゼンテーションを定義します。Cssは、要素が画面、紙、音声、または他のメディア上でどのようにレンダリングされるべきかを記述します。

Mozillaには、セレクタとプロパティ、CSSルールの記述、HTMLへのCSSの適用、cssの長さ、色、およびその他の単位の指定方法、カスケードと継承、ボックスモデルの基礎、CSSのデバッグなど、CSSの仕組みをしっかりと紹介した、始めるためのCSSリソースの素晴らしいコレクションがあります。 次に、モジュールはテキストとボックスのスタイル設定を説明します。

Webにあなたのデザインスキルを適用

あなたはすでに創造的またはグラフィックデザインの分野で作業している場合は、あなたがすで 視覚的に魅力的なものを作る原則は、媒体に基づいて変更されず、そのすべてのデザイン理論は、同様にデジタル空間で便利になります。

学習コードなどの要素は自然に感じられないかもしれませんが、デザインの背景を持つことは大きなボーナスです。 誰もがそれと対話したくない場合は、美しくコード化されたウェブサイトは何が良いですか？あなたが愛するウェブサイトに注意を払う

あなたが愛するウェブサイトに注意してください。 それらについての何があなたに魅力的であるか。 （そして、どのようにそれらの要素を複製することを学ぶことができますか？ に注意を払う：

• タイポグラフィ
• ナビゲーション
• 画像とスペースの使用
• フォームのデザイン
• アニメーションとスクロール効果
• 色

ワイヤーフレームを描く

ワイヤフレームはウェブですデザイナーのブレーンストーミング。

その最も純粋な形では、ワイヤーフレームは、ウェブサイトがどうなるかのスケッチです。 それは審美的な要素の輪郭ではなく、ウェブサイトの青写真です。 ワイヤーフレームを描くことは、実際にはこのデザインの外観に関するものではなく、その中の情報構造に関するものです。p>

ワイヤーフレームを作成する方法がわかりませんか？ デジタルテレパシーは、あなたが学ぶのを助けるためのベストプラクティスのガイドを持っています。

スケッチを学ぶためにいくつかの時間がかかる

スケッチは、デザイン要素を作成することが容易にな 多くのデザイナーは、UI要素を作成し、デザインブロックを繰り返すためにSketchに目を向けています。

プラグインが満載されており、簡単に使用してアクセスするためにコードをエクスポートすることができます。 これは、Adobeのクリエイティブスイート以来、周りに来て、あなたの時間の価値が最も強力で人気のある、ツールの一つです。AI、VR、AR、360度のビデオ、ボット。

技術を最新の状態に保ちます。

AI、VR、AR、360度のビデオ、ボット。

AI、VR、AR、360度のビデオ、ボット。非常に多くの新しい技術やトレンドに追いつくのは難しいかもしれません。

しかし、あなたはこれらの変更の上に滞在するポイントを作る必要があります。

それらに一つずつ取り組み、あなたがする仕事に最も直接関連している技術から始めなさい。 あなたがオンラインチャットでウェブサイトを持っている場合は、ボットについて学ぶことから始めます。 または、多くのビデオコンテンツを使用する場合は、360度のビデオで遊んでください。

このような人工知能や仮想または拡張現実などの要素はさらに複雑ですが、道の下のウェブサイトのデザインの風景の統合された部分になる 最低でも、それらが何であり、潜在的な用途が何であるかを知る必要があります。

SEOに慣れる

多くのwebデザイナーは、SEOの専門家が検索エンジンが読むためのウェブサイトの準備

画像のアップロード方法から、ページや要素にメタ記述を含めるのが速いクリーンなコードの作成まで、デザイナーは検索思考をワークフローに組み込む必要が

フリーランサー、これはあなたにとっても非常に重要です。 ほとんどの顧客はSEO最大限に活用されたウェブサイトを頼むには十分に精通している。 あなたが一人で作業する場合は、Googleが読むことができる（そして、より多くの作業を行う必要がある場合は、SEOの専門家にクライアントを参照するこ

Webサイトビルダーで遊ぶ

webサイトビルダーは、ベストプラクティスとwebサイトの構築と設計を開始する方法に慣れるのに最適な方法です。

これらのツールのほとんどにはたくさんのテンプレートがあり、要素をカスタマイズしたり、コードスニペットを追加したりすることができます。 簡単な場所のために、多くのウェブサイトの建築者にまたあなたのための運動場として役立つ個人的な有価証券のページか基本的なウェブサイトを

その後、ウェブサイトビルダー内の部分を離れて選びます。 それらがどのように設計され、コード化されているかを見て、それがすべてどのように一緒になるかを感じてください。 あなただけ離れて別のデザインを選ぶことによって把握することができますによって驚かれることでしょう。

メンターを見つける

あなたがウェブデザイナーとして尊敬する人と一緒に働く人はいますか？ 昼食にそれらを取り、企業についての頭脳を選んで下さい。

あなたと仕事をして喜んでであり、分野について考えるのを助け、あなた専有物の網の設計を学ぶ方法を顧問を見つけることは非常に貴重であ そして、あなたはおそらく、オンラインコミュニティでメンターを見つけることができますが、何もあなたが定期的に対面を満たすことができ、生きている人よりも優れていません。 （多分それはオンラインおよび対面の指導者を持っている価値がある。)

CodePenコミュニティに参加

いくつかのコードやプログラミングに慣れ始めたら、CodePenコミュニティに参加し オープンソースコミュニティでは、ソーシャルネットワーク内のコードスニペットを共有したり編集したりすることができます。

ここでは、サイトの創設者からもう少しです：”CodePenは社会開発環境です。 その中心には、ブラウザでコードを記述し、ビルド時にその結果を確認することができます。 任意のスキルの開発者のための便利で解放ツール、特にコードを学ぶ人々のための権限を与えます。 私たちは主に、HTML、CSS、JavaScript、およびそれらのものに変わる前処理構文のようなフロントエンド言語に焦点を当てています。”

クラスを取る

一部の学習者にとっては、より正式な教室の設定が最適です。

利用可能なクラスのトンがあります–人とオンライン-あなたは、webデザインの基礎を学ぶために。 地元の大学や、UdemyやCourseraなどのオンライン学習ハブから始めましょう。 あなたの現在の能力レベルでクラスをピックアップし、ちょうど前方に移動し続けます。p>

何かしたいですか？

何かしたいですか？ Google It

それほど伝統的ではない学習者のために、Googleのウェブデザインの問題に対する答えを見つけてください。 ほとんどすべての問題と解決策をあなたを歩くことができる利用可能な非常に多くのチュートリアルやビデオがあります。重要なのは、あなたが知る必要があるものを正確に検索し、答えのための評判の良い情報源を探すことです。

重要なのは、あなたが知っていること それはチュートリアルやビデオに来るとき、ここでは別のヒントです–より最近のコンテンツは、おそらくあなたに、より良い、より完全で、より関連性の （覚えておいて、このようなもののいくつかは速く変化しています。)

ユーザーエクスペリエンスに注意を払う

何もユーザーエクスペリエンスのデザインのようなウェブサイトを作るか、壊すことはできません。 あなたはそれを計画し、それを理解する必要があります。

インタラクションデザイン財団がUXデザインを説明する方法は次のとおりです。

ユーザーエクスペリエンス（UX）デザインは、意味のある個人的に関連するエクスペリエンスを提供する製品を作成するプロセスです。 これには、製品の使いやすさと消費者がそれを使用することから得られる喜びの両方を慎重に設計することが含まれます。 それはまた決め付けること、設計、有用性および機能の面を含むプロダクトを、得、統合する全体のプロセスにかかわっている。

UXデザイナー、または経験形成のプロセスを認識しているデザイナーは、意図的にプロセスに影響を与える要因を作 これを行うために、UXデザイナーは、製品の使用の理由、何、および方法を検討します。

デザイントレンドに注意を払う

現代のウェブサイトのデザインはどのように見えますか？ それはトリックの質問ではありません。 最新のwebサイトやユーザーエクスペリエンスを設計するには、ユーザーが何を望んでいるのか、どのように対話しているのかを知る必要があります。 最後にアプリをダウンロードしたり、携帯電話でウェブサイトを見たのが2016年だった場合、あなたは補うために多くの地面を持っています。

設計に統合される現代接触および傾向があるウェブサイトの設計を作成することはあなたのプロジェクトを際立たせるのを助ける。 どのようにトレンドが何であるかを知っていますか？ このようなサイトを読んで、他のデザイナーが何をしているかに注意を払う。 あなたが頻繁に訪問するウェブサイトに含まれている色および様式および特徴のノートを取りなさい。

色なしで作成

色なしですべてのデザインを開始します。 偉大なデザイナーは、一度あなたのデザインは、黒と白で動作する場合、それは色で完璧になることを私に言った。それは常に保持されないかもしれませんが、それは素晴らしい出発点です。

それは常に保持されないかもしれませんが、それは素晴らしい出発点

白黒でデザインを作成することで、要素がどこでコントラストを付け、どのように一緒に遊ぶかを見ることができます。 あなたはそれのために起こる色や目の動きとの感情的な関連付けを取り除きました。 この最も単純な形式のデザインは、あなたがそれを完成させる前に何かがコンセプトとして機能するかどうかをあなたに考えさせます。

Googleのフォントを愛することを学ぶ

Googleのフォントはあなたの友人です。

あなたがGoogleについてどのように感じるかにかかわらず、あなたが知っている書体を閲覧、並べ替え、選択する機能は、ウェブサイトのデザインで ライセンスや書体が特定のブラウザと互換性があるかどうかを考える必要はありません。制限は、google Fontsライブラリにあるものだけを使用することです。 しかし、あなたがしようとすると、ほぼすべてのプロジェクトに合うものを見つけることができます。 それは長期的にはあなたに多くの時間を節約します。

UIキットを離れて選ぶ

ユーザーインターフェイスやアイコンキットをダウンロードして、それを離れて選ぶ。webサイトのコードを調べるのと同じように、web用のデザイン要素がどのように構築されているかを見てください。

スケールとグリッドに注意して、色のミックスを見て、どのようにファイルがPhotoshopやIllustrator内で整理されています。

高解像度ディスプレイ用の複数の形式の要素を含むダウンロードするキットを探します。 （Jpegの束をダウンロードすることは、あなたにすべてのことをうまく提供するつもりはありません。)

次に、独自の要素または二つを構築またはカスタマイズしてみてください。

タイポグラファーになる

現代のウェブサイトのデザインは、タイポグラフィに強い焦点を持っています…良いタイポグラフィ。 巨大な単語を含むヒーローヘッダーから、ユーザーをデザインに引き込むテキストのレイヤーまで、タイプ要素をペアリングして魅力的なテキストブロックを構

タイプでエレンLuptonの思考から始めます。 （同じ名前の本もあります。）Luptonはタイポグラフィの権威であり、彼女の情報はあなたが時間がないのタイポグラファーのように考えているでしょう。

JavaScriptに飛び込む

webデザインに手を出すことについてかなり良い感じ始めているときは、JavaScriptを学ぶために再び自分自身に挑戦します。 HTMLとCSSの後、それはウェブの最も重要な言語です。

JavaScriptは、設計者がwebページ上で複雑なものや相互作用を実装することを可能にするツールです。 これは、スライダーのスライドやその視差アニメーションがアニメートを作るものです。

学習JSは、あなたが始めるのに役立つ対話型のチュートリアルを持っています。

ポートフォリオを更新する

web用のデザインを開始したら、webデザインプロジェクトでポートフォリオを更新 この簡単な行為は網の設計があなたのレパートリーの部分であること…あなた自身および他を…示すのを助ける。

更新されたポートフォリオは、潜在的な顧客があなたの”スタイル”がどのように見えるかを見るのに役立ちます。 レイアウト、色、タイポグラフィとあなたが何ができるかを示すさまざまなテクニックを紹介することを確認してください。

自分に挑戦

あなたが持っているほぼすべてのウェブサイトの問題を修正するのに役立つ非常に多くのショートカットとコードスニペットで、怠け者にならないようにしてください。 新しいスキル、新技術を学び、あなたのwebデザインゲームを改善し続けるために継続的に自分自身に挑戦することを忘れないでください。

この分野についての一つのことは、それが常に変化しているということです。

あなたの経験を最大化する

そこに出てデザインしてください。 Webデザイナーにwebサイトの設計を開始する必要があります。

小さなスタートが、他の人とのプロジェクトに取ります。 職場のチームと一緒にプロジェクトに参加するように依頼してください。 友人のための小さなウェブサイトに取り組む。 あなたがウェブサイトを構築しているより多くの経験は、より良く、より速くあなたが得あなたは何を待っていますか？

あなたは何を待っていますか？ 先延ばしにするのはやめて

フィードバックを求める

あなたのネットワークを使用して、あなたのウェブサイトのデザインプロジェクトにフィードバックを収集します。 このフィードバックに耳を傾ける–あなたがそれを好きではない場合でも、あなたが学ぶことがで

別に視覚的な好みから、フィードバックを提供する人は、ウェブサイトの機能をより良くするための提案を提供しましたか？ 彼らは簡単にデザインの目標を理解することができますか？ 彼らはメッセージと接続しましたか？

新しいことを学び続ける

偉大なウェブサイトのデザイナーになるためには、あなただけの、再生しようと ネットワークへのポイントを作り、分野の他と伝達し合うことは需要がある視覚変更および技術の上にとどまることができるように。あなたがウェブサイトのデザインを学ぶために探しているなら、これはおそらくすでにあなたが定期的に行うものです。

しかし、これは進化する分野であり、ほぼ毎日変化し続けています。 それをやっている人に聞いてください。