ウェブサイトの設計

Webデザインには、Webサイトの視覚的側面への直接リンクがあります。アイデアを効果的に伝えるには、効果的なWebデザインが必要です。

internet_technologies_tutorial

'_WebデザインはWeb開発のサブセットです。ただし、これらの用語は同じ意味で使用されます。_

キーポイント

設計計画には以下を含める必要があります。

情報アーキテクチャに関する詳細。
サイトの計画された構造。
ページのサイトマップ

ワイヤーフレーム

ワイヤフレーム*は、Webページの外観に関する視覚的なガイドを指します。 Webサイトの構造を定義し、Webページと視覚要素のレイアウトをリンクするのに役立ちます。

ワイヤーフレームには次のものが含まれています。

主要なグラフィック要素のボックス
見出しと小見出しの配置
シンプルなレイアウト構造
行動を促すフレーズ
テキストブロック

'_ワイヤーフレームはVisioなどのプログラムを使用して作成できますが、ペンと紙を使用することもできます。_

Webデザインツール

以下は、効果的なWebデザインを作成するために使用できるツールのリストです。

S.N.

ツールの説明

1.

Photoshop CC *これはアドビが提供する優れたWeb設計ツールです。最新のPhotoshop CC 2014は、スマートオブジェクト、レイヤーコンプ、スマートガイド、Typekit統合、フォント検索、ワークフローの強化など、多くの新機能をサポートしています。

2.

Illustrator CC * Illustrator CCは、AutoCadライブラリ、白のオーバープリント、テキストの塗りつぶしとストロークのプロキシスワップ、自動コーナー生成、埋め込みなしの画像、タッチタイプツールなどの強力な機能を備えたWebデザインツールでもあります。

3.

Coda 2 * Coda 2は強力なWeb開発および設計ツールであり、より優れたユーザーインターフェイス、テキスト編集、ファイル管理、クリップ、サイト、デザイン、Mysqlサポートを備えています。

4.

OmniGraffle * OmmniGraffleは主にワイヤーフレームに使用されます。このツールの欠点は、インタラクティブなプロトタイピングがなく、Macでのみ利用できることです。

5.

Sublime Text * Sublime Textは、Pythonアプリケーションプログラミングインターフェイスを備えたソースコードエディターです。プラグインを使用して機能を拡張できます。

6.

ペンと紙*ペンと紙を使用して、Webサイトの外観を描くことができます。

7.

Vim * Vimは優れたWeb設計ツールです。コードの完全にカスタマイズ可能な自動意図、カット/コピーされたコードを保存するための複数のバッファー、および自動繰り返しのためのアクションの記録をサポートします。

8.

Imageoptim *これは基本的に、最適な圧縮パラメーターを見つけて不要なコメントを削除することにより、画像をより速くロードするためにWebサイト上の画像を最適化するために使用されます。

9.

Sketch 3 * Sketch 3は、インターフェース、ウェブサイト、アイコンなどを設計するために特別に開発されたウェブ設計ツールです。

10.

Heroku * Ruby、Node.js、Python、java、PHPをサポートする優れたWeb開発ツールでもあります。

11.

Axure *これは、インタラクティブなウェブサイトのデザインを作成するためのプロトタイピング、ドキュメント、およびワイヤーフレームツールをサポートしています。

12.

Hype 2 * Hype 2は、インタラクティブ性をアニメーション化して追加する最も簡単な方法、HTML5の強力さ、モバイル応答性、およびWYSIWYG機能を提供します。

13.

Image Alpha *このツールは、24ビットPNGファイルのファイルサイズを縮小するのに役立ちます。非可逆圧縮を適用して、PNG8 + alpha形式に変換することにより、より効率的です。

14.

ハンマーこのツールは、プログラマー以外のユーザーに適しており、小規模なプロジェクトにのみ適しています。

15.

JPEGmini Lite *これは画像最適化ツールであり、最大28メガピクセルの任意の解像度の写真をサポートします。

16.

BugHerd *このツールは、プロジェクトの進行状況と誰もが取り組んでいることを確認するのに役立ちます。また、開発中の問題を識別するのにも役立ちます。

Webページの構造

Webサイトには次のコンポーネントが含まれます。

包含ブロック

*Container* は、ページのbodyタグの形式で、すべてdivタグを含むことができます。 コンテナがなければ、Webページのコンテンツを配置する場所はありません。

Logo

ロゴ*はウェブサイトのIDを指し、名刺、レターヘッド、パンフレットなどの企業のさまざまな形態のマーケティングで使用されます。

コンテンツ

Webサイトのコンテンツは、Webサイトの目的に関連している必要があります。

フッター

フッター*はページの下部にあります。通常、著作権、契約、法的情報、およびサイトの主要セクションへのリンクがほとんど含まれています。

空白

ネガティブスペース*とも呼ばれ、タイプやイラストでカバーされていないページの領域を指します。