網頁設計作品案例這麼多，該如何挑選網站參考範例？
當你一開始著手公司網站設計工作時，可能會發現網路上很多網頁設計參考、卻沒有適合公司網站、企業形象網站的參考案例。網路上這些酷炫的版型設計或風格強烈的網站，用在個人網站或設計公司網站或許可以，但套用在追求穩重優雅的企業網站上，反而覺得格格不入。那麼，應該要去哪裡找這些適合企業集團的網站案例呢？
快速導覽
當你一開始著手公司網站設計工作時，可能會發現網路上很多網頁設計參考、卻沒有適合公司網站、企業形象網站的參考案例。網路上這些酷炫的版型設計或風格強烈的網站，用在個人網站或設計公司網站或許可以，但套用在追求穩重優雅的企業網站上，反而覺得格格不入。那麼，應該要去哪裡找這些適合企業集團的網站案例呢？
設計師最常上哪找網頁設計參考網站？
凱士網頁設計以自身經驗推薦幾個網頁設計師最愛的設計參考網站給你，
Behance | 提供大量的網頁設計師作品案例
Behance 是由 Adobe 開發的創意作品的平台。由於龐大的社群和多樣化的選擇，許多設計師喜歡在 Behance 尋找網頁設計靈感。
awwwards | 世界頂級的網頁設計得獎作品
Awwwards 展示了世界頂級網頁設計師和開發人員的作品，並由知名專家組成的評審團進行審查。透過審查制度，只有最高品質的網站才能被 Awwwards 接受，這也是它可以成為真正獨特和創新的網站設計靈感重要來源的主要原因。
Pinterest | 各種網頁設計範例的靈感來源
雖然Pinterest最初不是為網頁設計或是平面設計而設計的，但 Pinterest 已經發展成為一個大量網站設計靈感來源的平台。Pinterest的搜尋與操作非常容易使用，同時也提供多種不同的設計類型可供選擇，因此你可以在 Pinterest 上輕鬆找到許多優質的網頁設計靈感。
BestWebsiteGallery | 提供優質的網站內頁設計範例
Best Website Gallery 是一個令人驚嘆的網站，裡面充滿了由設計師兼開發工程師 David Hellman 所精心挑選的精美、高質量的網站設計案例。 David 已經創建網站超過 15 年了。他對網頁設計的熱情體現在他的作品中，其中包含來自數百個網站的大量網頁設計和畫面截圖，由他精心挑選並在Best Website Gallery 中展示。 該網站提供了大量的內頁設計畫面（如關於我們、產品介紹或服務介紹等頁面），是網頁設計靈感的重要來源。
Interbrand | 全球百大品牌排行榜
https://interbrand.com/best-global-brands/
當你絞盡腦汁想要找全球百大品牌的公司網站時，Interbrand提供你每年的全球百大品牌排行榜。你可以透過不同的產業找到各個產業的標竿品牌，再搜尋他們的官網，看看全球一流品牌的官方網站都怎麼呈現。
還是對網頁設計沒有一點靈感嗎？來看看更多參考案例：上哪找免費網頁設計範例、網站作品案例？推薦10個網頁設計師最愛的設計參考網站
挑選公司網站參考案例有4個重點
網站參考案例影響業主與網頁設計師之間雙方面的溝通，選擇一個適當的網站設計案例將會讓雙方面的溝通更為順暢、目標更聚焦。在尋找合適的參考案例時，通常會考慮以下幾個因素：
看風格，該網站案例的設計風格是否適合你的品牌？
你應該選擇設計風格與你的品牌相似的案例，以確保公司網站與品牌形象保持一致。品牌調性通常由品牌標誌(LOGO)、色彩、圖像等幾個關鍵的視覺元素所定義，其中又以色彩最具關鍵。因此，挑選幾個跟企業色、品牌色一致的網站案例，或是挑選跟你的品牌標誌調性相似、擁有類似設計元素(點線面、造形、紋理)的網站案例，將可以做為未來網站提案設計參考的依據。
此外，每個產業通常也有既定的視覺風格，例如律師事務所需要一簡潔俐落的專業形象、幼兒園需要溫馨親近的品牌調性。若是想要與同業建立品牌區別，可以採用與同業差異較大的視覺風格，然而，也要留意當視覺調性設計不良時，則可能出現反效果。
看體驗，該網站案例的操作介面與使用體驗是否順暢？
網頁不是海報、印刷品，不僅僅是拿來看，還要實用，因此網頁的操作是否順暢、使用介面是否清楚易懂，就會是好的網站案例參考。好的使用體驗包含指引清楚的操作介面，流暢的閱讀動線，沒有過多的網頁特效導致使用者分心或增加等待時間。當公司官網具備良好的使用體驗，能讓來訪的客戶在網站上操作流暢，同時對公司品牌形象也會帶來良好的品牌印象。
看功能，該網站案例的功能是否符合你的需求？
當你所選擇的案例具有你公司所需的功能，例如：加入詢價車、產品篩選、聯絡表單填寫、產品比較等，可以用來向公司內部展示你希望未來網站所能提供的互動性功能，同時也可以提供給外部設計師確切了解你對網站功能的期望。
看架構，該網站案例的架構是否適合你的產業？
網站架構經常是在挑選案例時比較容易被忽略的一個項目，同產業依公司規模的不同，網站架構也會有所不同。例如同樣是電子零組件製造業，也會有大公司小公司，公司規模的大小會決定網站架構的多寡。選擇跟你規模相似的競爭對手的網站案例，可以用來參考網站架構的規劃。另外，選擇與你行業相關的案例可以幫助設計師理解你所在的產業，用來幫助你規劃設計適合的網頁版位區塊配置。
閱讀更多：網站架構有規劃參考範例圖？跟著步驟一起從頭規劃網頁架構表！
影響網站設計視覺風格有哪些關鍵因素？
影響網站設計風格的要素有很多，包括：是否依循企業品牌識別的色彩計劃？你的目標客戶群在哪裡？你的網站是否能與競爭對手有所差異化？是否有採用主流的網頁技術讓網站做最佳呈現？還有哪些流行趨勢也該考慮進去？這些都是在著手網站視覺風格方向時應該要考慮的因素。就讓我們一一解說為什麼這些因素會影響網站視覺風格的呈現。
企業品牌識別
企業品牌識別是用來向市場傳達公司品牌形象的一致性設計元素，包含了品牌標誌(LOGO)、色彩計畫、字體家族、圖像及相關設計元素運用等。網站設計是企業品牌識別的延伸，當然在網站設計上也應符合公司的品牌形象，保持企業形象的一致性。
目標客戶群
網站的目標使用者通常是公司的目標客戶，不會是公司高階主管、更不會是老闆。因此網站設計應配合公司的目標市場，以確保設計能吸引所需的客戶。如果你的目標客戶群在歐洲，網站設計就該優雅俐落；如果目標客戶群在美國，網站設計就該直白易懂；如果目標客戶群是整個國際市場，網站設計就該簡潔明瞭，以適應跨國多元文化。
競爭對手
網站設計通常會將競爭對手的網站設計納入研究範圍，以確保自己的網站設計具有競爭力。競爭對手的網站不一定是最新改版或符合流行趨勢的，但從網站架構和內容規劃通常能看出同產業的設計慣例。透過競爭對手網站的研究，可以幫助我們了解整個產業的潛規則，設計出符合業界習慣或需求的網站。
網頁技術
在考慮網站設計視覺風格的過程中，網頁技術也會是考量的要素之一。舉例來說，RWD響應式網頁出現前後的網站風格就有很大的差異。由於RWD網站設計讓網頁版面不再是固定尺寸，所有的網頁元素都是液態流動的。另外，採用javascript及CSS網頁技術所呈現的網頁動態，也應該考量。因此網站設計也應考慮當前可用的科技，以確保網站能夠順暢地運行。
流行趨勢
網站設計和許多當代設計一樣，都具有流行性，決定網站風格的當下，也應考慮當前流行的網站設計趨勢，以保持最新的外觀和感覺。
延伸閱讀：2021形象網站設計的10個網頁設計趨勢
首頁是決定網站風格的關鍵，有哪些常見的視覺風格？
首頁是網站的第一印象，它可以向訪客傳遞品牌形象和產業背景。每種風格都有自己的特點，你可以根據網站的目的和受眾選擇適當的風格來決定網站首頁設計。一般來說，網站有以下幾種常見的視覺風格：
簡約設計風格網站
簡約設計風格的網站通常以簡約、大氣的設計為主，採用簡單大方的版面配置，同時避免使用太多的色彩和對比強烈的圖像。色彩方面運用如淺灰色、淡雅、粉色等柔和的色彩。簡約風格設計需要運用較多的留白讓整個畫面有足夠的呼吸空間，避免使用過多的設計元素和裝飾。可使用優雅、清晰的字體以及細緻的線條或設計元素來營造舒適、輕鬆的氛圍。
參考案例：HarvestOne 品牌網站
時尚雅致風格網站
時尚雅致風格網站的特色是布局俐落大方卻又不失細節，以精巧的設計疊砌出更豐富的層次感，選用明亮帶有溫度的圖片及配色，讓整體呈現和諧高雅的風格。此類網站適合作為精品或時尚品牌形象網站使用，藉以在網站中呈現獨具品味的產品及美學。
參考案例：Dalloway 品牌形象網站
清新自然風格網站
以自然素材和輕淺色調帶給使用者宜人的視覺體驗是清新自然風格網站的重點。用色以大量的白色、米色為主，佐以綠色元素，使整體呈現寧靜舒適的氛圍，適合作為自然、環保等行業的網站，清新明亮的風格也很適合作為質感居家產品的官方網站，讓消費者從網站就能感受到品牌想傳遞的理念。
參考案例：ChenSource 企業形象網站
溫馨愜意風格網站
溫馨愜意風格網站以傳遞溫度為最大的目的，暖色調與手繪風圖片會是這一類型網站的常出現的素材。若是想編織出溫馨休閒的氛圍，或是試圖拉近與使用者的距離，可以選擇類似風格作為網站的首頁設計。
參考案例：長寬高公司形象網站
獨特形象風格網站
上述風格以外，當然也能依照想呈現的主題做獨一無二的創新設計，不受限於固定風格，擁有鮮明搶眼的特色網站。相較前述風格明確的網站，這一類型的網站需要特別注意色彩搭配的協調度，以及整體編排能否兼具閱讀性，避免影響到使用者體驗。
參考案例：LEX博來企業網站
首頁規劃的版面區塊有哪些？
首頁是網站的門面，是第一次向訪客展示網站內容的地方。訪客在造訪網站時，首頁是他們最先看到的畫面，因此首頁設計對於網站整體風格具有決定性的影響。如果首頁設計能夠吸引訪客的眼球，並讓他們有興趣繼續浏覽網站，則可以提升網站的用戶體驗。
以公司企業網站來說，首頁通常會規劃以下幾個區塊：
頁首(Header)
頁首通常是指網頁最上方的位置，包含企業的品牌LOGO、主選單、站內搜尋、語言切換等功能列。
主視覺
主視覺通常位於首頁的最上方，用來營造網站給人的第一眼印象。也可以採用輪播圖的方式，用來展示企業的產品、服務或活動。
主要內容區(公司簡介、產品或服務項目、最新消息)
主要內容區通常位於輪播圖下方，是網站首頁的核心內容，包括公司簡介、產品展示、新聞資訊等。
頁底(Footer)
頁底通常包含企業的聯絡方式、社交媒體連結、版權宣告等。
延伸閱讀：網頁設計中的版權宣告(Copyright©)應該怎麼寫？
首頁設計通常會經歷哪些流程步驟？
1. 需求探索、蒐集提案資源
網頁設計師會先與客戶討論網站目標、目標使用者、功能需求等，以便瞭解網站首頁設計的目標期望。同時也會分析競爭對手的網站，以便瞭解市場的情況和最新的設計趨勢。
2. 製作首頁提案稿
完成需求探索後，網頁設計師會根據討論後的結果確立首頁的設計風格、版位配置，開始進行首頁提案稿的製作。由於提案稿的目的是用來和客戶確認網頁設計風格的方向目標，因此通常會採用版面剪貼的快速設計模式，依報價多寡提供出2~3個風格及版位配置不同的提案稿，讓專案相關人員及決策主管進行討論，決定網站的視覺風格、配色比重、設計元素、字體運用，決議後於下一階段進行正式的首頁設計稿。
3. 製作首頁設計稿
根據提案稿討論後的方向，設計師們在這個階段製作出與實際網頁相似度達90%的首頁設計稿。這個階段在設計圖稿中所採用的圖片、文字都將盡可能採用實際而不只是剪貼模擬的企業LOGO、產品圖、情境圖、文字。首頁設計的目的不只是用來定義網站的視覺風格，同時也將用來提供後續網站各內頁設計的依據，延續並建立網站一致性視覺設計的標準。
4. 首頁最終定稿
在設計及製作的過程中，多多少少會有一些調整和修改，修改次數以「事不過三」為原則，在3次的討論中完成所有修改。完成修改後，網頁設計師會製作最終設計稿，並與客戶簽署設計確認文件。
委託網頁設計師進行首頁設計時，需準備哪些圖文素材？
委託網頁設計師進行網站首頁視覺設計時，您可能需要準備以下圖文素材給設計師：
網站參考案例
每個人對於設計風格都有不同的主觀認定，你覺得生動活潑的定義，不一定跟別人一樣。如果你有喜歡的網站，可以提供給設計師參考，也讓設計師了解你對設計風格的感覺是什麼。提供參考網站案例除了可以用來溝通網頁設計風格外，也可以用來溝通你想要的介面設計或功能設計，透過視覺畫面的討論，可用來確認雙方面對網頁設計的想法或認知是否一致。
企業品牌識別 / LOGO電子檔
企業品牌識別包含品牌標誌(LOGO)、色彩計畫、字體家族、圖像及相關設計元素運用等，準備完整的企業識別資料有助於讓設計師對你的企業品牌有完整的了解，並採用適合的設計方式運用到首頁設計中。如果你手上沒有完整的企業識別資料，至少提供LOGO電子檔(向量格式)給設計師。向量格式(通常是*.ai檔)的LOGO檔可以讓設計師自由縮放圖像尺寸而不失真，讓企業LOGO在網站上做最佳的呈現。
公司簡介文字
包括公司簡介(約200字內)、產品或服務介紹、目標市場說明等。公司簡介盡量提及企業所提供的產品項目及服務名稱，不僅能讓首次到訪的客戶確實了解公司的營業項目，同時也能讓google抓取進入索引資料庫，有助於提升公司網站搜尋排名。
產品圖片 / 形象圖片
如果你的公司主要銷售產品，那麼你需要準備品質好的產品圖片，讓設計師可以充份發揮。如果你有委託專業攝影師進行形象拍攝工作，那將會使整個網站視覺形象加分，不僅真實呈現公司形象，同時也能讓人感受到企業文化溫度。
網站首頁版面及功能需求
包括首頁的目標受眾、版面區塊配置、視覺風格需求、功能需求等。首頁設計就像是一頁式的公司簡介PPT，必須在短短幾個區塊完成公司介紹，至少讓訪客在首頁就能了解公司的定位、銷售產品或販賣服務、企業優勢為何。將預期的首頁版面區塊配置提供給設計師，或是與設計師共同討論首頁版面配置，透過首頁版面配置的巧妙安排，就能將公司特色呈現出來。
其他補充資料
如果有其他資料，如產品目錄、公司簡介PPT簡報、產業背景報告等，也可以提供給設計師。產品目錄可以讓設計師了解產品分類結構(兩層或三層)、產品頁文字資料多寡，用來思考未來與產品頁面設計的銜接。公司簡介PPT簡報和產業報告這兩項，可以讓設計師對於你的公司背景概況有基本的認識與了解，設計師不一定對每個產業都很了解，不同的產業在網頁設計上都有不同的設計慣例，透過這些補充資料可以讓設計師快速了解你的產業定位，將企業優勢突顯出來。
了解如何挑選網站設計案例後，你也可以參考凱士網頁設計作品，看看是否有合適的參考範例。若是打算將設計工作交給網頁公司，該如何在眾多的網頁公司找到適合自己的呢？下一篇我們將分享挑選網站公司的原則與應注意事項，讓你不怕踩到雷：
網站/網頁設計公司這樣挑不踩雷！5大原則教你找到專業設計公司
＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司
|
網站設計服務諮詢 為什麼推薦台中網頁設計公司凱士數位？位於台中的凱士相對有機會接觸到各種不同的產業面向，擁有各種產業的網站設計經驗，幫助企業提升網路品牌形象，建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求，歡迎聯絡我們。
您可以直接填寫諮詢表單；撥打諮詢電話 04-22210688；或加入凱士LINE由專人與您聯繫。 |
|
Eric Wang 凱士網頁設計公司 專案顧問 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。
|
好的形象網站設計，可以幫助公司提升品牌形象與企業價值，透過清楚的網站架構與視覺設計，造就良好的使用體驗與企業形象。
需要網站設計服務嗎？
凱士為您設計製作優質網站
形象網站、公司網站、企業網站、
及各類型客製化網站系統平台
