你見過最好的網頁設計是哪一個?

如題


純屬個人觀點,不服不辯(笑)

日本知名大學的官網,超級全面、人性化,讓人感動落淚。

我是一名正在為去日本留學而苦惱的視覺傳達系的學生。

我的日語已經有n2,所以基本的日語都能看懂。

為了了解想去的學校(武藏野美術大學和多摩美術大學),開始搜刮這兩所學校的消息,打開這兩所學校的官網,被裡面的細節震驚了。網格設計完美,信息多到全都看了一遍之後,你會比留學機構的人知道的更多細節(因為有次聯繫留學機構,裡面的老師被我所掌握的消息嚇到了,再也不怕被他們坑)。不管是在校生還是考生,想得到的消息基本都能從這裡得到。

完美的信息設計齊飛!


[武藏野美術大學]

官網傳送門:武蔵野美術大學

首頁:

展示信息有:學校最近的動態、展覽、新聞等;消息板(分為面向在校生和考生);學科分類;基本學校信息等....


最上方的:

這就是打開新世界的大門,你是什麼身份,或者想了解哪方面,就直接點紅框框這裡進去就OK。

因為我想成為留學生,所以我點[國際交流.留學]部分進去,從這裡開始yy自己已經是這裡的學生(笑)

進去之後,所有關於[國際交流.留學]的傳送門都在這裡,然後我所想了解的就是紅色框框里的外國留學生的消息,裡面的分支分別是:關於國費.私費留學生留學生的數據留學生支援(翻譯渣,意思就是留學生小貼士);留學生採訪

a.關於國費.私費留學生:

我就不放圖了,就是大概的介紹,還有日本文部科學省的國費生傳送門。

b.留學生的數據:

內容是最新一年的所有留學生國籍專業數據,這個信息對我非常的重要

數據太多,我就只截跟我有關的地方(我想讀的是大學院,修士也就是研究生)

紅框部分:視覺傳達設計系:一年級5人,二年級5人,小計10人(無~~~~無法喘息)

我大天朝14億人口,這54人算什麼!!!!

c.留學生支援(留學生小貼士):

這裡內容真的是讓我感動,身在異鄉為異客,什麼都不知道,這裡的消息簡直就是貼心小棉襖。

這裡有三個部分,信息太多了,我只截[醫療機構介紹](誒呀大概翻譯一下),主要就是介紹大學附近的醫療機構(電話地址都有,預約傳送門也有),媽媽再也不用擔心我生病啦(好像我已經在那裡讀書了一樣,微笑.jpg)

不難發現,這個分支原本並不屬於留學生那一塊,是學生生活,主要內容就是講住哪裡啊,在外面住的申請啊,宿舍申請等等,在這一點方面的信息多摩美術大學官網簡直做到了極致!變態!的程度,信息設計非常的棒!

d.留學生採訪(羨慕嫉妒恨的採訪,不截圖)

第一個就是中國人,研究生,原研哉門下弟子(OMG!原研哉!OMG!OMG!尖叫+無法喘息)


關於研究生考試方面,我不記得是怎麼下載的了,反正官網有一個非常詳細的關於考試的pdf可以下載(官網有各種各樣的PDF,還有他們可厲害的招生手冊電子版可以下),以下是考試各科筆試內容以及所帶工具要求:

再給一個傳送門:

2011年-2014年各專業學生畢業作品:造形學部卒業製作優秀作品 2014年度

[多摩美術大學]

官網傳送門:Tama Art University

多摩美術大學的日本站,在眾多大學官網中,最有氣質的一個

先帶大家走進多摩美術大學的#學生生活#(憧憬.jpg)

大致的內容是:學生生活小貼士;校園年曆;課外活動;藝術祭;學校內畫廊展示向指南;畢業作品展;關於騷擾防止宣言(我也不太清楚這是什麼....)

學生生活小貼士的生活費/學費.上下學狀況:

這個部分有兩個表格,一個是男女同學住宿情況;一個是八王子校區上下學時間表(紅色框部分)

(註:日本的大學是大部分是沒有大學宿舍的,在外面找房子住是多數情況)

感嘆:我就沒有見過哪個學校官網能把學生上下學的時間統計成表!!!還是這種柱狀圖!!

接下來就是住在外面的學生的居住地分布表和房屋介紹(難道不貼心?都不用擔心太麻煩前輩了好么)

對於沒有這方面信息需求的人來說,可能察覺不到這個樸素的頁面好看之處。但是當你真正需要獲得這些信息的時候,你會發現這個頁面,就是最好的設計,整潔乾淨、沒有多餘的信息,調理清晰、層次分明的排版引導你最快的找到答案。so~~


關於多摩美術大學,最後再介紹一個:

#畢業後的方向#(如標題,就是告訴學生就職方向,升學數據之類的)

有一個[主な就職先],也就是畢業應屆生主要的就職工作:

再一次圖表,直截了當的告訴大家2015年已經被公司內定錄用的學生比例和職業


還有畢業生人數與畢業方向的一欄里,有2003年-2015年畢業生的數據統計:

還在為將來的就職方向而苦惱嗎?這些數據就是最好的參考資料。

(誒,我真不知道我們學校開大學生就職創業課的意義何在,我不需要,能給我一套像這樣的表就行。)


多摩美最後的傳送門:

學生畢業作品:多摩美術大學|卒業製作優秀作品集2015(裡面也有09年-12年的作品傳送門,這幾年做成了電子畫冊,可以放大看細節)


網站的介紹,以上です。

啰嗦的話(可不看):

對,這兩個網站就是我認為最好的大學官方網站。

也是我見過最好的網頁設計中的兩個,如果真要選一個最好的網頁設計,我可能還是會投票給谷歌(chrome的無法連接網路界面按空格鍵有驚喜)

我從小學一年級就沉迷於電腦課,小學二年級第一次使用谷歌,四年級成為網癮少女,大學成為視覺傳達系的學生,大二開始真正感觸設計。對於網頁設計的認識度比較淺薄,如有得罪,請多多包涵。

嗯…人類是視覺動物,我也看過國內外許多炫酷新意的網站,並沉迷於此。不過,就體驗來說,在信息的獲取便利程度上會有些折扣。

日本的設計也許沒有那麼的迷幻,但是非常的人性化,誰用誰知道。

看了許多學校的官網,歐美的、日本的,像RISD、UAL等我都去他們官網找過一些資料,信息很齊全,使用感也很不錯。不過,日本大學的官網設計更加嚴謹吧,標題之間的主次關係很考究,排版、信息設計、網格設計一流。(貼心得淚目)

此處為國內一些美術大學的傳送門:中央美術學院清華大學美術學院中國美術學院

我並非美院的學生,有時候很羨慕國內美院的學生能擁有的資源,如果他們的官網做得更好,那我就更羨慕啦(笑)


總之

無法完美的傳達這兩所大學的絕妙之處,是我的能力不足。

武藏野美術大學的宣傳手冊上是這樣解釋視覺傳達專業的:

人に伝えるためにはどうすれば良いか。それがデザインの原點。

渣翻:思考怎樣才能更好的向人們傳達信息呢,這就是設計的原點。

所以任重而道遠,頑張ります(??????) ?


日本のデザインをなめんなよ!


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

更新一下 2017.2.24

我覺得我寫得挺無聊的,如果有人認真看完,那真的很感謝你

又經過半年的學習與發現,發現了國外很多很棒的網站,當然,國內的網頁設計水平也在飛速發展。這個回答就專門作為推薦一些平時查資料的時候,個人覺得體驗和設計齊飛的日本網站吧


日清(對,就是那個賣泡麵的):NISSIN FOODS GROUP

森澤字體設計公司:株式會社モリサワ(現在漢儀的網站也越做越好啦,下載正版字體很方便)

佐藤可士和:KASHIWA SATO - ART DIRECTOR / CREATIVE DIRECTOR(體驗感不是那麼好,但是裡面有他的設計作品的高清大圖)

日本設計中心(感興趣的人可以去了解一下這個傳說中的組織):Nippon Design Center, Inc.

Blankie(不敢相信這竟然是一個同人志的設計網站.....):PORTFOLIO | Blankie


謝邀~
這是一些國外設計師或工作室設計的網站,有些是具有一些很典型的風格。
1、Kenji Saito~立體效果超級好的橫向漂浮的feel

來自日本的開發和設計師,網站以特色的波浪效果讓人印象深刻。

Code Sketch
2、Robin Ait-el-alim Noguier~天才少年的作品

設計師Robin只有21歲,來自巴黎,目前還在HETIC學習,Robin非常擅長解決設計中遇到的問題。

Robin Ait-el-alim Noguier
3、Irene Demetri~粉嫩又不過分甜美,極具親和力

