fbpx

現代網頁設計的工作流程 : 從線框圖到風格指南

Contents

使用線框圖、樣式指南、Photoshop、Zeplin 和 Invision 應用程式,讓您的網頁設計流程簡單有效

要求 

對 Adobe Photoshop CC 有很好的基礎

從這 7.5 小時的課程,你會學到

  • 學習響應式網頁 ( RWD,Responsive Web Design ) 設計專案的專業過程
  • 了解要從客戶端獲取專案詳細資料要問什麼問題
  • 設計簡介 ( Design Brief ) 應該包含哪些內容?
  • 學習所有在專案中建立和使用心情板 ( Mood Boards ) 的一切須知
  • 了解創想 ( IDEATION ) 過程(早期草圖)
  • 設計和開發不同螢幕(如PC、平板電腦或智能手機)的網格 (Grid ) 系統
  • 使用 Balsamiq Mockups 設計線框圖 ( Wireframes )
  • 如何設置響應式網頁設計的網格 (Grids ) 和指南 ( Guides )
  • 了解開發人員的思維-“開發人員如何將你的設計編寫為程式碼?”
  • 如何為開發人員設計和發展程式設計的風格指南 (Style Guide )
  • 建構原型以顯示網站流量和互動
  • 使用 Zeplin 創建線上風格指南
  • 如何為開發人員做設計
  • 了解設計框架 ( frameworks ),如原子設計 (Atomic Design ) 或內容 (Content ) 首要方法
  • 學習如 Zeplin、Balsamiq Mockups 和 Invision App 等工具

說明

更新 ► 2020 年 10 月(添加了關於 Figma 和 Adobe XD 的新講座)

通過此網頁設計課程,使您的網頁設計過程變得簡單、有效且輕鬆

過去幾年來,傳統 Web 設計師的工作發生了巨大變化。為每個螢幕設計(響應式網頁設計)並不容易。像這樣的問題會讓每位年輕的網頁設計師一直思考,像如何改變佈局?如何為響應式網頁設計設置網格?哪些內容要隱藏和顯示?

現在於每個 Web 設計專案中,我們的設計師

  • 收集專案需求(來自客戶和用戶)
  • 草繪早期的想法
  • 把那些想法以線框圖 (wireframes )表現
  • 將線框圖轉換為模型 ( Mockup )
  • 為開發人員準備規格和風格指南
  • 創建原型以展示流程和互動
  • 如何在 Photoshop 中設計網站的響應式視圖
  • 通過改進您的網頁設計工作流程來節省時間

每個現代設計師在 Web 設計過程中使用超過 2 到 3 個工具。設計人員還需要經常與開發人員合作,解決所有遇到的問題。

所以在這個課程中,我將向你展示創建響應式網頁設計的現代流程,從收集客戶的信息和設計簡介到製作草圖、線框圖和原型,甚至開發人員的風格指南。

本課程將學習的工具包括

  • Adobe Photoshop 
  • Balsamiq Mockups   
  • Figma
  • Adobe XD   
  • Zeplin App   

你將在本課程中觸及的設計框架

  • Atomic Design framework
  • 8-Point Grid System

最後我將向網頁設計師展示其他類似的線上應用程式,並比較其優缺點。

現在,如果你準備好學習現代網頁設計,並成為頂尖的 Web 設計師

現在就參加這課程吧 !

目標受眾

  • Web 設技師
  • UI 設技師
  • Web 開發者
  • 圖像設計師
  • 創意總監
  • 專案經理
  • 前端開發者

關於講師  

Ahsan Pervaiz UI/UX 互動設計專家 + 自由工作者 ( 更多講師主講課程介紹 )

8年前我開始了自由工作工作的生涯,自己學習了一切,我從頭開始,最終為INTEL、PANASONIC和可口可樂等500強企業工作。

在剛滿1年連續做UI設計,我在 DRIBBBLE 上獲得一席之地。

與可口可樂的藝術總監與來自英國的專案經理,讓我在短時間內學到了很多東西。

從應用圖標設計到應用UI設計,從線框(Wireframe) 、原型(Prototype) 到 模型(Mockup) 設計,我渴望從各個方面完善用戶界面。

我有多種才藝,曾獲得一枚金牌,獲得PANASONIC全國海報設計大賽,並贏得了許多著陸頁設計比賽。

與世界各地的客戶,大部分來自美國、澳大利亞、英國和阿拉伯聯合酋長國,合作。同時學習自由工作時如何應對客戶,以及如何跟他們展現你的作品。

雖然我6年前開始做UI設計師,但從2002年就開始使用 Photoshop。

我的最終目標是幫助更多人成為很棒的 UI設計師,並讓剛入門 UI設計領域的人更無痛、容易地學習。


  • 點選這個✨優惠連結✨ ( NT390 起特價中 ) | Udemy 永久擁有課程 ( 在電腦瀏覽器登入,點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣

不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: