作為一個網(wǎng)頁設(shè)計師，很難保持組織。您不僅可以同時平衡多個項(xiàng)目，而且您可能面臨緊迫的時間和苛刻的客戶。你也可能從品牌反彈到品牌，不得不不斷學(xué)習(xí)新的品牌指南和風(fēng)格。

幸運(yùn)的是，有很多方法可以讓您的工作流程更有效率。為了幫助，我把這八個提示放在一起，讓你在網(wǎng)頁設(shè)計生涯中保持清醒

1.保持您的文件組織

你可以做的最簡單的事情之一，保持你的理智是保持你的文件有組織。創(chuàng)建和維護(hù)一致的文件夾結(jié)構(gòu)將使您輕松找到您的文件。當(dāng)您構(gòu)造一個文件夾與另一個文件夾不同時會出現(xiàn)問題，因此找到Final-Final-logo.ai文件是一個挑戰(zhàn)。

在組織文件時，一致的文件命名約定是必不可少的。這是版本化的地方。一些設(shè)計者使用日期，其他設(shè)計者使用版本號，一些使用輪次。這將取決于您的行業(yè)和您的個人喜好，但這是一個好的做法。由于版本控制，您可以輕松跟蹤哪個文件是最新的，特別是如果您保存了舊版本以供參考。

我通常保持兩到三個舊版本，以防客戶想要回到第一輪的英雄戰(zhàn)略，或者更喜歡你的移動治療從第二輪。為了避免包大鼠的心態(tài)，它是很好歸檔或刪除舊的文件，以防止您的硬盤驅(qū)動器陷入困境。

一致的文件夾結(jié)構(gòu)和命名約定與版本控制的組合也將有助于搜索能力。例如，如果您從具有品牌名稱或縮寫的一個品牌啟動您的所有文件名，您可以更容易地過濾該品牌的資產(chǎn)。這將有助于區(qū)分“ATT-logo-final.ai”與可能是“l(fā)ogo-final.ai的海”的可能。

2.了解您的框架

有一件事，我沒有學(xué)會，直到幾年我的設(shè)計生涯是如何正確利用現(xiàn)有的框架。在框架世界中的兩個重?fù)羰帜壳笆荁ootstrap和Foundation，但Google的Materialise肯定會給他們在不久的將來他們的錢。我工作的公司使用Foundation為他們的大多數(shù)品牌網(wǎng)站。

Foundation提供了一個內(nèi)置的響應(yīng)式網(wǎng)格，以及按鈕，字段，排版，導(dǎo)航等樣式，以及許多其他功能，使您的生活更輕松。通過在您的PSD中利用Foundation的內(nèi)置網(wǎng)格，您將使開發(fā)人員更容易以更像素完美的方式實(shí)現(xiàn)您的設(shè)計，而不是如果你做自己的事情。 Photoshop有這個漂亮的指南布局工具，不僅使創(chuàng)建網(wǎng)格輕而易舉，而且將他們附加到藝術(shù)板，以方便文件重組和移動。

基金會備忘錄截圖

框架還為按鈕樣式，表單等提供了一個良好的起點(diǎn)，并幫助展示了您可以實(shí)現(xiàn)的設(shè)計策略的可能性和局限性。這不僅會為您的設(shè)計提供一個偉大的起點(diǎn)，但它將有助于促進(jìn)與您的開發(fā)人員的友好協(xié)作。

3.按內(nèi)容部分組織您的圖層

當(dāng)你處理復(fù)雜的網(wǎng)頁設(shè)計PSD有這么多的文件夾，層，智能對象等，它很容易弄亂的東西。一旦層2,455來臨，你開始意識到你需要在你的PSD內(nèi)的某種組織。這就是為什么我建議組織你的PSD的部分。

礦井通常包括文件夾，其中包括Nav，Hero，簡介，包，優(yōu)惠，頁腳等。我也彩色代碼這些文件夾彩虹的方式，所以他們很容易導(dǎo)航。這使得更新部分和重做您的PSD很容易。

我組織我的文件到部分文件夾彩虹色編碼，輕松掃描能力。

例如，如果你需要使英雄部分更大，你可以輕松地拖動所有下面的文件夾作為一個單位（控制命令），然后在更新后將它們拖回來。此策略還有助于開發(fā)人員和其他設(shè)計人員輕松瀏覽您的文件。通過使用可理解的名稱，如“Hero”和“Nav”，一個新的設(shè)計師可以輕松地跳轉(zhuǎn)到該文件夾，并做出他們需要的任何更改。

一些設(shè)計師甚至?xí)玫矫麊为?dú)的圖層，這也可以是非常有益的，但可能會有點(diǎn)費(fèi)時。由于圖層在設(shè)置為“圖層”時通過自動選擇工具很容易找到，因此很容易得到單獨(dú)的圖層，所以這是由個人設(shè)計師如何組織他們的圖層。關(guān)鍵是你已經(jīng)做完了。

