Cooper Wang Web Design » Design http://kilocooper.com 攝影,平面設計,網頁設計,網站建置,blog設計 Thu, 26 Apr 2012 01:46:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 -無敵BESTA 音樂城 / APP 介面設計- http://kilocooper.com/2012/02/21/besta/ http://kilocooper.com/2012/02/21/besta/#comments Mon, 20 Feb 2012 17:15:56 +0000 Kilocooper http://kilocooper.com/?p=875 BESTA 無敵CD網路音樂城 網站設計

哈，無意間看到自己之前做過的版型設計，完全忘記自己有設計過app的介面了 (O_o)??

風格則是綜合了案方要求的豐富感，多彩，讓使用者願意、想要、使用網站的介面，另一方面，也製作了電子書的 app 介面樣稿，雖然，這案子到最後沒有下文，但也是個不錯的經驗，話說，那時候要設計這個版型我可想了很久 ( ▔___▔)y-～

ipad設計介面 提案參考

app介面的設計，則延續網站多彩的設計，但是在按鈕的地方則盡量簡化，不干擾使用者的視線

ps.現在看到以前的作品，會覺得還有些細節需要考慮到，在此記錄一下：網頁唱片的小圖可以用cd殼的css png cover，app的部份，文字間距可以再調整，頁面元素也可以在根據app內容做刪減，例如，時間應該不是這個app重要的地方XD~

]]> http://kilocooper.com/2012/02/21/besta/feed/ 2 -民國國民曆101 網站設計- http://kilocooper.com/2012/02/09/calendar101/ http://kilocooper.com/2012/02/09/calendar101/#comments Thu, 09 Feb 2012 01:39:33 +0000 Kilocooper http://kilocooper.com/?p=856 cal_100_01

民國國民曆101年版，政府機關的案子，主要以水墨畫方式呈現，歡迎頁面為Flash有多花了點心思設計，但內頁部分的設計就比較一般了  ≧◇≦

cal_100_02

-WEBSITE-

]]> http://kilocooper.com/2012/02/09/calendar101/feed/ 0 -加興塑膠 網站建置- http://kilocooper.com/2011/12/13/plus-s/ http://kilocooper.com/2011/12/13/plus-s/#comments Tue, 13 Dec 2011 08:14:46 +0000 Kilocooper http://kilocooper.com/?p=848 加興塑膠

現代產品設計團隊所要的一些客製化服務，這些在傳統大規模的塑膠射出廠價格昂貴且可能沒有時間製作，在小型的射出廠又要擔心溝通及能力上的落差，而加興塑膠將走往創意發想的路且同時擁有以前的製造專業，讓一些小成本的創業者或是產品設計師，更有效快速的看到成品。

我覺得這個構想很棒，現代產品已經越來越有設計感，加興的服務可以幫助有夢想跟熱情的年輕設計師。

版型設計上，以大方，明亮作為基調，大型banner強調加興的理想，三塊中型的banner則強調公司的專業，讓使用者更快找到提供的主要服務。

-WEBSITE-

]]> http://kilocooper.com/2011/12/13/plus-s/feed/ 0 -達人診所 網站建置- http://kilocooper.com/2011/12/12/ase/ http://kilocooper.com/2011/12/12/ase/#comments Mon, 12 Dec 2011 07:59:43 +0000 Kilocooper http://kilocooper.com/?p=844 達人診所

跳脫一般醫美診所的甜美pink風格，用簡單俐落的方形，把各個區塊分隔開來，輔以一些Flash的動態效果，讓畫面不致於太單調。

-WEBSITE-

]]> http://kilocooper.com/2011/12/12/ase/feed/ 0 -愛買 版型設計- http://kilocooper.com/2011/12/09/ibuy/ http://kilocooper.com/2011/12/09/ibuy/#comments Fri, 09 Dec 2011 07:45:44 +0000 Kilocooper http://kilocooper.com/?p=837 愛買 版型設計 DEMO2

(形象結合活動版本)

愛買網站的版型設計，主要依照需求提供共三款，希望可以結合企業形象，購物，以及在台灣愛台灣的設計

愛買 版型設計

(形象結合活動版本2)

