I need inspiration: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
 
(37 intermediate revisions by the same user not shown)
Line 2: Line 2:




== competition / show cases ==
== Classification ==
Show cases
=== Show cases / UI / APP design ===
* [http://dribbble.com/shots/popular Popular show cases on dribbble.com]: "Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects." <ref>[http://dribbble.com/site/about Dribbble - About]</ref>
* [https://dribbble.com/shots?sort=views Popular show cases on dribbble.com]: "Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects." <ref>[http://dribbble.com/site/about Dribbble - About]</ref> {{access | date = 2023-01-04}}
* [http://www.webindexgallery.com/index.php CSS Galleries / Web Index Gallery]
** 「專門為平面設計師和創意專業人士設立。這個網站提供了一個展示和發現創意作品的空間，涵蓋了各種設計類別，如網頁設計、品牌、動畫和插畫等。可以按顏色、標籤和時間篩選內容，方便使用者發現特定的設計風格或趨勢。Dribbble 也為設計師們提供了一個交流想法、分享作品和相互獲得靈感的空間。」Made with GPT-4 🤖
* [http://www.100daysui.com/# 100 Days UI - FREEMIUM RESOURCES] {{access | date = 2016-01-19}}
* [https://www.behance.net/ Behance 在线作品集]: [https://www.behance.net/search?field=132&content=projects&sort=appreciations&time=week UI/UX projects on Behance] {{access | date = 2016-06-20}}
* [https://www.behance.net/ Behance 在线作品集]: [https://www.behance.net/search?field=132&content=projects&sort=appreciations&time=week UI/UX projects on Behance] {{access | date = 2016-06-20}}
** 「Adobe 旗下的創意作品集平台，涵蓋平面設計、插畫、攝影、UI/UX、動態影像等多元領域。使用者可以建立完整的專案作品集、追蹤喜愛的創作者，並依熱門程度、時間或領域篩選作品，是全球設計師展示與求職的重要平台之一。」Made with Claude 🤖
* [http://www.site.uplabs.com/ Web design and development, Daily – SiteUp] {{access | date = 2016-02-29}}
* [http://www.site.uplabs.com/ Web design and development, Daily – SiteUp] {{access | date = 2016-02-29}}
** 「每日更新的網頁設計與開發資源分享平台，內容包含 UI 素材、程式碼片段、設計靈感等，適合開發者與設計師快速獲取當日精選的實用資源與趨勢動態。」Made with Claude 🤖
* [http://www.heyshow.com/gallery/ 設計畫廊 | 黑秀網 HeyShow.com] {{access | date = 2015-12-10}}
* [http://www.heyshow.com/gallery/ 設計畫廊 | 黑秀網 HeyShow.com] {{access | date = 2015-12-10}}
** 「台灣早期具代表性的華文設計社群網站，畫廊區收錄插畫、平面設計、攝影等各類創作作品，讓設計師與創作者能夠展示作品集、交流創作心得，並認識台灣本地的設計圈生態。」Made with Claude 🤖
* [http://woofeng.cn/inspiration/web/ 黄蜂网woofeng.cn] {{access | date = 2016-09-02}}
* [http://woofeng.cn/inspiration/web/ 黄蜂网woofeng.cn] {{access | date = 2016-09-02}}
** 「中國的設計靈感與素材分享網站，網頁設計欄目彙整大量國內外優秀網站作品，並延伸提供平面、UI、攝影等相關教學與資源下載，是簡體中文使用者常用的設計參考站台之一。」Made with Claude 🤖
* tool: [https://chrome.google.com/webstore/detail/panda-5-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko Panda 5 | News & Inspiration Dashboard] on {{Chrome}}
** 「一款 Chrome 瀏覽器擴充功能，將新分頁轉換為設計靈感儀表板，整合多個設計新聞與作品展示網站的最新內容，讓使用者一開啟瀏覽器就能瀏覽當日的設計趨勢與新聞。」Made with Claude 🤖
* CodePen: Explore [https://codepen.io/tag/nav-bar Pens tagged 'nav-bar' on CodePen] or browse [https://codepen.io/chriscoyier/pens/tags Chris Coyier's tagged pens on CodePen]
** 「前端開發者社群平台，讓使用者以 HTML、CSS、JavaScript 撰寫並即時預覽網頁作品（稱為 Pen）。可依標籤（如 nav-bar）搜尋特定元件的實作範例，是尋找互動效果與版面實作程式碼的實用資源。」Made with Claude 🤖
* [https://muz.li/ Muzli - Design inspiration hub]
** 「以瀏覽器擴充功能形式提供的設計靈感彙整工具，自動蒐集來自各大設計網站的最新作品、文章與趨勢，並整合成單一資訊流，方便設計師隨時掌握業界動態與獲取創作靈感。」Made with Claude 🤖
* ''$'' [https://mobbin.com/ Mobbin — UI & UX design inspiration for mobile & web apps]: Find design patterns in seconds, such as screens, UI elements, flows, and text within screenshots.
** 「付費訂閱的 UI/UX 設計模式資料庫，收錄大量真實 App 與網站的畫面截圖，並依畫面類型、元件、使用流程等分類整理，讓設計師能快速查找特定情境（如登入、結帳）的業界實作範例。」Made with Claude 🤖
* ''$'' [https://www.details.so/inspo The details behind the world's best websites.]
** 「付費制的網站設計拆解分析平台，深入剖析知名網站在排版、動效、色彩與互動細節上的設計決策，適合想學習頂尖網站背後設計思維、而非僅止於視覺參考的使用者。」Made with Claude 🤖


Awards
=== Admin UI Design Showcase ===
Seeking quality admin dashboard design examples for reference.
 
* [https://dribbble.com/tags/backend-dashboard Backend Dashboard designs, themes, templates and downloadable graphic elements on Dribbble]
* [https://elements.envato.com/web-templates/admin-templates/backend Admin Templates Backend Templates - Envato]
* [https://99designs.com/inspiration/designs/admin-panel Admin Panel Designs - 75+ Admin Design Ideas, Images & Inspiration In 2025 | 99designs]
* [https://www.figma.com/templates/dashboard-designs/ 50+ Free Dashboard Design Templates & Components | Figma]
* [https://www.creative-tim.com/templates/admin-dashboard 206+ Admin and Dashboard Template @ Creative Tim]
 
=== Animation effect ===
* [https://www.designspells.com/ Design Spells · Design details that feel like magic]
 
=== Awards ===
* [http://www.csswinner.com/ CSS Winner - Website Awards - CSS Award Gallery for Web Design Inspiration]
* [http://www.csswinner.com/ CSS Winner - Website Awards - CSS Award Gallery for Web Design Inspiration]
* [http://www.cssdesignawards.com/ Website Awards | CSS Awards | Best Websites In The World - CSSDA]
* [http://www.cssdesignawards.com/ Website Awards | CSS Awards | Best Websites In The World - CSSDA]
* [http://www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends] {{access | date = 2016-02-29}}
* [http://www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends] {{access | date = 2016-02-29}}
* [https://www.cssdesignawards.com/ CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards]


Which design is better? Vote by the users.
=== Which design is better? ===
Vote by the users.
* [http://desinion.com/ Desinion] {{access | date = 2016-02-29}}
* [http://desinion.com/ Desinion] {{access | date = 2016-02-29}}


collection of snapshots
=== Landing page ===
* Follow the interests: [https://www.pinterest.com/ Pinterest: Discover and save creative ideas]
* [https://ryuki-design.jp/ 楽天市場のデザイン制作 リューキデザイン｜東京・大阪・福岡]
* [http://emptystat.es/ Empty States] examples {{access | date = 2016-06-06}}
 
=== Presentation ===
* [https://www.instagram.com/p/C0g2P5hRe4B/?igshid=ODhhZWM5NmIwOQ%3D%3D Deck.Gallery 是一個專門為設計師、創業者和市場行銷人員提供簡報設計靈感的平台。 由產品設計師 Muharrem 創建，這個平台讓你可以欣賞到來自全球的精彩設計，也歡迎你提交自己的作品，與大家分享你的創意。 如果你需要專業的設計服務，Deck.Gallery… | Instagram]
 
=== Misc. ===
* [https://www.checklist.design/ Checklist Design - A collection of the best design practices.] 收集了最佳設計實踐 (design practice)，提供全面的收錄。該網站包括了各種設計清單，涵蓋了頁面、元素、流程、主題和品牌等方面，特別聚焦於登入頁面、部落格文章、定價、404錯誤等。 {{access | date = 2023-12-14}}


Subscribe the facebook fan pages
== Community ==
Subscribe the fan pages or community
* [https://www.facebook.com/designtongue 設計大舌頭]
* [https://www.facebook.com/designtongue 設計大舌頭]
* [https://www.facebook.com/fis.workshop/ 空白地區｜Fi（Peng, Hsing Kai）]
* [https://www.facebook.com/fis.workshop/ 空白地區｜Fi（Peng, Hsing Kai）]
Line 33: Line 66:
* [https://www.facebook.com/loveudfish/ 愛˙通用設計的小魚]
* [https://www.facebook.com/loveudfish/ 愛˙通用設計的小魚]
* [https://www.facebook.com/ConversionLab.co/ Conversion Lab]
* [https://www.facebook.com/ConversionLab.co/ Conversion Lab]
* [https://ello.co/discover Featured | Ello]
== Style guideline & UI patterns ==
Style guideline, Design guideline , Branding guidelines, Branding design guidelines
* {{Gd}} '''Collection''': [https://github.com/alexpate/awesome-design-systems alexpate/awesome-design-systems: 💅🏻 ⚒ A collection of awesome design systems]
* [https://playbook.cio.gov/designstandards/ U.S. Web Design Standards]
* Apple [https://developer.apple.com/ios/human-interface-guidelines/ iOS Human Interface Guidelines]
* [https://developers.google.com/web/fundamentals/resources/styleguide/ Visual Style Guide — Web Fundamentals]
* Google [https://material.google.com/ Material design guidelines]
* Salesforce [http://www.lightningdesignsystem.com/guidelines/overview/ Lightning Design System]
* [http://brand.uber.com/ Uber Brand Guide]
* [https://ant.design/ Ant Design - A UI Design Language] {{access | date =2017-05-23}}
* [https://atlassian.design/ Atlassian Design] {{access | date =2017-05-23}}
* [http://design.iing.tw/ 點亮台灣・設計規範 Web Design Guideline] 「點亮台灣 — 蔡英文・陳建仁總統候選人競選官網所制訂的網站設計規範」{{access | date =2017-03-02}} [https://web.archive.org/web/20190718224305/http://design.iing.tw/ 網頁備份]
* [https://codepen.io/frank890417/pen/YGKVrj Project2-Brand Guideline] {{access | date =2018-06-04}}
* [https://heydesign.systems/ Hey Design Systems!]
* [https://tiponet.tipo.gov.tw/TIPO_UIUX/ 設計規範書 Design Guideline · GitBook]
UI patterns
* [https://pttrns.com/ Mobile Design Patterns - Pttrns] {{access | date = 2017-03-18}}
* [http://android.inspired-ui.com/ Inspired UI - Mobile Apps Design Patterns [Android]] {{access | date = 2017-03-18}}
* [https://ui.shadcn.com/ The Foundation for your Design System - shadcn/ui] {{access | date = 2025-10-08}}


== articles ==
Collection of snapshots
* Follow the interests: [https://www.pinterest.com/ Pinterest: Discover and save creative ideas]
* [http://emptystat.es/ Empty States] examples {{access | date = 2016-06-06}}
 
== Articles ==
* [http://www.inspireux.com/ User Experience articles and quotes to inspire and connect the UX community | inspireUX]
* [http://www.inspireux.com/ User Experience articles and quotes to inspire and connect the UX community | inspireUX]
* [http://littlebigdetails.com/ Little Big Details]
* [http://littlebigdetails.com/ Little Big Details]
* [http://www.creativebloq.com/tag/inspiration Latest Inspiration articles | Tags | Creative Bloq]
* [http://www.creativebloq.com/tag/inspiration Latest Inspiration articles | Tags | Creative Bloq]
* [http://designmodo.com/ Designmodo - Web Design Blog and Shop]
* [http://designmodo.com/ Designmodo - Web Design Blog and Shop]
* [https://www.quora.com/Which-websites-should-a-Front-end-developer-look-up-to-for-inspiration Which websites should a Front-end developer look up to for inspiration? - Quora]


 
== Colors ==
== colors ==
* [https://coolors.co/ Coolors - The super fast color schemes generator!] Press {{kbd | key=space}} to generate the new color set
* [https://coolors.co/ Coolors - The super fast color schemes generator!] Press {{kbd | key=space}} to generate the new color set
相關文章: [[CSS_tools#.E6.8C.91.E9.81.B8.E9.A1.8F.E8.89.B2|挑選顏色]]
相關文章: [[CSS_tools#.E6.8C.91.E9.81.B8.E9.A1.8F.E8.89.B2|挑選顏色]]
* Pantone [https://www.pantone.com/hk/tc/color-of-the-year-2022 彩通亞太區 | Pantone Color of the Year 2022 / 介紹] {{access | date=2022-07-14}}
== Examples of bad design ==
* Hashtag #badeesign on [https://www.instagram.com/explore/tags/baddesign/ Instagram 上的 #baddesign 主題標籤], [https://twitter.com/hashtag/baddesign #baddesign - Twitter 搜尋]
* Hashtag #NormanDoor on [https://www.instagram.com/explore/tags/normandoor/ Instagram 上的 #normandoor 主題標籤], [https://twitter.com/hashtag/normandoor #normandoor - Twitter Search]
* [https://www.theuncomfortable.com/ The Uncomfortable - a collection of deliberately inconvenient objects]
* [https://userinyerface.com/ User Inyerface - A worst-practice UI experiment]
* [https://hungryowl.typepad.com/webdesign/ 網站設計大不易]


{{Tips}} [https://99percentinvisible.org/article/norman-doors-dont-know-whether-push-pull-blame-design/ Norman Doors: Don't Know Whether to Push or Pull? Blame Design. - 99% Invisible]


== off topic ==
== off topic ==
Line 55: Line 123:
{{Template:Build a website}}
{{Template:Build a website}}


[[Category:WebDesign]]
[[Category: Design]]
[[Category: Revised with LLMs]]

Latest revision as of 12:06, 31 July 2026

I need inspiration for design purpose


Classification[edit]

Show cases / UI / APP design[edit]

  • Popular show cases on dribbble.com: "Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects." [1] [Last visited: 2023-01-04]
    • 「專門為平面設計師和創意專業人士設立。這個網站提供了一個展示和發現創意作品的空間，涵蓋了各種設計類別，如網頁設計、品牌、動畫和插畫等。可以按顏色、標籤和時間篩選內容，方便使用者發現特定的設計風格或趨勢。Dribbble 也為設計師們提供了一個交流想法、分享作品和相互獲得靈感的空間。」Made with GPT-4 🤖
  • Behance 在线作品集: UI/UX projects on Behance [Last visited: 2016-06-20]
    • 「Adobe 旗下的創意作品集平台，涵蓋平面設計、插畫、攝影、UI/UX、動態影像等多元領域。使用者可以建立完整的專案作品集、追蹤喜愛的創作者，並依熱門程度、時間或領域篩選作品，是全球設計師展示與求職的重要平台之一。」Made with Claude 🤖
  • Web design and development, Daily – SiteUp [Last visited: 2016-02-29]
    • 「每日更新的網頁設計與開發資源分享平台，內容包含 UI 素材、程式碼片段、設計靈感等，適合開發者與設計師快速獲取當日精選的實用資源與趨勢動態。」Made with Claude 🤖
  • 設計畫廊 | 黑秀網 HeyShow.com [Last visited: 2015-12-10]
    • 「台灣早期具代表性的華文設計社群網站，畫廊區收錄插畫、平面設計、攝影等各類創作作品，讓設計師與創作者能夠展示作品集、交流創作心得，並認識台灣本地的設計圈生態。」Made with Claude 🤖
  • 黄蜂网woofeng.cn [Last visited: 2016-09-02]
    • 「中國的設計靈感與素材分享網站，網頁設計欄目彙整大量國內外優秀網站作品，並延伸提供平面、UI、攝影等相關教學與資源下載，是簡體中文使用者常用的設計參考站台之一。」Made with Claude 🤖
  • tool: Panda 5 | News & Inspiration Dashboard on Chrome  
    • 「一款 Chrome 瀏覽器擴充功能，將新分頁轉換為設計靈感儀表板，整合多個設計新聞與作品展示網站的最新內容，讓使用者一開啟瀏覽器就能瀏覽當日的設計趨勢與新聞。」Made with Claude 🤖
  • CodePen: Explore Pens tagged 'nav-bar' on CodePen or browse Chris Coyier's tagged pens on CodePen
    • 「前端開發者社群平台，讓使用者以 HTML、CSS、JavaScript 撰寫並即時預覽網頁作品（稱為 Pen）。可依標籤（如 nav-bar）搜尋特定元件的實作範例，是尋找互動效果與版面實作程式碼的實用資源。」Made with Claude 🤖
  • Muzli - Design inspiration hub
    • 「以瀏覽器擴充功能形式提供的設計靈感彙整工具，自動蒐集來自各大設計網站的最新作品、文章與趨勢，並整合成單一資訊流，方便設計師隨時掌握業界動態與獲取創作靈感。」Made with Claude 🤖
  • $ Mobbin — UI & UX design inspiration for mobile & web apps: Find design patterns in seconds, such as screens, UI elements, flows, and text within screenshots.
    • 「付費訂閱的 UI/UX 設計模式資料庫，收錄大量真實 App 與網站的畫面截圖，並依畫面類型、元件、使用流程等分類整理，讓設計師能快速查找特定情境（如登入、結帳）的業界實作範例。」Made with Claude 🤖
  • $ The details behind the world's best websites.
    • 「付費制的網站設計拆解分析平台，深入剖析知名網站在排版、動效、色彩與互動細節上的設計決策，適合想學習頂尖網站背後設計思維、而非僅止於視覺參考的使用者。」Made with Claude 🤖

Admin UI Design Showcase[edit]

Seeking quality admin dashboard design examples for reference.

Animation effect[edit]

Awards[edit]

Which design is better?[edit]

Vote by the users.

Landing page[edit]

Presentation[edit]

Misc.[edit]

  • Checklist Design - A collection of the best design practices. 收集了最佳設計實踐 (design practice)，提供全面的收錄。該網站包括了各種設計清單，涵蓋了頁面、元素、流程、主題和品牌等方面，特別聚焦於登入頁面、部落格文章、定價、404錯誤等。 [Last visited: 2023-12-14]

Community[edit]

Subscribe the fan pages or community

Style guideline & UI patterns[edit]

Style guideline, Design guideline , Branding guidelines, Branding design guidelines

UI patterns

Collection of snapshots

Articles[edit]

Colors[edit]

相關文章: 挑選顏色

Examples of bad design[edit]

  Norman Doors: Don't Know Whether to Push or Pull? Blame Design. - 99% Invisible

off topic[edit]

reference

  1. ↑ Dribbble - About

Web site design and development process

Retrieved from "https://wiki.planetoid.info/index.php?title=I_need_inspiration&oldid=26417"