はい、あなた自身にwebデザインを教えることは完全に可能です。 私は人々がスキルを習得するために管理し、私は私のために働いたものを覚えてしようとした方法を確認するために今週の周りに尋ねました。
あなた自身のwebデザインを教えることができる3つの主な方法があります。
- することによって。 人々は実際にウェブサイトを作成することによって学ぶ。
- オンラインリソースを使用します。 誰もがいくつかの点でウェブサイトを設計する方法についての答えをオンラインで見つけます。
- これは私を驚かせた。 ほとんどのデザイナーは本を読むことによって網の設計を、部分的に、学ぶことを言う。
では、これらのカテゴリのそれぞれを調べて、webデザインを教える方法を見てみましょう。
を実行してwebデザインを学ぶwebページを理解するための最良の方法は、既存のwebサイトがどのようにまとめられているかを見て、自分で構築するこ
他のウェブサイトがどのように機能するかを観察
まず、インターネット上のほとんどのウェブページは、少なくとも部分的にはHTMLで書かれています。 このページを作成するHTMLを表示するには、使用しているブラウザで「ソースを表示」する必要があります。 Cmd/Ctrl-U（Firefoxの場合）、Cmd/Ctrl-Alt/Opt-U（Chromeの場合）、Internet Explorerを使用している場合は、webデザインがあなたにとって正しいキャリアパスであるかどうかを本当に自
HTMLを調べて、webページ上のさまざまな要素がどのようにマークアップされているかを確認してみてください。 特定のタグをすぐに識別できる場合があります。 たとえば、<p>は段落、<h1,2,3>は見出し、<img>は画像などです。 これらのタグのほとんどは、マークアップの開始と終了を示すためにペアで機能することがわかります。<p>Text here</p>は、段落タグの開始と終了をスラッシュ(/)で終了タグの前に表示します。 他のタグはペアでは機能しません。imageタグself closes<img src = "https://robcubbon.com/images/rob.jpg" />これは、特定のwebアドレスをソース（src）として画像を表示するようにブラウザに指示します。
HTMLソースから気づくかもしれないもう一つのことは、すべてのHTMLページが同様の構造を持っていることです。 それらはすべて、HTMLのバージョンを示す<!DOCTYPE>宣言で始まり、その後に<HTML>宣言が続き、スクリプト、スタイルシート、メタ情報などへのリンクを含むさまざまな要素 <head>の後には、webページの要素がマークアップされている<body>が表示されます。
: このページのすべてのソースコードをメモ帳（PC）またはTextEdit（Mac）ドキュメントに選択し、「テスト」としてコンピュータに保存します。html”か何か。 このファイルをブラウザで開くと、オンラインバージョンとまったく同じになります。 今すぐインターネットへの接続をオフにして、テストページがどのように見えるかを確認してください。 かなり違うんだな? 理由を解決しようとします。
取引のツール
あなたがこれをやっている間、あなたが必要とする特定のツールがあります。
- さまざまなブラウザや携帯電話で独自のサイトをテストしてみてください（これは、Internet Explorerとの長年の憎しみの事件を開始する場所です）。
- テキストエディタ。 基本的なメモ帳（PC）またはTextEdit（Mac）、またはCoda（Mac）またはDreamweaverを使用することができます–ビジュアルモードでDreamweaverを使用せず、コードを操作するだけで、このようなものが
- HTMLバリデータとCSSバリデータでwebページを検証します（Web Developer for Chromeのようなブラウザプラグインを使用して、すぐに呼び出すことができます）。
- Chrome開発者ツールとFirefox用Firebug。 これらのツールは、CSSとJavaScriptを理解するのに役立ちますが、HTMLが難しいと思った場合は、ある程度の理解が必要です。
- Webデザインの中心には、PhotoshopやFireworksのような画像エディタがあります。 これらは非常に高価ですが、あなたが始めたばかりの場合は、GIMPに加えて、オンライン画像編集者のホストがあります。
独自の静的HTMLサイトの作成
HTML、CSS、JavaScriptの理解が深まる一方で、ローカルまたはwebサーバー上で静的なHTMLサイトを作成する必要があります。 継続的にクールなことをしようとするコードで再生します。 コードのビットをコピーして、他のwebサイトの特定の要素を再作成してみてください。
最終的に作成するwebサイトはHTMLファイルから作成される可能性はありませんが、PHPやコンテンツ管理システム(Cms)を使用してHTMLを作成する前に、静的HTMLサイトを作成する方法を最初に理解することが重要です。
Cmsで独自のウェブサイトを作成する
ほとんどのウェブサイトは、指定されたテンプレート内のHTMLページを作成することができますCMSsソフトウェアによっ 最高のものは、ワードプレス、JoomlaのとDrupalですが、あなたが試すことができ、軽量、オープンソースのCmsのホストがあり、これらはどのようにPHPをお教えしますし、他の
コンピュータ上でMAMP（Mac）またはWAMP（Windows）を使用して、これらのシステムをローカルで実行し、それらの動作を十分に理解できるようにします。
画像エディタの使用
Photoshopなどの使い方を知っておく必要があります。 これは、サイトのグラフィックを作成するだけでなく、設計プロセスを支援するために終了したときにサイトがどのように見えるかの完全なビジュ
Get designing
もちろん、結果として得られるウェブサイトは、検証、作業、検索エンジンによって発見され、目的を果たし、販売されるだけでなく、よく見なければならないことは言及していません。
あなたの芸術的な目を改善するために、定期的に作品を制作し、それをより良くしようとします。 紙の上にデザインをスケッチし、Photoshopやあなたが持っているものは何でもグラフィッ 練習はあなたがより良いデザイナーになるのに役立ちます。 私は設計原則との助けるより多くの資源を後で推薦する。
オンラインリソース
人々が答えを望むとき、彼らはインターネットに行き、”Google it”またはYouTubeを検索します。 Webデザインは違いはありません。 オンラインであなたを助ける多くのリソースがあります。 まず第一に、webデザイナーが最高のオンライン自己教育リソースとして参照しているW3の学校があり、Tizagもあります。 何人かの人々は推薦しますLynda.com 私は個人的にそれを使用していませんが。
ブログ
そこには素晴らしいデザインブログがたくさんあります。 SmashingMagazine、WebDesignerDepot、1stwebdesigner、Envatoネットワークのようなあなたを助けることができる大きなものがあります。
個人的に、私はブログ独立したウェブやグラフィックデザイナーからより多くを得る。 しかし、私が長年にわたって学んだ負荷がありますので、ここではほんの数であり、私がリストを中断した優れたブロガーに謝罪します。
- Chris ColyerのCSS Tricksは、見栄えの良い応答性の高いウェブサイトですが、素晴らしいwebデザイン情報やトリックを持っています
- Veerle PietersはVeerleのブログ
- David Aireyは、私が彼自身の名を冠したブログ、LogoDesignLoveとIdentityDesignedでしばらく続いてきた人です。 Davidは、とりわけ組織の包括的なアイデンティティに興味があります。
- Chris Spoonerは、SpoonGraphicsのブログでチュートリアルを教えてくれましたし、Line25
- Fabio Sassoの素晴らしくデザインされたサイトAbduzeedoは素晴らしいインスピレーションと奇妙さを提供しています。
- Nick LaのN.Design StudioとWebDesignerWallは、いくつかの素晴らしい情報と素晴らしいインスピレーションを持っています。
以下のコメントにお気に入りのデザインブログを追加してください。
フォーラム
あなたがレンガの壁に頭をバッシングしているとき、フォーラムは答えを得るのに最適な場所です。 あなたの問題とwebアドレスの説明を投稿し、非常に多くの場合、誰かが解決策をあなたに戻って取得します。 ここに私の好みのフォーラムのいくつかはある。
私はエステティカデザインフォーラムが好きで、DesignForums.co.uk、デザイナー、sの話。 そこに、より広い範囲のクエリのためのSデジタルポイントとSitepointは、WordPressのフォーラムは優れており、そこに、インターネットマーケティングのための戦士フォー
Books
多くのwebデザイナーは、古き良き物理的な本がwebデザインを教えるのに役立っていると主張しています。 ここに私のお気に入りのいくつかと私に推奨されているいくつかの他のものがあります。 リンクは次のとおりですAmazon.com アフィリエイトリンク.
- HTML&CSS3th(third)editionを使用して正しい方法で独自のウェブサイトを構築するIan Lloydは、私が何年も前に読んだサイトポイントの本です。 それはwebデザインのベストプラクティスに焦点を当てているので、それは本当に一度に私を助けました。 最新版（現時点ではHTML5に多くのものが含まれている第3版）を購入していることを確認してください。
- CSS:David Sawyer McFarlandによるMissing Manualには、説明、例、およびステップバイステップのチュートリアルが含まれています。 この本は、CSSの背景を示し、CSS3について多くのことが含まれているため、特にお勧めします。
- Jason Beairdによる美しいWebデザインの原則、第2版は、デザインが学ぶことができるスキルであり、あなたにデザインの基本原則を教えると主張しています。
- Color Design Workbook:A Real World Guide to Using Color in Graphic Design by AdamsMorioka(editor)は、デザイン作業に色を創造的かつ効果的に適用するために必要な重要な情報を提供します。
- : ウェブユーザビリティへの常識的なアプローチ、スティーブ-クリュッグによる第2版ウェブユーザビリティに関するインスタントクラッシ
- 実際の取得：37の信号によって成功したwebアプリケーションを構築するためのよりスマート、より速く、簡単な方法は、サイトではなくwebアプリケーションを作
- Chris CoyierによるWordPressへの掘り下げ&Jeff Starrは偉大なWordPressの本として強く推奨されています。 PDF版（コードをコピーするのに便利）だけでなく、物理的なバージョンとして利用可能。
私は特にデザイン理論について含めることができたより多くの本があります。 あなたは、webデザインのお手伝いをしてきた本の任意の提案を持っている場合は、私たちはコメントでそれらについて知らせてくださ
あなたができること
多くのデザイナーは、失敗は実際には最高の教師であると主張しています。 だからそこに取得し、ウェブサイトを設計！ 間違いなく起こるように、あなたはレンガの壁に出くわすとき、あなたはあなたを助けるためにここでオンラインリソースのいくつかを使用す そして、あなたがこれ以上コンピュータの画面を見ることができないとき、あなたはそれについての本を読むことができます！