問題討論區


人氣:5342
【飛肯小班長】 - | 2013-09-14 13:01:11
還記得前陣子又開始流行的 FLAT DESIGN 扁平化設計嗎?
 
FLAT DESIGN 的最大的特性,就是在畫面上沒有紋理、陰影或者是漸層等效果做修飾,常利用顏色來分別資訊區塊。
 
舉個最明顯的例子,像是 WINDOWS 8 的系統介面,就是採用 FLAT DESIGN 扁平化設計。
 
以網頁設計來說,FLAT DESIGN 雖然看似簡單,但是通常越簡單的設計,要下的功夫就越多呢。
 
可不是隨隨便便弄了很多色塊,就叫做扁平化設計的唷。(笑)
 
今天這篇小品文(?),小班長去逛了日本的網站,幫大家蒐集了一些此風格的網頁設計。
 
 
 
曾經貼到飛肯粉絲團上面過,頗受好評的一個網頁設計。
 
小班長稍微看了一下,似乎是很專業的網頁設計公司呢。
 
如下圖。
 
 
 
 
也是一間設計公司的網站,網路和印刷的設計服務都有。
 
網站也是做的很漂亮呢。
 
FLAT DESIGN 還有另一個重點,就是在於字體上的應用。如下圖。
 
 
 
 
 
這是日本的 UNIQLO 網站,是用 FLASH 做的行銷網站。
 
右手邊天氣圖示區塊可以切換國家,當然也有台灣唷。
 
如下圖。
 
 
 
 
 
直接把商品放在顏色連結區塊裡面。
 
用色也是要相當注意呢。
 
如下圖。
 
 
 
 
 
這個網站是直接把資訊圖示化。
 
如下圖。
 
 
 
 
 
 
此網站好像是來自於佈置展場舞台的公司,也是 FLASH 做的網站。
 
滑過某些按鈕會發出類似煙火在天空爆開的聲音,是  " 啵 "  不是  " 蹦 "  唷,應該不會被嚇到吧。(好冷..XD)
 
如下圖。
 
 
 
 
 
 
美術館的網站。
 
從左手邊延伸下去的,是展覽主題相關的資訊。
 
如下圖。
 
 
 
網頁設計會有其資料量考量,例如說某些產業所要傳達的資訊是以圖片較多,或者是資訊文字量的多寡等等,都是會影響到視覺的因素。
 
感謝各位點開連結看到最後。
 
 
人氣:3830
【飛肯小班長】 - | 2013-09-11 15:55:17
自從智慧型手機、平板電腦等行動裝置開始普及,在捷運上總是能看見許多人對著小小銀幕手指滑個不停。
對於網頁的視覺設計來說,也就多了些考量。
最近國外的網站,總是能看見很多畫面簡潔風格的設計。
簡約風格是長久以來一直都有的風格,畫面簡潔俐落,沒有大量的顏色和太複雜的線條設計。
近一兩年來行動裝置開始廣為流行,使用智慧型手機或平板瀏覽網頁的人越來越多了。
也因行動裝置的尺寸大小關係,過多的裝飾在畫面上看起來較壅擠,簡約風格的設計就很適用於此。
 
小班長今天要分享這篇國外的文章,是來自於『 WDL 』這個網站。
 
 
這篇文章蒐集了20幾個簡潔風的網頁設計,底下附上連結。
 

 
 
 
 
 
單一色調 灰,商品直接呈現在畫面的中間,視覺焦點很容易集中。
動態效果是用 Java Script 寫的 網站,如下圖。
 
 
 
 
HTML5 跨平台技術網頁設計。
只是使用IE瀏覽器觀看的話,照片的人頭似乎會被截掉。(笑)
如下圖。

 
 
 
 
 
HTML5 跨平台技術網頁設計。
雖然同樣是跨平台技術,但似乎寫法就見仁見智,如下圖。
 
 
 
也是 HTML5 跨平台技術網站。
整體而言就單純只有文字連結,以往的按鈕設計也是直接省略。
畫面看似簡單,但實際上這樣簡潔的畫面要呈現出的設計感,功力都是藏在細節裡的。
字體的使用和LOGO設計等等,如下圖。
 
 
 
 
依舊是 HTML5 跨平台技術網站。
整體色調是淺灰白為主,右上角的連結用了對比明顯的橘色做視覺引導。
用行動裝置看的話,左邊白色的部分是直接被省略掉的,如下圖。
 
 
最後,終於到最後了。(汗)
小班長這次選的題材比較難一些,若有寫得不好請多見諒。
來補充一下偏離主題的東西,說到 HTML5 ,似乎有不少人搞不懂它到底是什麼。
簡單來說,HTML5 是一個廣義的講法。
HTML5 是需要加上 CSS 和 Java Script 等等技術配合,才能夠製作出所謂的手機、平板網頁設計。
 
