網頁有什麼
粗略上來看，目前市面上瀏覽器打開的那個「畫面」，就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站，最常見的大概就是廣告。上方廣告橫幅、下方廣告橫幅、蓋版廣告、文章內容背景捲動廣告、看影片先看 10 秒廣告、Download 本身是廣告（下載按鈕在下面用小字）、點站外連結先幫你檢查（看）是（一）否（下）是（聯）惡（播）意（網）連（廣）結（告）等等。
具體來說，網頁就是廣告（欸不對！
回到正題，我們不以整個網站來討論，單就「一個頁面」來說，具體上有：
- 網站的天（上方橫幅），通常是選單、Logo 或使用者登入等資訊。
- 網站的地（最下方橫幅），通常會有網站的 Copyright 或聯絡資訊，更多的站內連結等。
- 網站內容，五花八門的廣告都在這邊。
以上是「看得到」的部分，看不到的部分會有：
- 隱藏在
<head>標籤內的設定。<meta>相關標籤。- 樣式表（CSS）。
- 程式碼（JavaScript）。
<body>當中的第三方套件引用程式碼（JavaScript）。- DOM 結構。
Iframe 自己衝流量。
我們要製作這樣的「畫面」，會需要的部分有：
一個前端工程師。
一個不夠你可以找兩個。
在畫面上我們需要考慮的點，具體上來說會有：
- 文字字形與尺寸的影響。
- 基本的 SEO。
- 語意標籤的使用。
- 使用者體驗是否合理。
- 需考慮不同尺寸的「裝置」。
- 圖片的應用（根據顯示裝置解析度）。
- 網站的讀取速度。
- LCP, FID, CLS via. Google 好蚌蚌。
- 各種社交外掛的分享資訊。
小心埋太多 AdSense 被停權。
所以，如果你覺得手刻網頁很落伍，用工具產生好棒棒，那麼應該可以不用繼續看下去。工具有工具的快速便利，手刻有鍵盤碰撞敲擊，各種頤指氣使的溫度，端看你覺得哪一種比較合胃口，不強迫推銷。
要設計什麼
廣告要怎麼跳才不會被討厭
通常都會需要有被討厭的勇氣，才有辦法在這個競爭激烈的環境下留有一口氣息。專業的網頁設計師，我個人覺得需要具備一些基本的特性：
- 給的是 Sketch / XD 而不是 AI。
- 給的是 Sketch / XD 而不是 PSD。
- 給的是 Sketch / XD 而不是 PSB。
- 知道 iPhoneX Scale Factor 是 @3x。
- 知道 HTML/CSS 不大算是程式碼。
- 理解平面設計與網頁設計不同的地方。
- 理解設計師與前端工程師不同的地方。
由於我不是專業設計師，所以可能給不出相對好的說法。對於網頁設計，我們需要著墨的重點有幾個：
- 內容流動與斷點。
- 效果呈現與使用者體驗。
- 思考操作方法與介面設計。
在網頁設計上，除了圖像跟視覺效果以外，我認為整體文字流動、排版跟呈現方式，也屬於設計範疇。例如，在 1920px 能夠呈現的段落，跟在 375px 能夠呈現的段落，絕對是完全不同的事情。還是說，你覺得 iPhoneX 寬度是 1125px 的話，我也是不好意思說些什麼。
使用者體驗這件事情，其實挺主觀的，就跟煮火鍋加芋頭，有人覺得好吃，有人覺得不好吃一樣。但在大多數的情況下，某些結論也是成立的，例如，
- 蓋版廣告的
x可點擊區大概都是14px左右。 - 影音廣告的 Skip 大概都是 10 秒以上。
- 下載按鈕大概
200px x 88px，然後真的下載網址在右下角寫著 Download。
所以說，廣告就是一種考驗使用者體驗的最佳驗證方式。再好的設計只要加上廣告，馬上變得俗不可耐，但礙於任何業配、贊助或甲方的金援，我們也只能默默的吞下去。
所以，在主流之中，操作方法跟介面就會有一些方向可以依循。舉例來說，IG 的瀑布流、Twitter、BBC News、Apple 或 Google。對於操作方法或介面，我們比較常聽到的大概會是，
- 左邊一點，再左邊一點。
- 字體大一點，再大一點。
- 我覺得這個要往上
1px。 - 右邊一點，再右邊一點。
- 我要換微軟正黑體。
說著說著我都要哭了。
設計師與前端工程師
偶爾會聽到有人說，前端不用寫程式碼。具體上是哪來的鄉野傳說我就不贅述了，如果是抱著這種心態想來學習前端的話，那我覺得好像不要來會比較好。
前端工程師與設計師應該是緊密結合的兩個位子，無論是製作或協調或分工，這兩個位子上的人完全決定了網頁該要有的樣子。只是說，偶爾會是站在後面的空降的老闆的堂哥的老婆的兒子，說到這我只能掬一把同情淚。
設計師在天馬行空的同時，也需要跟前端工程師確認是否可達成，爾或說，在現行的裝置與使用環境下，這樣做是否可行。我覺得這是很密切的事情，因為前端工程師並不是萬能，總不能突然要你寫一個 DOOM 吧。
所以說，設計師是否有需要理解網頁技術？或者，前端工程師是否要理解設計工具？我覺得是相輔相成的，設計師可以不用詳細理解技術背景，但約略的皮毛可以知道。像是我也會打開 Photoshop 然後拉一下曲線把照片調亮，而且我的 CC 還訂了好幾年，每年大概打開兩次。
那個寫程式的
我就是那個寫程式的，然後會開 Sketch 找群組輸出成 SVG 這樣。只是說網頁這種東西變化速度其實沒有很快，反而是 Google 動作比較多（看看那個 Google 好蚌蚌）。所以我們這些寫程式的事情就變多了。
說了那麼多幹話，好像明天可以開始慢慢進入正題了（欸
