如何成為網頁設計師?

更新於 發佈於 閱讀時間約 3 分鐘

今年的9/08起,我回到校園與學弟妹們分享的一些職場點滴,與他們分享了一些版面設計、專題製作的方法。

高中生們所帶來的青春活力滿滿,同學們將心力全部投注於圖畫紙張,帶著顏料與筆墨,在校園內忙碌奔走——這些設計相關科系的學生,大概有一半是因為喜歡畫圖、喜歡漫畫而進到該科系的吧,然後在高中三年,匆匆忙忙塗塗畫畫,接著開始體悟到畫畫跟設計原來不一樣

在高中時期就能決定自己未來設計之路的是少數,大部分同學在努力備考後,就要盡快選擇一個自己不討厭,且能力範圍內可以就讀的相關科系。

沒有心理準備的情況下,會有選系焦慮是很正常的。

同學們大多會看到數位媒體系、商品創意經營、多媒體設計、商業設計系、視覺傳達系......等等琳瑯滿目的設計科系,而「網頁設計」應該只會出現在某一科系的必修或選修清單裡面。

在上網搜尋「如何成為網頁設計師?」之後,得到的答案大多都指向自學。

或許這個結果會讓人有些灰心,但學習網頁設計最重要的其實就是自學力,光是知道要上網搜尋,就很值得嘉獎,這將會是這條路上最重要的能力。

若還不確定自己的設計之路,請在大學期間試著多去嘗試吧,多方利用學校資源去了解自己有興趣的設計職業,思考自己希望具備的專業需要哪些條件。

不管選了哪一個設計科系,都有機會成為網頁設計師。

如果是希望成為一個全方位的網頁設計師,那除了設計美感之外還需要具備多方技能,比如網站佈局概念、HTML、CSS、JavaScript等網頁開發技術,並了解網站的目標用戶(user)需求,製作出相對應的圖像廣告,維護並經營網站。

此外,可能還需要了解網站SEO優化和使用者操作體驗等等的知識素養。

也就是說,除了設計系學生,資處和資工相關科系的學生也具備技術條件,他們可能在前端/後端的技術研究上更有天賦,在這條網頁之路上,不是你學程式就是人家來學美感,在這個過程中,彼此都是對方值得學習的對象。

接下來提到的,是除了美感之外,網頁平面設計師所需要的觀念,或許設計師們不一定要會實際的切版技能,但有RWD和div的概念,後續執行時才不會有太多問題,設計是來解決問題的,請尊重一起解決問題的人。


一、什麼是 RWD(Responsive web design )響應式網頁?

RWD是一種設計網頁的方法,其概念主要是利用CSS和JavaScript技術讓網頁能夠「依照不同的裝置和尺寸,自動調整版面、內容、效果」。

透過百分比寫法,這種方式可以有效率地提供最佳畫面呈現與使用體驗,在手機搜尋網站已成主流的情況下,RWD已是必需品。


這位作者介紹很淺顯易懂,若想了解更完整的概念可以追蹤閱讀

【 UI/UX 】RWD / AWD / PWA 網站最佳選擇?


二、網頁平面設計師在「設計」什麼?

在網頁設計中的「設計」,包括了網站地圖架構設計、視覺動線規劃、版面設計、圖像設計、色彩搭配、字體設計、使用者體驗等多方面考量。

整體核心會圍繞在:

「具有美感的情況下,必須要讓使用者能輕鬆地找到需求內容。」

在開始製作網頁設計前,請檢視網站製作的幾個條件:

  • 該案件是否有明確的企業識別系統?LOGO?標準色?象徵圖樣?客戶所擁有的資料條件和網頁設計完整度成正比,總不可能什麼都沒有就要來做網站吧? 可能還真的有

  • 是否已具有基本網站所需資料?內容是網站必備元素,設計師必須消化資料,呈現適當的文字長度和關鍵字。 就算是用GPT寫的也好

  • 到底是要做形象網站還是購物網站?若是要做購物網站,除了購物流程與金物流功能需要細細討論確認之外,也請記得定義出「會員」所需的功能喔,這會影響到優惠券功能派送方式,以及最常聽到的會員分級、金額累計規則,一個客製的購物網站是需要考量很多事情的。


三、課堂課題

在10/06、10/20上課的同學們,這篇文章是給你們的備忘。

  • 請試著從頭開始,為自己規劃一個作品集網站吧。
  • 然後,請搜尋一個自己有興趣的網站,為他的網頁改造一下吧。
