乾淨的網站介面:15 個網站設計留白技巧

網站設計 留白設計

擁有一個有吸引力且用戶友好的網站是每個網站所有者的目標,對於業主來說,網站的外觀和感覺至關重要。這是使用者創造他們的第一印象的地方——我們接受或拒絕我們在螢幕上看到的那些短暫的幾秒鐘。網站設計還負責保持每個使用者的注意力並引導他們瀏覽您的內容。

接下來,我們將看看裝飾空白的技巧,以及它們實施的成功案例。

5個使用留白的提示

09cf3ca6138f5f17fb61b2615d72c342
RAFAL CYRNEK設計

元素的位置對於設計師和行銷人員都非常重要,因為訪問者對網路資源的印象取決於他們的進一步行動,讓我們看看在設計網站時如何使用空白。

呼籲採取行動

您有沒有想過使用者注意到網頁上的按鈕,是因為它旁邊沒有任何東西,因此,空間可以作為增加轉化的獨立工具。

產品隔離

如何吸引用戶對產品的關注?將其放在中心,遠離其餘元素。除了吸引注意力之外,留白還可以讓使用者從各個方面評估產品,而不會被其他元素分散注意力。

善用背景圖片

空白不必簡單明了。例如,您可以使用產品照片作為背景圖片,並在中心放置標題和按鈕。

建立元素之間的關係

訪問者將任何頁面視為元素的組合,這是由於我們能夠在一組對象元素彼此靠近時將它們連結在一起。由於相同的縮進,我們在心理上對對象進行分組並理解它們屬於不同的類別。

簡化頁面結構

網頁設計師經常使用分隔線將元素彼此分開。但是,這通常會使佈局混亂,可以使用空格代替行進行分隔。

用戶欣賞與界面交互的便利性。該空間使人們可以流暢而一致地感知資訊,並消除了網站上豐富的裝飾元素:額外的線條、塊、框架等。

10 種成功的網站設計留白運用

讓我們看一些使用空白的好案例,也許能帶給您一些網頁設計的靈感。

劃定空白區域的線框圖

如果您正在設計一個網站,那麼在劃定空白區域之後構建線框是有意義的。

RAFAL CYRNEK設計

適合響應式的留白

您也可以關注此案例,靈活的留白及方框,在響應式設備上可以精巧延展,此設計非常適合網站的行動裝置版本。

1*upM3Z4hnWWIsqHtfIZDtqA
由DMITRY LAURETSKY設計

動畫結構加上留白的應用

看看這個動畫中展示的帶有空白的絕佳作品,同時,網站本身由具有明確定義結構的元素組成。由留白及色塊架構的網頁設計,簡約但又不失風趣。

1* VX3N2XGrPKXjucPy4 3 g
DANIEL MONTGOMERY設計

考慮留白的適應性

在這裡,我們可以清楚地追踪劃分頁面內容的網格。此外,在使用空白空間時,重要的是要考慮適應性,以便內容在不同設備上看起來不錯。

1*SpChxmZGL3hH N4r9t kNQ
HRVOJE GRUBISIC設計

扁平化設計上的留白例子

在這個例子中,白色空間的有效使用在橫向上尤其明顯。此外,我們發現此解決方案是扁平化設計最真實的化身之一。像將實體的雜誌、書籍搬到網站上一樣,精美的留白及排版,讓使用者更想繼續閱讀下去。

由PAULA ŠOBAT設計

靈活精巧的響應式設計

如果您正在尋找能夠有效適應任何螢幕尺寸的響應式設計解決方案,我們強烈建議您關注這個漂亮的選項。

1*06BOdcrvJfi vbA5kFBGqg
HAPPY TRI MILLIARTA設計

圓滑的區塊及空白元素

這是另一個很酷的響應式設計示例,它使用分佈良好的空白元素,在目錄上也是大量留白,大方簡單凸顯選單項目。

1*HgynuGfX59lLaVjjbWN5IQ
TARAS MIGULKO設計

多色介面元素

如果您打算使用多色界面元素,請注意極簡主義和簡潔性,就像以下設計的作者所做的那樣。

