デザインができなくても見栄えのするウェブサイトを作成する方法

これは聞き覚えがありますか?あなたは素晴らしいアイデアを思いつき、そのアイデアを構築し、最終的な結果を見て考え始めます...これはひどいように見えます。

そして最悪の部分は、それを修正する方法がわからないということです。私たちは結局のところ開発者であり、デザイナーではありません。

幸いなことに、素晴らしいデザイナーである必要はありません。機知に富み、いくつかの簡単なデザインのヒントを理解する必要があります。インターネットには、不足しているデザイン スキルを補うための無料のツールやリソースがたくさんあります。

これらのリソースを活用して、誇りに思えるものを作成する方法を紹介します。

このガイドでは、私が Web サイトのデザインに使用するツール、テクニック、およびリソースについて説明します。これですべてが終わるわけではありませんが、デザインに苦労している人々にとっては大きな指針となります。 DesignDo というアプリケーションを作成します。これは、デザインのヒントとリソースのコレクションになります (とてもメタです!)。私たちが使用するものはすべて100% 無料です。この投稿の要点に集中するために、フロントエンド フレームワークは使用しません。ただの静的HTML。

計画

CSS フレームワークを使用する

ボウリングが下手な人と一緒にボウリングをしたことはありますか?彼らはレーンにバンパーを置いて、ガターボールを投げられないようにしていますか? CSS フレームワークはバンパーです。彼らと一緒に「ガターボール」を投げることはほとんど不可能です。これらは、優れた出発点を提供し、設計に苦労している開発者が必要とする制約も提供します。

Tailwind CSS をお勧めします。 CSS プロパティの抽象化であるクラスを使用します。 CSS を学習するためのトレーニング ホイールとして機能し、見栄えの良いサイトを簡単に作成できます。こちらのドキュメントをお読みください。

また、React や Vue などのフロントエンド フレームワークを使用していない場合は、alpine js を使用することをお勧めします。モバイル デバイスでナビゲーションをハンバーガー メニューに変えるなど、簡単な UI の変更に最適です。

色

複雑にしないでおく。

白い背景と黒または濃い灰色のテキストを使用します。ボタンなど、背景色が暗い領域に黒のテキストがある場合は、白に変更します。

ロゴと行動喚起ボタンの1 つの原色。デザインで「目立たせたい」ものには控えめに使用してください。

カードを白い背景から際立たせるために、二次色は明るい色にする必要があります。最も簡単な方法は、さまざまなライト グレーを使用することです。彼らはすべてと一緒に行きます。

サイトのパーソナリティを決定する

どのサイトにも個性があります。彼らは真面目でビジネスライクな場合があります。また、楽しくて気さくな人にもなります。サイトの個性をどうしたいかを考えてください。これにより、使用するいくつかの CSS プロパティが決まります。それを理解しますか？良い。

ここで、 seriousを選択した場合は、次を使用することをお勧めします。

• Font : デフォルトの tailwind CSS フォントを使用します。何も設定する必要はありません。
• 境界半径: 境界半径を使用しないでください。四角いボタンとボックスがシリアスな雰囲気を醸し出します。
• 色: 主な色として、濃い青、緑、グレー、紫が最適です。

funを選択した場合は、次を使用することをお勧めします。

• フォント: Tailwind Default またはOutfit
• 境界半径: 中程度から大きな境界半径を使用します。ただし1を選択。異なる境界半径サイズを混在させないでください。一貫性を保ちます。
• 色:主要な色には、多くのオプションがあります。明るい鮮やかな色をお勧めします。

インスピレーションを見つける

よし、これであなたのサイトがどのようなパーソナリティを帯びるかについてのアイデアが得られました。さあ、あなたの創造性を刺激するインスピレーションを見つけに行きましょう。誰かのデザインを T またはそのコードにコピーしないでください。北極星としてご利用ください。

Web デザインのインスピレーション サイト

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

私の選択

DesignDo は楽しくクリエイティブなサイトになります。デフォルトの Tailwind フォントを使用し、ボタンとカードには大きな境界線の半径を使用します。また、ライト バイオレットを原色として使用します。

このウェブサイト テンプレートをインスピレーションとして使用します...

それには、私のサイトが何であるかについてのコピーを入れることができる素敵なヒーローセクションと、デザインのヒントとリソースをリストする必要がある垂直リストがあります.

難なく終わらせた