對於這位設計師的網站只能說交互做的太有親和力,而且很好的平衡了移動端和web端,你們自己感受一下

Youandigraphics
4、Guillaume Juvenet~黑白色調難得不是性冷淡風

Guillaume Juvenet是一個只有21歲來自巴黎的開發,他開發的界面及交互方式可愛、友好,雖然是黑白色調,但絕對不是冰冰涼的性冷淡風,簡單小清新,鏈接在下面,你們自己感受一下,感覺打開界面以後自己都變得萌萌噠

笑臉真心萌

Guillaume JUVENET
5、Bethany Heck~細節控的福利

復古風+討人喜愛的排版+點睛之筆的小細節
細節控的福利

天使和惡魔的小圖標,讓人慾罷不能

Heck House


Google Homepage, 2007一個輸入框,兩個按鈕。幾乎任何人都能理解的界面,所有的複雜性都隱藏在了簡單的界面背後。


1、好的交互設計——在線學習網

個人覺得只要是切實解決了人們的某種需求,並且交互邏輯讓人一目了然,簡單、易用的網站都可稱作是好的網頁設計。比如勤學網,其定位是:職業技能高效率在線自學平台,網站首頁非常的簡潔明了,有平面、室內、影視、機械、園林設計五個學院,對於學習者而言能夠很快速的找到自己需要學習的教程,這就是好的網頁設計。

而且裡面有詳細的課程介紹,以及完善的在線筆記、素材下載、學習答疑等板塊內容。

2、好的創意設計——公益宣傳網站

當然也有的網站為了追求特定的創意表現形式或藝術視覺效果,能給人帶來耳目一新的感覺,這類網站也能稱作是好的設計,更具體的說是好看的網頁設計、或好有創意的網頁設計。比如:暴力語言會變成兇器。這個網站宣傳的是要停止語言暴力,暴力語言會成為兇器。

語言:豬腦子

滾動滑鼠,以上幾個字一步步拆分重組為一把手槍。

3、好有視覺衝擊的網頁設計—— 騰訊互動娛樂

這個網站最主要的亮點是:炫酷的視覺創意。網站的主要視覺元素由一個個的圓點拼接而成,這樣的設計並非用ps作圖而成,而是直接運用前端腳本結合 & 標記繪圖完成的,圖形都是由一個的像素點繪製而成,給人眼前一亮,算是我見過的最具視覺創意的網頁設計。

而且通過滑鼠點擊文字附近的較大圓點,還有一些詳細的內容出現,交互形式也非常新穎。

(完)


沒有最好,只有更好,全球的好網站真的太多太多了,當然,包括谷歌它也是不斷更新不斷升級自己的設計,越來越好。
這裡是自己收藏的好網站的地方,感興趣可以去看 酷站欣賞|沒位道


第一個想到的就是Apple官網。


自己英國工作室的網站,需要翻牆。C-14 | Global Branding and website design


對於男人來說,比他設計的更好的嗎?一點開就血脈噴張,敢問有哪個網站能做到這樣?何況還有一批高素質網民,只談愛好,從來不噴。


Sooshi 這個應該是我見過最好的網頁設計了


其實我不是來答題的。
我是來說感慨的!
真心感謝眾多知友帶來的巨大視覺盛宴!
一個字,
爽!


http://nipponcolors.com
旋轉的色條顯示感覺非常適合做屏保


我自己的兩個網站……
羊城網-粵文化,閱觀點,悅生活…… -
藍龍互動——跨媒介創意整合!


可以來飛屋設計看一看。


推薦一個文獻資料庫網站。

elversier的資料庫,檢索方式直觀方便,背景圖簡單大氣。契合主題。

還有另外一些看起來比較專業的資料庫網站。

SAGE

Wiley

額,大家沒感覺的話可以對比一下國內的資料庫網頁。

這是知網...看起來實在沒那麼專業...

萬方……


ikbc官網


tumblr


魅族官網哈哈


這個問題不應該讓輪子哥來轉一圈嗎?

這樣的網站肯定是讓千萬單身男流連忘返的
-------------------------------------------
1024!!!


老司機帶你們看兩個有趣的

出自PCDVD論壇,這個Power By Google什麼gui?

還有一個關於友利奈緒的福利,透視車。666666,以前在貼吧看到類似的效果還要把圖片打開。

這個網頁直接滑鼠移動到圖片上面就變成另外一張圖片了