愛買 版型設計 DEMO3

(購物商城版本)

]]> http://kilocooper.com/2011/12/09/ibuy/feed/ 0 -新觀音心法- http://kilocooper.com/2011/12/09/new_tai3q/ http://kilocooper.com/2011/12/09/new_tai3q/#comments Fri, 09 Dec 2011 07:12:20 +0000 Kilocooper http://kilocooper.com/?p=833 新觀音心法

之前客戶的改版作，希望把深處的意念表達出來，帶點國畫風格

-WEBSITE-

]]> http://kilocooper.com/2011/12/09/new_tai3q/feed/ 0 -觀想藝術 版型設計- http://kilocooper.com/2011/06/10/quan-xiang/ http://kilocooper.com/2011/06/10/quan-xiang/#comments Fri, 10 Jun 2011 15:05:21 +0000 Kilocooper http://kilocooper.com/?p=794 觀想藝術 首頁

極簡風格，主要客戶都在大陸，所以版型設計以簡體為主

觀想藝術 Flash Loading

(Flash loading示意圖)

觀想藝術 內頁DEMO1

館內有些設計師商品的展售，所以也設計了商品展示的頁面。

觀想藝術 內頁DEMO2

內頁主要設計考量藝術品圖面的展示要完整，夠大，以及可以觀看細部的功能。

]]> http://kilocooper.com/2011/06/10/quan-xiang/feed/ 0 -海霸王 提案版型設計- http://kilocooper.com/2011/04/25/hpw/ http://kilocooper.com/2011/04/25/hpw/#comments Mon, 25 Apr 2011 13:52:31 +0000 Kilocooper http://kilocooper.com/?p=779 hpw_demo_01_index

設計構想：以大紅色調以及牡丹，呈現一個喜氣、華貴的氛圍。圓形的選單，代表海霸王本身桌菜或是圍爐的大圓桌印象。置中的小圓盤則會依滑鼠移過的項目不同而有不同相關的照片或介紹。

hpw_demo_02_index

內頁部分，運用中式建築的燕尾作為banner的框角，banner內則是主打活動，或是優惠菜色…etc…

]]> http://kilocooper.com/2011/04/25/hpw/feed/ 4 -百威啤酒 活動網頁設計- http://kilocooper.com/2010/10/04/budweiser_webdesign/ http://kilocooper.com/2010/10/04/budweiser_webdesign/#comments Mon, 04 Oct 2010 15:18:16 +0000 Kilocooper http://kilocooper.com/?p=735 _demo

百威啤酒的提案活動頁面。

做這網站一定要先去台灣最強啤酒網站~海尼根膜拜一下。呵呵，參考了許多相關的設計元素。

製作了這個紅色版的提案頁面。

也是很可惜的沒有被選中 ／︿＼ 。案子後來就不了了之了。

budweiser_game_view ]]> http://kilocooper.com/2010/10/04/budweiser_webdesign/feed/ 0 -Styleneat 方便好用的CSS格式化小工具- http://kilocooper.com/2009/12/11/styleneat-format/ http://kilocooper.com/2009/12/11/styleneat-format/#comments Fri, 11 Dec 2009 09:08:31 +0000 Kilocooper http://kilocooper.com/?p=589 shades-1

剛剛在網路上隨意瀏覽看到的好物！！分享給有在使用css編輯的朋友們

這玩意兒的功能我簡單說明一下，以往如果要修改網站的css，通常都會編輯css的外部樣式表，然而時間久了，或是網站規模變大了，css樣式表也會變得很多行。除非是很有耐心的一個一個整理，否則架構不好的樣式表通常是疊床架屋，一直附加在最後面。

而這個小玩意兒就是可以幫助設計者在編寫css樣式表時，把樣式表用階層的方式整理出來..(dreamweaver的格式化很虛弱 ( ▔___▔)y-～ )

這樣的話，樣式表就更可以一目瞭然，方便建構更完整也更好的樣式表。

shades

另外，他還支援中文的說明喔！附圖中可以看到 ╮(╯◇╰)╭

連結網址：http://www.styleneat.com/index.php

]]> http://kilocooper.com/2009/12/11/styleneat-format/feed/ 0