1*Bj5SskCGldlUKYKIAw5jQg
由VICE RAKAVINA設計

淺色及深色主題應用

如果您未來的應用程序或網站涉及從淺色主題切換到深色主題,我們建議您分析您的設計在這兩種模式下的效果。下面的示例演示了在淺色和深色主題中正確使用空白。

1*KfVjo56NLONR61fDutb BA
ADRIEN ROCHET設計

深色系設計與留白元素

這是使用深色主題的另一個重要示例,儘管有大量的留白,但這個設計看起來並不空洞和未完成,暗色系主題更增添了神秘風格及設計感。

1*VFqFBAsXbV2 Q5ZuI g71g
HRVOJE GRUBISIC設計

在設計中,空白是負空間。留白不是單純地留下一個空曠的區域,它是被賦予意義及目標的。特別是,它平衡了設計的其餘部分,突出了頁面(或螢幕)上的內容。空白有助於集中用戶的視覺注意力。我們希望我們已經幫助您弄清楚如何使用空白,現在您可以為您的網頁設計選擇最合適的選項。

資料來源:Clean UI Guide: 15 White Space Design Tips

延伸閱讀:

一起學習SEO初學者的SEO指南!

SEO-learning

如果你有任何線上業務,你至少需要了解一些 SEO。無論你是有新架設的網站,或是現有的網站沒有獲得想要的流量,想要改變,就從這邊文章開始!

首先,讓我們快速了解一下搜索引擎優化的確切含義

SEO
搜尋引擎優化

根據 Google 的開發者指南

“搜索引擎優化是使你的網站更適合搜索引擎的過程。”

換句話說,它準確地確定你需要對你的網站進行哪些更改,以使其與搜索查詢更相關。

SEO 的元素分為兩大類:頁內和頁外。

正如你所料,頁面上的 SEO 元素是你網站上的部分。這些包括:

  • 可抓取性和可索引性,即搜索引擎查找和映射你的內容的難易程度。
  • 內容質量和關鍵字使用。
  • 可用性因素,例如加載時間和響應能力,稱為Core Web Vitals。
  • 移動響應能力。
  • E-A-T(Expertise, Authoritativeness, and Trustworthiness):專業知識、權威和可信度。
  • 圖片。
  • 標籤。

另一方面,頁外 SEO 元素是來自域外的排名因素,這主要側重於連結構建和讓其他高質量網站連結到你的內容

現在讓我們開始深入了解掌握 SEO 的分步過程。

掌握基礎知識

Google 最好的是它擁有大量的可用資訊。雖然他們不會透露究竟是什麼驅動了其演算法的秘訣,但這家搜索引擎巨頭出人意料地公開了哪些因素會影響排名,哪些因素不會影響排名。

更棒的是,他們為剛進入該領域的人們提供了一個非常有用的《SEO入門指南》。這是搜索引擎優化如何工作的高級手冊,包括常用術語的定義和獲得排名的基礎知識。

如果你是完全從頭開始你的 SEO 學習之旅,那麼這是一個完美的起點。

它將告訴你如何在 Google 上獲取你的網站、控制抓取的最佳方法以便搜索引擎可以找到你的內容,以及可索引性,這將幫助它了解你的內容是關於什麼的 – 以及它將是什麼類型的查詢很適合。

深入研究技術方面

一旦你確信自己掌握了 SEO 的基礎知識,就該轉向更多技術概念了。

再次,Google 為你的教育目的提供了一些優秀的資源。

進一步學習的好地方是《維護網站SEO的網站管理員指南》,它可以幫助你開始使用中級到高級技術來提高你的排名或處理其他 SEO 問題。

這包括有關如何處理重複內容和規範頁面、使用 robots.txt 文件告訴 Google 哪些頁面要抓取和索引、構建和提交Sitemap 以及幫助 Google 更好地了解你的網站的其他方式的資訊。

根據你網站上的內容類型,你可能需要使用不同的策略來最大限度地提高其曝光率。

例如,影片是一種流行的內容形式,需要額外的 SEO 工作以確保它們的排名盡可能高。

如果你的網站內容只使用了純文本去建構,請務必查看 Google 的特定類型內容規範指南

