作為我們更大的品牌重塑項(xiàng)目的一部分，99designs最近對(duì)我們博客的外觀進(jìn)行了徹底的修改。因?yàn)槲覀兪且患以O(shè)計(jì)公司，寫與設(shè)計(jì)相關(guān)的話題，我們想我們應(yīng)該談?wù)劄槭裁矗ㄒ约叭绾危┳鑫覀兯龅氖虑椤?/p>
我們重新設(shè)計(jì)博客
的三個(gè)原因-
我們舊博客上的一篇文章
1。從視覺上看，我們的博客設(shè)計(jì)已經(jīng)過時(shí)了。
我們以前的博客設(shè)計(jì)是建立在兩列布局上的，這使得它看起來(lái)像一個(gè)模板。內(nèi)容雜亂無(wú)章，讓人不知所措，不知道該看哪里。當(dāng)我們?cè)趯戧P(guān)于圖形和網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的文章時(shí)，這兩件事都不能給讀者帶來(lái)信心。
2。舊的設(shè)計(jì)與我們其他的品牌不匹配
事實(shí)上，還不清楚這是一個(gè)公司博客。去年夏天我在一個(gè)會(huì)議上遇到一個(gè)女人，她說(shuō)她每天都在看我們的博客真棒！-她不知道我們除了寫博客什么都沒做。
三。功能不能滿足我們或讀者的需求
我們的文章模板限制了我們向讀者展示的內(nèi)容。這些圖像的最大寬度只有區(qū)區(qū)624倍，沒有任何變化的選擇。我們的導(dǎo)航也很差，導(dǎo)致了很高的跳出率（即使是博客）。最后，我們運(yùn)行了兩個(gè)獨(dú)立的英語(yǔ)博客，以及一個(gè)德語(yǔ)博客和法語(yǔ)博客。這不僅讓讀者感到困惑，而且有四個(gè)獨(dú)立的wordpress后端，它也是一個(gè)需要管理的野獸。
是時(shí)候改變了。
我們博客重新設(shè)計(jì)的6個(gè)目標(biāo)以及如何實(shí)現(xiàn)它們
-
基于上述評(píng)論，內(nèi)容策略團(tuán)隊(duì)與我們?cè)谒阉饕鎯?yōu)化、用戶體驗(yàn)設(shè)計(jì)和工程方面的同事坐下來(lái)討論，并為我們的博客重新設(shè)計(jì)提出了六個(gè)目標(biāo)。
1?？勺x性
文章應(yīng)該美觀易讀。如果我們有一個(gè)良好的閱讀經(jīng)驗(yàn)，人們會(huì)想留在周圍，閱讀更多。
我們?nèi)绾谓咏簩拡D像和窄文本
這個(gè)目標(biāo)分成了幾個(gè)部分：圖像應(yīng)該易于看到，文本應(yīng)該易于閱讀。
香蕉貓王正在打破許多障礙（字面上和隱喻上）。我們還用他時(shí)髦斗篷上的紅色把這篇文章系在一起。本杰明阿姆斯特朗。
如果你想看圖片，你需要把它們放大。根據(jù)上下文，應(yīng)該有多種方式來(lái)顯示它們。因此，我們構(gòu)建了幾個(gè)圖像模板：全寬、靈活的網(wǎng)格和帶文本換行的浮動(dòng)一半。
另一方面，文本應(yīng)該放在一個(gè)相對(duì)狹窄的欄中，這樣讀者的眼睛就不必在屏幕上不斷地來(lái)回跳躍（這使得他們更難保持自己的位置，擾亂閱讀過程）。
為了彌補(bǔ)文本和圖像之間不同寬度的需求，我們?cè)试S我們的圖像打破了中心列的障礙。這還有一個(gè)額外的好處，就是允許我們?cè)陧?yè)面上創(chuàng)建一個(gè)可視化的流。
最后，由于我們希望文章的內(nèi)容成為每個(gè)頁(yè)面的焦點(diǎn)，所以我們決定不采用大的特色圖片趨勢(shì)，而是在文章標(biāo)題上添加了一點(diǎn)顏色。這種顏色是從頁(yè)面上的圖片中提取出來(lái)的，用于所有的標(biāo)題和鏈接中，在文章中創(chuàng)建一種統(tǒng)一的感覺。它也被用在每一篇文章開頭的獨(dú)特的小垂帽上，這會(huì)給人一種微妙的視覺效果，同時(shí)也能把讀者的目光立即吸引到文章中。
當(dāng)然，我們創(chuàng)建了移動(dòng)版和平板電腦版的設(shè)計(jì)，以確保一切都是響應(yīng)和最好的服務(wù)于我們的讀者正在使用的設(shè)備。
2。直覺導(dǎo)航
讀者應(yīng)該能夠很容易地理解和瀏覽我們的博客，并且能夠找到與其興趣相關(guān)的有趣內(nèi)容。
我們是如何做到的：像讀者一樣思考并創(chuàng)建一個(gè)視覺層次結(jié)構(gòu)
你的博客的第一個(gè)目標(biāo)應(yīng)該是讓一個(gè)人讀這篇文章。第二個(gè)目標(biāo)是讓他們讀第二篇文章。要做到這一點(diǎn)，讀者必須能夠很容易地找到下一篇文章閱讀。
我們像讀者一樣思考這個(gè)問題。在合并和重新設(shè)計(jì)之前的幾個(gè)月，我們完全重新設(shè)計(jì)了網(wǎng)站上的類別。我們沒有將它們與內(nèi)部產(chǎn)品或流程聯(lián)系起來(lái)，而是考慮讀者可能要查找的內(nèi)容類型，并以此為基礎(chǔ)對(duì)我們的類別進(jìn)行分類。我們還咨詢了我們的搜索引擎優(yōu)化團(tuán)隊(duì)，以確保這些是谷歌友好。
一旦我們發(fā)現(xiàn)了這一點(diǎn)，我們就可以開發(fā)一個(gè)視覺層次結(jié)構(gòu)來(lái)進(jìn)一步鼓勵(lì)我們的讀者堅(jiān)持下去。在文章頁(yè)面上，我們關(guān)注以下幾點(diǎn)：
- 相關(guān)的文章在頁(yè)面底部，所以如果讀者讀完了一篇文章并喜歡它，他們會(huì)立即與其他一些可能感興趣的文章一起提供。我們確實(shí)有一個(gè)算法，拉這些，但也有一個(gè)手動(dòng)覆蓋，以便我們可以手動(dòng)挑選文章，如果我們?cè)敢猓?qū)動(dòng)交通，我們最希望它去）。
- 標(biāo)簽和作者頁(yè)面也很容易從文章的底部訪問，因?yàn)檫@些可能是讀者希望與我們的內(nèi)容接觸的其他方式。
這篇博文的一些精選相關(guān)文章。想看嗎？滾動(dòng)到底部！
在主頁(yè)上，我們想展示我們內(nèi)容的多樣性，同時(shí)也吸引讀者的眼球。我們構(gòu)建了一個(gè)網(wǎng)格，這樣您就可以很容易地看到各種產(chǎn)品，而不是按時(shí)間順序排列的帖子。我們還在主頁(yè)的頂部發(fā)布了三個(gè)更大的帖子，允許我們展示特定的內(nèi)容。
主頁(yè)上不同大小的圖片會(huì)吸引人們對(duì)我們希望刊登的文章的注意
三。最大化搜索引擎優(yōu)化價(jià)值
我們希望讀者找到我們的內(nèi)容，這意味著我們需要最大限度地發(fā)揮我們的搜索潛力。
我們是如何做到的：基于類別的slug和正確的插件
我們博客70%的流量已經(jīng)來(lái)自有機(jī)搜索。如果我們想提高整個(gè)頁(yè)面的瀏覽量和讀者群，我們需要確保我們?cè)谒阉魉惴ㄉ贤娴煤芎谩?/p>
我們決定做的第一件事是改變我們的鼻涕蟲。如上所述，我們合并了兩個(gè)英語(yǔ)博客。當(dāng)然，每個(gè)博客都有不同的url結(jié)構(gòu)。所以我們需要鞏固。我們決定使用類別名稱/文章標(biāo)題格式。添加類別名稱為我們提供了一個(gè)將關(guān)鍵字添加到url中的機(jī)會(huì)。
我們做的第二件事是確保安裝了正確的插件。我們使用yoast進(jìn)行seo管理，并使用disks進(jìn)行評(píng)論。
最后，我們對(duì)重定向進(jìn)行了兩次和三次檢查，以確保不會(huì)丟失舊頁(yè)面的價(jià)值。
4。連接到主99designs站點(diǎn)
需要明確的是，該博客連接到99designs.com。
如何實(shí)現(xiàn)：設(shè)計(jì)元素與產(chǎn)品集成
我們希望我們的博客看起來(lái)像我們網(wǎng)站的其他部分，但也作為一個(gè)博客的功能。為此，我們從我們的品牌指南中確定了幾個(gè)關(guān)鍵的視覺元素，并將它們整合到設(shè)計(jì)中：
我們的網(wǎng)站（和博客）上到處都是設(shè)計(jì)師的作品。戴維德彼得森項(xiàng)目辦。
- 使用我們的平臺(tái)集成到網(wǎng)站中的設(shè)計(jì)（如浮動(dòng)大象，出現(xiàn)在這里和電子郵件訂閱框旁邊）
- 基于頁(yè)面圖像的動(dòng)態(tài)調(diào)色板
- 保持色調(diào)和圖像輕盈真實(shí)
我們就導(dǎo)航問題爭(zhēng)論了一段時(shí)間，我們想集成主站點(diǎn)的導(dǎo)航嗎？會(huì)不會(huì)因?yàn)檫€需要博客導(dǎo)航而感到困惑？最后，我們妥協(xié)了，沒有合并我們的主要網(wǎng)站導(dǎo)航，但有l(wèi)ogo鏈接回到我們的主頁(yè)（并建立“博客主頁(yè)”到我們的博客導(dǎo)航）。
最后，我們創(chuàng)建了更多與我們產(chǎn)品的鏈接，其中包括一個(gè)用兩個(gè)CTA突出我們當(dāng)前設(shè)計(jì)競(jìng)賽的部分：讓潛在客戶開始他們自己的競(jìng)賽，或者讓潛在設(shè)計(jì)師注冊(cè)。我們還有一個(gè)靈活的促銷欄（在每一頁(yè)）和框（在主頁(yè)上），讓我們讓人們知道特別優(yōu)惠。
5。訂婚
讀者應(yīng)該能夠很容易地在社交媒體上分享我們的文章，注冊(cè)我們的電子郵件列表和評(píng)論文章。
我們是如何做到的：關(guān)注你的社交圖標(biāo)和每頁(yè)的電子郵件截圖
這一點(diǎn)很直截了當(dāng)：如果我們想讓人們參與進(jìn)來(lái)，我們就必須讓他們?nèi)菀讌⑴c進(jìn)來(lái)。這意味著社交媒體鏈接和電子郵件注冊(cè)。
為了確保社交媒體盡可能容易訪問，我們將圖標(biāo)設(shè)置為粘滯狀態(tài)，這樣它們會(huì)跟隨您進(jìn)入頁(yè)面（但也會(huì)巧妙地設(shè)計(jì)，這樣它們就不會(huì)干擾閱讀體驗(yàn)）。對(duì)于電子郵件注冊(cè)，我們決定暫時(shí)放棄彈出的lightbox注冊(cè)趨勢(shì)，而是在每個(gè)頁(yè)面的底部集成一個(gè)注冊(cè)。這也許是我們將來(lái)要回到的話題。
6。更輕松的博客管理
博客的后端應(yīng)該可以讓作者、編輯、管理員和開發(fā)人員的工作變得更容易。而且它的構(gòu)建方式應(yīng)該允許擴(kuò)展。
我們?nèi)绾螌?shí)現(xiàn)它：一個(gè)后端和一個(gè)多語(yǔ)言插件
在你的博客設(shè)計(jì)上做一個(gè)快速的視覺檢查是很容易的。但這并不經(jīng)常解決管理問題。我們已經(jīng)成長(zhǎng)了，而且還在擴(kuò)張，而我們現(xiàn)在的體制并沒有削弱它。
這需要大量的研究和一些嘗試和錯(cuò)誤，但我們最終決定，對(duì)我們來(lái)說(shuō)最好的解決方案是在一個(gè)后端建立我們的多語(yǔ)言博客，并使用WordPress多語(yǔ)言（WPML）插件。這需要更多的努力來(lái)實(shí)現(xiàn)，我們必須手動(dòng)將所有類別、標(biāo)記和以前翻譯過的文章與其他語(yǔ)言的對(duì)應(yīng)內(nèi)容關(guān)聯(lián)起來(lái)，但最終會(huì)使我們的工作更輕松。所有博客都有一個(gè)設(shè)計(jì)和一個(gè)樣式表。如果有技術(shù)問題，開發(fā)人員可以進(jìn)行故障排除并修復(fù)一次。如果我們想翻譯內(nèi)容，我們可以很容易地把文章翻過來(lái)，保持圖片和格式完整。（如果這更有意義的話，就把它們換掉）。
logo設(shè)計(jì)趨勢(shì)英語(yǔ)…
法語(yǔ)…
和德語(yǔ)。
這在當(dāng)時(shí)確實(shí)是一個(gè)令人頭疼的問題，但投資我們的基礎(chǔ)設(shè)施使我們有了更好的發(fā)展方向。（我們的日本團(tuán)隊(duì)決定在我們完成這個(gè)項(xiàng)目的同時(shí)建立一個(gè)日本博客，這正好是時(shí)候?。?/p>
那么，成功了嗎？A603-
新博客還為時(shí)不到一個(gè)月，所以結(jié)果還沒有定論。從管理的角度來(lái)看，這肯定更容易。我們喜歡這個(gè)新造型。但我們需要給數(shù)字一些時(shí)間。但別擔(dān)心，我們會(huì)在3-4個(gè)月內(nèi)跟進(jìn)這篇文章，讓你知道我們是否成功，并確保鏈接到這篇文章的結(jié)果。
考慮重新設(shè)計(jì)你自己的博客？請(qǐng)記住以下幾點(diǎn)：
- 列一張什么有用什么不有用的清單
- 列出優(yōu)先事項(xiàng)（并找出衡量其成功的方法）
- 記住，創(chuàng)建好的內(nèi)容是你能為你的博客做的最好的事情
- 但你也應(yīng)該考慮搜索引擎優(yōu)化和用戶體驗(yàn)
