一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home 美感養成

5 個靈感滿滿的介面設計參考網站分享

in 美感養成
by Lauren Lin
1 月 20,2021
3 min read

內容目錄

  • Awwwards
  • Dribbble
  • Mobbin Design
  • Muuuuu.org
  • Responsive Web Design JP

開始設計網站以及介面時,不管有沒有想法,常常需要找看看相似的網站和風格,或是參考大部分的網站是如何設計流程,找到幾個範例之後比較容易跟客戶溝通他們偏好的風格,除了 Pinterest 之外,以下分享幾個我很常用到的網站設計靈感網頁:

Awwwards

Awwwards 是蠻指摽性的設計網站,有專業人士在評比網站設計,每天都會推薦 Site of the day,裡面的網站設計和藝術感較高,有炫麗的動畫技術可以參考,每隔一段時間點進去瀏覽都會有新的靈感衝擊。很多設計公司會報名自家的作品去評比,獲獎了可以提高自家招牌的知名度,在業界有一定的公信力。

裡面的 Collection 有非常詳細的分類,從字體、特效到動畫設計都有,當你想找特定功能的視覺設計時,可以進去裡面找看看靈感。

以下是我常常點進去看的 Collection:

  • Image Galleries and SlideShows :裡面可以找到優雅炫技的圖片的轉場動畫。
  • Freelance Portfolios:設計我的作品集網站時都會在裡面找靈感。
  • Parallax:設計網頁時很喜歡使用 Parallax 效果來優化使用者的視覺體驗。

Awwwards Conference

Awwwards 每年都會舉辦網站設計論壇,很多設計公司和設計師都會過去朝聖,是每年的設計盛事之一,每年會邀請各地的知名設計師過來演講,會後也可以和其他國家的設計師互相交流和想法碰撞。

由於 Covid-19 的疫情,最新的 Awwwards San Francisco 官方宣布延後了,如果有興趣了解論壇的最新動態可以到該網站了解:https://conference.awwwards.com/

Dribbble

Dribbble 的網站主要是為 UI 視覺設計的最新分享,和 Instagram 類似,分享形式為圖片和動圖,許多設計師會分享自己最新創作的介面,裡面可以看到最新的 UI 流行設計,像是 Neumorphism、Dard mode、流行很久的 Flat UI 以及最新的 UI 插畫風格都可以在裡面找到。

但比較需要注意的是再參考裡面的介面時需要考慮其實用性高低,有些設計僅為 UI 風格展現,實際上在界面上可以應用的實用度並不高,可能會造成使用者的困惑。

Mobbin Design

設計介面實蠻常會遇到需要參考其他家產品的介面流程,常常需要犧牲自己的個資,申請新的 APP 帳戶親自體會流程體驗。Mobbin Design 提供 APP 的介面截圖,在裡面可以找到優秀的 APP 的使用功能和流程,不用下載不需要的 APP,也不需要把握機會就截圖需要用到的功能,註冊會員後就可以自訂 Library,儲存你需要的流程和介面。

Filter Guide Tour 流程
Filter Search Bar 的功能設計流程

裡面的分類功能分成 Categories、Pattern 和 Element,可以依照自己的需求 Filter 需要的設計。

  • Categories: 依照 APP 的類型和產業來分類,例如:旅遊、影音、教育等。
  • Patterns: 依每個功能的流程來分類,例如:登入流程、日期區間選取流程
  • Element: 依頁面的UI元件來分類,例如:Search Bar、卡片、按鈕等

Muuuuu.org

Muuuuu.org 是還在設計公司時很常用到的網站,不僅分享的網站質感都不錯,而且網站更新的很快,每個禮拜都可以看到最新的設計網站。加上雖然主要分享日本的網站,有時侯會分享歐美的設計網站,可參考範圍蠻廣的,非常實用。

網站內還有非常貼心的分類,從色系、網站類別、產業、風格到動畫特效都分得很仔細,可以很快速的找到想參考的資料,負責新案子的第一步就會在這個網站尋找靈感。

網站語系是日文,看不懂日文的人點選 Google 翻譯就可以馬上翻譯網站內容,資訊零隔閡。

Responsive Web Design JP

Responsive JP 和 Muuuu.org 性質蠻類似的,主要分享日本質感的響應式網站設計,網站預覽會貼出桌機、平板和手機的尺寸截圖,也有簡單的分類,但是更新比較慢。通常我都是 Muuuu.org 找不到適合的網站就會來這裡看看,有時候會看到蠻驚喜的網站。

以上就是我工作時常用的靈感網站,希望大家也可以從裡面順利找到更多的設計靈感!

Tags: UI網頁設計靈感
ShareShareShare
Lauren Lin

Lauren Lin

初入職2B介面設計的菜鳥設計師

上一篇文章

Functional map 原來是這樣啊!

下一篇文章

前端入門選書:HTML&CSS 網站設計建置優化之道

相關文章

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

來做作品集吧!|網站作品集製作心得

來做作品集吧!|網站作品集製作心得

by sanmu
6 月 22,2022

前陣子為了換工作做了新的網站作品集,算了一下目前為止差不多做四五次了,剛好最近朋友也因為公司招人在幫忙審作品集,有討論到一些想法,覺得可以來寫篇分享文章!內容基...

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

by Debby
12 月 28,2021

這篇文章主要是分享之前公司收到六角學院的邀約,參與 F2E PK 賽 的參賽心得紀錄。PK 所製作的內容是『全台公車動態時刻查詢應用服務』活動的目標不是一個月內...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書