ウェブデザインを学ぶ方法(9ステップ)|Webflowブログ

ウェブデザインを学ぶ方法(9ステップ)

ビジュアルデザインの重要な概念を理解する

ライン

レイアウト内のすべての文字、境界線、および分割は、より大きな構造を構成する線で構成されています。 Webデザインを学ぶことは、レイアウトの順序とバランスを作成する際の線のアプリケーションを理解することを意味します。

図形

ビジュアルデザインの基本的な図形は、正方形、円、三角形です。正方形と長方形はコンテンツのブロックに、円はボタンに、三角形は重要なメッセージや行動を促すアイコンによく使用されます。形にまた強さと関連付けられている正方形、ハーモニーおよび慰めの円、および重要性および行為の三角形が感情の感覚が、ある。

テクスチャ

テクスチャは、現実の世界で何かを複製します。テクスチャを通して、私たちは何かが荒いか滑らかかを知ることができます。テクスチャは、webデザイン全体で見ることができます。紙のような背景からガウスぼかしのカラフルなウィスプまで、あなたのデザインをより面白くし、それらに身体感を与えることができるさまざまな

カラー

目の疲れではないデザインを作成するには、色の理論で自分自身を教育する必要があります。色の車輪、補色、対照的な色、および異なった色がに結ばれる感情を理解することはよりよい網デザイナーを作る。

グリッド

グリッドは、グラフィックデザインの初期の頃にルーツを持っています。それらは網の設計のイメージ、テキスト、および他の要素に順序を持って来ることでとてもよく作用する。グリッドを使用してwebレイアウトを構造化する方法を学びます。

HTMLの基礎を知る

Hypertext markup language(HTML)は、ウェブサイトのコンテンツ、画像、ナビゲーション、およびその他の要素が誰かのwebブラウザでどのように表示されるか HTMLの専門家である必要はありませんが、Webflowのようなビジュアルベースのデザインプラットフォームを使用している場合でも、HTMLの仕組みに精通してい

HTMLタグは、ブラウザがwebサイトを生成するために使用する指示です。見出し、段落、リンク、および画像はすべて、これらのタグによって制御されます。特に、h1、H2、およびH3タグなどのヘッダータグがコンテンツ階層にどのように使用されるかを知りたいと思うでしょう。ヘッダータグは、レイアウト構造に影響を与えることに加えて、webクローラがデザインを分類し、それらが有機的な検索ランキングにどのように表示さ

HTMLの基本的な概念の詳細については（CSSについてのセクションもあります）、Webflow Universityでまとめたこのレッスンをチェックしてください。

CSS（またはカスケードスタイルシート）は、HTML要素がどのように表示されるかについてのスタイルと追加の指示を提供します。フォントの適用、パディングの追加、配置の設定、色の選択、さらにはグリッドの作成などの作業は、CSSを介してすべて可能です。

CSSの仕組みを知ることで、ユニークなwebサイトを作成し、既存のテンプレートをカスタマイズするスキルが得られます。 CSSのいくつかの重要な概念を見てみましょう。

CSSクラス

CSSクラスは、個々の要素のスタイルを設定する際に一緒に来る属性のリストです。本文テキストのようなものは、単一のCSSクラスのすべての部分にフォント、サイズ、および色を持つことができます。

CSSコンボクラス

コンボクラスは、既存の基本クラス上に構築されています。これは、すでに配置されている可能性のあるサイジング、色、配置などのすべての属性を継承します。属性を変更することができます。コンボクラスを使用すると、時間を節約し、あなたがwebデザインに必要な場所に適用することができ、クラスのバリエーションを設定できます。

CSSの仕組みを知ることは、webデザインを学ぶ際に不可欠です。 HTMLについてのセクションで述べたように、CSSの仕組みについての詳細を見るには、Webflow Universityに行くことをお勧めします。

UXの基礎を学ぶ

UXは、ウェブサイトを生き生きとさせ、要素の静的な配置から、それをスクロールする誰かの感情に係合するものに変換する魔法です。

配色、コンテンツ、タイポグラフィ、レイアウト、ビジュアルはすべてあなたの聴衆にサービスを提供するために一緒に来ます。ユーザーの経験の設計は精密および換起の感じについてある。それは誰かに滑らかな旅が、webデザインの背後にあるエンティティやブランドとそれらを接続する経験だけでなく、提供しています。

ここでは、あなたが知っておく必要がありますいくつかのUXの原則があります。

User personas

Webデザインとは、エンドユーザーを理解することを意味します。あなたは、ユーザー調査を行う方法とユーザーのペルソナを作成する方法を学ぶ必要があります。さらに、ニーズに合わせて最適化されたデザインを作成する際に、この情報を活用する方法を知っておく必要があります。

情報アーキテクチャ

明確な組織がなければ、人々は混乱して跳ね返るでしょう。情報アーキテクチャとコンテンツマッピングは、ウェブサイトと各セクションが明確な顧客旅行を提供する上でどのように連携するかの青写真を

ユーザーフロー

ユーザーフローの構築は、より広範な設計プロジェクトまで作業するときに役立つかもしれませんが、これらについて考え始め、初期のデザイユーザーフローは、人々がデザインをどのように移動するかを伝えます。彼らはあなたが最も重要なセクションに優先順位を付け、人々がそれらにアクセスできることを確認するのに役立ちます。

Wireframes

Wireframesは、webページの見出し、テキスト、ビジュアル、フォーム、およびその他の要素が配置される場所を示します。あなたは簡単なワンページのwebデザインを構築している場合でも、ワイヤフレームをマッピングすると、あなたから仕事に固体ガイドを与えます。より複雑なウェブサイトに移ると同時に、ワイヤーフレームは一貫した経験を作成し、レイアウトを構造化し、含まれる必要がある何でも逃さないことで

プロトタイピング

プロトタイプは異なるレベルの忠実度を持つことができますが、機能するデザインの表現として機能します。画像、インタラクション、コンテンツ、およびその他の重要な要素はすべて所定の位置にあり、現実世界のデザインを複製します。プロトタイプは、フィードバックを取得し、プロセス全体を通して設計を微調整するために使用されます。

UIに慣れる

ユーザーインターフェイスは、技術の一部を動作させるメカニズムです。ドアノブはユーザーインターフェースです。あなたの重要な他がいじり停止しないことをあなたのカーラジオの音量調節はユーザ-インタフェースである。 ATMでPINを入力するキーパッドはユーザーインターフェイスです。現実世界のボタンやその他のメカニズムが誰かがマシンと対話することを可能にするように、ウェブサイト上のユーザーインターフェイス要素は、誰かが動

直感的なデザインとシンプルさという二つのUIの重要な原則を見てみましょう。

直感的なインターフェイスを作成する方法

ウェブサイトとの対話とエンゲージメントは、一貫性があり、反復可能なパターンに従うべきです。ウェブサイトに着陸する人々はすぐにそれをナビゲートする際に所定の位置にあるシステムを理解する必要があります。

UIをシンプルにする

uiは使いやすさを最適化するために存在します。これは、コントロールを使いやすくするだけでなく、その機能で明らかにすることを意味します。ナビゲーションオプションの数を最小限に抑えたり、チェックアウトプロセスを迅速にしたり、アクセシビリティを向上させる他のインタラクティブ要素を統合したりするかどうかにかかわらず、UIを理解することで、webサイトとの対話の経験を合理化するのに役立ちます。

もちろん、UIはほんの数段落では捉えることができない広大な主題です。 UIの入門書として、ブログ記事「10essential UI(user interface)design tips」をチェックすることをお勧めします。

関連する読み取り：UX vs UI：すべてのデザイナーが知っておくべき主な違い

レイアウト作成の基本を理解する

私たちの目は、webデザインを介して簡単なルートのために作る、自動的に特定のデザインパターンにラッチ。私たちは人生を通してメディアを消費してきたので、これらの同じパターンを何度も見てきたので、どこを見るべきかを直感的に知っています。デザインパターンを知ることは、コンテンツやビジュアルへの円滑な流れを持つウェブサイトを作成するのに役立ちます。あなたが知る必要がある二つの一般的なwebレイアウトパターンは、ZパターンとFパターンです。

Z-pattern