留言
avatar-img
留言分享你的想法!
avatar-img
筱涵|Hannah的沙龍
9.3K會員
42內容數
二寶媽用瑣碎的時間來寫寫字,紀錄工作和興趣。
2025/03/14
在設計完成之後,提供的檔案格式都會因為情況而有不同,認識到差別,才能掌握到設計之外的細節,本篇文章將簡單介紹最常見的 6 種圖像格式,以及其他檔案交付格式、瀏覽器相容性查詢工具Can I use。
Thumbnail
2025/03/14
在設計完成之後,提供的檔案格式都會因為情況而有不同,認識到差別,才能掌握到設計之外的細節,本篇文章將簡單介紹最常見的 6 種圖像格式,以及其他檔案交付格式、瀏覽器相容性查詢工具Can I use。
Thumbnail
2025/01/02
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
2025/01/02
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
2024/12/13
2024/12/13
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
自學,讓你主動探索領域的更多面貌。雜食與自學的開始,在於各種的不滿足。正規教育即是照著課綱的規劃,經由老師授課學習;自主學習則是依據自己想學習的部分去主動找尋資源,主動學習。對我而言,這兩種都很重要。
Thumbnail
自學,讓你主動探索領域的更多面貌。雜食與自學的開始,在於各種的不滿足。正規教育即是照著課綱的規劃,經由老師授課學習;自主學習則是依據自己想學習的部分去主動找尋資源,主動學習。對我而言,這兩種都很重要。
Thumbnail
研究所在做什麼? 設計系有需要唸研究所嗎? 唸完研究所可以做什麼? 很難畢業嗎? 已經大三、大四快畢業的你是不是也有相同的疑問? 雖然說我也沒辦法給你肯定的答案,但分享這一年的研究所經歷, 也許可以讓你思考一下自己是否有需要繼續攻讀!!
Thumbnail
研究所在做什麼? 設計系有需要唸研究所嗎? 唸完研究所可以做什麼? 很難畢業嗎? 已經大三、大四快畢業的你是不是也有相同的疑問? 雖然說我也沒辦法給你肯定的答案,但分享這一年的研究所經歷, 也許可以讓你思考一下自己是否有需要繼續攻讀!!
Thumbnail
濃縮史丹佛設計學院開設的生涯規畫課,由兩位教授編寫。透過自身的工作觀、人生觀為出發點,觀察自身日常狀態,找出最適合自己的工作生涯。
Thumbnail
濃縮史丹佛設計學院開設的生涯規畫課,由兩位教授編寫。透過自身的工作觀、人生觀為出發點,觀察自身日常狀態,找出最適合自己的工作生涯。
Thumbnail
這篇文章主要討論大學設計系學生進入職場的優勢與能力,並提出了在大學四年應該要培養的能力。作者分享了自己的分析,認為大學設計系學生應該要把握機會發揮自己的創造能力,成為一位maker。文章內容鼓勵學生勇於實踐自己的想法,並給予了具體的建議和示例。這篇文章對於設計系學生來說具有很高的參考價值。
Thumbnail
這篇文章主要討論大學設計系學生進入職場的優勢與能力,並提出了在大學四年應該要培養的能力。作者分享了自己的分析,認為大學設計系學生應該要把握機會發揮自己的創造能力,成為一位maker。文章內容鼓勵學生勇於實踐自己的想法,並給予了具體的建議和示例。這篇文章對於設計系學生來說具有很高的參考價值。
Thumbnail
畢業十年了重新踏入校園 其實蠻期待的 一直以來都很喜歡學習新事物 在上班期間有時候會去上一些產業人才投資方案的課程 上過攝影課、韓文課、不動產經紀人的課、吉他課 不管是跟工作有關無關我都是一個熱愛學習的人 但老實說是因為我常常感受到焦慮且總覺得自己不足 所以拼命的學習但這些學習是真的有用
Thumbnail
畢業十年了重新踏入校園 其實蠻期待的 一直以來都很喜歡學習新事物 在上班期間有時候會去上一些產業人才投資方案的課程 上過攝影課、韓文課、不動產經紀人的課、吉他課 不管是跟工作有關無關我都是一個熱愛學習的人 但老實說是因為我常常感受到焦慮且總覺得自己不足 所以拼命的學習但這些學習是真的有用
Thumbnail
除了分享網頁設計公司的其他職務,這篇文章將實際應用《我們為什麼要讀書,為什麼要工作》這本書所提到的方式,探討與分析設計系對應各種不同職務時的優勢。
Thumbnail
除了分享網頁設計公司的其他職務,這篇文章將實際應用《我們為什麼要讀書,為什麼要工作》這本書所提到的方式,探討與分析設計系對應各種不同職務時的優勢。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News