# Rufous 網站參考

## 首頁
* ### [Campos Coffee](https://us.camposcoffee.com/?site=us)｜首圖 
* 優點：滿版的首圖創造氣氛、CTA 按鈕明確
* 缺點：頁面下方的 parrallax scroll 動畫干擾閱讀、字有點小
---
* ### [Origo Coffee](https://origocoffee.myshopify.com/)｜首圖
純粹覺得照片很好看XD
---
* ### [About Life](https://www.about-life.coffee/)｜載入頁面/首圖  

優點：視覺很漂亮！第一次看到 navigation bar 在最下面、載入頁面動畫很有趣
缺點：動畫太多、字太多很花、載入太慢
---
* ### [The Roastery by Noze Cafe](https://www.tysons.jp/roastery/menu/)
字體 layout 很好看ˊˇˋ（是游明朝體）
---
* ### [The Prolific Bean](https://theprolificbean.com/)｜品牌故事/製造過程
如果要放大手工烘焙、職人精神的品牌形象，可以參考這個網站的排版。
* 優點：增加質感
* 缺點：要注意圖文不能太冗長，顧客畢竟還是來買咖啡的
---
* ### [House of Coffee Beans](http://www.houseofcoffeebeans.com/)｜首頁架構
首頁的架構是首圖 -> 幻燈片（加字可以變成品牌故事）-> 商品陳列
* 優點：因為用很多橫式的陳列，所以頁面滑下來不會太長
* 缺點：手機瀏覽的話就沒辦法用橫的排版，不然會太小
---

## 商品陳列
* ### [Coffee Address](https://www.coffeeaddress.com/)｜首頁陳列
Landing Page 往下滑之後用手動輪播的方式介紹咖啡。下面的 CTA 引導使用者進入全部商品的頁面。

* 優點：適合放在首頁介紹幾樣重點商品
* 缺點：
1. 商品包裝/咖啡豆的照片要吸睛，不然每張都會看起來一樣。
2. 加上說明（例如烘焙方式、產地）會更清楚，因為名字有時候看不出來想表達什麼。

* ### 補充：商品照不同（上圖）vs 商品照一樣（下圖）
上圖：不同圖片讓使用者比較好分辨
下圖：要很努力看名字才知道差在哪
[網頁連結](https://camposcoffee.com/product-category/coffee/)
[網頁連結](https://us.camposcoffee.com/?site=us)

* 優點：hover 直接出現購物車，方便
* 缺點：hover 放大的動畫很煩，會一直想避開它