網(wǎng)頁設(shè)計師和前端開發(fā)人員工作流程提示

2013-12-05    分類: 網(wǎng)站建設(shè)

網(wǎng)頁設(shè)計師和前端開發(fā)人員工作流程提示
有沒有一個正確的工作流程,建立一個網(wǎng)站。但也有為了提高您的工作流程,使您的工作更輕松一點的方式。

無論你的設(shè)計或編寫代碼,通常是有一部分的過程,可以簡化。這可能取決于你是單獨工作或在團隊環(huán)境中的變化。但如果你知道如何調(diào)整你的過程中你可以得到這樣的項目較少的手動任務(wù)更快。
在過去成都網(wǎng)頁設(shè)計已經(jīng)覆蓋響應(yīng)工作流程在這篇文章中我想分享共同的設(shè)計及開發(fā)流程的優(yōu)化策略。我會提供創(chuàng)作過程中的技巧和資源,幫助網(wǎng)頁設(shè)計師和開發(fā)人員有更多的準(zhǔn)確度和精密度,建立自己的項目。


一個線框

開始在每一個Web項目的線框是一個好主意。這有助于你充實的內(nèi)容思路、布局風(fēng)格,并組織頁面元素的logo,導(dǎo)航條,按鈕和CTA。

你最初的目標(biāo)應(yīng)該是建立一個粗略的布局使用低保真的線框圖。讓他們快速和松散。你會節(jié)省時間的好的壞的想法和激光。

如果你需要一些線框模板開始我推薦種畫廊全數(shù)字線框圖。

但我個人更喜歡工作紙快速素描鉛筆。這是任何人誰想要快速原型框架從零開始的想法很快下降我好的建議。擦在紙上是更容易和你有更多的控制在整個素描過程。

不要害怕放下10個或更多不同的線框的想法。我第一次得到它的權(quán)利,我不認(rèn)為任何其他設(shè)計師做。
如果可能的話,盡量在移動到你最后的線框模型得到精確的。
這樣你有更少的猜測下管道和各個階段的發(fā)展只是進(jìn)一步明確您的原始概念。

網(wǎng)頁設(shè)計師和前端開發(fā)人員工作流程提示
復(fù)制行為規(guī)劃

一旦你大致知道網(wǎng)站應(yīng)該可以開始進(jìn)入細(xì)節(jié)。這可以從一個模型,但我更喜歡建立一個高保真線框圖的第一。
這包括把樣品組件和Web復(fù)制到線框,看起來不錯,引導(dǎo)用戶到頁面。

這是一個艱巨的任務(wù),它會略有不同,每一個項目。但是你應(yīng)該想想你的用戶想做的事并牢記這整個時間。

同時考慮可用性和你的抄本能影響用戶體驗。
沒有唯一正確的方法來寫內(nèi)容。但寫作應(yīng)該是令人信服的,引導(dǎo)用戶進(jìn)一步進(jìn)入網(wǎng)站。


而規(guī)劃的高保真線框圖有助于增加隨著抄本圖像占位符。這樣你可以看到如何布局最終沒有使用填充內(nèi)容看。

還要考慮大標(biāo)題和自定義樣式的頁面復(fù)制喜歡的項目符號列表的值。你的標(biāo)題文字吸引用戶進(jìn)入每一段你經(jīng)常有短短的幾秒鐘來抓住他們的注意力。

總是在兩個概念在設(shè)計網(wǎng)頁文字工作:明確的對比和大量的空白。

你不需要在這一步中選擇一個字體、文本顏色。如果你的線框圖是易于瀏覽的應(yīng)該是一目了然的。

了解用戶的行為使得它更容易建立副本,可以幫助用戶繞過網(wǎng)站。這種高保真/光模型可能是最重要的階段,因為一旦你進(jìn)入完整的樣機設(shè)計你已經(jīng)知道布局具有可讀性和易于使用的。


信托前端框架

有很多圍繞前端開發(fā)框架。這些主要包括圖書館一樣反應(yīng),角,和灰燼。

所有這些可以節(jié)省時間,建立一個新的站點的時候,如果你知道如何使用你選擇的框架。目的并不僅僅是為了簡化前端開發(fā)也是建筑師你的整個網(wǎng)站。退房這個線程了解更多一點。

任何框架的主要目標(biāo)是將復(fù)雜的功能,幫助您建立多與少的代碼?,F(xiàn)代的js框架處理用戶輸入和控制數(shù)據(jù)如何從后臺轉(zhuǎn)移到前臺。

新角2釋放這是否好,已經(jīng)獲得了很多關(guān)注。

但是我已經(jīng)很感激Ember.js開箱路由和異步行為的細(xì)節(jié)特征。余燼的學(xué)習(xí)曲線是陡峭的但與正確的學(xué)習(xí)資源你可以快速移動,甚至享受學(xué)習(xí)的過程。

大的好處一個框架是模塊化的時候,建立一個新的項目。

你知道從哪里開始,如何規(guī)模,以及如何組織新的文件具有相同的結(jié)構(gòu)。建筑是一樣重要的是你如何寫你的代碼。

如果你想了解更多的檢查本指南看看其他開發(fā)者實現(xiàn)前端框架為現(xiàn)代Web項目。


測試&調(diào)試

當(dāng)我第一次開始IE6仍然受歡迎的寫代碼。如果你不知道的,Web開發(fā)人員一些不滿Internet Explorer。

瀏覽器的怪癖是很不常見的這些天,但他們?nèi)匀淮嬖?。為此,測試仍然是你的開發(fā)工作流程的一部分。

除了主要的瀏覽器漏洞會之間如何某些瀏覽器渲染的邊緣,圖案,盒尺寸較小的差異,并在瀏覽器引擎WebKit像壁虎與相似的性質(zhì)。

測試的方法之一是讓所有這些瀏覽器在您的計算機上。在你做出大的改動你的代碼只是檢查你的工作在所有的瀏覽器。然而,這會令人討厭,快。

相反,嘗試使用瀏覽器測試工具,可以節(jié)省時間和挫折。這里是一些最流行的選擇:

browserstack
瀏覽器快照
browserling

我還建議開發(fā)人員添加響應(yīng)的測試工具為他們的工作流程。

這有助于你在每個主要的斷點檢驗響應(yīng)式布局無需不斷調(diào)整和切換瀏覽器。

我最喜歡的兩個擴展響應(yīng)網(wǎng)頁設(shè)計測試和視口縮放。兩者都是完全免費的,現(xiàn)場測試工作。

另一個工具,我強烈推薦的是在瀏覽器中調(diào)試控制臺。這是偉大的為測試JavaScript代碼,希望在你的HTML / CSS代碼驗證潛在的錯誤。

所有這些工具都是在調(diào)試過程中非常有價值的。但每個開發(fā)者會落在自己的工作流程,所以它是由你來決定哪些工具提供大的價值。

網(wǎng)頁設(shè)計師和前端開發(fā)人員工作流程提示
結(jié)束了

沒有一個合適的方法來構(gòu)建一個工作流的Web。但有好實踐和技術(shù),你可以通過使過程更順暢、更易于管理。

我希望這些小貼士可以幫助塑造你的工作流在設(shè)計和開發(fā)方面的。它現(xiàn)在更容易建立和推出一個新的網(wǎng)站,所以如果你不斷推出新項目,這些小技巧可以使一個長期處于不同的世界。

分享標(biāo)題:網(wǎng)頁設(shè)計師和前端開發(fā)人員工作流程提示
文章URL:http://www.bm7419.com/news/17884.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、虛擬主機、全網(wǎng)營銷推廣、電子商務(wù)品牌網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)