実例からウェブデザインを学ぶ -Web Design Case Study: Refilmagem

映画に関するポータルサイト「Refilmagem」のウェブデザインのケーススタディをAbduzeedoから紹介します。

サイトのキャプチャ

Web Design Case Study - Refilmagem
Refilmagem

ケーススタディでは、プレゼンテーションに使用したタイポグラフィやリファレンスも掲載されており、サイト構築に使用しているDrupalを考慮にいれた手描きのモックアップも紹介されています。

サイトのキャプチャ

手描きのモックアップ

その後、ワイヤーフレーム、デザインと進み、レイアウトテストへ進みます。

グリッドベースのデザインは、細部も丁寧にデザインが行われています。

サイトのキャプチャ

ヘッダやエレメントには、シェードとグラデーションがさりげなく使用されています。

サイトのキャプチャ

シェードと角丸はCSS3で実装されています。

サイトのキャプチャ

フッタはコンテンツ箇所と強いコントラストをもたせ、充実した要素が配置されています。

最終的に、サイトのトップページは下記のようになります。

サイトのキャプチャ

Refilmagem

sponsors

top of page

©2018 coliss