MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

你的網站看起來會是什麼樣子?

在你實際撰寫程式碼之前,〈你的網站看起來會是什麼樣子?〉會說明你該為網站做的規劃與設計,決定自己的網站該提供哪些資訊?該使用哪些字型與色彩?網站又該達到哪些目的?

首要:規劃

做任何事之前都需要一些想法。你的網站要達到哪種目的?任何 1 個網站均具備基本作用,但首先你應該保持簡單。我們要先寫出包含了標題、圖像,以及數段文字的簡單網頁。

開始之前,請你先回答下列問題:

  1. 你網站的主題為何?你喜歡貓貓狗狗?想寫城市遊記?或你愛打電動呢?
  2. 你對某個主題所提供的資訊到哪種程度?寫個標題加上幾段文字,或是在網頁上加個圖片。
  3. 簡單的問:你網站的外觀為何?背景顏色?哪種字型比較合適?一般字型?卡通化的字型?又粗又大的字體?還是要纖細淡化的文字呢?

注意:複雜專案就需要更詳細的建構指南,包含所用的顏色、字型、物件之間的留白空間、適合的書寫風格,等等。這些要素有時會統整為設計指南或品牌手冊,你可參閱〈Firefox OS Guidelines〉進一步了解。

從頭設計

接著就是拿紙筆,概略畫出你理想的網站外觀。對自己的第一個簡易網頁,不需考量太多要素或畫得太仔細,應該先養成這個勾勒草圖的習慣。不是要你變成梵谷或畢卡索,但對你以後絕對有幫助!

注意:即便是實際的複雜網站,設計團隊也都會先在紙上勾勒草圖,再接著透過圖檔編輯器或 Web 技術弄出數位版的草稿。

Web 團隊往往編制了圖像設計師與使用者經驗 (User Experience;UX) 設計師各 1 名。圖像設計師當然是負責整合網站的視覺效果;較屬抽象角色的 UX 設計師則要確定使用者與網站的互動方式。

選擇網頁風格

現在開始組合你想在網頁上呈現的內容。

文字

你應該已經準備好了一些文章並分好段落。

主題色彩

可透過選色工具找到你喜歡的顏色。當你點擊其中一種顏色,就會看到如下圖「#660066」的 6 位數字,此即代表該顏色的十六進位 (Hexadecimal) 色碼。請另外找個地方記錄此色碼。

圖片

可透過 Google 的圖片搜尋找到適合的圖片。

  1. 找到你想要的圖片時,點選該圖片。
  2. 按下「查看圖片」按鈕。
  3. 接著在圖片上點擊滑鼠右鍵 (Mac 則是 Ctrl + click),選擇「將圖片另存新檔...」,將圖片儲存到你熟悉的位置。或是可複製瀏覽器網址列中的網址,以待往後使用。

注意:在網路上可找到的大多數圖片,包含 Google 圖片服務在內,都已註冊了著作權。為了避免自己可能違反著作權法,你可以透過 Google 的授權篩選功能。只要點擊「搜尋工具」再找到「使用權限」即可:

字型

選用自己喜歡的字型:

  1. Google Fonts 上捲動清單,直找到你喜歡的字型。你也可以使用左邊的控制功能先行篩選。
  2. 點擊你想要的字型旁邊「Add to collection」按鈕。
  3. 點擊頁面底端的「使用 (Use)」按鈕。
  4. 進入下一頁,捲動到區塊 3 與區塊 4,將 Google 顯示的程式碼複製到你的文字編輯器中,儲存以待稍後利用。

 

文件標籤與貢獻者

 此頁面的貢獻者: SecondSpirit, MashKao
 最近更新: SecondSpirit,