顯示具有 Design 標籤的文章。 顯示所有文章
顯示具有 Design 標籤的文章。 顯示所有文章

[靈感] Apple style 風格網站設計

我自己的PC已經被我弄得像一台偽Mac,原因無他,實在是太喜歡Mac的設計風格。賈老除了是個了不起的企業經營者,同時他的設計品味也是為大家所崇拜的一點。打從Mac OSX以來,一直到iPod、iPhone誕生,以及新的Mac book問世,Apple 的工業設計、UI、乃至網站設計,無不令人讚嘆!

Apple 的官方網站改版之後,延續Leopard的設計質感,清楚、簡單、而且易用,網站基調是白色的,用灰色來旁襯,放上許多鮮艷、醒目、有趣的產品圖片,凸顯產品價值,更讓整個網站看起來像時尚伸展台,而一部部Mac、iPod、iPhone,則化身成為標緻的模特兒!

Apple-02

清楚、流暢的 Layout 規劃,購物單元逛起來一點壓力也沒有,反而更想一探每個產品的究竟!

Apple-03

Apple-04

Apple-05

Apple-06

大量使用java script,以及搭配QT內嵌影片播放,增添瀏覽網站時的趣味。我也相當喜歡看他們的教學影片,很清楚、簡單,影片的畫質也是沒話說!

Apple 的設計風格如此強眼,無怪乎第3方軟體製造商的網站風格,也多延續這個方向!除了讓使用者一目了然網站是提供服務給 Mac 的軟體商之外,儼然也形成一種網站識別的印象:代表著 Apple 的高品質、簡潔以及高易用性!

以下列出幾個收集來的 Apple 風格的網站,大多是軟體服務商的網站,很酷喔!也許可以幫助激發些什麼靈感,或想法。

1. Panic Coda、Panic CandyBar

Panic-01

Panic-02

相當知名的軟體,網站也是非常有名,在許多 java script 資源網站中,都會拿這2個網站來當範例!使用許多有趣的語法,讓瀏覽網站充滿意思!

2. RapidWeaver

RapidWeaver-01

RapidWeaver-02

令人印象深刻的配色,上方的漸層真的很美!影片播放的時候,也能與背景有所呼應,很棒的設計。

3. Icon Designer

Icon-Designer-01

Icon-Designer-02

提供許多 icon 設計服務,都很精緻有質感!黑色的網站基調與作品相互輝映!

4. MacRabbit CSSEdit

MacRabbit---CSSEdit-01

MacRabbit---CSSEdit-02

CSS編輯軟體,網站很簡單,有大大、醒目的軟體 icon,簡單明瞭!

5. 280 Slides

280-01

280-02

很酷的線上幻燈片編輯服務!看到Mac風格介面,讓人忍不住玩了起來。製作好的投影片還能存成PDF檔下載喔!

6. Versions

Versions

連結軟體的icon意象發想,綠草地讓人印象深刻!

6. Tao Effect

Tao-Effect

能夠將檔案、資料夾、信件加密的軟體。網站形象區結合導覽影片,兼具創意與實用性。黑色與亮綠色的配色,實在讓人著迷!國內使用黑色背景的網站似乎很少,在國外真的超多的。

7. Jumsoft

Jumsoft-02

簡單帶點可愛的網站風格,讓這幾個使用於工作上的軟體看起來格外親切、易用!沒有太多複雜設計的網站,似乎也宣告他們的軟體一樣可以輕鬆上手。

8. Checkout

Checkout-01

Checkout-02

幾乎跟Apple官網一模一樣的設計與layout,讓他的銷售點系統看起來格外可靠、安全!每個功能搭配精緻的情境圖示,像看圖說故事般的讓使用者馬上就能清楚這就是他所需要的產品!

9. Things

Things-01

Mac上的 toDo list 軟體。網站淡藍色的配色讓人感到放鬆,簡單的動線規劃,從下載、購買,到觀看導覽影片一氣呵成。一樣利用醒目的軟體icon來識別,加深印象!

10. AppleStyle

AppleStyle

最後,來看看台灣的吧!這應該算是一個中文介面的Apple商品購物平台吧!介面直接承襲OS Leopard風格,連背景也是 Leopard default 的紫色宇宙。閱讀時會有4個欄位的版型,讓文字過於狹窄,不是很容易閱讀。不過商品的種類倒是挺多的。

Apple 的東西除了外表華麗之外,事實上都兼具有實用性!總是站在使用者角度出發的UI設計,輕巧的機身外殼,親切的操控,化繁為簡,而設計不就是如此嗎!

Read More...

激發創作靈感的的插畫欣賞

整理幾個不錯的個人插畫網站、Blog。看看這些令人驚嘆的作品,不僅可以啟發自己創作時的靈感,也能讓我們思考這些創作背後的意義與技巧,也是很有趣的一件事情!看看他們如何製作的,什麼時候打亮光源,什麼時候利用模糊效果,或是配合照片,讓自己的插畫更具質感。

Alberto Cerriteño

來自美國的插畫家 Alberto Cerriteño,相當喜歡富有朝氣與生命力的設計!目前在波特蘭擔任行銷與設計總監,閒暇時刻就會進行一些插畫創作。很喜歡他的角色,造型可愛,搭配一些材質質感,構圖都相當豐富、多彩,每每讓目光停留、探索更多有趣的地方!

background01_1024

background03_1024

future_1024

tres

Ars Thanea

一個團體創作的設計工作室,喜歡鑽研、著眼於一些嶄新的創作技巧,大量使用 Photoshop 的效果在他們的作品上,給人酷炫到不型的強烈印象,就是他們的風格!像下面這張酒類的海報設計,同樣一個酒瓶瓶身,透過光影效果,就能呈現在4個不同場景的氛圍,相當厲害!

mart_blog

TrashTalk

Stay-Alive  

byroglyphics

來自英國的插畫家 Russ 的作品,充滿張力的線條,像來自人體的靈魂得到釋放,並獲得重生般,有股力量要爆發似的!我相當喜歡他的作品!畫面很有力量,促使著我們跟著他的線條,奔放、恣意飛翔,好像有無限可能似的!

page0_blog_entry3_1

page0_blog_entry6_1

page0_blog_entry9_1

Ghostco

Matthew Woodson 出生於美國的印地安納州,作品主題總是環繞在「人」的身上,透過畫面訴說一些想法、議題與情感,漫畫風格的線條相當容易讓人接受!網站上也有一些漫畫創作,沒有對白,僅透過幾格簡單的畫面,卻能讓人深刻感受到一股強烈的情緒,偏灰色調的風格,也總讓人看完作品之後進入沉思,值得一再玩味、讚賞。

ghostco09

ghostco22

ghostco17

ghostco20  

Mario Belem

來自葡萄牙的插畫藝術家,作品混用粉臘筆創作,讓他的插畫看起來別有一番特色!作品裡面多以衝浪、南島為主題,鮮明的色彩、有趣的畫面,商業色彩濃厚!

ess_cd01

buondi2007-01

TAM1

話說插畫家真是一個有趣的職業,感覺較為抽象、隱喻、隨性,多以豐富的色彩、圖紋、元素來構成畫面。自己很難做到這種程度,一直無法理解插畫家創作的思考過程是如何進行的,呵呵,每次想要試著創作插畫,就會感到挫折,因為很沒 Fu 啊!相當佩服這些內涵豐富的插畫創作家!他們所帶來視覺上、思考上、靈感的激勵都相當棒!

Read More...

[設計] 公司外牆海報設計-illustrator

海報01

專案名稱:公司內部外牆海報設計
使用軟體:illustrator CS3
尺寸:340x220 cm

這個專案應該是我作過尺寸最大的印刷品了。儘管很久沒有使用 illustrator,但是因為 CS3 介面的改進,變得親切許多,讓我使用起來還算ok,至少不會像 CS 版那樣綁手綁腳的。花費時間約3天,創意發想佔去大部分。網路的東西作多了,印刷品反而覺得很棘手,這樣的完成度我還挺滿意的。

post01-1 post02-1 post03-1

公司今年做了新裝潢,有幾面牆需要美化一番,今年大家都相當忙碌,這件事就一直延宕。直到最近有了空檔,才由我接手去作。老闆與前輩決定讓我自由發揮、不設限。主題圍繞「整合」+「創意」=「無限可能」的上面,創意也是以此去發想,儘量擺脫公司的嚴肅形象,以抽象、活潑、跳脫為方向,因此就產生了象徵「整合」的多元千手,向四方抓取並吸收資源,然後透過大腦五彩繽紛的「創意」工廠加工製作,最後像變魔術一般的「無限可能」,從帽子裡面蹦出充滿神奇力量的超人兔!意念其實很簡單,但是透過插畫、卡通式的表現,希望也能替公司裡緊繃的氣氛舒緩一下!

蠻感謝前輩 William,一直鼓勵我接下這個案子,雖然看得出來是他自己不想做XD,不過也因為這個機會,我又回頭把 illustrator 給研究了一遍,真的又挖到了不少技術。不然平常 Firework 用好好的,也很懶得去打開 illustrator。話說 illustrator CS3 真的非常好用,整合一些UI介面,使用起來更順手、更有效率。以後有機會,也分享一些使用的心得!在此之前,我還得多多學習印刷設計呢!

Read More...

[設計] 部落軌道logo設計手札

BO部落軌道」是一個增加部落格或網站曝光率,以及格友之間互相交流的好用工具!當初是卓太德推薦我使用的,相當好上手,加上原作者索尼斯大不斷努力更新、進步,以及所有軌道使用者配合,服務已經相當完整!在這裡推薦所有格主都能使用看看,尤其是使用國外BSP的格主,例如:Blogger,或是Wordpress自行架站者,因為這些並不像國內BSP會有專屬的首頁,沒有專欄介紹,也沒有分類目錄可以找到自己,完全要靠自己努力宣傳,這時後「部落軌道」正好能提供一個迷你平台,讓你與其他部落格串接起來,大家透過軌道相互拜訪、交流,像是開啟了任意門,不分BSP,是不是很棒呢!

前些日子軌道在徵新的logo,小弟正好也有參加,一共投了3件作品參賽,最後感謝評審抬愛,得了第一名、第四名以及第十三名,真的非常感謝!其實創作過程中,還蠻頭大的,150x30 像素其實很小,要作的富有質感其實並不容易,看了索尼斯大整理出參賽作品之後,並不是很滿意自己的設計,主要在於與軌道整體搭配上似乎沒那麼適切。

logo01
  作品編號:37      名次:13

這是我第一個設計出來的作品,事實上是我自己最喜歡的一個,反而是3件作品裡面名次最低的,甚至沒有前5名...Orz。以部落軌道的英文名稱「Blog Orbit」中2個字母的字首「BO」發想,藍色的為「B」,黃色則為「O」,結合圓形,簡單營造「BO」的形象,搭配黑色英文名稱,這裡故意不放上中文,總覺得會過於複雜,而且,有朝一日軌道走上國際化,這樣的logo也相當適合。而且還頗有大部份 Web 2.0 服務提供者logo的Fu哩!

logo02
  作品編號:38      名次:1

這是我的第2個作品,與第一個作品產生的時間,大概相差了一天,創意來源是我女友!呵呵!她說試著把「BO」弄得方方正正吧!就給了我這樣的靈感。「BO」相互對稱,黃色點點增加趣味性,中文字沒有太多裝飾,配上俏皮的英文對話框,整體感覺較為活潑、多元。這作品有評審給了滿分,也有只給60分的,真是相當具有「爭議」啊 (笑)!另外因為150x30是長方形,基本上物件的擺設,沒有辦法垂直,只能橫向,不然這件作品,我比較希望字能出現在「BO」的下方哩!

logo03
  作品編號:39      名次:4

第3件作品,幾乎同時與第2件誕生,走比較柔的感覺,「BO」發想化為蝴蝶的翅膀,藍色為「B」,紅色則為「O」,帶點漸層質感,並將logo配置在文字的中間,英文則在最下方,其實還蠻有某知名RPG logo的Fu說 (笑)!這件我也蠻喜歡的。而且算是3件裡面整體感最好的吧!

結果,第一名的反而不是自己最喜歡的,呵呵!

設計上,還有很多小細節可以加強,小弟也是很認真在這次徵稿上,只是時間上較為緊迫,希望部落軌道的朋友們都能喜歡囉!

最後,如有新手欲加入「部落軌道」,官方部落格這裡有許多給新手的指導說明,可以參考看看。

要加入「部落軌道」,可以點這裡!一起讓Blog更好吧!

Read More...

[創作] 中華跆拳道代表隊加油MSN圖像

奧運中華-跆拳道 雖然中華棒球奧運代表隊在贏了荷蘭之後,連輸3場,甚至輸給中國大陸隊,但是其實還是有機會的!只要能提振起精神,未來若能扳成4連勝仍大有可為。

昨天我國跆拳道代表團幾位好手,也啟程出發前往北京,4年前在雅典奧運為我國摘下金牌的朱木炎選手,相當有機會能再為台灣奪得2面金牌!我想也將是我們寄予厚望的選手吧。

今天用了不同的畫風,製作了跆拳道加油圖,希望這紀「火焰踢擊」XD,能一掃中華棒球隊的陰霾,祝中華隊連續拿下勝利!並祝福跆拳道項目能再創佳績!為台灣再添金牌!

台灣加油!!GO!GO!

Read More...

[創作] 中華棒球代表隊加油MSN圖像

奧運中華-打擊 昨天,北京奧運開幕典禮後第一個比賽天第一個比賽種類,咱們台灣好手「陳葦綾」就已經為我們摘下一面銅牌!真是值得我們驕傲與高興!

今天,眾多矚目的棒球代表隊,也將啟程前往北京,期望能為我們再創下佳績。

這裡稍微創作了一個MSN加油圖,如果大家喜歡的話,可以自行點右鍵下載。希望也能替其他比賽項目的我國選手集氣加油囉!

台灣加油!GO!GO!

Read More...