阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

歡迎來到最好的網站,在這裡可以找到網頁設計靈感的範例和想法。使用它們來確定您喜歡的佈局樣式和配色方案。快速克服創作者的障礙並開始填入空白頁。

大多數資源都是免費的,但也有一些付費資源。其中一些是通用的,而另一些則專注於登陸頁面、電子商務和投資組合。甚至還有一些非常小眾的頁腳、導覽和互動範例。

為了讓您更輕鬆找到合適的資源,我整理了綜述。


<a name="multipurpose">多用途靈感</a>

通用網站,您可以在其中找到各種專案的創意,例如業務、登陸頁面、作品集、電子商務等。

網站服務

圖片描述

Websitevice是一個新的網頁設計靈感畫廊,展示了廣泛的範例。您可以根據流行的用例輕鬆過濾顯示的專案。該網站雖然年輕,但發展迅速,並定期加入新鮮內容。


One Page Love

圖片描述

One Page Love是精心策劃的網站和登陸頁面靈感集合。每個特色範例均由頂級機構和製造商按照最高標準設計。您可以從導覽選單中輕鬆選擇所需的用例。


Landingfolio

圖片描述

Landingfolio是網頁設計創意的既定來源。它擁有一系列令人印象深刻的精美且經過行銷優化的商品。除了用例之外,您還可以按頁面類型過濾結果:主頁、定價、關於、註冊等。


Lapa Ninja

圖片描述

Lapa Ninja提供了一系列精心策劃的網站設計範例。訪客可以在用例類別和濾色器之間進行選擇。該資源因其每個專案的多個頁面的完整螢幕截圖而脫穎而出。


Godly

圖片描述

Godly可能是綜述中最具活力的網頁設計靈感資源之一。所有專案封面都是動畫的,不僅僅是展示範例標題。透過查看頁面滾動記錄,您可以獲得更好的概覽。


Siteinspire

圖片描述

Siteinspire在展示最優秀的網頁設計方面做得非常出色,可以讓訪客獲得靈感。大量的專案可以根據風格、類型、主題和平台輕鬆分類。我不明白的是字體太小了,但這不是一個主要缺點。


Maxibestof

圖片描述

Maxibestof是由一位經驗豐富的產品設計師精心策劃的網站設計創意的可靠來源。它易於瀏覽、瀏覽起來很愉快,並且提供了廣泛的類別。每個專案都會在詳細資訊頁面上獲得完整的螢幕截圖。


InspoVault

圖片描述

InspoVault採用了不同的方法,更專注於質量而不是數量。因此,雖然您無法瀏覽數百個網站範例,但至少您一定會喜歡其中的特色範例。特別是如果您喜歡極簡主義、大字體、創意風格。


Landing Gallery

圖片描述

Landing Gallery是精彩登陸頁面設計靈感的家。點擊專案將帶您進入完整的詳細資訊頁面,其中包含完整螢幕截圖、簡要說明、配色方案和專案連結。在過濾方面,您可以獲得頁面類型主頁、定價、關於、聯絡方式等。


SEE + SAW

圖片描述

SEE + SAW具有驚人的動態介面,並為所有網站範例提供高速影片封面。年輕觀眾可能會更欣賞這種方法。對我來說這有點難以承受。儘管如此,在單擊每個專案之前,您肯定會更好地了解每個專案。


Design Vault

圖片描述

Design Vault透過提供不斷成長的網頁設計和 UI 靈感集合,幫助創客釋放創造力。除了常規的桌面螢幕截圖之外,您還有機會瀏覽行動螢幕截圖。商品均經過精心挑選,絕對值得註冊。


Httpster

圖片描述

Httpster只展示來自知名代理商和創作者的最佳網頁設計。專案是根據良好的排版和簡單高效的設計精心挑選的。亮點之一是折疊的側邊欄導航,其中包含類別。您可以在工業風格和設計風格之間進行選擇。


Site of Sites

圖片描述

Site of Sites因其寬大的標題預覽封面和懸停時出現的有用標籤而與眾不同。它是網頁設計靈感的絕佳目的地,由於具有多個過濾器,因此易於瀏覽。詳細資訊頁面具有網格佈局結構的網站片段。


Landings

圖片描述

登陸是網站設計理念尤其是登陸頁面的一個很好的靈感來源。您可以瀏覽 SaaS、行動應用程式、產品和啟動專案,但無法按用例進行過濾。可按深色/淺色主題、顏色和平台進行篩選。


網頁設計靈感

圖片描述

網頁設計靈感是獲取想法和範例的可靠選擇。它有一個廣泛的專案庫,您可以存取多個常識過濾器。使用案例、顏色、設計風格等等。非常有用的一點是,廣告可能會對某些人造成乾擾。


Curated

圖片描述

Curated是一個有用的靈感庫,其中包含根據流行用例建立的網站範例。濾鏡包括風格和圖像類型等。 Curated 之所以能夠脫穎而出,是因為其獨特的商品詳細資訊頁面。無需滾動長螢幕截圖。相反,您會看到一個為您完成滾動的影片。


Admire The Web

圖片描述

Admire The Web是一個美麗的網頁設計思想來源,具有乾淨和現代的設計。沒有討厭的廣告阻礙瀏覽體驗。每個專案都有一個很酷的粉紅色邊框和一個專門的詳細資訊頁面。除了必要的過濾器之外,專案還按標籤進行分類。


設計靈感

圖片描述

設計靈感涵蓋了更廣泛的靈感類型,如包裝、應用程式、建築、室內設計、攝影、書法等。網站設計類別很豐富,但它沒有您期望的常見過濾器。您還需要註冊才能查看完整清單。註冊後,您將獲得額外的功能,例如保存和分類您自己的靈感。


最佳網站庫

圖片描述

最佳網站畫廊是一個結構良好的網頁設計靈感資源,自 2008 年建立和維護。一個很棒的功能是按平台和 CMS 進行過濾。


Lookup

圖片描述

Lookup首先是一個網頁元件庫,其次是登陸頁面靈感展示。主頁上有一個搜尋框,可以快速找到元件範例。從選單中選擇登入頁面會開啟整頁圖庫。不幸的是,沒有類別可以過濾結果。


Unmatched Style

圖片描述

無與倫比的風格是一個豐富的網頁設計靈感畫廊,展示了各種主題的創意範例。您可以透過一組標籤來過濾結果,不幸的是,這些標籤不是最常見或最受歡迎的。不管怎樣,專案的選擇是相當有趣和獨特的。


<a name="focused">集中靈感</a>

為某些用例(如 SaaS、代理、電子商務或暗模式等設計風格)提供靈感的資源。

Saaspo

圖片描述

Saaspo將 SaaS 網站設計靈感提升到一個不同的水平。畫廊被沉浸式的黑暗主題包裹著,使物品看起來更加特別。超過 600 個登陸頁面範例讓您眼花撩亂。除了它們之外,您還可以找到產品、定價、關於、聯絡頁面的專用類別。


SaaS 登陸頁面

圖片描述

SaaS 登陸頁面是一個美麗的登陸頁面畫廊,集中了網頁設計靈感。特色範例由經驗豐富的產品設計師手動策劃。您會看到許多不同的風格,從結果導向到創意,從簡約到擁擠,從單色到鮮豔的色彩。


最佳代理網站

圖片描述

最佳代理網站是一個現代外觀的設計靈感畫廊,專門針對代理網站。高對比的版面和細長的排版展現了策展人高雅的設計品味。每個專案都有一個寬標題預覽封面和詳細資訊頁面上的完整螢幕截圖。


深色模式設計

圖片描述

深色模式設計是一種沉浸式網頁設計靈感資源,僅專注於展示深色模式網站。介面也是深色的,所以一切看起來都非常時尚,即使在某些區域有點粗糙。我找不到任何有意義的過濾器,但並不強制必須擁有它們。


Ecomm Design

圖片描述

Ecomm Design提供的電子商務設計靈感主要基於腳踏實地、以結果為導向的範例,而不是精品傑作。我喜歡這種方法,因為電子商務是為了銷售而不是設計獎項。我喜歡的另一件事是過濾器組,它很有用且有意義。


Commerce Cream

圖片描述

Commerce Cream進一步縮小了電子商務設計靈感的範圍。它展示了專門使用 Shopify 建立的線上商店。如果您認為 Shopify 是最大的電子商務平台,這聽起來並不奇怪。您可以根據您喜歡的用例過濾結果。


StoreFront

圖片描述

StoreFront為您提供一系列精選的獨特電子商務主頁,每週更新一次。全面的過濾器集證明 StoreFront 是一個成熟的畫廊,而不是通常的半成品靈感專案。我只是希望封面加載得更快,這是唯一的小警告。


個人網站

圖片描述

個人網站是一系列鼓舞人心的個人網站的一頁集合。從這些精選範例中汲取靈感,改善您展示品牌、專業知識、服務和聯繫的方式。沒有過濾器來優化結果,您只需繼續滾動即可。


Killer Portfolio

圖片描述

Killer Portfolio是學習如何展示自己、技能和已完成專案以獲得工作和協作請求的頂級資源。每個封面在懸停時都裝飾有獨特的動畫框架。您可以在設計、開發和視訊等一些有用的標籤之間進行選擇。


Pafolios

圖片描述

Pafolios是一個獨特的組合靈感畫廊,由一位出色的產品設計師精心策劃。設計很吸引人,讓您感覺像參觀現代藝術畫廊。有一些有用的類別,如設計師、開發人員、作家、插畫家等。


<a name="niched">利基靈感</a>

範圍狹窄的網站,專注於特定的網站部分、設計風格和動畫強度。

Unsection

圖片描述

Unsection是一個美麗的網頁設計靈感畫廊,具有身臨其境的深色主題和黃色亮點。它專注於網站部分,如英雄、特色、CTA、推薦、部落格、導航欄等。這些是主要類別,但您也可以選擇類型、行業和風格等標籤。


Web Interactions Gallery

圖片描述

Web Interactions Gallery因其高度集中的專業性而獨一無二。網頁版面不同部分的美麗流暢的動畫。這是一個非常令人興奮的網站,展示瞭如何將用戶體驗變為現實。類別經過深思熟慮,使導航變得輕而易舉。


Dead Simple Sites

圖片描述

Dead Simple Sites是一個最小的設計靈感畫廊,由具有基本佈局的簡單網站組成。 「少即是多」這句話的真實證明。如果您正在尋找能夠輕鬆傳達訊息且幾乎沒有多餘裝飾的斯巴達設計,請嘗試一下。


Minimal Gallery

圖片描述

顧名思義,由 Minimal Gallery策劃的網站設計範例具有簡單的佈局,但不一定不那麼有趣。所選設計涵蓋了從單色、安靜到充滿活力、喧鬧的多種品味。可在過濾欄中輕鬆存取基於用例的類別。


Siiimple

圖片描述

Siiimple是一個極簡主義 CSS 靈感畫廊,以來自網路各地的精心挑選的設計為特色。您將獲得一個包含多個選項的大類別選單。唯一的小缺點是過濾器專案混合在一起,並且沒有像您期望的那樣分組到主題中。


野獸派網站

圖片描述

野獸派網站是一群偏離常規、富有特色的網站的原始集合。這裡沒有任何東西符合規範。每件選定的物品都是獨特且不尋常的。感覺就像一個實驗畫廊,非常規地傾向於形式而不是功能。


頁尾

圖片描述

頁腳透過有關該主題的綜合圖庫滿足了對視覺上吸引人的頁腳部分的需求。沒有更多的理由讓頁腳區域變得無聊。從數百個由邏輯過濾器整齊構造的範例中獲取靈感。動畫、平面、網格、明亮、黑暗等等。


導覽列畫廊

圖片描述

Navbar Gallery是一個令人印象深刻的設計靈感來源,完全致力於網站導覽列。數百個導覽列由製造商精心策劃,並按特定類別整齊地建造。介面採用深色模式包裹,並具有美觀且符合人體工學的側邊欄導航。


Landing Love

圖片描述

Landing Love是一個精心策劃的動畫重度網站集合。如果您正在尋找有關如何使您的網頁更具活力的想法,那麼您來對地方了。所有封面都是實際範例的視訊記錄。 Landing Love 的介面是基於歡樂的粉紅色配色方案。


懸停狀態

圖片描述

Hover States是一個與眾不同的庫,其中包含慶祝設計、程式碼和互動性實驗的替代網站範例。您一定會發現一些有趣的物品,激發您的想像。為了改善體驗,封面在懸停時會呈現動畫效果。


異想天開的網絡

圖片描述

異想天開的網站是古怪而有趣的網頁設計概念的家。這是一個讓您放鬆並享受瘋狂創作的地方,而不是工作靈感的來源。範例以時間軸格式展示,讓您可以永遠滾動。


最近的設計

圖片描述

最近的設計展示了來自 X 的最新設計靈感貼文。這是了解設計師和製造商最近在做什麼的好方法,無論是實驗、自由工作還是建立自己的產品。


<a name="paid">付費靈感</a>

商業網站靈感畫廊以合理的費用提供大量物品和額外功能。

新鮮網站

圖片描述

A-fresh Website是一個精心策劃的網頁設計靈感庫,提供數千個範例來提升您的美學。邏輯類別和流行標籤帶來愉快且有效率的瀏覽體驗。除了主頁之外,您還可以找到元件和行動視圖。付款可以存取所有內容。


黑暗的

圖片描述

Dark是一個提供設計靈感的黑暗網站範例的綜合集合。精選的物品都是獨一無二的,絕對能讓你的創意源源不絕。一切都包裹在優雅的深色主題中,讓用戶滿意。付款可解鎖整個目錄和移動視圖。


土地簿

圖片描述

Landbook在風格精美的畫廊中提供了數以千計的精彩網頁設計創意。過濾器的佈局符合邏輯,主要類別位於頂部,次要標準位於頁面下方。除了範例之外,您還可以找到元件和模板。付款可以釋放全部潛力。


我指的是設計

圖片描述

Refero Design是一個龐大的設計靈感庫,超越了網頁內容,包括 UI 元素、UX 模式和字體。網站部分具有精美的封面,描繪了每個專案的佈局和品牌。我在其他畫廊從未見過的獨特方法。付款解鎖完整的詳細資訊。


<a name="portfolios">真實作品與概念作品集</a>

線上作品集網站,創意人士、小型工作室和熱門機構展示他們的專案。

層數

圖片描述

Layers是設計師和創客展示他們的專案、概念和任何能激發他們靈感的東西的平台。它類似於提供與同事互動、工作和協作機會的 Dribbble。我喜歡這個可以改變封面尺寸和細節的功能。


行為

圖片描述

Behance幾乎不需要介紹,因為任何參與設計的人都知道它。儘管最近它失去了一些人氣,但它仍然是您可以沉迷於最新設計趨勢的最大平台之一。


運球

圖片描述

Dribbble是全世界創意人士熟悉的資源。它提供了一種展示設計作品集並獲取回饋的便捷方式。這意味著成千上萬的網頁、行動、使用者介面和印刷專案的靈感非常豐富。大量的例子本身就使得探索起來有些麻煩。


興趣

圖片描述

Pinterest 的存在是為了提供幾乎所有事物的設計概念。它可能是線上空間中最大的靈感畫廊。不幸的是,與其他畫廊不同的是,它對所有人免費且沒有策劃。您會偶然發現許多低品質的帖子,這些帖子會佔用您的研究時間。


<a name="award">獎項畫廊</a>

除了網頁設計靈感之外,這些畫廊還提供了行業專業人士對每個條目的看法。

獎項

圖片描述

Awwwards是由業界專業人士專門策劃的網頁設計畫廊。每天的網站條目都會由專家進行評分,如果符合標準,則會授予享有盛譽的徽章。預計會發現注重視覺效果而不是業務成果效率的藝術和動畫設計。


CSS設計獎

圖片描述

CSS 設計獎是一個時尚的網路畫廊,頂級創作者可以提交他們的作品,以獲得領先設計專業人士的回饋。您可以瀏覽獲獎者和提名者。雙方都有很多值得學習的地方。常識過濾器就像工業和顏色一樣存在。


CSS花蜜

圖片描述

CSS Nectar是一個很棒的網頁設計獎項畫廊,與其他畫廊相比,它收集並評估了更廣泛的參賽作品。您甚至可以從更平易近人的範例中發現並獲得靈感,而不僅僅是由專門的創意團隊建立的傑作。用例過濾器的存在使選擇變得更加容易。


<a name="builder">網站建立者畫廊</a>

網站建立者展示畫廊為渴望創意的網頁設計師提供了大量的靈感。以下是最受歡迎的。


這個清單是基於我在幾年的網頁設計和前端開發工作中收集的許多部落格文章、X 綜述和設計目錄。我過濾掉了很多蹩腳的資源,以節省您的時間,讓您的工作更加愉快。


原文出處:https://dev.to/devluc/50-best-websites-for-web-design-inspiration-and-ideas-be6


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