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

*你的網站看起來會是什麼樣子？*會說明你該為網站做的規劃與設計，決定自己的「網站該提供哪些資訊？」、「該使用哪些字型與色彩？」，以及「網站又該達到哪些目的？」

首要：規劃

做任何事之前都需要一些想法。你的網站要達到哪種目的？任何 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 顯示的程式碼複製到你的文字編輯器中，儲存以待稍後利用。