創建 SEO 流程

至此,你希望對 SEO 是什麼以及它是如何工作的有一個相當好的理解。現在,是時候透過開發和實施你自己的 SEO 流程將學習成果付諸實踐了。

如果你現在手邊有管理的網站,你需要做的第一件事就是執行 SEO 審核,這是一項相當廣泛的工作。

Search Engine Journal 創建了一本電子書,它將引導你使用有用的清單來評估你當前的 SEO 工作的整個過程。

關於監控網站性能,Google Search Console 能夠為你提供了大量分析和資訊,可用於改善網站流量,是不可獲缺的 SEO 工具。

優化你的內容

怎麼誇大你網站內容的重要性都不為過。內容是促使人們訪問你的網站、鼓勵他們採取行動的動力,也是你的網站最初存在的全部原因。

因此,在你完成提升排名所需的後端、技術和戰略工作之後,是時候專注於你的內容了。

你的內容策略應該是你整體策略的重要組成部分。

在這裡,你將創造關鍵字豐富(但不過度填充)的文章,構建一個易於機器人和使用者閱讀的可靠結構,並改善你的整體內容體驗。

建立你的反向連結

你的反向連結告訴 Google 很多關於你的網站的可信度。

例如,如果你連上了其中一個連結農場,即按連結付費的騙局等等(當然,你永遠不會這樣做),Google 可能會忽略這些鏈接。

另一方面,如果《芝加哥論壇報》將人們引導至你的頁面,Google 可能會很好地看待這種認可,並認為該連結很有價值。

Search Engine Journal 同樣創建了一本電子書,讓使用者可以更了解有關構建和維護富有成效的反向連結的所有資訊。

不要忘記使用者

借助搜索引擎優化的所有技術部分,很容易忘記你網站的主要目的:為真實的人提供價值

為了避免你認為 Google 搜索完全由各種演算程序組成,請不要忘記實際的使用者正在驗證演算法的工作。

這些人被稱為搜索質量評估者。他們遵循廣泛的指南來確定 Google 搜索結果如何滿足查詢者的需求並評估你的網頁質量

因此,請始終牢記這一點——即使你投入了所有標題標籤和圖片優化以及響應式設計工作,歸根結底,SEO 都是關於人的

永遠不要停止學習

搜索引擎演算法會不斷發生變化。

其中一些很小,你不會注意到,而另一些則對生成的返回查詢類型進行了重大更改,而這種不斷變化的狀態意味著你不能安於現狀。

幸運的是,網路上有海量的 SEO 資源,包括這個網站,你可以在其中找到所有新聞、資訊,以及與搜索引擎相關的各種主題的更新文章。

適合初學者的免費 SEO 課程

SEO-課程
初學者的免費SEO課程

Coursera 的搜索引擎優化基礎知識這個 13 小時、4 個區塊的數據課程(由加州大學戴維斯分校創建)旨在幫助你了解搜索演算法如何影響自然搜索結果。它涵蓋了從制定有效策略到分析和優化現有網站的所有內容。

Ahrefs 的 SEO 培訓課程該計劃由 SEO 工具軟體提供商 Ahrefs 提供,由 14 節課組成,分為四個區塊,總長度為兩個小時。它將教您 SEO 的基礎知識,包括如何為初學者執行關鍵字研究、技術 SEO 和連結構建。

Shopify 的初學者 SEO 培訓電子商務平台 Shopify 提供 30 分鐘的課程,旨在幫助在線企業家快速掌握 SEO 的基礎知識。本課程將為你提供一個可重複運用的SOP,你可以應用它來幫助提高你企業的搜索引擎排名。

Yoast 的 SEO 初學者培訓另一個 SEO 工具提供商,Yoast 的 SEO 初學者課程包含兩個小時的教學影片、PDF 文件和測驗,以培訓你所學的知識。

WP Courses 的搜索引擎優化介紹: 這個免費課程旨在教你如何為搜索引擎和訪問者改進你的網站。它涵蓋了 SEO 的基礎知識,包括執行關鍵字研究、創建出色的內容以及優化你的網站以獲得最大的排名和流量。

