はじめに
自分がいちいち検索しなくて済むようにまとめただけの投稿です。赦して。
Webデザイン
見る人を惹きつけ、情報を受け取ってもらうために参考にしたいサイト達。
美しいWEBデザインの作り方と9つのコツ
スタイリッシュで人を惹きつけるサイト作りの上で重要な余白や配色、構成などが紹介されている。すぐに活用できるコツから、行き詰った時の解決策、Webデザインの心構え(?)まで網羅されており、忘れたころに何度も見返したい。
URL : https://stand-4u.com/design/webdesign.html
ゴールを念頭にWebサイトをデザインするということ
単なるデザインから一歩踏み込んだ、より効果的・戦略的なサイトを作りたいとき役に立つ。何のためのWebサイトで、何のためのデザインかを再確認させられる。
URL : https://uxmilk.jp/72792
ウェブデザインスキルを高める13のコツ
自分のイメージだけで作っていくと、デザインが古めかしくなったり、自分の好みが主張しすぎて情報を伝達する役割が薄れたりすることがあるかもしれない。作ってみて、なんか違う感がしたら参考にしてみよう。
URL : https://blog.hubspot.jp/web-design-13-tips
Webデザインに取り入れたいグラデーションの効果的な使い方
グラデーションを使った美しいサイトを多数紹介していて、グラデーションを扱う上でのコツなども載せている。お手本にしてサイトを作ってみると思いのほかきれいな出来になる。すごい。
URL : https://spc-jpn.co.jp/blog/4306/
要素
全体のデザインではなく、ボタンやアイコン、グラデーションに関して今すぐに活用できるサイト達。
CSSで作る!押したくなるボタンデザイン100(Web用)
いちいちデザインに悩むボタンが、CSSのコードと共に多数掲載されている。目次から自分の求めている雰囲気のボタンをすぐに見つけられるうえ、コードをすぐに確認できるという優れサイト。そもそもこのページ自体のデザインが好み
URL : https://saruwakakun.com/html-css/reference/buttons#section7
Grabient
25種類のサンプルから、色やバランスを自由に調整することでグラデーション作成が簡単に行える。コードもすぐに参照できるため優秀。下と合わせて活用したい。
URL : https://www.grabient.com/
CSSのグラデーション(linear-gradient)の使い方を総まとめ!
上のグラデーションサンプルのサイトに付随して。基本のグラデーションを表示させるコードから、様々な活用例までわかりやすく説明されている。グラデーションのサンプルやジェネレーターなどの外部リンクも充実していて、これだけ見ればばっちりカモ?
URL : https://saruwakakun.com/html-css/basic/linear-radial-gradient#section12
Font Awesome
言わずもがな。ページ作成の上では必須といっても過言ではない?
URL : https://fontawesome.com/