非デザイナー向けのウェブデザインに関するデベロッパー向けガイド

14歳のときに学校プロジェクトとして最初のWebサイトを作成しました。タスクは簡単でした。テキスト、画像、表を含む非常に基本的なサイトを作成しました。学校のプロジェクトに対する私の通常の態度は、それらを完全に忘れて、後で土壇場の解決策を考え出すことでした。しかし、今回、私は夢中になりました。

私の最初のウェブサイト以来、私は常にものを良く見せることを優先してきました。認めるかどうかにかかわらず、人々は外見に基づいて物事を判断します。自分がやっていることを知っているように、自分の作ったものが良さそうであれば、人々はそれをより信頼するようになります。それはまさに物事です。

長年にわたってサイドプロジェクトを作成してきましたが、プログラミングを完璧にするのではなく、デザインスキルの向上に焦点を移しました。おわかりのように、これまでのところ、monstrumを記述するアルゴリズムであることがわかります。収益性の高いサイドプロジェクトをブートストラップするという夢を追い求めながら、多くの異なる仕事をしなければなりません。デザイナーであることもその一つです。クロスフィットのアスリートと同じように、ソロファウンダーはパフォーマンスを上げるために十分に丸める必要があります。

優れたデザインは、必ずしも最もドリブルの賛成票が多いとは限りません。そもそも気付かないものです。 「おばあちゃんができる」と「すごい、それはすごい」の完璧なバランスです。デザインは、あなたの競争上の優位性、またはnの中の釘になることができます。

才能ではありません

若い頃、Minecraftをたくさんプレイしました。私は人々が作ったこれらすべての素晴らしい建物を見ました。しかし、私が何かを作ったとき、それは箱のように見えました。 Uいスタイルなし。 Minecraftで素敵なものを作るにはどうすればいいですか?

だから、私はYouTubeで男を見つけて、彼が作ったものの正確なコピーを作りました。数週間後、私は自分のスタイルを開発し、自分で構築することができました。突然、私の作品はくだらないようには見えませんでした。ちなみに、私は建築コンテストでも優勝しました。

デザインはスキルであり、他のスキルと同様に学ぶことができます。

仕事に最適なツールを選ぶ

プログラミングでは、メモ帳を使用して、本格的なIDEで書かれたのと同じくらい良いアプリを作成できます。 Webデザインの世界では、MSペイントがメモ帳の役割を果たします。メモ帳と同様、実際にデザインすることを選択する人はほとんどいません。

Web用の最も一般的なデザインツールは次のとおりです。

  • Mac OS専用のツールであるSketchは、Reactと同様に、すべての求人リストにハードコードされているようです。年間99ドル。
  • Vueの役割を果たすAdobe XDは、無料で使用できるクロスプラットフォームツールです。コミュニティは小さいですが、始めるのはとても簡単です。
  • Adobe Photoshop、誰もが知っているデザインタスク用のスイスナイフ。それは…あなたが推測した、jQueryのスポットです。 9.99ドル/月。

SublimeコードとVSコードのどちらを使用してアプリを作成しても、ほとんど違いはありません。または、フロントエンドにReactまたはVueを使用するかどうか。好みの問題です。同じことが設計ツールにも当てはまります。それぞれに長所と短所があるためです。

Adobe XDを使用しています。私の主な理由は、クロスプラットフォームであるため、Appleエコシステムに人質にされていないことです。また、Adobeの支援を受けているので、しばらくここにいる予定です。新参者にとって最高のことは、2018年5月以降、Adobe XDはいくつかの制限があれば自由に使用できるということです(とにかくつまずかないでしょう)。

考え方を調整する

私にとってウェブデザインの世界にやってきた最大の課題は、考え方を調整することでした。私は、ウェブサイトをコーディングするときにデザインを思いつくことに慣れていました。すべてに注文がありました。流れは左から右へ、上から下へでした。実際、このアプローチはあなたをより悪いデザイナーにします。

設計ツールは、すべての要素が絶対に配置されるように設計する必要があるため、無秩序です。この変更を受け入れます。すぐに物事を変更する自由が得られ、実験が簡単になります。設計は継続的なプロセスであるため、それは不可欠です。素晴らしい結果を得る前に、物事を大きく変えることが期待されています。