Bruce Clay SEO 培訓 Bruce Clay 被稱為第一個網頁分析工具的程序員。現在,他經營著一家搜索營銷公司(Bruce Clay, Inc.),提供廣泛的數據營銷服務。本線上課程將教你如何以 E-A-T 為重點來提高你網站的排名。它包括 48 個影片、超過 15 小時的教學。

Hubspot 的 SEO 培訓課程此短期課程提供免費認證,並側重於 SEO 的業務影響。包含 22 個影片和 3 個測驗所構建得 6 節課,在解釋 SEO 的工作原理時,它使用 Hubspot 的部落格策略作為核心示例。

資料來源:Learn SEO: A Blueprint From Beginner To Advanced

延伸閱讀:

2022年必須了解10+個網頁設計統計數據

網頁設計

2010年,全球網站用戶超過20億,2021年,超過46億。 為了吸引這個不斷增長的線上用戶群,網站正在快速創建。

2010 年,網​​站數量略多於 2.1 億個。今天,有超過18億。 

要在這個擁擠的線上空間中脫穎而出,您需要了解網頁設計的最新技術和趨勢,以及消費者的行為和期望。為了提供幫助,我們介紹了2022年最重要的網頁設計統計數據。

現代網頁設計統計

1. 50% 的消費者認為網站設計對企業的整體品牌至關重要。(Top Design Firms,2021 年)

在對 500 名消費者的調查中,有一半的人表示網站設計對企業的整體品牌很重要。這表明企業應優先考慮網站設計(或重新設計)以滿足消費者的期望並加強其品牌形象。

2. 當被問及他們看重公司網站上的哪些視覺元素時,40% 的消費者表示圖片、39% 表示顏色、21% 表示影片。(Top Design Firms,2021 年)

圖片、顏色和影片是消費者在公司網站上最看重的視覺元素。考慮到近 40% 表示圖片和顏色、21% 表示影片,您的企業應優先考慮添加圖像和選擇網站配色方案。然後,專注於整合視頻以及提到的其他視覺元素——即排版、信息圖表和動畫。

網頁設計統計:40% 的消費者最看重公司網站上的圖片
網頁設計統計:40% 的消費者最看重公司網站上的圖片

3. 84.6% 的網頁設計師認為擁擠的網頁設計是小企業最常犯的錯誤。(GoodFirms,2021 年)

絕大多數網頁設計師(84.6%)認為擁擠的網頁設計是小企業在創建網站時最常犯的錯誤,這表示您想要結合消費者重視的圖片、顏色、影片和其他視覺元素——但不要過度。採取極簡主義的方法會有所幫助。

4. 42% 的人會因為功能不佳而離開網站。(Top Design Firms,2021 年)

網頁設計不僅僅是製作漂亮的網站,而是關於製作易於使用和瀏覽的網站。如果您的網站不是,那麼很可能很多訪問者會放棄您的網站。在Top Design Firms的一項調查中,42% 的受訪者表示他們會離開功能不佳的網站。

5. 38.5% 的網頁設計師認為過時的設計是訪問者離開網站的首要原因。(GoodFirms,2021 年)

除了無響應的設計和功能問題外,網頁設計師還引用過時的設計作為訪問者放棄網站的首要原因。您可能想知道設計何時會“過時”。根據Business 2 Community的說法,網站的平均壽命為 1.5 至 2.5 。超過這個範圍,一個網站需要融入新的設計趨勢和技術,才能讓人感覺「新鮮」和有競爭力。

6. 39% 的消費者對於網站設計的任何其他組件更在意顏色。(Top Design Firms,2021 年)

39% 的網站訪問者對於網站設計的任何其他組件更關心顏色。這意味著公司應該優先選擇網站配色方案。理想情況下,您的配色方案將強化您的品牌風格,使您的網站易於閱讀和導航至您想去的頁面,並且看起來也不錯。

7. 只有 8% 的消費者在第一次瀏覽網站時會注意到空白。(Top Design Firms,2021 年)

第一次查看網站時,只有一小部分訪問者會注意到空白。然而,這並不意味著它不重要。這個關鍵的設計元素可以幫助吸引訪問者對某些元素的注意力,比如行動呼籲(CTA),並使他們更容易理解和消化你的內容。

8. 26% 的消費者喜歡原色、21% 喜歡互補色、20% 喜歡類似色。(Top Design Firms,2021 年)

消費者對於他們更喜歡哪種類型的配色方案存在分歧:有些人想要主要的,有些人想要互補的,而其他人想要類似的。要了解差異,您需要對色彩理論有所了解。原色方案由一種或多種原色(紅色、黃色和藍色)組成;互補色方案使用色輪上直接相互對立的兩種顏色(如橙色和藍色)以及這些顏色的相關色調。透過將一種主要顏色與色輪上緊鄰它的兩種顏色(如綠色、紫色和藍色)配對,可以創建類似的配色方案

在選擇配色方案時,公司應考慮其產品、服務和受眾。

9. 22% 的消費者第一次訪問網站時會尋找醒目的顏色,但是 21% 的消費者會離開一個顏色“古怪”的網站。(Top Design Firms,2021 年)

由於 22% 的消費者第一次訪問網站時會尋找引人注目的顏色,但 21% 的消費者會離開“古怪”顏色的網站,因此取得適當的平衡很重要。為了幫助為您的網站配色方案選擇醒目但不花俏的顏色,請選擇中性背景顏色,然後使用原色和二次色,可以多多從同行的企業取得靈感。

10. 第一次瀏覽網站時,38% 的消費者會查看頁面的佈局或 header menu。(Top Design Firms,2021 年)

38% 的人第一次訪問網站時會查看頁面上的佈局或 header menu,如果佈局混亂或導覽目錄很難找到,那麼訪問者可能會離開您的網站。

11. 截至 2021 年 11 月,Google.com 是全球最受歡迎的網站,每月總訪問量為 869 億。(Statista,2022 年)

在過去十年中,Google.com 一直是全球最受歡迎的網站。2021 年 11 月,Google.com 以每月 454.1 億次總訪問量位居全球最受歡迎網站的領先地位。自 2010 年 6 月以來,該在線平台一直位居最受歡迎網站的榜首,當時它超越 Yahoo! 成為第一,排名第二的 YouTube 在測量期間產生了超過 143.4 億次訪問。這意味著如果您需要靈感,您可以從他們的網站設計中學到一些東西。YouTube、Facebook 和維基百科是全球第二受歡迎的網站。

統計:截至 2021 年 11 月,全球最受歡迎的網站,按總訪問量(十億)|  Statista
統計:截至 2021 年 11 月,全球最受歡迎的網站,按總訪問量(十億)| Statista

電子商務網頁設計統計

12. 到 2023 年,預計 53.9% 的零售電子商務將透過行動裝置產生。(Statista,2021 年)

行動裝置不僅佔今年全球流量的大部分,還佔零售電子商務銷售額的大部,這為電子商務網站增加了更多動力,以確保它們具有充分的響應能力和對行動裝置友好。

13. 23% 的小型零售企業沒有網站。(Digital.com,2021)

隨著電子商務逐年增長,23% 的小型零售企業沒有網站可能會讓您感到驚訝。一些人認為他們不需要一個——但他們很可能錯過了創造收入的關鍵機會。根據Statista的數據,2020 年美國電子商務收入達到 4316 億美元,預計到 2025 年將增加到 5634 億美元。

14. 24% 沒有網站的小型零售企業回應說他們沒有網站的原因是他們不知道如何創建/運行網站。(Digital.com,2021)

雖然一些企業懷疑擁有網路形象的必要性,但其他企業根本沒有資源來創建一個網站。24% 沒有網站的小企業主表示,原因是他們不知道如何架設和運行網站,用戶友好且價格合理的內容管理系統和網站建設者的興起可能有助於克服這一反對意見並讓更多的小企業上線。

網頁設計統計:24% 沒有網站的小型零售企業表示他們不知道如何創建/運營網站。
網頁設計統計:24% 沒有網站的小型零售企業表示他們不知道如何創建/運營網站。

15. 截至 2021 年 6 月,Amazon 是美國最受歡迎的電子商務網站,每月總訪問量約為 24.5 億。(Statista,2021 年)

由於 Amazon 在為他們的網站帶來流量方面取得了前所未有的成功,Amazon.com 可以為您的網站設計提供靈感。由於商品種類繁多、第三方銷售以及其他設計和功能選擇,它已成為許多線上購物者的首選平台。

16. 85% 的購物者表示在決定從哪個品牌或零售商處購買時,產品資訊和圖片對他們很重要。(Google/Ipsos,2019)

線上購物者使用多種因素來決定從哪些品牌和零售商處購買,大多數人認為產品資訊和圖片是一個重要因素,因此請確保您的電子商務網站的產品頁面針對文案和圖片進行了優化。

17. 60% 的消費者認為可用性是網路商店的重要設計特徵。(Statista,2020 年)

在對近 1,000 名美國消費者進行的一項調查中,60% 的人表示,網站可用性對於他們在網上商店中的重要性。您可以通過使用視覺層次結構、顏色和一致性來提高網站的可用性, 使其盡可能易於使用。

18. 83.5% 的網站開發行業的設計師、開發人員和代理機構發現很難從客戶那裡收集相關訊息和內容。(Atarim,2022)

根據Atarim及其最新案例研究,從客戶那裡收集內容最終是執行和完成項目的最大瓶頸。更令人著迷的是,87.5% 的人仍然使用電子郵件來收集這些內容。

資料來源:25+ Web Design Statistics that Are Essential to Know in 2022

延伸閱讀:

激發靈感!2022 精選8個實用網頁設計推薦分享

網頁設計推薦

要開始設計網站時,常常需要先找看看相似的網站和風格,激發靈感,或是參考大部分的網站是如何設計流程及排版設計網站。事先構想好網頁設計或是找到可以參考的網站,會讓你比較好跟網頁設計公司溝通視覺及功能的部分。

這邊整理了幾個網頁設計、平面設計等相關的網站,可以從這些網站中的作品尋找適合的網頁設計參考及靈感,屬於實用的網頁設計推薦分享給大家!

網頁設計推薦-Awwwards

awwwards 1
Site of the Day

Awwwards 是個指摽性的網頁設計網站,有專業人士在評比網站設計,每天都會推薦 Site of the day,裡面的網站設計通常藝術感較高,有一些漂亮的動畫技術可以參考,很多人都會當作自己的靈感資料庫。很多網頁設計公司會報名自家的作品去評比,獲獎了可以提高自家品牌的知名度,在業界有一定的公信力。

Awwwards

網址:https://www.awwwards.com/
awwwrards
Collection

裡面的 Collection 有非常詳細的分類,從字體、選單設計、hover效果…都有,當你想找特定功能的視覺設計時,可以在這裡好好瀏覽一番,會有意想不到的發現唷。

我們整理幾個比較有趣的內容,歡迎大家也多多去尋找靈感:

網頁設計推薦-WebDesignClip

WebDesignClip
WebDesignClip

此日本網站匯集很多日本網頁設計的優良作品,是個網頁設計推薦網站,目前有 3,393 個網站,是極具創意和時尚的日本網站設計的集合,可用作網頁設計製作的參考。WebDesignClip 立志於推薦許多網頁設計,以跟上激發網頁設計師和開發人員的最新趨勢。

WedDesignClip

網址:https://www.webdesignclip.com/
WebDesignClip 1
不懂日文沒關係,可以利用網站翻譯軟體唷!

主要的大分類為 Japan、World、Landing Page、Smart Phone,細項分類則非常精細,主要以產業區分,更可以用關鍵字、行業(類別)、顏色、佈局等來去搜尋,對於苦惱網站配色或是想參考不同產業、不同佈局的人可以說是非常實用。

網頁設計推薦-WebDesignFile

WebDesignFile
WebDesignFile

此網站也是匯集許多網頁設計作品,搜集的網站內容以英文為主,可以看到很多網站都利用英文字體做許多不同的設計,但網站數較少,分類比 WebDesignClip 更細,也可以用顏色搜尋,若是想設計比較歐美風格的網站或是想找英文排版的網站內容,可以來這裡瞧瞧,找找靈感。

WebDesignFile

