以下網頁皆是在Webflow平台建立的(多數是純Webflow做的, 亦即沒有加入任何的coding)
有些網站會公開Webflow read only link, 類似公開github repo的視覺化檔
(你可以看到這個網頁的每個Layout, Style, Interaction是怎麼作成的)

Webflow製作檔第一次開啟會等比較久,若等不及可以先自創一個帳號玩玩看template
明天會是介面使用介紹,會一次介紹完大概會碰到的所有東西

一.單純覺得美

• 案例1 當初就是因為這個網站下定決心好好坐下來研究Webflow
  • 喜歡他的小巧思(背景影片上加的grid),NavBar用小圖示更清楚,遮色片Hover的感覺 好棒
  • 這 是這個網頁作者的部落格,分享很多他使用Webflow的秘訣,是我最近努力看的,會在進階篇分享
• 案例2 插畫式hover變成現實案例覺得很棒
  • Webflow製作檔
• 案例3 QQ網頁好像失效了只看得到首頁
  • Webflow製作檔藉由觀看他的interaction, 漸漸學會怎麼安排元素的移動,以及良好的換頁感覺,是對我做作品的啟發

二.特殊排版

• 案例1,神人級的製作,一直是Webflow瀏覽最多次的作品
  • 作者也很大方公開了所有製作, 喜歡他最上方expand to see more的設計
• 案例2 有了Flexbox就可以實驗很多事情了,很多東西再也不是麻煩事
  • Webflow製作檔
• 案例3 簡單的實驗,但我很喜歡 最近也漸漸的想要嘗試一些不太一樣的呈現(不是長方形的Layout,不像Navb的Nav,Hover怎麼與眾不同),只想試試看可以怎麼push這些工具做出目前還沒出現過的樣態
  • Webflow製作檔

三.互動式

• 案例1,這也是人氣排行榜,巧思很多值得進去玩玩看
  • Webflow製作檔
• 案例2,NavBar在側邊做得很精美
  • Webflow製作檔
• 案例3 有點Crazy,對我有點太多了,但有滿多東西可以學習的
  • Webflow製作檔

四.進階

• 案例1 類似CSS tricks或臺灣CSS coke在實驗的東西
  • Webflow製作檔 如何把CSS做到極致,且這個專案是Clonable的之後會提
  • 也很推薦這個設計師,其他作品在 這
• 重現 Windows95 滿幽默的,持續有更新推出新功能
  • Webflow製作檔
• 案例3 還滿喜歡這種Redesign風氣的,未來可以當作累積作品集的方式

若想看更多,請來這裡