網頁設計參考

• HITCON Girls
  • 頁面設計清爽，full-page式的排版，活動重點簡明扼要。
• Nintendo 25th
  • 使用parallel scrolling的效果，善用視覺上的錯覺使網站更加獨樹一格。
• THE VERGE
  • 推很棒的 tab
  • 故事呈現方式很棒，整體視覺效果不錯。
• BLIK
  • 推 點下面Quick Blik中的圖片後，有很棒的放大效果。
  • 比較少看到首頁slider是以上下來做更動，平時較常見到的方式為左右滑動。
• EBONY
  • 特殊的地方在於：slider範圍為整個頁面，網頁上面可看到slider呈現的內容，下面以此主題為背景。
• BOSTON GLOBE
  • 在裡面可以看到像孝玠所使用的「不移動LOGO和TAB」，可參考看看。
• CONDE NAST
  • 推 很棒的slider外，還推可伸縮的概念。
  • 在下面的 Brand News 中，可選擇顯示的方式，可以有多格新聞排列〈顯示內容較少〉，也可以選擇兩則並列〈顯示內容較多〉。
  • 承上，在多格排列中，因為顯示內容較少，因此當游標移到圖片上，就會顯示文字，點子可參考。
• THE BLACK HARBOR
  • 比較不一樣的地方為 游標移到下面的圖片集會顯示部分的內容，但缺點為字太多，可參考點子。

WIRED Media

WIRED為國際知名媒體，各國的版本都有不同的風格；同為內容導向的網站，值得參考。

• WIRED
  • 強勢的導覽列，將所有功能塞進其中；社群連結置底。
  • 內容分欄呈現，有助RWD。
• WIRED UK
  • 以方塊構成的媒體牆，充分利用螢幕，凸顯其媒體的定位。
  • 不使用RWD，桌面版與手機版分開設計，較為費工。
  • 廣告、最新消息可整合於媒體牆中，和諧但不醒目。

• WIRED Germany

  • 無論桌面或行動裝置，導覽列都navigation drawer呈現，有助於風格的統一。
  • 以Jumbotron作為首頁封面。

• DraperTV

  • 同樣以影片為主要內容。
  • 採3欄式設計。
  • 輪播牆下以豐富色塊分類，方便使用者快速找尋。
  • 行動裝置中隱藏大量內容，僅留下精華部分。

媒體

• Techcrunch
  • 電腦螢幕上，採5欄式設計，2-2-1與4-1搭配變化。
  • 橫向平板螢幕上分3欄，由2-2-1退化而來。
  • 直向平板分2欄。
• The New York Times
  • 亦採5欄式設計，1-2-2與1-1-1-1-1布局。
  • 內容龐大，其排版適合快速掃略，但不易專注在特定內容上。
  • 不使用RWD，桌面與行動版分開設計。
  • 可用左右方向建瀏覽不同文章。