個案研究 3:FreelanceSwitch

FreelanceSwitch 是專為 freelancer 而設計的一個非常有名的網站。所謂的 freelance,指的是「個人在家或工作室自由接案」,如網頁設計、平面廣告等。

01-visible

一映入眼簾的網頁畫面,基本上沒有帶給我什麼太大的感覺,卻有點略嫌擁擠。

色彩 Colors

02-colors採用大量的灰色,以及一些墨綠色。值得一提的是,當切換到「The Blog」以外的分頁時,整個網頁的主色會改變,也就是將各種作為主色的墨綠色取代為別種顏色。

 

橫幅 Banner

03-banner

Banner 分為上、中、下三個小 banner,其重要性也由上往下遞減。

最上頭的小 banner 有左右兩部份,左邊是這網站的名稱,右邊是對瀏覽者簡單介紹這網站;中間的小 banner 是這網站的各分頁,特別的是除了分頁名稱外,還有該分頁的簡單描述;下頭的小 banner 則有 About、Contact,及 Advertise 三個連結。

文章 Post

04-post 節錄一篇在網誌主頁的文章於右圖。

作者是用綠色框圍起來,文章的日期則是寫在節錄的下方,連同幾個網路書籤及回應的連結在一起。

此外,每篇文章都有一張圖片,大小不一,但基本上都是280×360 左右。大部分的圖片底下還會有一行字,說明該圖的來源。

內文 Innertext

除了以下兩個地方外,基本上個人認為沒什麼特別之處。

引用 Quotes

05-quotes 這裡運用到一個 WordPress(沒錯,FreelanceSwith 也是用 WordPress 設計的XD)的外掛,叫做 jspullquotes,這裡就不詳細介紹了。使用方式就是將要引用的話,利用 <span class="pullquote"> 包起來,甚至再加上 pqRight 或 pqLeft,設定引用的話在右邊或左邊。

文章下方

06-follow-up 有左右兩個部份,分別是「Related Posts」(相關文章)及「Subscribe」(訂閱),訂閱有三個連結,就是訂閱 RSS feed、透過 Email 訂閱文章,以及介紹什麼是 RSS feed。

 

回應 Comments

06-comments

首先就是 Comments 字樣,以及緊接在其後、用綠底白字框包起來的「留下回應」連結。而各個回應則有幾個元素:一個預設的 80×80 圖樣、回應作者名稱、回應時間(沒有幾點幾分),以及最特別的、預設高度為 180px,而寬度為 500的回應框。除非回應內文的長度超過 180px,否則縱使只有一行文,回應框高還是 180px。此外,若回應作者有留下個人網站,則作者名稱會變成淺墨綠色。

側欄

08-bestof 欄位非常多。最值得注意的是「Best of FreelanceSwitch」欄位。有「All Time」、「Last Month」,以及「Random Posts」三個分頁,切換都是利用 JavaScript 即時顯示。

 

 

 

 

 

自以為有缺點

  • Footer 的資訊可以更豐富。
  • 側欄東西有點多。

暫無回應 ↓

現在還沒有回應耶…看到下面的表格,你知道該怎麼做吧?

留下你的足跡