【網頁設計教學】29個技巧讓你成為專業的網頁設計師
網頁設計教學29個技巧

【網頁設計教學】29個技巧讓你成為專業的網頁設計師

學習網路設計的基礎知識是否仍在您的“某天”列表中?你為什麼還沒有開始呢?我們匯總了30條提示和資源,可幫助您從本月開始學習網頁設計(甚至可能會找到自己的新職業!)

想要學習新知識或闖入網站的平面設計師,印刷設計師和創意人員,請不要拖延。每天,如果您不邁出第一步,就會使您比其他所有人落後一天!

按照以下步驟開始學習如何在30天內創建您的第一個網站,行業最佳實踐等等。

1.建立一個網站

開始學習網頁設計的最好方法是開始建立自己的網站。

我建議您創建一個部落格。我開了一個部落格只是為了擁有一個網頁設計場所,然後7年後,我發布了關於該主題的暢銷書。擁有個人網站(部落格)為您提供了一個嘗試新事物的地方,如果您搞砸了,老闆也不會解僱您。

您不必從龐大的網站或瘋狂的設計開始;從小開始。玩這個網站,弄清楚什麼使事情起作用。(並確保檢查代碼,這樣您就可以開始熟悉使網站正常運行的內容。)

想要快速上手嗎?像Wix這樣的網站建設者可以幫助您從時尚的網站設計入手,同時您也可以開始學習進入網站的概念和基本步驟。

2.閱讀所有你能做的

開始閱讀。因為您在此部落格上,所以您可能習慣於跟踪設計世界中正在發生的事情。繼續閱讀。

閱讀有關網站設計,趨勢,技術和最佳實踐的所有信息。在社交媒體上關注您欣賞的設計師。

也為您的網站設計閱讀投下了廣闊的網路。閱讀有關學習一些代碼的基礎知識,了解設計理論,以及閱讀教程和當前文章。

3.成為有效的溝通者

如果您不是最善於表達的人,請複習那些技能。網站設計的很大一部分是交流。

網站設計人員必須定期與客戶溝通,以找出設計需要解決的問題;他們必須傳達這些解決方案並加以實施。

4.訂閱Tuts +和Envato Elements

考慮訂閱Envato Elements,這也使您可以訪問出色的Tuts +學習資源。

Tuts +出版有關圖形和網頁設計的常規課程,從基本技術到最新的高級方法和開發。由專家講師講授,完全自定進度。您還將獲得Envato Elements的訪問權限,Envato Elements是查找圖形,模板等可插入您的Web設計工作的好資源。

5.用HTML思考

HTML或超文本標記語言是網站設計的基石。HTML是幫助創建網站結構的框架,一旦您可以閱讀該語言,網站設計的世界就會變得更加有意義。

W3Schools有一個很棒的HTML入門教程,其中包含數百個HTML示例,您可以在螢幕上玩這些示例,以查看發生了什麼以及它如何工作。(您可能會發現它比您想像的更直觀。)

6.在Codeacademy玩代碼

儘管HTML是一個不錯的開始,但是您幾乎可以從Codeacademy學習任何編程語言。該免費工具集可教您使用交互式活動和遊戲進行編碼。

您可以在需要的時間和地點選擇Codeacademy課程,並根據需要開始和停止。選擇一個要學習的學科– Web開發,編程,數據科學–或重點關注的語言– HTML和CSS(一個很好的起點),Python,Java,SQL,Ruby等。

7.學習理解CSS

CSS或級聯樣式表定義以HTML或XML和SVG編寫的文檔的表示形式。

根據Mozilla的定義

CSS描述瞭如何在螢幕,紙張,語音或其他媒體上呈現元素。

Mozilla還具有大量的CSS資源入門,對CSS的工作方式進行了紮實的介紹,包括選擇器和屬性,編寫CSS規則,將CSS應用於HTML,如何指定CSS的長度,顏色以及其他單位,等其他的網頁設計教學

8.將您的設計技能應用於網路

如果您已經在創意或圖形設計領域工作,那麼請考慮一下您已經知道可以應用於網站設計的內容。基於媒體,使視覺上具有吸引力的原理不會改變,所有設計理論也將在數字空間中派上用場。

儘管諸如學習代碼之類的元素可能並不自然,但擁有設計背景卻是一大好處。如果沒有人想要與它進行交互,那麼一個編碼精美的網站有什麼用?

9.注意您喜歡的網站

