作為一個網頁設計師,很難保持組織。您不僅可以同時平衡多個項目,而且您可能面臨緊迫的時間和苛刻的客戶。你也可能從品牌反彈到品牌,不得不不斷學習新的品牌指南和風格。
幸運的是,有很多方法可以讓您的工作流程更有效率。為了幫助,我把這八個提示放在一起,讓你在網頁設計生涯中保持清醒
1.保持您的文件組織
你可以做的最簡單的事情之一,保持你的理智是保持你的文件有組織。創建和維護一致的文件夾結構將使您輕松找到您的文件。當您構造一個文件夾與另一個文件夾不同時會出現問題,因此找到Final-Final-logo.ai文件是一個挑戰。
在組織文件時,一致的文件命名約定是必不可少的。這是版本化的地方。一些設計者使用日期,其他設計者使用版本號,一些使用輪次。這將取決于您的行業和您的個人喜好,但這是一個好的做法。由于版本控制,您可以輕松跟蹤哪個文件是最新的,特別是如果您保存了舊版本以供參考。
我通常保持兩到三個舊版本,以防客戶想要回到第一輪的英雄戰略,或者更喜歡你的移動治療從第二輪。為了避免包大鼠的心態,它是很好歸檔或刪除舊的文件,以防止您的硬盤驅動器陷入困境。
一致的文件夾結構和命名約定與版本控制的組合也將有助于搜索能力。例如,如果您從具有品牌名稱或縮寫的一個品牌啟動您的所有文件名,您可以更容易地過濾該品牌的資產。這將有助于區分“ATT-logo-final.ai”與可能是“logo-final.ai的?!钡目赡?。
2.了解您的框架
有一件事,我沒有學會,直到幾年我的設計生涯是如何正確利用現有的框架。在框架世界中的兩個重擊手目前是Bootstrap和Foundation,但Google的Materialise肯定會給他們在不久的將來他們的錢。我工作的公司使用Foundation為他們的大多數品牌網站。
Foundation提供了一個內置的響應式網格,以及按鈕,字段,排版,導航等樣式,以及許多其他功能,使您的生活更輕松。通過在您的PSD中利用Foundation的內置網格,您將使開發人員更容易以更像素完美的方式實現您的設計,而不是如果你做自己的事情。 Photoshop有這個漂亮的指南布局工具,不僅使創建網格輕而易舉,而且將他們附加到藝術板,以方便文件重組和移動。
基金會備忘錄截圖
框架還為按鈕樣式,表單等提供了一個良好的起點,并幫助展示了您可以實現的設計策略的可能性和局限性。這不僅會為您的設計提供一個偉大的起點,但它將有助于促進與您的開發人員的友好協作。
3.按內容部分組織您的圖層
當你處理復雜的網頁設計PSD有這么多的文件夾,層,智能對象等,它很容易弄亂的東西。一旦層2,455來臨,你開始意識到你需要在你的PSD內的某種組織。這就是為什么我建議組織你的PSD的部分。
礦井通常包括文件夾,其中包括Nav,Hero,簡介,包,優惠,頁腳等。我也彩色代碼這些文件夾彩虹的方式,所以他們很容易導航。這使得更新部分和重做您的PSD很容易。
我組織我的文件到部分文件夾彩虹色編碼,輕松掃描能力。
例如,如果你需要使英雄部分更大,你可以輕松地拖動所有下面的文件夾作為一個單位(控制命令),然后在更新后將它們拖回來。此策略還有助于開發人員和其他設計人員輕松瀏覽您的文件。通過使用可理解的名稱,如“Hero”和“Nav”,一個新的設計師可以輕松地跳轉到該文件夾,并做出他們需要的任何更改。
一些設計師甚至會得到命名單獨的圖層,這也可以是非常有益的,但可能會有點費時。由于圖層在設置為“圖層”時通過自動選擇工具很容易找到,因此很容易得到單獨的圖層,所以這是由個人設計師如何組織他們的圖層。關鍵是你已經做完了。
4.記住您通常使用的所有鍵盤快門
這是一個大的效率。如果你發現自己定期使用一個特定的鍵盤命令,記住它。如果您將所有主鍵盤快捷鍵都關閉,您將以指數方式提高效率。
一些重要的是保存,字體大小和領先,圖層排序,保存為Web和不透明度等等。 Photoshop也讓你能夠創建自定義快捷方式。在我的書中,記住的最重要的命令是保存您的文件。由于Adobe的隨機崩潰,它是很好的經常保存的一面,而不是冒失去任何進展的風險。
Adobe提供了在“編輯”>“鍵盤快捷鍵”下自定義鍵盤快捷鍵的選項
快捷方式還可以通過內容部分文件夾來組織圖層(如上所述)。使用鍵盤快捷鍵將圖層放到文件夾的頂部和底部比在無組織文件中重新排序圖層更容易。這是在你設計的時候組織你的文件的地方。記住經常使用的鍵盤快捷鍵并保持圖層的有序化將大大提高您的效率,并幫助其他設計師使用您的文件。
5.使用CC庫
Adobe創建CC之后添加的最好的事情之一是圖書館。如果你沒有聽說過他們,你需要查看這個驚人的教程如何使用它們。
我覺得每個設計團隊都應該利用這個驚人的功能。庫允許您使用資源(如顏色,字體樣式,照片,圖標和符號(如頁眉和頁腳))創建品牌庫。借助圖書館,您可以使用單一品牌庫輕松與多個組織的廣告素材協作。
庫可以輕松更改顏色和更新文本樣式,只需點擊一個按鈕。它們還幫助存儲可以在一個地方輕松更新的品牌圖標,并通過PSD快速反映更新。這對您的網站的頁眉和頁腳非常有用,您可能會在整個項目中進行小更新。
我也使用CC庫在我的設計的字體樣式。我將為桌面,平板電腦和移動應用程序設置英雄副本,標題,副標題,正文副本,免責聲明等的樣式。關于視圖切換,由于其容易的掃描能力,我發現自己使用列表格式比瓦片視圖更多。
圖書館也非常適合團隊協作。您可以選擇與其他廣告素材協作,以便他們可以編輯并添加到庫中,也可以共享庫鏈接以便于訪問。他們還有一個“從文檔創建新庫”功能,但我更喜歡自己創建庫,所以它保持有組織,只有最相關的資產。
不幸的是,圖書館有幾個缺點,其中之一是缺乏文本的單獨的字符和段落樣式。我通過在不同的框中應用我的字符樣式,然后將不同的樣式粘貼到一個框中,使文本框更容易在文件中管理。另一個缺點是,你目前不能在全局更新字符樣式。目前,在庫中沒有組織能力在類別(顏色,字符樣式等)內創建子文件夾,但希望Adobe也在這方面努力。
CC庫目前的工作方式是,最近更新/添加的資產將顯示在頂部。 CC庫顏色不能應用于文本框中的單個文本,并且只能輕松應用于形狀和整個文本框。我相信Adobe在努力解決這些問題,所以我不是太擔心,尤其是因為專業人士絕對勝過的缺點。
6.保持智能對象格式中的圖像和矢量
即使它會使您的文件更大,保持您的圖像和向量在智能對象格式將使以后的設計師更容易編輯您的PSD。照片:客戶回來編輯,包括重新剪切英雄照片和小調整到矢量圖標。如果PSD包括全分辨率照片而不是較小的光柵化版本,則這更平滑地完成。當它們是來自Illustrator的智能對象而不是光柵化圖形時,向量也很容易調整。
以智能對象格式照片的另一個好處是,當您將它們保存為PSD,然后將它們作為智能對象放入您的文件。使用已放置的照片PSD可以輕松地在單獨的包含照片文件中添加調整圖層和編輯,而不是混亂您的源文件。利用智能對象作為圖形庫圖形,您可以獲得更多的獲勝組合。您不僅可以輕松地編輯矢量對象,而且庫圖形將在所有應用程序中更新。
7.創建一個風格指南并貼到它
很多品牌將有一個一般的風格指南,你可以跟隨它,當涉及到字體,顏色,照片,圖標,插圖等。這是有用的資源,但不會總是讓你一致的網站特定的樣式。我通過為我工作的每個特定網站創建Web風格指南,大大提高了我的效率。
有時品牌會有多個不同風格的網站,所以我確保每個網站都有一個網站,所以我在設計時可以保持一致。當我需要按鈕,圖標,插圖,照片等時,這也創造了一個容易的拖放資源。這不僅將使你作為一個設計師更有效,但它將幫助你在整個網站的樣式保持一致。
在部分之間使用什么間距?查看樣式指南!什么是主按鈕顏色和填充?從樣式指南抓住它!這也將幫助其他設計師輕松地跳躍現場設計輕松和有效率。如果你合并使用CC庫與風格指南,你甚至更先進的游戲。
7樣式指南
我為所有不同的品牌創建一個PSD風格指南,我工作,所以我可以輕松地抓住元素,如按鈕和圖標。
許多設計師都試圖每次在設計中面臨新的問題時添加新的風格。為了一致性,最好避免這種情況,并始終堅持在您的風格指南中建立的標準。如果您添加新的圖層和樣式,請確保它們應用于整個網站。
創建的新風格越多,未來的設計就越復雜,新設計師就越難以進行項目并保持設計的一致性。在許多情況下,一致性比持續創新在用戶體驗方面更重要。即使在項目開始時創建Web風格指南可能需要更多的時間,它將提高您以后所有頁面的效率。
我從布拉德弗羅斯特學到的一個最佳實踐是在設計過程中或在將要使用的現有網站上執行界面清單。界面清單包括通過截屏收集所有不同的文本樣式,按鈕樣式等,并編譯它們以發現不一致。然后,您可以向客戶介紹您的發現,以提出更新和改進。
由于網站觸及多個設計師,他們的存在的情況下,事情可以在一致性部門相當毛。一旦您為網頁上的元素找到統一的設計風格,請務必更新您的風格指南,以便每個人都是最新的。
8.積極參與部門間合作
許多追求職業生涯的人(設計師,開發人員,撰寫人等)傾向于內向,所以當談到協作時,很難走出你的舒適區。它也很難離開你的專業泡沫,特別是當它更容易與你的領域的人相關。即使它有時可能是尷尬或不舒服,留下你的泡沫和定期與其他部門的人合作可以大大提高您的設計的質量和效率。
這方面的一個主要例子是當設計師和開發人員合作重新設計時。您應該事先與開發人員會面,了解他們使用的框架,了解網格系統,并評估可能性。當設計工作完成后,請確保共享您的Photoshop庫,以便開發人員可以輕松地訪問調色板,字體樣式等。這也有助于提前共享風格指南,以及任何組件設計給他們一個良好的開端。
與您團隊中的其他設計師合作使用庫還將幫助您保持一致性和更高效。讓藝術總監或大多數高級設計師對圖書館和風格指南更新負責,將消除混亂,保持品牌的一致性。只要確保在進行更新時有一條通信線,以便每個人都在同一頁上。