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

Post on:2010年1月21日

sponsors

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

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

手描きのモックアップ

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

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

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

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

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

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