記下您喜歡的網站。他們對您有什麼吸引力?(以及如何學習複製這些元素?)請注意:

  • 版式
  • 導航
  • 圖像和空間的使用
  • 表格設計
  • 動畫和滾動效果
  • 顏色

10.繪製線框

線框最純粹的形式是網站構圖。它不是美學元素的輪廓,而是網站的藍圖。繪製線框並不是真的與這種設計的外觀有關,而是與其中的信息結構有關。

不確定如何創建線框?《數字心靈感應》具有最佳實踐指南,可幫助您學習。

11.花一些時間學習素描

Sketch是Mac的矢量繪圖工具,可輕鬆創建設計元素。許多設計師都轉向Sketch來創建UI元素並重複設計塊。

它帶有插件,可以導出代碼以方便使用和訪問。自Adobe的Creative Suite以來,它是功能最強大,最受歡迎的工具之一,值得您花時間。

12.與時俱進

很難跟上這麼多新技術和趨勢。但是您需要指出一點,以掌握這些變化。

一次解決它們,並從與您所做工作最直接相關的技術開始。如果您有一個在線上聊天的網站,請先學習有關機器人的知識。或者,如果您使用大量視頻內容,請播放360度視頻。

人工智能和虛擬或增強現實等元素甚至更加複雜,但很可能會成為網站設計中不可或缺的一部分。至少,您應該知道它們是什麼以及潛在的用途。

13.熟悉SEO

儘管許多Web設計師認為SEO專家可以處理使網站準備好以供搜索引擎閱讀的工作,但仍有許多與SEO相關的設計工作。

從上傳圖像的方式到創建乾淨的代碼(快速在頁面和元素上包含元描述),設計人員應將搜索思想納入其工作流程中。

自由職業者,這對您也至關重要。大多數客戶都很聰明,可以要求一個SEO優化的網站。如果您是一個人工作,則需要足夠的知識來創建一個可供Google閱讀的可靠框架(如果需要完成更多工作,還可以將客戶推薦給SEO專家)。

14.與網站建設者一起玩

網站構建器可能是使您熟悉最佳實踐以及如何開始構建和設計網站的好方法。

這些工具中的大多數都有大量的網站範本,可讓您自定義元素,甚至添加代碼段。對於簡單的網站,許多網站建設者還提供免費計劃,您可以在其中創建個人作品集頁面或充當您遊樂場的基本網站。

然後在網站構建器中拆開各個部分。查看它們的設計和編碼方式,以感受它們如何組合在一起。僅僅通過挑選另一種設計,您將對發現的一切感到驚訝。

15.尋找導師

是否有您喜歡的與您合作的人擔任網頁設計師?帶他們去吃午餐,並為這個行業動腦筋。

找到願意與您合作並幫助您思考該領域以及如何自己學習網頁設計的導師是非常寶貴的。儘管您可以在線上社區中找到導師,但沒有什麼比您可以定期面對面見面的活人更好的了。(也許值得線上和面對面的指導。)

16.加入CodePen社區

一旦您開始熟悉一些代碼和編程,便想加入CodePen社區。開源社區允許您在各種社交網路中共享和編輯代碼段。

該網站的創始人提供了更多信息:“ CodePen是一種社會發展環境。從本質上講,它允許您在瀏覽器中編寫代碼,並在構建時查看其結果。對於任何技能的開發人員而言,都是有用且自由的工具,尤其是對那些學習編碼的人來說,具有增強的功能。我們主要專注於前端語言,例如HTML,CSS,JavaScript和可轉化為這些內容的預處理語法。”

17.上課

對於某些學習者而言,更正式的課堂環境是最好的。

有大量的線上和線上課程供您學習網頁設計基礎。從本地大學或線上學習中心(例如Udemy或Coursera)開始。按照您當前的能力水平上課,然後繼續前進。

18.想做點什麼?去google上查詢

對於不是那麼傳統的學習者,請在Google上找到有關網頁設計問題的答案。有太多的教程和視頻可以帶您解決幾乎所有問題和解決方案。

關鍵是準確搜索您需要知道的內容,並尋找有信譽的答案來源。這是有關教程和視頻的另一個提示-更新的內容可能會為您提供更好,更完整和更相關的答案。(請記住,其中一些東西變化很快。)

19.注意用戶體驗

沒有什麼能像用戶體驗設計那樣造就或破壞網站。您需要為此計劃並理解它。

以下是Interaction Design Foundation如何描述UX設計的方法:

用戶體驗(UX)設計是創建提供有意義且與個人相關的體驗的產品的過程。這涉及產品的可用性的精心設計以及消費者從使用該產品中將獲得的樂趣。它還涉及獲取和集成產品的整個過程,包括品牌,設計,可用性和功能方面。

UX設計人員或意識到體驗形成過程的設計人員試圖創建並塑造有意影響過程的因素。為此,UX設計人員將考慮產品使用原因,用途和方式。

20.注意設計趨勢

現代網站設計是什麼樣的?這不是一個棘手的問題。要設計現代網站和用戶體驗,您需要知道用戶想要什麼以及他們如何與之交互。如果您上一次下載應用程序或瀏覽手機上的網站是2016年,那麼您有很多基礎。

創建具有現代風格和趨勢並融入設計的網站設計將有助於您的項目脫穎而出。您如何知道趨勢?繼續閱讀此類網站,並註意其他設計師的工作。注意您經常訪問的網站中包含的顏色,樣式和功能。

21.無色創建

開始每一個設計都沒有顏色。一位偉大的設計師曾經告訴我,如果您的設計是黑白的,那麼它的色彩將是完美無瑕的。

那可能並不總是成立,但這是一個很好的起點。

通過創建黑白設計,您可以看到元素在哪裡形成對比以及它們如何一起發揮作用。您已經消除了由於顏色或眼睛移動而引起的任何情感聯繫。這種最簡單的設計形式會在最終確定之前讓您了解某個東西是否可以作為一個概念。

22.挑選一個UI工具包

下載用戶介面或圖標套件,然後將其拆開。

正如您可以檢查網站的代碼一樣,請查看如何為網路構造設計元素。記下比例和網格,查看顏色混合以及在Photoshop或Illustrator中如何組織文件。

尋找要下載的套件,其中包括用於高分辨率顯示的多種格式的元素。(下載一堆JPEG不能很好地為您服務。)

然後嘗試構建或自定義一個或兩個元素。

23.成為一名印刷師

現代網站設計著重於版式…好的版式。從帶有醒目的單詞的英雄標題到將用戶吸引到設計中的文本層,了解如何配對字體元素和構造引人入勝的文本塊的原理至關重要。

從艾倫·盧普頓的類型思維開始。(還有一本同名的書。)盧普頓(Lupton)是印刷術的權威,她的信息會讓您立即像印刷術師一樣思考。

24.跳入JavaScript

當您開始對涉足網頁設計感到非常滿意時,請再次挑戰自己以學習JavaScript。在HTML和CSS之後,它是網路上最重要的語言。

JavaScript是允許設計人員在網頁上實現複雜事物和交互的工具。這是使滑塊滑動或使視差動畫動畫化的原因。

Learn JS具有交互式教程,可以幫助您入門。

25.更新您的投資組合

一旦開始為Web設計,請確保使用Web設計項目更新您的產品組合。這個簡單的操作將幫助您向自己和其他人表明,網頁設計是您創作的一部分。

更新後的產品組合可以幫助潛在客戶了解您的“風格”。確保展示佈局,顏色,版式和展示您可以做什麼的不同技術。

26.挑戰自己

如此眾多的快捷方式和代碼段可幫助您修復幾乎所有遇到的網站問題,不要懶惰。記住要不斷挑戰自己,以學習新技能,新技術來不斷改進您的網頁設計遊戲。

關於這一領域的一件事是它在不斷變化。總會有一些新東西要學習或嘗試。

27.最大化您的體驗

出去那裡設計。您必須開始設計網站才能成為網頁設計師。

從小處開始,但要與他人一起進行項目。要求加入一個與團隊合作的項目。為朋友處理一個小型網站。您建立網站的經驗越多,您就會越快越好。

你在等什麼?別磨蹭了。

28.尋求意見

使用您的網路收集有關您的網站設計項目的意見,無論您認為它們有多小。聆聽此意見-即使您不喜歡它,也可以學習。

除了視覺偏愛之外,提供意見的人是否提出了使網站功能更好的建議?他們可以容易地理解設計目標嗎?他們與消息傳遞聯繫了嗎?

29.繼續學習新事物

要成為一名出色的網站設計師,您只需要繼續玩,嘗試和學習新事物。重點介紹網路並與該領域的其他人進行交流,以便您可以掌握所需的技術和視覺變化。

如果您想學習網站設計,那麼您可能已經經常這樣做。但這是一個不斷發展的領域,並且幾乎每天都在變化。隨便問問做這件事的人。

Leave a Reply