不需寫碼,用Webflow 21天快速做好免費的動態響應式網頁
Hi 大家好,我是Chloe,目前是一位UI/UX設計師,過去有5年網頁設計的經驗。我會寫HTML&CSS,所以我對Webflow的表現相當驚豔。
這篇文章會告訴你如何使用Webflow,在短時間之內完成一個看起來很厲害的網站。
前言
過去想要自己建立一個網站或部落格,大部分人的首選是WordPress,他是部落格剛盛行的時候,為了更容易編輯被開發出來用的服務,就算不會程式碼,後台也提供了修改樣板的功能。這樣的功能或許還不能滿足市場的需求,於是誕生了像Wix這種拖曳式的編輯器。不過顯然No Code是一個趨勢,也越來越多開發者加入戰局,包含今天要介紹的Webflow。
Webflow適合以下對象:
- 我是設計師,但是我不會寫code
- 我是工程師,但是我想有漂亮的網頁視覺
- 我是一個小規模創業者,提供產品或服務,我想做一個簡單免費的網站
- 我想要做部落客,我的文章預計不會超過一萬篇
- 我封城在家很無聊,我想找事做 😂
使用Webflow前需要知道什麼?
- 如果你想要使用免費的服務,你可以建立最多兩個網頁專案。 一個網頁專案,Webflow提供兩個靜態頁面(Static pages),內容自訂頁(CMS collection pages),還有密碼頁跟404頁。
- 如果你想要有客製化的網址,你需要自行購買Domain,並且成為Webflow付費會員。 依照小型工作室到企業需求,Webflow有Site plans 和 Account plans,收費範圍在12–36美金之間,細節置底會再說明。
為什麼使用Webflow?
首先來了解Webflow是什麼?2013年Webflow成立於加州,他們的服務包含No Code操作直覺的網頁建置,還有主機提供等。
Webflow的優點包含
- 不會做設計,也有免費的套版可以使用
Webflow提供了現成的套版,如果對免費的套版設計不滿意,也有付費的的選項。 除此之外在Menu的選單選擇Showcase,並點選Cloneable可以看到有很多用戶無私分享可以免費複製修改的酷炫套版,我在上面看到很多厲害的作品,得到眾多靈感。
- 不需要用編輯器改寫程式碼,也能做出搶眼的網站
以官方提供的21天教學範例來看,非常直觀操作的介面,左邊工具列目前對應著圖層架構,對照畫面選擇要修改的區塊輕鬆快速。右邊工具列對應著物件的屬性,操作介面近似Photoshop。
上方工具列點選眼睛可以即時預覽,中間可以選擇預覽不同裝置,右側則是復原及回復的功能。
- 不會操作,免費的Webflow University課程,手把手教你網頁架站到上線
Webflow已經準備好網頁素材assets還有現成的套版可以複製,注意目前操作介面跟教學影片都只有英文的。
- 又忘記儲存檔案了,Webflow支援自動備份,還有版本回溯
還記得電腦當機才發現忘記存檔崩潰的感覺嗎?自動備份非常實用,如果版面改到壞掉,還可以回溯之前的修改記錄。
(注意只有付費方案才可以一鍵回溯,但是免費方案可以查看過去備份的設定,如果只有部分微調,可以看著歷史紀錄手動調回來就好)
- 支援靈活flexbox和grid排版,網頁排版在手機終於看起來不會怪怪的
過去網頁排版由table進化到div,很多網頁排版在移動裝置的呈現都看起來不盡理想,甚至會影響SEO排名。原先div排版的限制,在flex排版出現之後,很多困難都迎刃而解。不過flex排版屬性有的是針對父層容器(parent),有些則是針對子層(child)物件。過去我覺得這很複雜,不過現在可以透過圖像化介面選擇需要的功能,真的是省了很多時間和心力。
Webflow線上課程
你不需要有任何的程式基礎,當然你有的話,你會對於開發過程的飛快感到吃驚。
每一個章節對應到Webflow線上課程 2021 design portfolio course,每一堂課約10–15分鐘,課程最長不超過半小時,總課程約兩個小時。
這系列的所有的單元我都看過了,帶星號(*)的是我覺得收穫比較多的課程。
- 基本介紹
- 製作首頁Homepage
- Day 1 主視覺區域 (Hero section)
- Day 2 Menu導覽 (Navigation)
- Day 3 *作品或服務 (Projects or services)
- Day 4 連絡表單 (Contact form)
- Day 5 頁尾設計 (Footer)
- Day 6 *響應式設計 (Responsiveness) - 產品(包含作品或服務)
- Day 7 *產品主頁+內容管理系統 (Main page + CMS)
- Day 8 產品頁響應式設計 (Responsiveness) - 聯絡我們
- Day 9 連絡表單 (Contact form)
- Day 10 *表單驗證 (reCAPTCHA) - 網頁優化進階設定
- Day 11 *搜尋引擎搜尋優化&Open graph設定 (SEO & Open graph setting)
- Day 12 更改頁面佈局配色 (Dark to light redesign)
- Day 13 *客製化2D和3D效果 (2D & 3D interactions)
- Day 14 客製化404 Error頁 (404 page)
- Day 15 3D視差效果密碼頁 (3D parallax page)
- Day 16 *網頁無障礙評估 (Accessibility audit) - 上線及管理
- Day 17 *設計評估 (Design review)
- Day 18 **發佈及上線 (Publish and launch)
- Day 19 **驗證網頁和追蹤碼 (Verify your site and track analytics)
- Day 20 **進階產品篩選 (Advanced CMS filtering)
- Day 21 最後成果展示 (Final thoughts & portfolio showcase)
很多人在自學HTML和CSS遇到的其中一個難題是,雖然知道各個物件的屬性跟差別,但是一想到要把網頁整合在一起,就不知道怎麼下手了。透過跟著影片的提供的範本,實際操作一遍之後,你會對網頁架構的邏輯及過程有更深入的了解。
有沒有更適合我的課程?
看到這裡你可能會覺得上面介紹的那些東西對新手來說很難消化,有沒有更簡單一點的東西?或者你想的是,我想做的是電子商務,有沒有適合我的線上課程?
Webflow針對不同的階段及網頁的需求提供了許多免費的課程,包含建立網頁最基本的知識、針對電商需求的課程、SEO及無障礙評估、接案設計師的入門,動態設計等等。
價格方案
Webflow針對價格的方案分成網站方案Site plans及帳號方案Account plans
只要你的網站不需要客製化網域,而且你只需要兩個靜態頁面,那麼你可以一輩子享用免費的服務,以下的表格可以直接跳過了。
如果你考慮要訂閱他們的服務,要特別注意的是,不管是哪一種規模的Site plan,靜態頁面最多只能到100頁。這個數目對一般人來說綽綽有餘,不過如果你的網頁有一定的規模,同一頁面有不同語系設定,100頁的限制可能需要多加考量。
內容自訂物件(CMS collection item)可以把它理解為
- 一篇blog文章
- 一個特定類別下的產品(例如:美妝商城的洗面乳)
- 一個特定類別下的服務(例如:廣告公司的行銷服務)
依據不同方案,自訂物件的上限分別在2000頁到10000頁。另外你需要考慮你的網站是否會邀請其他人一起共同編輯,如果你未來想邀請至少3個人協同合作的話,可以參考CMS方案。
正如一開始說過的,每個帳號可以建立兩個免費的專案,一般的情況下,你可能不需要超過兩個不同的獨立網站。如果你是freelancer或者agency,因應業務需求需要製作大量專案,價格依據專案量從16–35美金。
心得總結
相對於其他架站平台,使用Webflow的體驗對我來說相當流暢,它並不是完全沒有學習曲線,透過官方的課程還有用戶在Showcase分享的可複製專案,大幅提升了網站的開發速度。以價格來說,它不是最便宜的平台,不過省去了以下麻煩:你不需要安裝大量外掛去達到理想的效果或功能,也不需要解決不同外掛之間產生的衝突。
以下是我最喜歡的地方:
- Day 20 Advanced CMS filtering 展現了如何進階設定篩選器,我不需要在後台寫if else,就可以讓指定產品顯示在前台頁面指定的位置。
- 線上課程對我幫助很多,除了2021 design portfolio course,我也看了Freelancer web design boot camp。技術層面的教學之外,課程也解釋了設計師遇到的問題應該怎麼解決。(例如:客戶問可不可以做免費的網站,或者問他們自己做網頁可不可以,為什麼要找設計師來做。)
- 網頁動態是我過去想做,但是很難學的部分。複製其他用戶在Showcase的專案,觀察圖層的結構,看到其他用戶下動態的物件,也可以點進去看動態的屬性跟數值,進而學會怎麼在網站做出想要的效果。
此外Webflow提供了相當好的福利,如果你還是學生,便可以享有一年的CMS site plan一折優惠分案,教育工作者則是免費
最後如果你看到這邊對Webflow躍躍欲試的話,可以點擊下方連結開始免費體驗。