l12a

白ウサギを追え

ポートフォリオサイトのデザイン修正をしました。

今月公開したポートフォリオサイトに少しずつ機能追加や修正しながらブラッシュアップをしています。 昨日は以下のデザイン修正をしました。

修正したかったところ

まずは before はこちらです。

f:id:lnly:20190122100931p:plain
2019/01/21 修正前

  • 前半のパートが文字文字していてぼやけている。
  • Skillのラベルを表現した青色が強く、ボタンに見える(押せそう感がある)
  • ポートフォリオの余白が詰まって見難い

といったところを直したいと思いました。

修正しました

after はこちらです。

f:id:lnly:20190122100936p:plain
2019/01/21 修正後

「前半のパートが文字文字していてぼやけている」の修正

f:id:lnly:20190122203032p:plain
文字文字してぼやけていたところの修正。

背景にグレーを引いたのと dl 要素のレイアウトを変更しました。

「Skillのラベルを表現した青色が強く、ボタンに見える(押せそう感がある)」の修正

f:id:lnly:20190122203256p:plain
ボタンぽさがなくなるように修正

Skillのラベルは、左右を斜めに切って横に一行並んだような感じにしました。
左側は、トゲトゲ痛そうな感じがしたので、行頭にくる要素だけは垂直にしました。
斜めに切る角度は、ロゴマークで使われている角度と合うようにしてページ中のラインの角度が統一されるようにしました。

ポートフォリオの余白が詰まって見難い」の修正

f:id:lnly:20190122203758p:plain
広い余白とリズム

ポートフォリオは左右互い違いになるようにして、かつ余白を大きく取りました。
見出しと、一番目のポートフォリオの間の余白も、他の見出しの余白ルールを破ってここだけ大きくとっています。

終わり

次はヘッダ部分をなんとかしたいのと、SNSへのリンク部分をナントカしたいと思っています。 よろしければページも見てください。

defcon.codes