墮夜 發表於 13-12-25 23:39:52

五年多來的設計與開發歷程

本文章最後由 墮夜 於 14-5-21 23:15 編輯

以後可能不定期會回來鐵傲分享些東西
五年前我還只是鐵傲的鄉民,五年後的今天


我已經是個Web Designer & Developer

---------------------------------

最早以前開始摸網頁設計大概是高二上。
那時候的網頁技術還不成熟,到哪你都可以見到FLASH為主的多媒體網站。
當時也被視為市場主流,幾乎是每個設計師手上必備的工具。

高三上學期,跟著老師接外頭的CASE,用PS修修產品圖、拉拉表格...
沒錯,當時CSS Layout技術不普及,連YAHOO都是表格排出來的。

回頭看看以前我在鐵傲網頁版寫過的教學,現在只是國中生的程度。

大二那年接資管系上的系網CASE,很可惜的是將帥無能累死三軍。
後來聽說還是花錢找外頭的人解決,不過那時候我已經辦休學重考去了。

直到我開始自學JavaScript、CSS 2、Action Script 3.0,是大四的事情。
你也許猜到了,為的是畢業專題能提前處理;
專題的成果不如預期,至少還是學的到東西。
這時候的Adobe Creative Suite正夯的版本是CS 3,也是最穩定的版本。

記得那時候仿照nico nico的撥放器和頁面關鍵字廣告做出了差不多的東西。
不過完成度不高,評審結果只有第四名,一組六個人只有三個人在做事,認了。

大四專題開始的期間,也是我剛好進入正式職場的開始。
慢慢發現目前的網頁技術已經不適用在這個年代,決定在這家公司利用既有資源、
好好的把每一樣交辦事項作好的同時,練就自己的經驗。

當時瀏覽器版本使用族群最多的還是IE7~IE8、Mozila FF;Google Chrome倒是很少人用,反而蘋果的Safari多些。
之後開始注意各家瀏覽器和版本上的問題,特別是IE這個妖孽...
至今我在IE身上花的時間,遠超過我做視覺設計和寫jQuery的時間。
IE6、IE7、IE8、IE9四個版本編譯模式全都不一樣,光IE Hack就足夠讓CSS整整多肥上兩圈。
為了SEO關鍵字行銷可以順利進行,你不得不聽從業主的需求和來自工程師的發難...XDDD

除了獨自學習這些東西,那幾年也認識了專做SEO的業務、工程師。
就一直在長期合作,去年從海軍陸戰隊被踢回家後SOHO了大半年才乖乖去上班。
賺的沒有自己接案的時候多,倒是遇上很好的Partner

今日2013/12/25為止。
我經手了很多專案,其中有公家標案,也有與過去完全不同的佈局和開發模式。
近期作品除了臉書外,有我好友的可以在鐵傲相簿看到。
我取其中兩個:

1. Tablet Style With CSS 3+jQuery
http://www.gamez.com.tw/data/attachment/album/201312/25/220000q88b37bbkz77j7z7.png


2. Responsive Web Design 響應式設計開發模式實景。
http://www.gamez.com.tw/data/attachment/album/201312/25/230235dwl9jqqbqwt7r3cz.png





RWD的開發模式採用的是流動佈局。
也就是任何解析度大小都必須確保資訊沒有障礙的傳達表現。

比如我們慣用Container Width = 990px
就必須導正為Container Width = 95%

字體大小由font-size = 16px改為font-size = 1em
此外還有table-cell、clearfix的導入,這個日後有機會我會在這提到。

響應式設計(RWD)的開發著重在判別各裝置解析度斷點
你們從上圖ViewPort Resizer可以看到主流的裝置解析多少。
網頁在那些解析度下怎麼呈現

@media screen and (min-width: 768px) and (max-width: 968px){
    .container{
     width: 55%;
     padding: 10px;
    }
}

以上判別裝置寬度高於768px且小於968px時,".container"會做width和padding上的變化。
類似這樣的概念去執行你的網站開發。

現代的Web Designer不只要會視覺設計、佈局,更要知道jQuery UI、使用者體驗UX、後端系統串接知識。
能夠和工程師溝通的才是最好的設計師。

接著是行動裝置和HTML 5+CSS 3的年代,又有一段路了 :)


真正取決網頁體驗生死的還是JavaScript和CSS
裝置來臨的年代,更要多Study如何在不同規格的裝置、解析度下製作流動性佈局
這才是我們現在開始該檢討的地方。


   
頁: [1]
檢視完整版本: 五年多來的設計與開發歷程