網址:http://www.webdesignfile.com/

網頁設計推薦-Muuuuu.org

muuuuu.org
Muuuuu.org

Muuuuu.org 不僅分享的網站質感都不錯,而且網站更新的很快,每個禮拜都可以看到最新的設計網站。

Muuuuu.org 精心挑選並發布了具有垂直長正統佈局且設計精良的網站,這些網站易於製作網頁設計時參考。雖然主要分享日本的網站,有時侯會分享歐美的設計網站,可參考範圍蠻廣的,非常實用。

網站內也有非常詳細的分類,從色系、網站類別(形象網站或購物網站…等)、不同產業、風格到特效類型都分得很仔細,可以很快速的找到想參考的資料,是個可以快速尋找特定靈感的地方!

Muuuuu.org

網址:https://muuuuu.org/

網頁設計推薦-Responsive Web Design JP

JP
RWD JP

這個網站是日本優秀的響應式網頁設計網站的集合,加藤俊發現國外有很多RWD網站的作品網站,例如“Media Queri” ,但沒有專門針對日本RWD網站的作品網站,所以他自己做了這個網站。
此網站本身也是俱有RWD 響應式設計的唷。網站預覽會貼出電腦、平板和手機的尺寸截圖,也有簡單的分類,但是更新比較慢一些。

網站右側也有一些加藤俊司推薦的網頁設計相關書籍,可以說是非常實用呢!

Responsive Web Design JP

網址:https://responsive-jp.com/

網頁設計推薦-Pinterest

pintrest
Pinterest

一進到 Pinterest 的網站,映入眼簾的是圖像瀑布流,有非常多的圖片,是非常多人在使用的設計網站。如何搜尋你想要的東西呢?可以用英文單字串連,例如:movie poster design,越多單字串連越能找到你想要找的核心唷。而 Pinterest 最大的優點是你可以把喜歡、想收藏的圖片「圖釘」起來,可以用自己的方式分門別類。真的非常方便呢!Pinterest 算是非常多人在使用的網站(也有App),趕快去尋找你的靈感吧!

Pinterest

網址:https://www.pinterest.com/

網頁設計推薦-Behance

behence
Behence Adobe

Behance 是 Adobe 旗下用於展示並發現創意作品的平台,匯集了許多設計好手的作品。現今大多的設計師都使用 Adobe 一系列軟體做設計,例如 Illustrator、Photoshop、Lightroom 等等,因此這個網站可以讓使用者選擇你在做這個創作的時候用到了什麼軟體、工具。網站內的分類也很清楚明瞭:平面設計、攝影、插圖、互動(UI/UX)、動態、建築、產品設計、時尚、廣告、美術、遊戲設計、工藝、音效等等。是個非常適合花時間去探索的網站。

Behence Adobe

網址:https://www.behance.net/

網頁設計推薦-Dribbble

dribbble
Dribbble

Dribbble 是一個用於展示用戶製作的藝術作品的線上網站,同時也是用於推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。它是一個讓設計師線上分享作品的龐大平台之一,直接與Adobe旗下的Behance — 最大的設計平台競爭。作品內容較多偏UI、UX、網頁設計等等。在這個網站你也可以找工作或發設計師工作,相關資訊可以親自到網站挖挖寶唷。

Dribbble

網址:https://dribbble.com/

網頁設計推薦網站統整

網頁設計推薦網站內容網址
Awwwards有專業人士評比網站設計的網站作品https://www.awwwards.com/
WebDesignClip日本網頁設計的優良作品https://www.webdesignclip.com/
WebDesignFile歐美風格的網站或英文排版的網頁設計http://www.webdesignfile.com/
Muuuuu.org具有垂直長正統佈局且設計精良的日本網站,每週更新https://muuuuu.org/
Responsive Web Design JP日本優秀的響應式網頁設計網站https://responsive-jp.com/
Pinterest適合尋找靈感的設計網站https://www.pinterest.com/
BehanceAdobe 旗下用於展示並發現創意作品的平台https://www.behance.net/
Dribbble展示用戶製作的藝術作品的線上網站及創造性領域的商業社交平台https://dribbble.com/

延伸閱讀: