顯示具有 網頁設計 標籤的文章。 顯示所有文章
顯示具有 網頁設計 標籤的文章。 顯示所有文章

2015年7月28日 星期二

網頁設計這樣就對了!十招教你做出最棒的網站!

RWD響應式網頁的設計,已經成為現在做網站的基本條件之一。另外SDT小編再與大家分享十招網頁設計的概念,有了這些祕招,你也能做出最潮的時尚網站!



【第一招】圖大!還要更大!

source:http://www.borngroup.com/















自從響應式網站風行後,我們常常看到進入網站就是非常大的圖(或影片),使用者對於影像的接受度,遠遠超過贅述的文字,一張好的圖,除了能夠立馬就吸引到觀眾的目光,加深印象外,更直接替代掉廢話連篇。



【第二招】多媒體體驗

source:http://barstories.jackdaniels.com















運用Html5網頁技術,可以將多媒體置入網頁之中,讓使用者有耳目一新的感受,同時也加強互動的概念,但還是要特別注意效能表現,免得過多的效果反而讓網站不好用。



【第三招】視差效果設計

source:http://www.quoplus.com/














視差設計也是今年設計的一個風潮,將網頁瀏覽時的上下(或左右)移動,設計在視覺上和背景間的差距呈現,可以創造出更多的驚喜。例如上面的耳機網站中,就運用這樣的技巧在展現各種耳機顏色,質感非常棒!



【第四招】用動畫說故事

source:http://habitatweb.mx/















前面有提到多媒體的部分,而在新的html5設計上,也更多了"動畫"的呈現模式,將會動的元素,搭配網頁瀏覽時的文字內容,讓使用者在觀看時,更能一步步引導,深化腦內的印象度。



【第五招】扁平化設計

source:http://colinanddewi.com/















扁平化設計在APP的表現上早就已經是引領潮流的王道,而在網頁設計上,也有著相同趨勢,無論是 icon 、圖像、字體、按鈕,都已變化為簡潔的扁平設計,反而會讓使用者有一種質樸輕鬆的使用經驗。



【第六招】打破格子吧!

source:https://pixelgrade.com/demos/rosa/















source:http://www.world-of-swiss.com/

















以往的網頁設計,強調版面規劃完整、直線切版、將網頁內容一塊一塊的呈現在首頁上,但現在因應手機版的使用度越來越高,突破框架式的思考也才符合未來的設計概念,同時也更能展現網頁的特殊設計風格。




【第七招】運用拼貼

source:http://dynamit.com/































相對於突破框架式的設計,還是有許多網站的設計,是以拼貼的方式來表現,但這個拼貼,不代表就是非常規律的格子,反而是有設計風格的多樣化拼貼,如此更能展現網站圖像式的內容,吸引使用者目光。



【第八招】引導按鈕元件

source:http://humcreative.com/about/















進入一個網站最怕就是迷路,因此許多網站都將導航列(Navigation bar)放在最上方,明顯之處。不過現在也有設計人希望將這些引導的按鈕,置入在網頁之中,創造出更多的使用者互動與趣味。不過重點還是要記住:千萬不能讓使用者迷路阿!



【第九招】導入Google地圖

source:http://nitwinski.com/













Google map提供API可以串接,也讓自己網站可以多樣化的呈現與地圖相關的資訊。



【第十招】多層次呈現

source:http://necotrans.com/















利用多個圖層的相互疊壓,創造出獨特的設計風格,這種方式也比較適合資訊很多的網站,有效率的運用空間來對使用者說明所有內容。

SDT小編結語:

有了這十招的醍醐灌頂,對網頁設計或是需要規劃網站的人來說,應該是個很不錯的建議,不過就像所有的武功絕招一樣,學習每個技巧或觀念還是要能夠應用與消化,而不是硬把不適合的東西加入網站設計之中,這樣只會讓使用者覺得眼花撩亂。還是要仔細思考自己的網站對象是誰?誰來使用?目的為何?才能真正做出一個同時具備實用與設計感的好網站。



以上非翻譯文章,小編概念與原文作者並不一定完全相同
圖文參考資料來源:http://99designs.com/designer-blog/2015/01/16/top-web-design-trends-2015/

2014年1月28日 星期二

2014 網頁設計潮流,你跟上了沒?



 話說在2013年時,網頁設計最火紅的就是「Responsive web design 響應式網頁設計」,主要是響應式網頁設計因應了我們這個多平台的世代;現在人們不止是用電腦上網,也有可能使用平板、手機等等,而它可以因應不同平台做調整自適應式網頁呈現!  
那麼在新的2014年網頁設計的走向,除了RWD之外,我們還能有什麼的創意靈感呢?那我們就快來看看國外的網站一窺究竟吧!

1. 創意字的編排/設計(typography)  


在過往的網頁設計中,我們的設計師常常會被限制字型字體的使用,只能根據大家普遍電腦支援的字型去設計,不過,現在愈來愈多品牌商品追求的是有「自我風格」化,當然自家的網站也不能例外啦!
typography

▲也可以將typography手法,將不同字體組成一文字的圖像設計。




▲簡易的排編,不用過多的設計,透過不同的字體呈現,就很有特色。


http://benlind.com/

▲網頁設計直接透過字體,秀出此網站獨我的風格。



好在現在有不少免費的字體資源來設計網站,現在設計師可以用這樣來自行排版、創造一些個性或獨特性的字體。  

別小看這些字體設計…只要抓到對的元素,運用一些小小手法就可以自成一個宇宙。

2. 大圖示/照片設計(Oversized imagery)  


大圖示會流行主要源於Mac OS X圖示設計,一開始是程式設計師推出的Mac應用程式網站,意外吸引了大家目光,也讓不少設計師也開始注意到以大圖示呈現品牌的方式。  

透過大圖示的風格方式呈現,可以強烈的視覺衝擊讓人瀏覽者過目不忘,此外也可以利用高質感的大圖照片來製作感網頁,來代表公司形象的風格;也因此不少餐廳、旅館都愛用此方式呈現。 

http://www.kassandrabay.com/

▲業者選用自家飯店拍攝的照片為主角,是否讓你一開始網站就吸引你目光了。

http://versionsapp.com/

▲不一定要照片,運用大圖設計,也可讓瀏覽者第一個時間焦點都在大圖身上。



3. 單頁式/垂直設計(Single page websites)  


如果你常逛蘋果等大產的官方網站,不發現,他們都是採用單一頁面呈現大量資訊!如你要看到相關資料,就必需不斷往下滾動滑鼠才能看完。 

這樣的設計,如果在四、五年前,往往會讓客戶與設計師嗤之以鼻;然而現在使用者的習慣改變,大家都習慣手機往下滑動,現在反而大多人願意往下拉的,反而過多的分頁呈現會讓人感覺要耗費更多時間才可以查詢到自己要的資訊。 

當然啦,這樣的設計比較適合個人簡介網站或是一些部份的商業客戶;如果你是新聞網站千萬不要這樣做!如果使用者看到這一連串不停下拉的新聞,不發瘋才怪! 

http://hugs.fm/

▲一頁上手,馬上就可以知道網站內的部份資訊

http://www.ianjamescox.com/

▲除了單頁設計,這讓人懷念起小時候玩紙上迷宮的感覺

不過不知各位有沒有發現到,這些潮流風格樣式都有一個「共同點」?   

就是他們的設計出發點一定是「盡量簡化」網頁資訊,利用圖片、影像去呈現他們想表達的資訊;再運用有趣的方式改變您的閱讀習慣。




資料來源:The Next Web