還有一個設計就是當你打開的網頁不是正在查看的標籤時,瀏覽器標籤上 的標題會改變


源於少女心的我,喜歡粉紅色,所以見過一下很好看的粉紅的網頁設計

The VHS Retrominder /

這個有趣的網站提供了一個90秒的快速測試,檢測你對於復古知識的了解。網站首頁採用了失真特效的設計,充滿了80年代的風情,失真效果下粉色的光暈配合著略顯復古的字體搭配,營造出和內容相匹配的氛圍。

Publicis90 /

這個頁面是 Publicis90 的90周年的紀念活動頁面,這個全球性的倡議組織正在推行數字化企業,充滿活力的紅色和粉色搭配到一起,顯得積極向上,你可以在這個網站查到所有相關的信息。

Around the World in 12 Dishes/

這個有趣的網站通過十二道菜品帶你了解這個世界,粉色的色調讓網站顯得非常有親和力。

Year in Music /

Spotify 去年的年度總結頁面非常有逼格,大量的雙色調搭配運用到年度最佳音樂家的網頁中,非常的風格化。偏冷的紫色和偏暖的粉色相互融合,互相浸透,將雙色調的特色發揮到極致。

Chekhov Is Alive/

Chekhov Is Alive 是一個文化研究項目,探索關於文學、戲劇和現代科技之間的關係與影響。網站在設計上也非常不錯,易於導航,配色也足夠醒目——活潑的粉色和柔和的綠色。

Found Them First /

這個網頁同樣出自Spotify 之手,主體同樣採用的是雙色搭配,文字使用了與兩種主色調都能形成對比的深藍。頁面中的人物形象是以粉色呈現出現的,作為視覺重心而存在。網頁會根據你聽歌的歷史,判斷出哪些樂手會在成名前被你注意到。

Histography/

粉色不僅僅有充滿活力的一面。這個平台是一個可互動式的時間軸,基於維基百科來展示歷史重大事件,並且會隨著條目的更新而更新,相對暗啞的粉色營造出相對深沉的歷史感,又不會讓人覺得壓抑。

History of Icons/

這個網站也非常有意思,它展示了icon在數字領域的發展歷程,許多經典的操作系統中圖標都是如何設計的,你可以在這裡看到。暗色調的背景下的粉色和綠色都能夠將你帶回上一個時代。

Panic /

這個多彩而可口的頁面中充滿了各種動效、插畫、3D動畫,非常規的配色讓整個頁面給人以獨特的感覺,使人難以忘懷。

Everything You Need to Know About Design/

這個網站收藏、發現、整理了所有與設計相關的內容,將他們策劃整理到一起,你可以在這裡找大量的網站、圖片甚至社交媒體帳號。整個網站都使用明亮的粉色來設計,迷之醒目。

Social Design House/

這是一個坐落在Rock hill 的設計服務工作室,網站的體驗設計非常不錯,簡單直觀,粉色的配色讓網站的氛圍令人舒適。

Dribbble Interactive Infographic/

這個灰色和粉色搭配的頁面是一個HTML的可互動式的信息圖,展示了Dribbble 的功能和特色。整個站點充分運用了HTML5和CSS3的技術。

Love Notes /

這個來自Spotify 的網站是為情人節所準備的,可以幫你將信息轉化成為詩歌,並且搭配上相應的歌曲。粉色為主的色調和愛情的主題無疑是貼切的。

Beautiful Watercolor /

這是一個風格非常少女的Wordpress主題,功能也算的上全面,整體的色調、排版布局、UI元素都非常的女性化。

iBloggo /

iBloggo 是一個極簡風的博客與作品展示式Wordpress模板,這個布局適合設計師和攝影師。

Weshootbottles /

這個網站搜集了各種類型的瓶子的圖片,粉色在整個頁面中顯得相當的醒目。

Ouou/

這個電商網站無疑非常的女性化,粉色系的配色在此顯得足夠優雅,響應式的布局則讓它可以在各類設備上輕鬆使用。

Bakerella /

Angie Dudley 的這個博客當中包含了大量的關於蛋糕和各種甜品的食譜與烹飪技巧,粉色無疑讓人胃口大開。

就這些~


推薦閱讀:

筆記本屏幕偏色問題如何解決最佳?
如何欣賞設計作品?
你覺得老乾媽的logo需要重新設計嗎?
怎樣正確地理解「Less is More」?

TAG:設計 | 交互設計 | 網站 | 用戶界面設計 | 視覺設計 |