感謝各位同學瀏覽此篇文章。
 
 
人氣:2614
【飛肯小班長】 - | 2013-08-20 17:33:13
各位同學平常都在逛那些設計網站呢?
 
身為設計人就是要多看一些新穎設計,除了平面雜誌或設計相關的展覽之外,網路也是一個不錯的選擇唷!
 
今天飛肯小班長要來推薦一下這個網站 『 Design You Trust 』。
 
這個設計網站的主題較為廣泛,從平面印刷到建築設計都有。
 
 
 
 
有趣的廣告影像設計,如下圖。
 
 
這種應該算工藝設計吧,如下圖。
 
 
造型特別的建築設計,如下圖。
 
 
插畫藝術等等的介紹,如下圖。
 
 
甚至還有名片設計唷,國外好像很流行嘗試設計各式各樣的名片,如下圖。
 
 
小班長蠻常看到設計很華麗的,如果金錢允許的話,小班長也很想做一盒呢。(笑)
總之,各位快點去逛一逛設計吧!
人氣:12468
【飛肯小班長】 - | 2013-04-11 21:22:55

各位同學是否面對配色問題時,感到困擾呢?或者是,只是想找個網頁色碼就開 photoshop 開半天?

網路上充滿了各式各樣的色碼表,一格一格的色票佈滿了整個網頁,東找西找也不太方便配色。

最近小班長在網路上閒晃時,發現一個實用的配色網站,『 COLOURCO.DE 』 ,如下圖。

 

 

只要在畫面中滑鼠上下左右移動,可依照自己需求調整顏色。

滑鼠上下移動,為調整色彩的明度,往上顏色會越來越暗,往下則會越來越亮。

滑鼠左右移動,為色相的調整,可以選取自己需要的主要顏色,如下圖。

 

確定喜歡的顏色後,點一下滑鼠右鍵,就會鎖定我們想要的主色相,如下圖。

假若想重新選色的話,已鎖定的顏色色碼下方有個垃圾桶,點下去就能重選囉。

 

接著,網頁上方的按鈕是配色模式,小班長稍微簡單做介紹。

Monochromatic 是單色配色,如下圖。

 

mono-d 是單色配色加上深灰的組合,如下圖。

 

mono-l 是單色配色加上淺灰的組合,如下圖。

 

analogic colours 是相鄰色的組合,如下圖。

 

complement 是互補色配色,如下圖。

 

ana-c 是相鄰色加互補色的組合,如下圖。

 

triad 是色相環的三角形配色,如下圖。

 

最後一個, quad 是色相環裡的四角形配色,如下圖。

 

順帶一提,網頁的右上方也可直接輸入色碼做查詢的動作,如下圖。

 

 

各位同學可以自行玩玩看,配出自己滿意的組合別忘了記下色碼唷。

雖然說這個配色網站蠻方便的,不過畢竟是數據算出來的配色,太過依賴就失去配色意義了。

建議各位同學,模式按鈕就當作參考依據吧 !

 

人氣:6820
【姜智豪】 - | 2012-10-12 03:08:17

  包含不同的修圖範例、去背範例、特效範例、合成範例、商業設計範例、攝影後製範例、網頁設計範例!

  

更多黃佩琪老師的作品,請看 http://flycanpeggy.blogspot.tw/ 

老師的 Photoshop 課程,請看 http://www.flycan.com.tw/course/course_photopro.php

 

 

 

 

更多黃佩琪老師的作品,請看 http://flycanpeggy.blogspot.tw/ 

老師的 Photoshop 課程,請看 http://www.flycan.com.tw/course/course_photopro.php

 

 

 

【範例欣賞】

