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

在開發團隊中,你可能會看到這樣的衝突

工程師: “你的 Idea 很炫,但很難實現,且這麼做以後改版時會很難維護。“

設計師 : ”為什麼工程師做出來的樣子跟我想要的差這麼多?  “

加上現代的網頁設計比以前複雜,必須適應不同網頁載具的螢幕尺寸。

  • 要如何將設計師的想法清楚傳達給所有實現設計的相關者 ?
  • 又如何讓設計師與工程師能彼此了解,一起順利做出客戶想要的產品/服務 ?

本課程教你運用 Balsamiq Mockups、Photoshop、Zeplin 和 Invision App 等做響應式網頁設計的現代流程和工具,幫助你解決以上的問題。

目標受眾

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

從這 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 等工具

說明

  • 最近更新 2017年4月
  • 新課程→在 Web 設計中使用和輸出 SVG

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

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

  • 收集專案需求(來自客戶和用戶)
  • 草繪早期的想法
  • 把那些想法以線框圖 (wireframes )表現
  • 將線框圖轉換為模型 ( Mockup )
  • 為開發人員準備規格和風格指南
  • 創建原型以展示流程和互動

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

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

本課程將學習的工具包括

  • Adobe Photoshop
  • Balsamiq Mockups
  • Invision App
  • Zeplin App

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

  • Atomic Design framework
  • 8-Point Grid System

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

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

現在就參加這課程吧 !

要求 

對 Adobe Photoshop CC 有很好的基礎

關於講師  

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

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

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

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

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

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

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

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

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


課程網址  ♥找優惠折扣碼?

Sponsored by Udemy

也許你會有興趣

喜歡我們的分享嗎?使用以下的社群分享按鈕分享給你的朋友吧!

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: