【網頁設計】初學者必備基礎技能及編碼練習資源

【網頁設計】初學者必備基礎技能及編碼練習資源

 

網頁設計,對必備技能的紮實掌控是你走向成功的必經之路。

如果你對這些技能熟悉,那麼能更好的做設計決策,更快更好的完成工作。

如果其中有些部分做的並不太好,也不要緊張,

只要將這些基礎的東西稍加努力練習就搞得定。

 


 

快速發展的技術、千變萬化的趨勢、應接不暇的軟件和素材,

都是網頁設計師需要面臨的挑戰。

但是撇開這些一直變化的東西,

有一些基本的技能或者說能力,是設計師必須熟練掌握的,

甚至需要網頁設計師們閉著眼睛都能搞定相關的問題。

那麼,今天我們簡單統整一下網頁設計師必須具備的十大基礎技能吧。

 
 

1、熟練掌握HTML/CSS代碼

不論你是不是開發者,

網頁開發最基本的語言HTML/CSS 你是有必要掌握的,

要知道如何閲讀、編輯並解決問題。

然而根據設計師/開發者的實際工作情況,

你所需要瞭解的程度、範疇甚至會更廣一些。

在任何情況下,你都應該清楚樣式、色彩要如何通過代碼來進行控制和調整,

從長遠來看,這些技能是極其有用的。

♦ W3Schools,你可以學習這些代碼語言和使用方法。

 
 

2、編輯圖片

在任何設計領域,好像總和圖片脫離不了關係,

絶大多數甚至是需要整天編輯處理圖片。

從最基本的裁剪、調色和修補,你應該能夠從容地修整圖片,

至少你應該瞭解如何能夠儘可能好地對圖片進行優化。

好在Digital Camera World網站提供了一套行之有效的圖片處理技巧,

僅需六步就可以搞定絶大多數圖片的優化處理。

♦ Digital Camera World- Tutorials

 
 

3、瞭解印刷

雖然你絶大多數時候可能都忙於數字化的設計,

但是總會有一些設計是需要借助到印刷的。

從名片到新聞稿,這些東西在設計之初就要為印刷做好準備。

在這方面,最值得注意的還是不同媒體的分辨率和色彩的控制。

舉個例子:

如果你將文本的色彩設置為FF0000的話,印刷出來的效果可能和你設定的有出入。

對於印刷品而言,

色彩使用的是CMYK(青色、品紅、黃色、黑色),四色混合來實現不同的色彩印刷。

 
 

4、書寫標題

在進行網頁設計的時候,

正文部分可用假文(Lorem ipsum)來作為占位符,但是標題則不能如此。

當你在進行概念設計的時候,

標題是視覺和內容資訊的黏著劑,它們之間必須要有連貫性。

一個合理的標題文本可以清晰地告訴客戶這個地方要多大的空間,有什麼樣的效果,

它會給客戶留下清晰而持久的印象。

目前推薦Copyblogger,它提供了不錯的文本和文案案例,你可以從這裡開始。

 
 

5、熟悉各種設備

作為一個網頁設計師,肯定要熟練地用各種數字設備來瀏覽網頁。

不同的系統、不同的設備在瀏覽網頁這件事情上還是有差異的,

所以你應當適時地離開自己最熟悉的電子設備,去嘗試更多的數碼設備。

沒有什麼比在一個老舊的手機的小窗口上瀏覽網頁更痛苦的事情了,

但是這有時候就是實際情況,作為網頁設計師的你應該對這種情況有所瞭解,

確保自己的網頁能在任何情況下都可以流暢的瀏覽。

 
 

6、敢於手繪

也許你並不是美術專業出身,但是你需要敢於用草圖來傳遞訊息。

討論中不論有什麼樣的想像和構思,用手繪和草圖來表現能夠更清晰的闡述出來。

請記住,線框圖和大綱才能更好地傳遞訊息。

你無需成為手繪大師,不用字寫的非常漂亮,

但是你需要敢於這麼做,自信地用手勾勒出這一切,落於紙上,並與人分享。

 
 

7、使用通用框架

在創業階段使用常見的網頁設計框架並不是什麼丟人的事情,

實際上,除非你真的是特別專業而強大的開發者,最好還是使用通用的框架。

你不用重新發明輪子。

一樣的道理,使用通用的框架可以讓別人也更好的使用你的網站和產品。

如果你的網站需要最終交付給客戶,那麼從長遠來看,用通用框架更好維護。

比如WordPress這樣的系統就不錯,支持廣泛,功能強大。

 
 

8、備份和打包

網站看起來是個完善的整體,但是實際並非如此,它同樣是容易損壞且脆弱的。

備份網站是一門必修課。

你應當瞭解網站系統中哪些東西比較容易損壞,多久備份一次比較合理。

即使你不明白其中的道理,至少要瞭解哪些需要保存,備份應該備份在什麼地方。

此外,

你應該瞭解如何將網站樣式、設計相關、個性化、客戶文件

以及系統的關鍵性文件在哪裡,還有如何打包它們。

 
 

9、瞭解趨勢

你並不需要精通全部的網站設計和技術趨勢,但是你需要適時地去瞭解它們。

簡單來說,重要的不是對所有趨勢如數家珍,

但是你至少要深入瞭解至少三個流行趨勢,能夠說明白這些設計趨勢在視覺上的特徵,

為什麼要用它們,它們的運作原理是怎樣的,你為什麼喜歡或者不喜歡它們,等等。

多閲讀設計趨勢文章,你就能搞定這一點。

 
 

10、解釋設計理論

色彩、流程、平衡、比例、間距,這些常見的設計概念你都瞭解了嗎?

當你在進行設計項目的時候,這些概念你都應當瞭解並運用起來。

設計並不是單純的好看,內在的概念也原理能告訴你為什麼它這樣才會漂亮。

理解了它們,能自己解釋它們,你才能創造出平衡的美感。

每一次向別人解釋這些概念,探討這些原理,你會對這些基礎掌握的更加紮實。


最後在結尾

小編要推薦網頁設計新手們一個輕鬆練習程式碼的方式。

「 Code.org 」與知名遊戲合作,推出許多程式課程的小遊戲

基本的程式碼編寫大同小異,若是能以小遊戲的方式加以練習,

相信腦中會更輕鬆的記錄程式碼編輯架構,

有興趣的你,不妨也來體驗看看吧~

 
【TC推薦活動】
如果你對前端的網頁設計非常有興趣更是不能錯過這次的活動,
或是對程式語言有興趣卻仍然無從學起,
你可以報名參加下面的免費活動,不再只是聆聽別人的經驗,
更透過自己的實作經驗來了解自己是不是真的有興趣。
兩小時內讓你學會一個框架!
◆◆◆ 免費 Vue.js專案實戰課程資訊 ◆◆◆
2018年10月18日(四)

學習程式語言只是個開始,永遠不嫌晚。
還在對程式語言感到迷茫,不知從何開始嗎?
對程式語言有興趣卻從來無機會有人能帶領你嘗試嗎?
歡迎來報名此次的免費體驗課程!
前往了解活動資訊:https://goo.gl/jBVcHz
《延伸閱讀》

・【網頁設計】打破框架的十大網頁趨勢

・10個設計師必知的免費國外實用工具

 

 
主圖 Photo by Christina Morillo from Pexels/
資料來源 优秀网页设计其餘文字則為TC的創作,內容未經授權不得複製、轉載。

Close Menu