經(jīng)驗(yàn)分享！教你設(shè)計(jì)自個(gè)兒的WordPress主題

@十萬個(gè)為什麼 ：如果你是個(gè)網(wǎng)頁設(shè)計(jì)師，并且經(jīng)常使用wordpress，你可能會(huì)喜歡這個(gè)案例研究，我將展示我設(shè)計(jì)wordpress主題的過程。盡情享用吧！

幾個(gè)月前，我應(yīng)Slocum Themes之邀接受一項(xiàng)挑戰(zhàn)，為博主們設(shè)計(jì)wordpress主題。理念是運(yùn)用所有wordpress默認(rèn)功能，創(chuàng)造一款簡潔有效的主題。

我決定從社交媒體汲取靈感。畢竟，社交媒體的升級(jí)版可以被看作微型博客。對于像facebook、twitter、google+和pinterest這樣的社交媒體平臺(tái)如何展示文章，我做了一些研究，尤其是帶照片的文章，然后Socialize就誕生了。

網(wǎng)頁設(shè)計(jì)推薦教程：

《PS教程：教你設(shè)計(jì)有范兒的個(gè)人作品時(shí)間軸網(wǎng)頁》
《PS經(jīng)典教程：從零開始設(shè)計(jì)一個(gè)漂亮的網(wǎng)頁》

設(shè)計(jì)過程

第一步永遠(yuǎn)是在紙上畫線框圖，然后在Photoshop中進(jìn)行設(shè)計(jì)，再是編碼。鑒于是wordpress主題，我能夠列出網(wǎng)站所有的組件和元素，所以我決定遵循基本的wordpress博客樣式（頁頭、主體、側(cè)邊欄、頁尾），不用畫太多線框圖。

相反，我想創(chuàng)建一套樣式指南，所以我將一切分解，一次設(shè)計(jì)一個(gè)組件，保持整體設(shè)計(jì)的統(tǒng)一。我只在所有組件完成后，才將它們組合起來，而非采用常規(guī)方式，首先設(shè)計(jì)首頁再是內(nèi)頁，我想要?jiǎng)?chuàng)造一套能夠用在所有頁面的可靠的指南。

文章組件

考慮到這一點(diǎn)，我認(rèn)為我的關(guān)注點(diǎn)應(yīng)該在博客最重要的元素——“文章組件”上，它在首頁上要如何展現(xiàn)，才能吸引用戶深入閱讀。所以這就是一切的起點(diǎn)。我將文章組件分解為更細(xì)微的元素，例如：

• 文章日期
• 文章作者
• 文章標(biāo)題
• 文章縮略圖
• 文章描述
• 操作項(xiàng)

我決定忽略某些其他的常見元素，例如分類、標(biāo)簽、評(píng)論數(shù)。

畫了幾稿后，我對于自己想要設(shè)計(jì)什么有了固定的概念。我不是在重新發(fā)明輪子，而是在試圖簡化它，如今多數(shù)博客主題有著數(shù)量驚人的選項(xiàng)，我的理念是讓它在桌面和移動(dòng)設(shè)備上都保持簡單有效。

隨著第一個(gè)也是最重要的組件完成，我列出其他所有需要設(shè)計(jì)的組件和元素。

• 顏色
• 字體
• 柵格
• 圖片
• 導(dǎo)航與按鈕
• 側(cè)邊欄
• 頁尾
• 文章翻頁
• 文章評(píng)論

顏色

由于主題會(huì)有各種配色方案，使用多少顏色，用在哪里就顯得很重要。我是這樣分解它的：

• 主色
• 輔助色
• 背景色
• 文字顏色
• 鏈接顏色
• 鏈接
• 鼠標(biāo)懸停狀態(tài)
• 鼠標(biāo)點(diǎn)擊狀態(tài)

一旦顏色指南創(chuàng)建好了，可以使用Adobe Photoshop輕松將它換成另一套顏色，降低飽和度到黑白，再覆蓋一層所選的顏色。

字體

下一步是定義一套字體結(jié)構(gòu)基準(zhǔn)，用來指引首頁和內(nèi)頁的文章。這個(gè)項(xiàng)目中，我所選的字體是Source Sans Pro，由Adobe出品的一款無襯線字體，在用戶界面中表現(xiàn)良好。盡管我在photoshop中創(chuàng)建了一套簡易指南，還需要編碼出一套完整版以供參考（查看字體指南）。

柵格

我創(chuàng)建了一套對于帶有側(cè)邊欄的博客非常有效的柵格系統(tǒng)，流式布局，完全是響應(yīng)式的，最大支持1200像素寬

圖片

盡管主題是響應(yīng)式的，某些圖片的尺寸會(huì)根據(jù)屏幕尺寸變化，我還是想根據(jù)柵格設(shè)定最大和最小尺寸。

導(dǎo)航與按鈕

導(dǎo)航保持非常簡潔，顏色效果由我所選的色彩決定，為了保持整個(gè)主題的一致性。

側(cè)邊欄和頁尾

頁尾和側(cè)邊欄用的是相同的組件，所以我將它們設(shè)計(jì)成一個(gè)，唯一不同的是，頁尾的背景色使它的組件略感不同。

文章和評(píng)論組件

要完成我樣式指南中的所有組件，還差文章和文章評(píng)論組件。

最終的設(shè)計(jì)

一旦我的樣式指南完成了，我只需要把一切拼湊起來，我編寫了HTML和CSS，交給我在Slocum Studio的朋友把它處理成wordpress主題。有些元素在編碼過程中有輕微的改動(dòng)。

這是最終的首頁，這套主題完全是響應(yīng)式的，特色是支持8種不同色彩。

WordPress主題演示地址

http://slocum.me/slocum-themes/socialize-pro/

原文地址：abduzeedo
譯文地址：colachan

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量67萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：