ウェブサイトのデザイン

Webデザインは、Webサイトの視覚的側面に直接リンクしています。アイデアを効果的に伝えるには、効果的なウェブデザインが必要です。

Web設計は、Web開発のサブセットです。ただし、これらの用語は同じ意味で使用されます。

キーポイント

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

  • 情報アーキテクチャに関する詳細。

  • サイトの計画された構造。

  • ページのサイトマップ

ワイヤーフレーム

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

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

  • 主要なグラフィック要素のボックス

  • 見出しと小見出しの配置

  • シンプルなレイアウト構造

  • 行動を促すフレーズ

  • テキストブロック

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

Webデザインツール

効果的なウェブデザインを作成するために使用できるツールのリストは次のとおりです。

Coda 2
Coda 2は、強力なWeb開発および設計ツールであり、より優れたユーザーインターフェイス、テキスト編集、ファイル管理、クリップ、サイト、設計、およびより優れたMysqlサポートが付属しています。OmniGraffle
OmmniGraffleは主にワイヤーフレーミングに使用されます。このツールの欠点は、インタラクティブなプロトタイピングがなく、Macでのみ使用できることです。Pen and Paper
ペンと紙を使用して、Webサイトがどのように見えるかを描くことができます。Vim
Vimは優れたWeb設計ツールです。コードの完全にカスタマイズ可能な自動意図、カット/コピーされたコードを保存するための複数のバッファー、および自動反復のためのアクションの記録をサポートします。
SNツールの説明
1.1。Photoshop CC
これは、アドビが提供する優れたWebデザインツールです。最新のPhotoshopCC 2014は、スマートオブジェクト、レイヤーカンプ、スマートガイド、Typekit統合、フォント検索、ワークフローの機能強化など、多くの新機能をサポートしています。
2.2。Illustrator CC
Illustrator CCは、AutoCadライブラリ、白のオーバープリント、テキストの塗りつぶしとストロークのプロキシスワップ、自動コーナー生成、埋め込みされていない画像、タッチタイプツールなどの強力な機能を備えたWebデザインツールでもあります。
3.3。
4.4。
5.5。Sublime Text
Sublime Textは、Pythonアプリケーションプログラミングインターフェイスを備えたソースコードエディタです。その機能はプラグインを使用して拡張できます。
6.6。
7。
8.8。Imageoptim
これは基本的に、最適な圧縮パラメータを見つけて不要なコメントを削除することにより、画像をより速くロードするためにWebサイト上の画像を最適化するために使用されます。
9.9。Sketch 3
Sketch 3は、インターフェイス、Webサイト、アイコンなどを設計するために特別に開発されたWeb設計ツールです。
10.10。Heroku
また、Ruby、Node.js、Python、java、PHPをサポートする優れたWeb開発ツールでもあります。
11.11。Axure
インタラクティブなウェブサイトデザインを作成するためのプロトタイピング、ドキュメント、ワイヤーフレーミングツールをサポートしています。
12.12。Hype 2
Hype 2が提供するもの:インタラクティブ性をアニメーション化して追加する最も簡単な方法、HTML5のパワーの硬さ、モバイルの応答性、およびWYSIWYG機能。
13.13。Image Alpha
このツールは、24ビットPNGファイルのファイルサイズを縮小するのに役立ちます。これは、不可逆圧縮を適用し、より効率的なPNG8 + alpha形式に変換することによって行われます。
14.14。Hammer
このツールは、プログラマー以外の人に適しており、小さなプロジェクトにのみ適しています。
15.15。JPEGmini Lite
これは画像最適化ツールであり、最大28メガピクセルの任意の解像度の写真をサポートします。
16.16。BugHerd
このツールは、プロジェクトがどのように進行しているか、そして誰もが何に取り組んでいるかを確認するのに役立ちます。また、開発中の問題を特定するのにも役立ちます。

Webページの構造

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

ブロックを含む

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

ロゴ

Logo WebサイトのIDを指し、名刺、レターヘッド、ブラウチャーなど、企業のさまざまな形式のマーケティングで使用されます。

ナビゲート

サイトの navigation system見つけて使いやすいはずです。多くの場合、アニメーションはページの上部に配置されます。

コンテンツ

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

フッター

Footerページの下部にあります。通常、著作権、契約、法的情報に加えて、サイトの主要セクションへのリンクがいくつか含まれています。

空白

とも呼ばれます negative space タイプやイラストでカバーされていないページの領域を指します。

Webデザインの間違い

次の一般的な間違いに常に注意する必要があります。

  • 他のブラウザ、他のInternetExplorerで動作しないWebサイト。

  • 正当な理由もなく最先端のテクノロジーを使用する

  • 自動的に開始するサウンドまたはビデオ

  • 隠されたまたは偽装されたナビゲーション

  • 100%フラッシュコンテンツ。