言葉や画像の経済性と負のスペースの寛大な量を持つレイアウトのために、Z-patternは、ウェブサイトをクルーズする効率的な方法になります。あなたの目がデザインを通過している場所に注意を払って起動すると、Zパターンが所定の位置にあるとき、あなたはすぐに認識します。

Fパターン

オンライン出版物やブログのように、テキストに重いデザインは、多くの場合、明確なFパターンに従います。画面の左側には、記事または投稿のリストが表示され、ページの本体には関連情報の行が表示されます。このパターンは、たとえ彼らがすぐにそれを見ていても、人々に必要なすべての情報を与えるように最適化されています。

: ウェブサイトの解剖学すべてのデザイナーが学ぶ必要がある

タイポグラフィについて学ぶ

フォントは、異なるトーンや感情を付与するだけでなく、可読性に影響を与えることができます。 Webデザインについて学んでいる場合は、タイポグラフィを使用する方法を知ることが不可欠です。

タイポグラフィは、webデザインにいくつかの目的を提供しています。まず、コンテンツを読みやすくするという実用的な目的を果たします。しかし、それは装飾としても役立つことができ、様式化されたタイポグラフィの上品な使用は、全体的な美学に加えることができます。

ここでは、あなたが知っておくべき三つの基本的なタイポグラフィの概念があります。

セリフ

セリフ書体は、各文字を飾るセリフとして知られている微小な行を持っています。このタイポグラフィのスタイルは、印刷にさかのぼることができます。

Sans serif

名前が示すように、sans serif書体はセリフ書体の識別行を欠いています。これらの種類の顔は、ウェブサイトやアプリのデジタル領域を通じて発見されています。

ディスプレイ

ディスプレイ書体は見出しによく使用され、大きくてインパクトのあるもの、またはシャープで細い線でできています。彼らは通常、洗練されたレターフォームを持っており、誰かの注意をつかむためのものです。

関連する読み：タイポグラフィデザイン：デザイナーのためのフォントスタイルとリソース

あなたの知識を行動に移し、何かを構築する

個人指導を見、blogのポストを読み、オンラインコースで登録し、あなたがwebデザイ

シンプルなプロジェクトから始めます。多分あなたが有価証券の作成の助けを必要とするか、または種類の網の存在に欠けている側面の喧騒があることを知っている誰か。それらを自由のための何かを設計するために提供しています。

ブログはまた、別の偉大な初心者のプロジェクトです。これは、CMSのようなものを使用する方法を学ぶだけでなく、あなたのライティングスキルのためのショーケースを提供する際に実用的な設計経験を与

偽の会社やビジネスのためのウェブサイトを構築することは、あなたのデザインチョップを開発する上で別の楽しい創造的な運動です。プラス、あなたの有価証券にそれを加えることができる。

メンターを得る

メンターは、あなたがいた場所にいて、彼らが学んだ苦労して得た教訓を通してあなたを助けたいという欲求を持っているので、貴重です。彼らは専門知識と知識の深い井戸を持っています。それらはあなたの仕事のフィードバックを得、右をしているものを見つけ、何が改善を必要とするかの大きい資源である。

適切なメンターを探す際には、あなたが賞賛するタイプのデザインを行い、学びたいものを専門とする人を見つけるようにしてください。メンターは、webデザインの学習を通じてつまずく必要はありませんので、フィールドで過ごした年からの明確なパスを与えることができます。

webデザインに簡単に入るコードがない

webデザインの背後にコードを手動で書くためにHTMLとCSSを深く理解しなければならない時代がありました。今日では、Webflowのようなコードツールがないため、webサイトをまとめて短時間で起動することができます。数日または数週間かかったことは、今では数時間で起こる可能性があります。

もちろん、良いウェブデザインを作ることには多くのことがあります。ビジュアルデザインの背後にある基礎、UIとUXの基礎を学び、フロントエンドとバックエンド機能がどのようにあなたをよりバランスのとれたデザイ

あなただけの開始しているか、専門家であるかどうか、Webflowはあなたの創造性を実現するためにあなたに力を与えるために直感的な視覚ベースのプラッ Webflowは、ウェブサイトを起動するための使いやすい方法に加えて、あなたにアドバイスを与えるために、あなたのスキルをレベルアップするのに役立つ私達は私達のショーケースで働くのを見ることを楽しみにしています。