用于站點(diǎn)映射和線框圖的工具
鋼筆/鉛筆和紙
Balsamiq工作室
Moqups
草圖
Axure
一個(gè)Webflow
Slickplan
Writemaps
Mindnode
準(zhǔn)備把恐懼從自由職業(yè)者身上移除？
介紹自由職業(yè)者的旅程：一個(gè)免費(fèi)課程，教你如何成為一名自由網(wǎng)頁(yè)設(shè)計(jì)師 - 從讓客戶(hù)到推出他們的網(wǎng)站。
現(xiàn)在報(bào)名
4.內(nèi)容創(chuàng)作
說(shuō)到內(nèi)容，SEO只是成功的一半。
一旦您的網(wǎng)站框架到位，您就可以從網(wǎng)站最重要的方面開(kāi)始：
內(nèi)容有兩個(gè)重要目的：
目的1.內(nèi)容推動(dòng)參與和行動(dòng)
首先，內(nèi)容吸引讀者并驅(qū)使他們采取必要的行動(dòng)來(lái)實(shí)現(xiàn)網(wǎng)站的目標(biāo)。這受到內(nèi)容本身（寫(xiě)作）及其呈現(xiàn)方式（排版和結(jié)構(gòu)元素）的影響。
沉悶，毫無(wú)生氣，過(guò)長(zhǎng)的散文很少會(huì)引起游客的注意。簡(jiǎn)短，活潑，有趣的內(nèi)容抓住了它們并讓它們點(diǎn)擊進(jìn)入其他頁(yè)面。即使您的網(wǎng)頁(yè)需要大量?jī)?nèi)容 - 而且通常也是如此 - 通過(guò)將內(nèi)容分解為由視覺(jué)效果補(bǔ)充的簡(jiǎn)短段落來(lái)正確地“分塊”內(nèi)容可以幫助它保持輕松，引人入勝的感覺(jué)。
目的2：SEO
內(nèi)容還提升了網(wǎng)站對(duì)搜索引擎的可見(jiàn)性。創(chuàng)建和改進(jìn)內(nèi)容以在搜索中排名很好的做法被稱(chēng)為搜索引擎優(yōu)化或SEO。
正確獲取關(guān)鍵字和關(guān)鍵詞對(duì)于任何網(wǎng)站的成功至關(guān)重要。我總是使用Google關(guān)鍵字規(guī)劃師。此工具顯示潛在目標(biāo)關(guān)鍵字和短語(yǔ)的搜索量，因此您可以了解實(shí)際人類(lèi)在網(wǎng)絡(luò)上搜索的內(nèi)容。雖然搜索引擎變得越來(lái)越聰明，但您的內(nèi)容策略也應(yīng)如此。Google趨勢(shì)在識(shí)別人們搜索時(shí)實(shí)際使用的字詞時(shí)也很方便。
我的設(shè)計(jì)過(guò)程側(cè)重于圍繞SEO設(shè)計(jì)網(wǎng)站。您想要排名的關(guān)鍵字需要放在標(biāo)題標(biāo)簽中 - 越接近開(kāi)頭越好。關(guān)鍵字也應(yīng)出現(xiàn)在H1標(biāo)簽，元描述和正文內(nèi)容中。
搜索引擎更容易獲取編寫(xiě)良好，信息豐富且關(guān)鍵字豐富的內(nèi)容，所有這些內(nèi)容都有助于使網(wǎng)站更易于查找。
通常情況下，您的客戶(hù)會(huì)生成大部分內(nèi)容，但您必須向他們提供有關(guān)應(yīng)在文本中包含哪些關(guān)鍵字和短語(yǔ)的指導(dǎo)。
對(duì)于一篇博文來(lái)說(shuō)，Lisa太過(guò)分了，但是工作非常出色！
令人敬畏的內(nèi)容創(chuàng)建工具
谷歌文檔
Dropbox紙
諷刺
收集內(nèi)容
方便的SEO工具
Google關(guān)鍵字規(guī)劃師
谷歌趨勢(shì)
尖叫青蛙的SEO蜘蛛
5.視覺(jué)元素
Style Tile： 由Mat Vogels建造的 自由風(fēng)格瓷磚/情緒板模板。
最后，是時(shí)候?yàn)榫W(wǎng)站創(chuàng)建視覺(jué)樣式了。設(shè)計(jì)過(guò)程的這一部分通常由客戶(hù)規(guī)定的現(xiàn)有品牌元素，顏色選擇和徽標(biāo)來(lái)塑造。但它也是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程的一個(gè)階段，一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師可以真正發(fā)揮作用。
現(xiàn)在，圖像在網(wǎng)頁(yè)設(shè)計(jì)中扮演著比以往更重要的角色。高質(zhì)量的圖像不僅可以為網(wǎng)站提供專(zhuān)業(yè)的外觀和感覺(jué)，而且還可以傳達(dá)信息，對(duì)移動(dòng)設(shè)備友好，并幫助建立信任。
眾所周知，可視內(nèi)容可以增加點(diǎn)擊次數(shù)，參與度和收入。但更重要的是，人們希望在網(wǎng)站上看到圖像。圖像不僅使頁(yè)面感覺(jué)不那么麻煩且更容易消化，而且它們還增強(qiáng)了文本中的消息，甚至可以傳達(dá)重要消息，甚至無(wú)需人們閱讀。
我建議使用專(zhuān)業(yè)攝影師來(lái)拍攝正確的照片。請(qǐng)記住，大量漂亮的圖像會(huì)嚴(yán)重減慢網(wǎng)站的速度。我使用Optimizilla壓縮圖像而不會(huì)降低質(zhì)量，節(jié)省了頁(yè)面加載時(shí)間。您還需要確保您的圖片與您的網(wǎng)站一樣響應(yīng)。
視覺(jué)設(shè)計(jì)是一種溝通和吸引網(wǎng)站用戶(hù)的方式。做對(duì)了，它可以確定網(wǎng)站的成功。弄錯(cuò)了，你只是另一個(gè)網(wǎng)址。
視覺(jué)元素的工具
通常的嫌疑人（素描，插畫(huà)家，Photoshop等）
Moodboards，樣式瓷磚，元素拼貼畫(huà)
視覺(jué)風(fēng)格指南
6.測(cè)試
別擔(dān)心。它并不總是這樣。
一旦網(wǎng)站擁有所有視覺(jué)效果和內(nèi)容，您就可以進(jìn)行測(cè)試了。
徹底測(cè)試每個(gè)頁(yè)面以確保所有鏈接都正常工作，并確保網(wǎng)站在所有設(shè)備和瀏覽器上正確加載。錯(cuò)誤可能是小編碼錯(cuò)誤的結(jié)果，雖然找到并修復(fù)錯(cuò)誤通常很痛苦，但最好現(xiàn)在做，而不是向公眾提供破壞的網(wǎng)站。
編者注：我強(qiáng)烈推薦Screaming Frog的SEO Spider用于此階段。它允許您在一個(gè)工具中完成許多標(biāo)準(zhǔn)審計(jì)任務(wù)，并且最多可以免費(fèi)提供500個(gè)URL。
最后再看一下頁(yè)面元標(biāo)題和描述。甚至元標(biāo)題中單詞的順序也會(huì)影響搜索引擎上頁(yè)面的性能。
Webflow有一篇關(guān)于發(fā)布前流程的優(yōu)秀文章。
網(wǎng)站測(cè)試工具
W3C Link Checker
SEO蜘蛛
7.發(fā)射
現(xiàn)在是網(wǎng)站設(shè)計(jì)過(guò)程中每個(gè)人最喜歡的部分的時(shí)候了：當(dāng)所有內(nèi)容都經(jīng)過(guò)全面測(cè)試，并且您對(duì)該網(wǎng)站感到滿(mǎn)意時(shí)，就該開(kāi)始了。
不要太興奮，但......我們快到了！
不要指望這完美?？赡苋杂幸恍┰匦枰迯?fù)。網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)流動(dòng)且持續(xù)的過(guò)程，需要不斷維護(hù)。
網(wǎng)頁(yè)設(shè)計(jì) - 實(shí)際上，一般來(lái)說(shuō) - 設(shè)計(jì)就是在形式和功能之間找到適當(dāng)?shù)钠胶?。您需要使用正確的字體，顏色和設(shè)計(jì)圖案。但人們?yōu)g覽和體驗(yàn)?zāi)W(wǎng)站的方式同樣重要。
熟練的設(shè)計(jì)師應(yīng)該精通這個(gè)概念，并能夠創(chuàng)建一個(gè)網(wǎng)站，走在兩者之間的微妙走鋼絲。
關(guān)于啟動(dòng)階段要記住的一個(gè)關(guān)鍵事項(xiàng)是，它還遠(yuǎn)未結(jié)束。網(wǎng)絡(luò)的美妙之處在于它永遠(yuǎn)不會(huì)完成。網(wǎng)站上線后，您可以繼續(xù)對(duì)新內(nèi)容和功能進(jìn)行用戶(hù)測(cè)試，監(jiān)控分析并優(yōu)化消息傳遞。
你的過(guò)程是什么樣的？
您是否遵循類(lèi)似的設(shè)計(jì)流程，或者您的設(shè)計(jì)看起來(lái)截然不同？我們很樂(lè)意聽(tīng)到所有這些，所以請(qǐng)?jiān)谙旅嬖u(píng)論。