ツールを学ぶ

コーディング時には、div、span、inputなどのHTML要素を使用し、ブラウザーでそれらを視覚的なものにレンダリングします。デザインツールを使用すると、仲介者をスキップして、図形やテキストなどの視覚要素を直接使用することができます。

学習に費やす時間を減らし、設計に時間を費やすことができるように、最もよく使用される4つの設計ツールを選択しました。そうすれば、できるだけ早く練習を開始できます。以下に、それらの仕組みと使用方法を示します。

長方形ツール

長方形は最も普遍的な形です。常にそれらを使用しています。 divと考えてください。テキスト入力の作成からコンテナまで、あらゆるものに役立ちます。

テキストツール(ラベル)

タイトルが示すように、テキストツールを使用すると、テキストを作成できます。テキストツールには2つの状態があるため、それほど単純ではありません。1つは単一行のテキスト用で、もう1つは複数の段落用です。幸いなことに、それらは非常に簡単に正しく使用することができます。

最初の状態は、テキストサイズに基づいてサイズを調整する単一行のテキストコンテナーです。 に似ていますが、改行をしないと折り返されない点が異なります。この状態の利点は、行の高さとフォントサイズに基づいてテキストボックスのサイズを自動的に調整することです。

作成するには、テキストツールを選択してクリックし、書き込みます。経験則として、特定の幅を必要とせず、1行の場合はこの状態を使用します。たとえば、単一行の見出しとラベル。

テキストツール(段落)

2番目の状態は、特定の幅の

またはグリッド列内の

のように動作する特定のサイズのテキストコンテナーです。この状態の利点は、テキストボックスのサイズを制御できることです。段落を作成するには、テキストツールを選択した状態でクリックして、選択を作成します。経験則として、この状態は複数行の段落と見出しに使用します。

選択ツール

移動、サイズ変更、複製。これはそのためのツールです。これらのピンクの線は、周囲の要素からの距離を示しています。青い線は、要素を適切に配置するのに役立ちます。

ラインツール

線は、デザインの部分を分離するのに便利な場合があります。それがラインツールがここにある理由です。技術的には長方形ツールを代わりに使用することもできますが、このdivは何にでも使用できます。

設計のヒントとテクニック

レイアウト

Web開発では、レイアウトはヘッダー、メニュー、コンテンツ、およびフッターとして最も一般的に説明されます。それはその一部ですが、レイアウトはそれ以上のものです。文字通り、すべての要素がレイアウトされる方法です。

たとえば、Sidemailのプロジェクト情報を設計しているときに、カード内の要素を均等に分散させたため、カードがより完全になり、見た目がきれいになりました。

次のプロジェクトに最適な色を見つけるために、色の心理学(colorpsychology.org)に留意することを検討してください。原色に基づいて完璧な色の組み合わせを見つけるのに役立つツールは、Palettonです。

原色の色合いとテキストの色を使用して、視覚的な階層を作成します。色付きの背景を使用する場合は、テキストの濃淡を試してください。

タイポグラフィ

書体はプロジェクトのブランディングに大きく影響するため、賢明に選択してください。プレミアム書体は、Googleフォントの書体よりも見栄えがよくなりますが、始めたばかりのときは購入しないでください。 Googleフォントでも、隠された宝石がいくつかあります。

テキストを視覚的に分割するために頻繁に使用するトリックは、ラベルを大文字にし、文字間隔を大きくすることです。大文字のテキストは対称的であり、視覚的には見栄えがよくなりますが、読みにくいため、使いすぎないでください。

ホームページ(またはランディングページ)の設計

私は常にトレンディな要素をデザインする誘惑を避け、そこに私のメッセージを詰め込みます。むしろ、私は利点(機能ではなく)を考え出し、それらをストーリーに入れて、視覚的に魅力的なページでそのストーリーを伝えます。

