グローバルナビのデザインを変更(前後比較の記録)
このサイトのグローバルナビのデザインを変更したのでその記録。
変更前
変更前はグローバルナビのボタン一つ一つを四角いボックスで囲ったデザインでした。
↑これは変更前の記事一覧ページです。四角く並んだグローバルナビの重量感が強くて、下のメインコンテンツ部の存在感が薄く感じてしまいます。
↑これは変更前の記事ページです。記事タイトルの上に重くのしかかって窮屈な印象です。記事タイトルに付記してあるカテゴリのラベルも四角いので、四角だらけの印象です。
変更後
変更後はグローバルナビの線を細く・少なくしたデザインになりました。ヘッダー全体にbox-shadowも加えました。
↑これは変更後の記事一覧ページです。ヘッダーの重量感が減って、メインコンテンツ部との重量感や存在感のバランスが良くなりました。またヘッダーのボックスシャドウのおかげで、ヘッダーとコンテンツの区切りが直感的にわかるようになりました。個性は乏しいけど全体的な印象は良くなったと思います。
↑これは変更後の記事ページです。グローバルナビの存在感が薄れたおかげで、記事タイトル周りがすっきりとして読みやすくなりました。