デベロップとデザインを上達させるには、エゴを飲み込むことも必要です。すべてをゼロから構築するため、優れた開発者とは言えません。あなたはただの遅い開発者です。同じことがサイトの構築にも当てはまります。

無料のコンポーネントまたはテーマを見つける

HTML をゼロから始めることはありません。私はいつもいくつかのビルド済みコンポーネントから始めて、そこから始めます。

優れた無料オプションであるWicked Blocksを使用する予定でした。

インスピレーション サイトを参考にして、使用する次のブロックを選びました。

私のヘッダー

ヒーロー

以下は折り目の内容です。

フッター

ブロックを HTML にまとめる

サイトのカスタマイズを開始する前に、ブロックを HTML にまとめましょう。

これは良いスタートですが、DesignDo が必要な場所に到達するまでには、いくつかの作業が残っています。

ロゴ

繰り返しますが、シンプルにしてください。

私は通常、サイトにテキストベースのロゴを使用します。私のサイトの名前はDesignDoなので、それが私のロゴになります。通常、原色を背景として使用し、白または黒のテキストを使用します。テキストの色は読みやすさがすべてです。したがって、原色の上にある白いテキストが読みにくい場合は、黒いテキストを使用し、その逆も同様です。

HTML を記述するか、画像エディターを使用して、ロゴを作成できます。

画像エディタを使用する場合は、 Photopeaをお勧めします。

これはフォトショップの模倣品で、無料で、しかも素晴らしいものです!テキスト用に独自のフォントをアップロードすることもできます。

DesignDo のロゴについては、名前を太字のテキストとして使用します。背景は私の原色になります。

また、ロゴに少し回転を加えて、もう少し個性を出しています。 (より本格的な設計を行う場合は、これを行わないでください。

ナビゲーション リンク

ナビゲーション リンクとはあまり関係がないはずです。テキストがグレーまたは黒であることを確認してください。テキストと一緒にアイコンを追加したい場合は、できます。 Heroiconsは、私がいつも使用している優れた無料のアイコン ライブラリです。より本格的なサイトを作成している場合は、これを使用することをお勧めします。

Heroicons を楽しい/クリエイティブなサイトに使用することもできます。また、サイトの個性が楽しくクリエイティブなものであれば、アイコンに絵文字を使用することも好きです。

DesignDo の場合、ナビゲーション リンクは 1 つしかありません。火の絵文字を使用して、さらに注目を集めます。

ヒーロー

Wickedblocks を使用して有利なスタートを切ったので、ヒーロー セクションでやることはあまりありません。

一部のテキストを更新する必要があるだけです。私たちのような大きな見出しタグを扱うときは、最初の行が 2 行目よりも長くなるように構成します。より目を引きます。

また、通知ボタンの色をプライマリ カラーに更新する必要があります。

コンテンツ

もう一度言いますが、スクロールせずに見えるコンテンツをどのように表示したいかについては、そう遠くありません。

私はアイコンを感じていません。それらはサイトの個性と一致しません。だから私はヒロイコンに手を差し伸べて、私たちのテーマにもっと沿ったものを手に入れるつもりです.

その方がいいです！アイコンの背景は明るい灰色で、暗いアイコンと白い背景とのコントラストが良いため、そのままにしておきます。また、丸みを帯びているため、大きな境界半径というテーマに従います。

「Short Length Headline」は H2 ですが、その下の説明と同じスタイルを使用しています。ヒントの見出しを目立たせて、読者の注意を引く必要があります。そのサイズとフォントの太さを少し増やします (上の H1 タグよりも大きくしたくありません)。

最後に、私たち自身のデザインのヒントを使って、邪悪なブロックに由来する型破りなテキストを更新します!

概要

多くの人が、独自の手作りの CSS を使用し、Figma などのデザイン ツールを使用してモックアップを作成しています。私は同意します、それらは両方とも素晴らしいものです。しかし、実のところ、私は開発者として、Figma の専門家になったり、プロジェクトからプロジェクトへと持ち運べる独自のカスタム CSS ライブラリを作成したりする時間がありません。

しかし、私は機知に富み、インターネット上の無料のツールやリソースを使用して、見栄えの良いデザインを速いペースで作成することができます.

この投稿で作成したプロジェクトを確認したい場合は、次のリンクに従ってください。

ここでDesignDo を見つけることができます。

このプロジェクトのリポジトリはこちらです。

この記事を楽しんでいただけましたら、私のニュースレター @ https://thefreelancedev.comにご参加ください。

ここにも掲載されています。