私が言いたいことを確立した後、私は通常、いくつかのインスピレーションを探します。そのための素晴らしいリソースはland-book.comです。これは、人々が投票できる見栄えの良いランディングページの広大なディレクトリです。デザインのインスピレーションが得られるもう1つの優れたページはinterfaces.proです。ここでは、価格設定、404、または私たちについてなどのカテゴリでフィルタリングできます。好きなサイトを見つけて、希望のスタイルに一致するまでブラウズします。

難しいのは、すべてをまとめることです。残念ながら、近道はありません。満足のいく結果が得られるまで、何度も繰り返す必要があります。

1週間前にあなたが完全に満足していたデザインが、今日は突然、十分ではない、またはevenくさえ感じるのが普通かどうか疑問に思うかもしれません。答えは、それは完全に正常であり、実際には良いことだということです。それは基本的にあなたが成長し、学び、良くなるからです。昨日の挑戦は今日はそれほど挑戦的ではありません。ラットレースに巻き込まれないように、これを念頭に置いてください。

テイクアウト:

  • ユニークな書体が大きな違いを生む
  • グラフィックは非常に重要です。少なくともいくつかのイラストや画像を使用してください
  • 複数の色合いを使用することで、視覚的な重要性を得ることができます。テキストと原色では不十分です。
  • 幅が広すぎるコンテナは使用しないでください-約1100ピクセルで十分です
  • 負の空間を受け入れる
  • 機能ではなく、利点について話す
  • 行き詰まったら、インスピレーションを探しましょう

Webアプリ(またはダッシュボード)の設計

ランディングページのデザインと同様に、デザインに直接ジャンプしないでください。今回は、物語を語ろうとしているのではありません。代わりに、目標は使いやすさです。ペンと紙を手に取り、アプリの動作方法、何に依存するべきか、簡単にナビゲートする方法を計画します。

必要に応じて、スケッチまたはワイヤーフレームを作成します。適切な競合他社の設計検査を行って、不足しているもの、改善できるもの、または競争上の優位性になったものを自分で確認します。時には、紙の上で計画を立てて設計する前に休憩した方が良い場合があります。

ユースケース固有ではない、私ができる最善のアドバイスは、適切なページレイアウトを選択することです。一般に、すべてのウェブアプリは、アプリの目的に基づいて2つの異なるページレイアウトを使用します。画面全体に表示される固定幅コンテナまたは流体コンテナです。

固定コンテナ

不必要な目の動きを防ぐので、狭い場所に集中するのがはるかに簡単だからです。固定コンテナアプリは、見た目がすっきりしていて、新しいユーザーにとって圧倒される傾向があります。ただし、幅が狭いため、固定コンテナアプリの設計は困難です。

例:Twitter、Buffer、DigitalOcean、Netlify、GitHub

液体容器

流体コンテナアプリは、チャットアプリ、スプレッドシートアプリ、および画面上により多くのものが必要なその他のアプリに最適です。ただし、画面上のデータの負荷が膨大になる可能性があることに注意してください。

例:Slack、Intercom、Hotjar、Google Sheets、Trello、Spotify

適切なコンテナを選択することが重要です。ページレイアウト全体がそれに依存し、後で変更するのは大変な作業です。各プロジェクトはユニークであり、ユニークなソリューションを必要とするので、実験することを恐れないでください!

テイクアウト:

  • 複雑にしないでおく
  • 読みやすい書体を使用する
  • 大量のデータを表示するときに視覚的な階層を使用する
  • 競合他社の貧弱なデザインの選択肢を活用する

まとめ

デザインが競争上の優位性になる可能性があることを忘れないでください。

最新のプロジェクトのランディングページ用に作成したAdobe XDテンプレートを取得して、デザインの旅を始めましょう。私の最新のメーリングリストに登録するだけで、メールボックスに追加されます。

また、あなたは私の次の投稿について最初に通知を受けます。この投稿では、Sidemail(私が取り組んでいるSaaSプロジェクト)で69日間の進捗を共有します。チャンネル登録者数、サイト訪問、支出、デザインドラフトなどが含まれます。言うまでもありませんが、スパムは絶対にありません。そのくだらない時間さえありません。

私のTwitter DMは開いているので、デザインの作成に困ったときや、さらに質問があるときは、お気軽にご連絡ください。