LucyとRuby

グローバルナビのデザインを変更(前後比較の記録)

このサイトのグローバルナビのデザインを変更したのでその記録。

変更前

変更前はグローバルナビのボタン一つ一つを四角いボックスで囲ったデザインでした。

一覧ページ(before)

↑これは変更前の記事一覧ページです。四角く並んだグローバルナビの重量感が強くて、下のメインコンテンツ部の存在感が薄く感じてしまいます。

記事ページ(before)

↑これは変更前の記事ページです。記事タイトルの上に重くのしかかって窮屈な印象です。記事タイトルに付記してあるカテゴリのラベルも四角いので、四角だらけの印象です。

変更後

変更後はグローバルナビの線を細く・少なくしたデザインになりました。ヘッダー全体にbox-shadowも加えました。

一覧ページ(after)

↑これは変更後の記事一覧ページです。ヘッダーの重量感が減って、メインコンテンツ部との重量感や存在感のバランスが良くなりました。またヘッダーのボックスシャドウのおかげで、ヘッダーとコンテンツの区切りが直感的にわかるようになりました。個性は乏しいけど全体的な印象は良くなったと思います。

記事ページ(after)

↑これは変更後の記事ページです。グローバルナビの存在感が薄れたおかげで、記事タイトル周りがすっきりとして読みやすくなりました。

post no. 670

Comments