所謂UI(User Interface)設計即使用者與系統之間的一個溝通介面設計,而UX 設計(User Experience Design)在設計UI的過程中,參考了許多以人性為導向的重要元素,讓UI的設計更直覺及更貼近人性思維。 觸控式智慧型手機的App市場帶動下,UI設計更突顯出它的重要性,也決定了這個App是否被保留或移除的命運。隨著智慧型手機與平板電腦的普及,視覺影像的呈現與互動功能應用出現更多可能,使用介面ui設計的重要性愈來愈高,各大網路公司不得不向全球獵才,甚至大手筆收購新創公司,只為了整批接收設計團隊,而ui設計規則是對軟體互動、邏輯使用、美化使用介面的整體設計。 好的ui設計不只可以讓軟體變得有設計感,更可以讓消費者使用變得簡單、舒適且自由度高。ui是一般用戶唯一接觸到的設計介面,用戶對介面設計視覺效果與是否方便使用的關切程度,遠大於用什麼程式完成來的多很多,因此成功的軟體ui所扮演的角色是相對的重要。

 

 

 

課程網頁:http://www.flycan.com.tw/course/course_ui.php

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

User Interface 介面創作設計班 http://www.flycan.com.tw/course/course_ui.php

黃明賢老師的網站 http://mos-illustration.blogspot.tw/

 

人氣:5807
【姜智豪】 - | 2012-08-07 20:31:00

【範例欣賞】

 

CSS3 的動畫效能對行動裝置是具有更佳的優勢,當別人還在學習用程式撰寫動畫時,你已經可以利用簡單的 CSS3 就完成了,此外,針對於視覺效果越來越豐富的網頁設計趨勢,CSS3 更是你不可不學習的一門技術

 

課程網頁:http://www.flycan.com.tw/course/course_css3.php

 

css3

 

CSS3 動畫選單效果

 



 

CSS3 按我按我 自動提示效果

 



 

利用CSS3製作iOS收合夾效果

 



 

用CSS3的動畫模擬apple網站的選單效果

 



 

利用 CSS3製作MAC Dock效果

 



 

純CSS3互動式相簿

 



 

CSS3滑移式區塊

 



 

CSS3滑移區塊2

 



 

CSS3 3D翻轉

 



 

CSS3旋轉區塊

 

 

 

CSS3 視覺及動態特效應用班

課程網頁:http://www.flycan.com.tw/course/course_css3.php

 

當您對這個課程有任何問題時,歡迎來電詢問 (02)2211-1414 / 0925-014-000

 

 

人氣:9518
【飛肯小班長】 - | 2012-06-01 19:43:54

繼上一篇分享的『 33 個不錯的手繪 wireframe 範例 』,小班長今天又發現到一篇不錯的文章,是在介紹 『 10 種好用的 wireframe 工具 』。

wireframe 小班長在上一篇分享有稍微介紹過,其主要是用在網頁設計上與客戶或著是工作夥伴的溝通;日後的網站維護,也能馬上就清楚知道網頁架構設定。

使用電腦直接繪製 wireframe 的好處是效率高,點兩三下一個簡單的網頁設計架構的雛形就出爐囉。

不過相對地,對於自由度就沒有直接在白紙上畫的這麼高了,如下圖。

詳全文...

人氣:9901
【飛肯小班長】 - | 2012-05-23 19:14:58

不知道各位同學平常在做網站的時候,是否有習慣畫出 wireframe 呢?

wireframe 可說是網站初步的草圖,便於協助網站建置的相關者進行溝通。

而 wireframe 的繪製方法其實有很多種,有些人習慣用 photoshop 或是 illustrator ,甚至是直接在紙上繪製,網路上也有許多工具可使用。

直接在電腦上製作 wireframe 雖然便利,但是直接在紙上進行繪製能夠將細節的部分呈現出來,各有其優勢。

今天小班長找到一篇蒐集了『 33 個手繪的 wireframe 範例 』文章分享給各位同學,如下圖。

詳全文...

人氣:6345
【飛肯小班長】 - | 2012-05-09 20:39:04

繼之前小班長曾經分享過一篇 『塗鴉風格網站』,最近又發現一個不錯的網站,整理出 25 個手繪風格的網頁設計!

各位有在做網頁設計的同學,或者是對塗鴉手繪風格的設計應用有興趣的同學,都可以參考看看唷。

『 25+ Beautiful Examples of the Hand-Drawn Web Designs 』,如下圖。

詳全文...

共 3 頁,目前在第 1 頁: 第一頁第一頁 上一頁上一頁 [1] 2 3 下一頁下一頁 最後頁最後頁

 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 1 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS