如果你是一個網站建設設計師,?在過去的一年你難以避免談論素描。 推出這個設計應用人事行業由Adobe二十多年,它引起了一場爭論是否素描比Photoshop和Illustrator(好?煙花?)。

長期Photoshop用戶自己,我切換到素描在2014年初,沒有回頭。 我愛程序的某些特性,如簡單的接口,文件自動保存和無限的畫布。 然而,很多其他程序也有類似的功能,直到最近的更新(3.2草圖),用戶與應用大量的bug。

所以,為什么我繼續使用草圖? 錯誤或沒有bug,它已成為最好的UI設計的工具,包括響應網頁設計。

案例研究:艦隊腳運動

讓我們看一個新推出的網站設計,我在工作了?艦隊的腳?,運行存儲在美國與80多家特許經營店。 與舊網站,新艦隊的腳有一個電子商務在線銷售產品組件,和它的響應。 與超過15模板設計為多個設備和幾輪修改,這個項目是巨大的。

在Photoshop中,堅持組織中所有的文檔和輪修正將是艱巨的和耗時。 然而,素描的工具,我能通過這個項目從開始到結束工作更順利,輕松快速地比我使用另一個程序可以做。 讓我們看看如何創建一個網站草圖設計大大提高了響應過程。

看一下基礎知識

激發草圖,您將立即通知一個干凈、unbloated接口。 是的,素描工具集肯定是比一些其他設計項目減少。 然而,它只包括可以重新創建HTML和CSS3。 所以,沒有不必要的照片濾鏡,3 d工具或其他工具,就能慢下來。 應用程序只提供了必要做網絡和用戶界面的工作,使設計過程快得多。

和素描所缺乏的,它?插件?彌補。 素描插件是類似于Photoshop和覆蓋從一個簡單的工具,互換邊境和填充顏色完成內容生成器。 我等了幾個月開始使用自己的插件,因為我想要完全熟悉程序。 大錯誤,這些插件是巨大的省時便利,已經成為我工作流程的組成部分。

我首先推薦下載當從草圖開始?素描工具箱?。 這個插件管理器允許您直接瀏覽和安裝插件和跟蹤你的使用。

素描工具箱。 (?查看大版本?)

第二個基本要注意的是,所有你創建草圖是矢量。 響應時代的設計,創造一個設計向量是關鍵。 設計師經常需要考慮高清與normal-definition顯示器,窄而寬屏幕等等。 建筑設計,重新調節所有這些格式是至關重要的,然而,創建一個單獨的模型為每個大小是乏味而耗時的。 草圖的能力自由調整對象節省時間和精力。

使素描有別于其他基于矢量的計劃,這也是pixel-aware。 你畫的形狀總是提前到最近的像素,這意味著你不再需要擔心half-pixels或模糊的線條。 這使得程序適合屏幕設計。

開始

現在,讓我們走進我如何使用草圖設計艦隊腳的新網站。 響應時代的設計,能夠直接跳轉到設計一個模型是相當罕見的。

因為艦隊的腳將網站添加新組件,首先是內容策略。 我坐在在早期幾次會議討論如何制定新的網站。 我喜歡用一個方便的素描插件?AEFlowchart?為網站創建站點樹我在工作。 尤其是艦隊的腳,這是有用的跟蹤網站的新組織和我能與我的團隊。 這是這樣一個有用的參考援助在設計過程中,我不會花時間創建它在另一個程序,因為它太耗費時間。

AEFlowchart插件。 (?查看大版本?)

草圖也使得moodboards簡單創建和一個更好的項目資源。 首先,注意你的所有文件?生活在一個文檔?。 草圖包含一個頁面的抽屜artboard側邊欄,允許您快速滾動文件之間。 對于這樣的大型項目來說,這是特別高興能夠很快網站樹之間來回跳,moodboard和樣機我設計或更改。

讓我們穿過艦隊英尺的一個早期版本的模板?風格的瓷磚?(一個方便?草圖模板?已經可以下載)。 能夠創建排版元素非常有用,因為您可以創建?文本樣式?內聯樣式如標題和塊報價,然后運用這些風格在其他文檔文本。 如果你的客戶覺得他們討厭?H1以后的字體在設計過程中,你所要做的就是更新風格的一個實例,它將更新您的項目文件中的每個實例。 這個應用程序也使用本地文本渲染文本(反鋸齒),以便在瀏覽器中看起來如何在設計文件,不再想知道你選擇的輕量級版本的字體標題將可讀的屏幕。

文本樣式草圖程序。?查看大版本?)

顏色管理?也簡化了素描。 創建moodboard調色板,和最常見的顏色將會拿出最重要的色板快速使用后在設計過程。 除了常見的顏色,3.1更新允許您向文檔添加自定義顏色色板(根據3.3的beta指出,自定義調色板很快)。

最后,就像你可以滾動你的每一個文件在一個文檔,你也可以復制和粘貼對象和對象類型(如梯度和顏色填充)從一個文件到另一個地方。 這個特性在Photoshop是不可能的,但它是非常有用的。 能夠復制和粘貼元素從moodboard你的第一個模型,甚至從一個模型到下一個對象,是偉大的。

設計主頁

現在您已經了解了如何創建文檔中一些基本的風格,讓我們看看如何創建我的一些元素在主頁上。

艦隊的腳的主頁。 (?查看大版本?)

我最喜歡的特性之一草圖是內置的網格布局。 在Photoshop中,我不得不依賴插件,一系列的指導方針或單獨的層有一個臨時的網格,不會很容易編輯。 在素描中,您可以很容易地切換一個透明的布局指導,并迅速改變列和地溝大小。 編輯網格布局,去“視圖”→“布局設置。 “我已經創建了一個默認的1080像素,12日的一篇專欄網格與由水槽,我只是根據需要改變項目。 每當我想看到網格或關機,我只是打擊?控制+ L。

使用網格示意圖:簡單! (?查看大版本?)

如前所述,任何可能在素描的CSS是可能的。 創建圓角操作按鈕上點擊側邊欄的對象和調整半徑。 漸變疊加在圖像只有一個點擊添加,不要只依賴的顏色色板,并呈現忠實瀏覽器將顯示。

CSS3工具是漂亮的,其他幾個設計程序有這些工具。 草圖則更進一步,使設計師能夠準確復制這些元素的CSS樣式。 右鍵單擊任何對象復制的樣式,包括層的名字正如上面注釋的代碼。 這使得更設計和開發之間的無縫體驗。

除了創建和復制的CSS樣式,設計復制的內容是一件容易的事。 素描允許你將一組對象轉變為一個?象征?可以復制和重復,任何更改該對象會自動同步到所有實例!

查看博客文章感覺腳的底部的主頁。 因為只有三個,修改都不會是一個巨大的交易,但它仍將是乏味的。 使用符號,我們可以在圖像的大小,文本和顏色三個同時,讓生活更容易一些。 符號甚至模板之間的工作,所以如果我們決定使用清單博客頁面上的相同的布局,所有我們要做的就是復制符號的一個實例,和他們之間的變化同步。 當你準備添加的內容,就像一個圖像或一個標題,你所要做的就是右鍵單擊并分離對象從原來的象征。

符號可以簡化工作流程,節省你的時間。 (?查看大版本?)

雖然我使用符號博客文章和產品清單,我喜歡使用?動態按鈕?插件頁面上的按鈕。 插件按鈕實際上創建了一個符號,但是?自動調整填充?在雙方根據文本的長度。 這是一個很好的節省時間與頁面有幾個按鈕,這樣的主頁。 簡單地創建一個文本與初始按鈕文字層,選擇插件,編輯層的名字反映了填充你的按鈕的背景(例如?10:20:10:20),?命令+ J和哈! 你現在已經有了一個動態按鈕,您可以重復持續整個設計只是通過編輯按鈕的文本。

動態速寫的按鈕。 (?查看大版本?)

創建一個產品和團隊清單頁面

我觸碰短暫如何有用的符號可以在主頁上,但與大量的重復內容頁面,產品和團隊清單頁面嗎? 在使用一個符號來創建一個個人項目清單會很有幫助,內容最終將需要被添加到所有這些對象為了看現實的客戶端。

添加內容到20 +的物品在一個模型將是一個巨大的痛苦。 另外,客戶很少設計批準之前準備好內容。 值得慶幸的是,草圖有幾個插件自動生成內容的設計。

類似產品清單頁面,我們不想花大量的時間尋找鞋白色背景的圖片之前第一輪修改;相反,我們只需要一個圖像占位符。 的?天的球員?插件是一個巨大的資源,填寫各圖像占位符服務。 我喜歡Placehold.it?因為這是我工作的開發人員使用,和我使用?Lorem像素?特定的圖像。 選擇插件和服務你想使用的圖片,編輯選項為您的占位符,比如尺寸和顏色,并插入它在產品對象組。 這是容易得多比谷歌上搜索圖片作為占位符!

天播放器插件。 (?查看大版本?)

為樣機,需要更多填充內容,我喜歡?內容生成器?插件。 團隊清單頁面,例如,需要一個男性或女性形象,一個名字,一個標題和一些聯系信息。 使用插件,所有我要做的就是選擇圖像占位符框為每個團隊成員,去插件選項和選擇一個男性和女性的化身。 填寫姓名、電子郵件地址和電話號碼也同樣簡單。

素描的特點不僅僅是用于模擬與重復的內容,但是對于標準的web頁面。 我們說我們需要添加一些文本團隊頁面的底部,在那里有一些文本解釋職業艦隊的腳。 占位符文本,我們可以再次使用方便?內容生成器?插件填寫lorem ipsum文本,完全消除了需要找到一個在線服務來生成同樣的事情。 另外,你注意到文本的要點嗎? 素描的另一個很棒的特性是內置的一代的編號和項目符號列表——這一特性一直是缺乏其他設計項目(包括全能者Photoshop和屏幕設計型煙花)和辛苦乏味的實現。 能夠格式文本如何會出現在瀏覽器中是偉大的,和素描可以幫助您做到!

項目符號列表在素描嗎? 簡單! (?查看大版本?)

手機和平板模型設計

我提到了如何創建幾個元素為一個標準的web頁面。 現在,讓我們進入響應細節素描為何如此偉大的網頁設計。

素描的我最喜歡的一個特性是支持多種artboards畫布。 Photoshop迫使你創建多個PSD文件,然后在窗口之間切換各種原型。 這個過程是一個麻煩,我只會造成手機和平板模型的大項目。

在素描中,您可以看到桌面,平板電腦和移動模型?在一個視圖?同時,允許你的工作模型。 艦隊的腳,尤其是多個artboards被證明是特別有用,因為大量的模板。 在編輯符號、文本風格和顏色,我可以看到的變化是如何影響所有的模型。 看到這也有助于設計師保持意識的內容從桌面到移動流和交互。

多個artboads草圖讓你工作輕松桌面,平板電腦和移動模型在同一時間。 (?查看大版本?)

在草圖創建這些多個artboards也容易。 簡單的新聞?一個創建一個artboard和草圖將提供一個列表顯示28常見的屏幕和圖標大小可供選擇,包括“視網膜”大小。 這是響應設計中特別有用,因為你不需要擔心得到正確的尺寸在創建模型。

素描的另一個整潔的特性是您可以預覽設計在設備上他們是認為。 雖然不是技術上一個內置的特性,?素描的鏡子?應用同步開放文檔,讓你看看你的設計會在iPhone或者iPad和即時預覽更改。 這個程序已經被證明是適合做最后的調整和向客戶展示設計。

在創建草圖中的靜態模型在不同的斷點可以成為一個偉大的方式來顯示客戶端或開發人員如何應該出現的東西,這并不總是最有效的(或有效)。 給更多的流體和現實的預覽如何響應設計實際上會通過交互式原型正在迅速成為一個網頁設計師的必要性。 雖然素描沒有內置的原型特征,值得慶幸的是其他程序集成素描的工作流模型。 著名的交互式原型應用程序等?InVision?,?UXPin和?奇跡?現在可以直接使用草圖文件。 甚至原型插件看起來也在上升。?素描籌劃者?使用FramerJS?幫助您創建交互式原型直接從畫布,和目前工作草圖的最新測試版(3.3)。

移動開發

一旦艦隊腳設計已經準備好開發,是時候出口的資產。 當我第一次開始使用素描,我曾工作過的所有的開發人員,有這個應用程序,我不會強迫他們購買東西我只是測試。 因此,它是我項目的所有資產。

值得慶幸的是,素描使出口超寬松的所有文件。 把我們使用的圖標移動導航,例如。 只需單擊組圖層,然后點擊“導出”按鈕在右下角,我可以保存圖標在SVG web或PNG格式或PNG @2x視網膜顯示。 這涵蓋了所有的各種設備上顯示資產的基礎。

出口在素描的資產。 (?查看大版本?)

所以,我圖形資產交付給開發人員,但不知道如何將他們所有的顏色,字體和字體大小? 使這個簡單的草圖。 使用?素描風格庫存?插件,您可以創建一個點擊所有的庫存顏色的色板和十六進制代碼在頁面上使用。 字體以同樣的方式工作。 我喜歡使用插件創建一個文本風格庫存作為開發人員的參考指南。 還記得我提到的,您可以復制任何元素的CSS樣式文件嗎? 讓這些文本樣式可用的形式對于開發人員來說,你所要做的是選擇所有圖層的類型庫存,將CSS樣式和粘貼復制成一個樣式表。 使用草圖,可以讓開發人員的所有資產和風格,他們需要開始沒有他們曾經觸摸應用程序!

缺失的是什么?

在本文中我說了很多關于偉大的素描一直為我設計的工作流,但缺點呢? 應用程序仍然不能?只有設計方案在你的工具箱。 bitmap-editing工具素描還有很多不足之處,也不為我工作的大部分時間,使得我在Photoshop作物或刪除普通背景。 雖然密集的插圖工作可以通過素描,它經常減慢了應用程序。

素描的另一個缺點是它的插件。 雖然我已經沉迷于他們中的許多人在這篇文章中,我希望這些特性是直接內置草圖。 因為這些插件是由第三方,一個簡單的草圖或更新插件本身能使人癱瘓。 這意味著你永遠無法完全依靠他們在您的工作流。

最后,這個程序仍然局限于Mac OS X用戶。 這不僅排除設計師使用Windows,但它很可能,你可以分享一個本地文件與一名開發人員,項目經理或客戶。

結論

雖然它仍然絕對是一項正在進行中的工作,素描繼續是我最大網絡設計方案。 它的web工具和界面優化設計。 半成品artboard模板、符號和簡單的導出功能已經大大加快我的工作流程,使設計過程更加容易。 草圖也提高了我的整個工作流程,從moodboards到開發的早期階段,使其快速響應設計的最佳工具。

文章整理來自網絡，轉載請注明北京網站建設公司-北京傳誠信，翻譯不好，請見諒！