4.記住您通常使用的所有鍵盤快門

這是一個大的效率。如果你發(fā)現(xiàn)自己定期使用一個特定的鍵盤命令，記住它。如果您將所有主鍵盤快捷鍵都關(guān)閉，您將以指數(shù)方式提高效率。

一些重要的是保存，字體大小和領(lǐng)先，圖層排序，保存為Web和不透明度等等。 Photoshop也讓你能夠創(chuàng)建自定義快捷方式。在我的書中，記住的最重要的命令是保存您的文件。由于Adobe的隨機(jī)崩潰，它是很好的經(jīng)常保存的一面，而不是冒失去任何進(jìn)展的風(fēng)險。

Adobe提供了在“編輯”>“鍵盤快捷鍵”下自定義鍵盤快捷鍵的選項(xiàng)

快捷方式還可以通過內(nèi)容部分文件夾來組織圖層（如上所述）。使用鍵盤快捷鍵將圖層放到文件夾的頂部和底部比在無組織文件中重新排序圖層更容易。這是在你設(shè)計的時候組織你的文件的地方。記住經(jīng)常使用的鍵盤快捷鍵并保持圖層的有序化將大大提高您的效率，并幫助其他設(shè)計師使用您的文件。

5.使用CC庫

Adobe創(chuàng)建CC之后添加的最好的事情之一是圖書館。如果你沒有聽說過他們，你需要查看這個驚人的教程如何使用它們。

我覺得每個設(shè)計團(tuán)隊(duì)都應(yīng)該利用這個驚人的功能。庫允許您使用資源（如顏色，字體樣式，照片，圖標(biāo)和符號（如頁眉和頁腳））創(chuàng)建品牌庫。借助圖書館，您可以使用單一品牌庫輕松與多個組織的廣告素材協(xié)作。

庫可以輕松更改顏色和更新文本樣式，只需點(diǎn)擊一個按鈕。它們還幫助存儲可以在一個地方輕松更新的品牌圖標(biāo)，并通過PSD快速反映更新。這對您的網(wǎng)站的頁眉和頁腳非常有用，您可能會在整個項(xiàng)目中進(jìn)行小更新。

我也使用CC庫在我的設(shè)計的字體樣式。我將為桌面，平板電腦和移動應(yīng)用程序設(shè)置英雄副本，標(biāo)題，副標(biāo)題，正文副本，免責(zé)聲明等的樣式。關(guān)于視圖切換，由于其容易的掃描能力，我發(fā)現(xiàn)自己使用列表格式比瓦片視圖更多。

圖書館也非常適合團(tuán)隊(duì)協(xié)作。您可以選擇與其他廣告素材協(xié)作，以便他們可以編輯并添加到庫中，也可以共享庫鏈接以便于訪問。他們還有一個“從文檔創(chuàng)建新庫”功能，但我更喜歡自己創(chuàng)建庫，所以它保持有組織，只有最相關(guān)的資產(chǎn)。

不幸的是，圖書館有幾個缺點(diǎn)，其中之一是缺乏文本的單獨(dú)的字符和段落樣式。我通過在不同的框中應(yīng)用我的字符樣式，然后將不同的樣式粘貼到一個框中，使文本框更容易在文件中管理。另一個缺點(diǎn)是，你目前不能在全局更新字符樣式。目前，在庫中沒有組織能力在類別（顏色，字符樣式等）內(nèi)創(chuàng)建子文件夾，但希望Adobe也在這方面努力。

CC庫目前的工作方式是，最近更新/添加的資產(chǎn)將顯示在頂部。 CC庫顏色不能應(yīng)用于文本框中的單個文本，并且只能輕松應(yīng)用于形狀和整個文本框。我相信Adobe在努力解決這些問題，所以我不是太擔(dān)心，尤其是因?yàn)閷I(yè)人士絕對勝過的缺點(diǎn)。

6.保持智能對象格式中的圖像和矢量

即使它會使您的文件更大，保持您的圖像和向量在智能對象格式將使以后的設(shè)計師更容易編輯您的PSD。照片：客戶回來編輯，包括重新剪切英雄照片和小調(diào)整到矢量圖標(biāo)。如果PSD包括全分辨率照片而不是較小的光柵化版本，則這更平滑地完成。當(dāng)它們是來自Illustrator的智能對象而不是光柵化圖形時，向量也很容易調(diào)整。

以智能對象格式照片的另一個好處是，當(dāng)您將它們保存為PSD，然后將它們作為智能對象放入您的文件。使用已放置的照片PSD可以輕松地在單獨(dú)的包含照片文件中添加調(diào)整圖層和編輯，而不是混亂您的源文件。利用智能對象作為圖形庫圖形，您可以獲得更多的獲勝組合。您不僅可以輕松地編輯矢量對象，而且?guī)靾D形將在所有應(yīng)用程序中更新。

7.創(chuàng)建一個風(fēng)格指南并貼到它

很多品牌將有一個一般的風(fēng)格指南，你可以跟隨它，當(dāng)涉及到字體，顏色，照片，圖標(biāo)，插圖等。這是有用的資源，但不會總是讓你一致的網(wǎng)站特定的樣式。我通過為我工作的每個特定網(wǎng)站創(chuàng)建Web風(fēng)格指南，大大提高了我的效率。

有時品牌會有多個不同風(fēng)格的網(wǎng)站，所以我確保每個網(wǎng)站都有一個網(wǎng)站，所以我在設(shè)計時可以保持一致。當(dāng)我需要按鈕，圖標(biāo)，插圖，照片等時，這也創(chuàng)造了一個容易的拖放資源。這不僅將使你作為一個設(shè)計師更有效，但它將幫助你在整個網(wǎng)站的樣式保持一致。

在部分之間使用什么間距？查看樣式指南！什么是主按鈕顏色和填充？從樣式指南抓住它！這也將幫助其他設(shè)計師輕松地跳躍現(xiàn)場設(shè)計輕松和有效率。如果你合并使用CC庫與風(fēng)格指南，你甚至更先進(jìn)的游戲。

7樣式指南

我為所有不同的品牌創(chuàng)建一個PSD風(fēng)格指南，我工作，所以我可以輕松地抓住元素，如按鈕和圖標(biāo)。

許多設(shè)計師都試圖每次在設(shè)計中面臨新的問題時添加新的風(fēng)格。為了一致性，最好避免這種情況，并始終堅(jiān)持在您的風(fēng)格指南中建立的標(biāo)準(zhǔn)。如果您添加新的圖層和樣式，請確保它們應(yīng)用于整個網(wǎng)站。

創(chuàng)建的新風(fēng)格越多，未來的設(shè)計就越復(fù)雜，新設(shè)計師就越難以進(jìn)行項(xiàng)目并保持設(shè)計的一致性。在許多情況下，一致性比持續(xù)創(chuàng)新在用戶體驗(yàn)方面更重要。即使在項(xiàng)目開始時創(chuàng)建Web風(fēng)格指南可能需要更多的時間，它將提高您以后所有頁面的效率。

我從布拉德弗羅斯特學(xué)到的一個最佳實(shí)踐是在設(shè)計過程中或在將要使用的現(xiàn)有網(wǎng)站上執(zhí)行界面清單。界面清單包括通過截屏收集所有不同的文本樣式，按鈕樣式等，并編譯它們以發(fā)現(xiàn)不一致。然后，您可以向客戶介紹您的發(fā)現(xiàn)，以提出更新和改進(jìn)。

由于網(wǎng)站觸及多個設(shè)計師，他們的存在的情況下，事情可以在一致性部門相當(dāng)毛。一旦您為網(wǎng)頁上的元素找到統(tǒng)一的設(shè)計風(fēng)格，請務(wù)必更新您的風(fēng)格指南，以便每個人都是最新的。

8.積極參與部門間合作

許多追求職業(yè)生涯的人（設(shè)計師，開發(fā)人員，撰寫人等）傾向于內(nèi)向，所以當(dāng)談到協(xié)作時，很難走出你的舒適區(qū)。它也很難離開你的專業(yè)泡沫，特別是當(dāng)它更容易與你的領(lǐng)域的人相關(guān)。即使它有時可能是尷尬或不舒服，留下你的泡沫和定期與其他部門的人合作可以大大提高您的設(shè)計的質(zhì)量和效率。

這方面的一個主要例子是當(dāng)設(shè)計師和開發(fā)人員合作重新設(shè)計時。您應(yīng)該事先與開發(fā)人員會面，了解他們使用的框架，了解網(wǎng)格系統(tǒng)，并評估可能性。當(dāng)設(shè)計工作完成后，請確保共享您的Photoshop庫，以便開發(fā)人員可以輕松地訪問調(diào)色板，字體樣式等。這也有助于提前共享風(fēng)格指南，以及任何組件設(shè)計給他們一個良好的開端。

與您團(tuán)隊(duì)中的其他設(shè)計師合作使用庫還將幫助您保持一致性和更高效。讓藝術(shù)總監(jiān)或大多數(shù)高級設(shè)計師對圖書館和風(fēng)格指南更新負(fù)責(zé)，將消除混亂，保持品牌的一致性。只要確保在進(jìn)行更新時有一條通信線，以便每個人都在同一頁上。