HTMLとCSSは単なる終わりの手段です。 20年後には何か違うかもしれませんが、デザインの基本は変わりません。あなたの質問から、私はあなたが視覚的に満足しているものの感覚を発達させ、そのようなデザインを実装するための理解をしたいと思うと思います。
これらの行に沿って、雑誌のレイアウトを見てください。プロの広告を見てください。ロゴのデザインを見て、それを特徴づけるものを選んでみてください。人気があり、閲覧しやすく、読みやすいウェブサイトを見てください。
あなたが見ているものを持って、あなたが構築するそれぞれのデザインに少しずつ取り入れようとします。 Photoshopのようなツールのいくつかは、最初は気にすることがあるので、世界を征服しようとしないでください。それぞれのデザインを最後のものよりも良くしてください。
はここだけで、最小限の知識で始まる本当、なんとか例です:データベースからいくつかの表形式のデータを読む
。プログラマとして、私はあなたがそれをどうやって行うのか知っていると確信しています。
HTMLテーブルのどこからでもチュートリアルを読むことができます。それらの構造には3つの主要なタグと少数の支援タグしか含まれていません。 [脚注1を参照]
スタイリングなしでテーブルにデータを入れます。見える、ひどい?今度はと特定してがひどいように見えます。目に喜ばれないのは何ですか?あなたが好きな別のサイトのクリーンなレイアウトと比較してください。
は、パディングとマージンなどの細部を調べ、それらのものを実装するための基本的なCSSルールを学びます。そうすることで、基本的なユーザビリティと美的ガイドライン(よく配置された空白の重要性など)の感覚を開発し始めます。
今Photoshopのようなものを「困難な」ツールのいずれかを取ると、本当に簡単なタスクを達成します。たぶん、アイコンを切り取るか、テーブル見出しのための簡単なグラデーションを作成するだけの簡単なものになるでしょう。タスクを選び、必要に応じてチュートリアルを見つけてください。
これはすべて非常に簡単ですが、試しても気にしないほど多くの開発者が驚いています。
他の例
フォントは、美学と視覚的なデザインの使いやすさに大きな違いを生みます。まず、いくつかの主要なサイトを見て、一般的に使われているフォントを見てみましょう。印刷物にどのようなフォントが一般的に使われているのか、その理由を少し読んでください。
ここで技術的なアプローチをとってください。どのようなフォントをウェブ上で安全に使用できますか?カスタムフォントを埋め込むために開発者として利用できるツールは何ですか?
この知識を武器に、プレーンなページを作成し、小さなニュース記事を(どこかからの生のテキストをカットアンドペースト、それは問題ではない)スタイリングしてみてください。
良いフォントを選択するとデザインが改善されます。しかし、見出しはどうですか?ドロップキャップのような特別なスタイル?それはHTMLとCSSのすべてです。意味的に文書を構造化するためのベストプラクティスの読み方と、さまざまなスタイルを実装する方法。
この練習の最後に、あなたは専門家になりますか?もちろん違います。しかし、セマンティック構造、HTMLドキュメントモデル、CSSテキストスタイリングディレクティブのように、さらに追求しなければならない新しい技術的手段のすべてが発見されています。
あなたも、このようなスクリーンリーダーを収納する方法として、マルチデバイス/アクセシビリティトピックに遭遇することがあります。
はデザイナーとして、あなたはスタイリングテキストとして「シンプル」として何かに入る努力のレベルを理解し始めるでしょう、あなたは右の「感じ」何のこと無形の感覚を開発するために開始します。あなたが得意になるほど、聴衆はその感情を分かち合います。
私の意見
これにより、開発者は/ビジュアルデザイナーであってはならないことはできません一般的な誤解です。同意しません;エンジニアは、エンドユーザーエクスペリエンス、ヒューリスティック、および美学を理解する必要があります。誰もが素晴らしいビジュアルデザイナーになることはできませんが、私は多くの人に基本を教えてくれていて、そのデザインは(たとえ完全ではないとしても)常に上のカットです。私はまた、最も技術的で最もユーザーに面する側面に慣れて自分のキャリアを構築してきました。率直に言って、それは楽しいことです。オフリミットはありません。
リンク
A List Apart - Code Articles - 特定の技術上の偉大な記事が、他の一般的な設計の記事を逃していないようにしてください。
Color Palettes
Printed Text Guidelines
Color Theory
- ウェブサイトの特定の種類のための非常に適用。
CSS Basics - W3からまっすぐです。
[脚注#1] - 任意のHTML/CSSの開発者へ:私はOPのビルドテーブルベースのレイアウトを示唆しておりません。彼らは使い慣れたデータ構造を取り、それをスタイリングするのに必要なタスクを理解することを提案するだけです。
私はデザインのためのより良い味と直感を開発したいと思います。私はそれを実装するスキルを持っていたいと思います。私は最初のものに重点を置いて質問をする方が良いと思う。 – Alex