[Layout] Web Design Part 5

給你一把釣竿,教你怎麼釣魚,其實是一件很困難的事情。與其這樣,不如給你一張漁網,用撒的機會或許會比較大一點。當然啦,我不可否認這樣是有一點作弊的嫌疑,但是在這個講求速度的年代, 手速 400 快速的抓到切版的精神也是一種必備技能。 這種速度靠的是經驗的累積,雖然沒有公式,但是起碼也有一定的規則可以依循。 -------------------------------------------------------------------------------- 經驗的累積 回到切版所面對的問題,雖然市面上有非常多切版教學,照著做也確實能夠得到些什麼。但是終究就只是照著做而已,並沒有人會告訴你為什麼要這樣做,或者說還可以 這樣做。時代告訴你要速成,所以我們就給你速成,所以我們就給你食譜,給你義大利麵。 當客戶想吃拉麵的時候,你就不會煮了。 如果你可以把義大利麵煮成拉麵,你的客戶也吃不出義大利麵與拉麵的差別,那麼只有兩種可能,

[Layout] Web Design Part 4

雖然寫切版感覺很乏味,但是俗話說得好,出來跑總有一天要還。所以其實趁著世界末日還沒到,趕快把前債清一清是比較妥當的。拼圖遊戲還是得繼續,我們在這邊覆蓋一張牌,結束這一回合。 抽出 CSS 卡,來召喚神龍吧。 -------------------------------------------------------------------------------- 樣式表 很多人對他有誤解,認為這些東西應該是 PG(Programmer)才應該要會的東西。結果到頭來,VD 跟 PG 之間的樑子就越結越深了。所以後來才出現了 F2E 這樣的職位出來。網頁設計之所以要知道的事情,其實應該不是規避這些你認為誰應該要會的事情,而是去正視這些我是不是應該要學的這些事情。 好像,這一場誤會就是十餘年(還記得

[Layout] Web Design Part 3

依稀記得那是一個早秋溽暑的午後,DHTML(Dynamic HTML)在當時莫名的流行起來。所以我就開始接觸 CSS 與 Javascript,在當時不算是很風行的東西。而為了解決瀏覽器之間的紛爭,當時還分有 document.all 與 document.getElementById 這兩種取元素的方式。雖然,截至目前為止,瀏覽器的紛紛擾擾依舊沒有中斷過。 然後那年是 1998 年,我寫完了 CSS 1.0 教學手冊。 -------------------------------------------------------------------------------- 拼圖遊戲 動態網頁,就是把你想要的元素放到頁面上去,

[Layout] Web Design Part 2

當我還是小屁孩的年代,學美術的時候一定是從靜物設計開始,學設計的時候從點麵線 點線面開始。學了美術讓我體會到一件事情,就是我一點美感的天份都沒有(無誤),從小學到國中,我能感謝的大概就是,美術班去北美館或是國美館的次數,比我感冒的次數還多這樣。 -------------------------------------------------------------------------------- 視覺化 視覺設計要切入的點其實並不困難。 * 網頁即是視覺中圖層的概念。 * 視覺元素即是圖層的堆疊與變化。 * 視覺元素參考線就是切割線。 * 視覺區域連續性可以分成兩個圖層來思考。 * 把東西放上去的動作不一樣,但是結果相同。 設計大概很難沒聽過圖層(Layer)這個名詞,也感謝偉大的 Photoshop 將這種概念深植人心。對於視覺設計來說,圖層是一種畫布,是一種可以渲染、疊合、遮蔽、裁切或是做出通透特效的透明 圖紙,

[Layout] Web Design Part 1

What's Layout? 一直以來,我始終都覺得這是一個很沉悶的課題。如果用一張紙一枝筆可以解釋的話,那麼請這麼做: * 畫出 1 個大的矩形,你可以叫他 A * 在這個 A 矩形中,畫出 10 個恰巧可以填滿的矩形 * 試著說出為什麼要這樣擺放 * 把 10 個矩形減少為 5 個,試著重新填滿 A 矩形 如果你問我矩形是什麼形狀,那我很確定你可能不適合走這條路。 我們常聽到網頁設計,但是,扣除掉 VD(VirtualVisual