網頁設計該怎麼學？
- 什麼是網頁設計
網頁設計大體可分兩塊內容，WEB UI設計和前端開發：
簡單理解來說就是把設計圖畫好(主要是使用Photoshop)，
然後通過技術手段(HTML-CSS-JavaScript)實現出來。
再交付後台開發人員嵌入功能。
- 如何開始？
理解了前面介紹，你可以考慮下自己興趣點是哪一塊，然後著重入手。
這裡我只介紹下UI設計這塊。
WEB UI設計是平面設計的一個分支，涉及頁面布局設計，排版，色彩明暗效果等。
現在網上Photoshop(簡稱PS)教程已經非常之多，多看看教程，先把PS工具基本使用方法弄懂了。然後去素材網站下載一些相關的頁面psd。再ps裡面拆分，分解，看看別人是怎麼設計的。弄懂方法之後，嘗試自己去設計頁面。剛開始做色彩搭配，布局等效果肯定不會很好，多回顧多看慢慢調整，積累多了，功力自然就上來。
除技術上得，有時間也要多多補充美術方面得知識。
平時多去一些素材網站，酷站收集類的網站看看一些酷站。多看多做。看多了，自己想法也慢慢成型了。這裡推薦一些網站，可收集起來：
Dribbble - Popular
網頁設計師聯盟--國內網頁設計綜合門戶
CHINAUI優艾網
站酷（ZCOOL）
ICONFANS|圖標粉絲網
----------------------------------------------------------------------------------------------------------------------------
最後提示下，實踐是真理，建議先模仿，再重製，後創新。別怕去抄襲。每一個好的藝術家最開始都是臨摹開始得。
個人覺得，以下分享即是最終答案！
一、明確網頁設計需要學些什麼
軟體技能、創意表達、視覺刻畫，這是網頁設計師的核心技能。網頁設計是生產運營中的一個技術支撐環節，其最終的作品輸出都是為企業或商業產品服務的。學會理解你的服務對象，將企業的文化價值、產品的功能屬性準確傳遞給潛在客戶，這就是網頁設計的階段性目的，也是一名好的網頁設計師需要學會的東西。
二、網頁設計師的工作日常
1.信息的收集整理（前期調研階段、競品分析、受眾分析）
說人話：首先要分析理解自己的設計內容，設計初期可以先收集一些同行、或競品相關的網頁設計、或者圖片素材做參考。
2.信息的歸納提煉（策劃設計階段）
說人話：把收集來的信息加以提煉，歸納整理出適合自己的網頁設計的有用信息，以此來把握整體的網頁設計風格及大的方向。
3.信息的視覺化表現（軟體製作及執行傳播階段）
說人話：信息的視覺化表現也就是，在Photoshop軟體中完成排版布局、頁面的icon設計、圖片的合成處理等，以及推廣banner海報的設計，然後切圖交接給web前端開發。
三、網頁設計的常見類型
△房地產官網設計，作者：騰訊-郭亮，來源：網頁設計高級教程
目前，關於網頁設計的常見類型及方向有：淘寶天貓類型的電商視覺設計、企業官網的設計、新品宣傳、活動專題類型的網頁設計、後台管控類的網頁端UI設計。在日常的工作中這幾種也許你都會接觸到。在學習之初你還得從軟體技能、排版布局、圖像處理、切圖輸出等這些具體的點著手熟悉。
四、學習網頁設計的具體知識點
(1).首先要精通設計軟體，把photoshop玩轉，這是網頁設計的主力工具！
(2).深入學習排版設計，以及三大構成中的平面構成、色彩構成、立體構成，掌握一定的素描基礎，以明確：光影變化、透視結構、構圖平衡的基本視覺規律。
(3).掌握網頁設計規範，學習網頁設計概述、製作流程、視覺元素、色彩搭配、以網頁布局排版、切圖、交互知識等。
(4).學習網頁設計創意表達的思路流程，如何將文案創意具體到視覺化呈現的全過程，以及畫面光影細節刻畫的技能提高。請參考：網頁設計高級教程。
(5).了解一點前端代碼HTML、CSS的運用，學一款代碼編輯軟體，推薦網頁設計師用Dreamweaver。
(6).了解你設計網站的公司及產品，熟悉這個公司及其產品面向的人群！
(7).拓展學習網站優化、開發、後台數據處理常識（加分項目！）
五、學習網頁設計，你要知道的以下三點。
1、網站的製作流程
引用於：自學網頁設計，需要了解的網站開發流程
通常情況下，任何一網站的建立，都會經過「分析策劃—交互設計—視覺設計—前端製作—後端製作—測試上線」6個環節。
在實際的工作崗位中，一般由「網頁設計師」負責「視覺設計」板塊，即我們平常所說的「網頁設計」。而「前端製作」環節則主要有「前端工程師」來負責，即用代碼來重構還原設計師的視覺稿，這一環節也就是我們平常所說的「網頁製作」。
很多初學網頁設計的朋友，對這兩者的關係往往是傻傻分不清楚的狀態，對自己的專業定位沒有清晰的認識。這就導致學設計的同學，後來干到了「前端工程師」的崗位，學前端的孩子開始猛補「設計知識」，這個就是要走偏的節奏。
2、網頁設計，是以視覺設計為主的工作。
自學網頁設計的核心任務是學習「視覺設計」相關的知識點。用什麼樣的排版，去梳信息的層次邏輯，用什麼樣的顏色，以及多大的字型大小？如何讓畫面表現更具視覺創意、交互體驗會更好，這是新手學習網頁設計應該畫下的重點。
一個網頁被設計出來，是給人用，給人看的。 要好看（簡潔）、要好用（高效）這才是一個設計師需要反覆考慮的。視覺+交互，是網頁設計師的核心競爭力。
其中「視覺設計」的依據，源於前面的策劃和交互設計。最後出具的「視覺設計稿」得符合品牌定位，滿足生產運營、以及用戶需求，這是網頁設計師必修的基本功！
3、前端製作，是以前端代碼為主。
前端製作在流程上，是在視覺設計之後。這部分工作通常是由WEB前端工程師來完成的，工程師通常會運用到HTML、CSS、以及JavaScript、jQuery等網頁前端代碼，來重構網頁設計師的「視覺設計稿」，以及交互動畫等。
「前端工程師」除了要配合網頁設計師外，還要配合做後端工程師，做好網頁端的數據收集處理等工作。如果你要勵志成為一個優秀的網頁設計師，請牢記自己的崗位職責和學習重點，在沒有認清「視覺設計」前，要當心自己是不是越位到Web前端開發這個坑裡去了。
△圖例：優秀的電商網頁設計作品，視覺合成。作者：尚雲
再比如優化網站所需的SEO、Ajax等技術，雖無需你動手實踐，但能做到了解一二，也是不錯的加分項。在設計的時候，也可充分利用這些規則和技術來規劃你的版面，使其更加的專業友好。
再往後
上面所說的，都是網頁設計師必須掌握或了解的基本功。在基本功掌握紮實了以後，則可圍繞著創意表達、營銷傳播、用戶心理、交互體驗的維度在進行深入學習探討，以指導你做出更好的設計。這一階段，則是思維層面的提升，可購買相關領域書籍進行學習。
—
原創回答，禁止轉載！圖片版權歸原作者所有。
本農無意散步到此，忍不住多言幾句：網頁設計師應該了解網站設計規範：
主目錄下應有一個help目錄,存放說明文件。說明文件包括：
目錄說明
文件列表說明：存放位置、文件名稱、功能及處理邏輯描述、所涉及的庫表、調用關係。
資料庫說明：資料庫位置、空間分配要求、表設計、關係設計、視圖設計、存儲過程設計等。
更多規範可以參考：網站設計規範
一系列經驗的分享：
網頁設計的標準尺寸網頁設計工具
網頁設計的色彩思考
相關的資料下載：
網頁版式設計原理 ppt版本
《訪客至上的網頁設計秘笈》pdf全本
最後還有沙拉一道：常用工具下載、交互，UI相關分享設計師文化周
首先找好定位，全棧？純界面？前端？後端？前後端？純開發？新技術研發？伺服器？大數據？如果無法定位，就啥都嘗試，找到自己所長。
1.打好基本功（軟體，技能基本功）
2.多做（商業項目，免費開源項目，插件，UI KIT等等）
3.多想（多總結歸納）
4.多學（研究市場，探索新趨勢新技術，不斷學習）
做網頁設計除了前面各位提到的看書培養審美，一些利器也是必須在手的。嗯。
下面放一些栗子，更多網頁軟體、內容管理系統、樣式編輯工具請移步讓網頁設計無往而不勝的黃金戰神利器 - 讀點兒設計 - 知乎專欄
- VIVUS
Vivus是一個讓你製作可縮放矢量圖片（SVG）的工具，適合入門。裡面有三個動效：延時、非同步、依次遞進。
- BLOCS
Blocs是一個簡單的Mac應用，不用寫代碼就可以創造出現代的響應式網頁。它處理速度很快，使用的Bootstrap 3，包括了谷歌網頁段的字體，甚至有retina的支持。
- http://PIXACT.LY
pixact是一個在線的工具，讓你能查看你作品的像素和維度。它給出了一個特定長和寬的畫板，然後可以衡量它的精準度。
不要學，一入前端深似海。
絕對不是那麼簡單。
引用豆瓣前端工程師@張克軍 的話 「 玩技術的都願意玩「深」的技術，玩設計的又不願弄髒自己的手。但是最終能把技術和設計完美結合在一起要靠前端工程師。但這種我認為的價值，不被廣泛認可。一個網站用戶體驗好會認為是設計師牛逼。 過度重視設計的公司只會成天改版。在這種處境下，不爽的都紛紛轉後端，本來有興趣的也望而卻步了」
學習前端是一個漫長痛苦的過程，更痛苦的是它並不被別人認可。絕大部分人總是認為街上抓一把十個九個都能做前端，這是非常錯誤的觀念，但是它卻根深蒂固。
前端需要足夠的才華、氣質與積澱。
首先，擺正心態最重要。
再次，計算機基礎很重要。
其次，找幾本好書。
再次，閱讀源碼
再次，品讀多門語言及其編程範式。
再次，十年如一日地實踐真理，並且反覆挖掘，提升自己。
再次，提供為社區提供支持和貢獻。
後記，某國內頂尖前端出現了。
十個有八個人都死在第一步，
一個人走到了第三步，便很牛逼地去寫超鏈接了，
而最後的那個人轉行賣水果去了。
以上，我說的都是錯的。
先弄清楚自己是要學設計還是學做網站。
如果是學設計，那應該培養自己的審美，攝影、繪畫什麼的，學習設計工具的使用如Photoshop Axure，多看多模仿國外優秀的設計站點，然後找項目鍛煉，從此走上UE的職業道路。
如果是偏向技術學做網站，那先了解一個網站是如何產生的。可以選擇做前端或者做後端。不管如何選擇，你以後會一直和代碼打交道，而不是上面所說的dw、flash、ps。
關於前端行業的介紹可以看看這個視頻，走入前端工程師的世界
走進前端工程師的世界1 祿永老師視頻http://jirengu.com/app/album/10
上面的鏈接有更多前端相關的視頻
【這些災難性網頁設計體驗逼瘋了我們】
設計者只根據經驗設計，是一件多麽讓人沮喪的事情。當我們使用設備瀏覽網頁，如果給我們一個很差的用戶體驗，總會有那麼些時候這些體驗會把人逼瘋。
這讓我思考一些讓人會抓狂的錯誤用戶體驗。錯誤的設計對網站有直接的影響，無論是對頁面瀏覽還是銷售業績。
下面我列出了7個災難性設計，遇到這種情況，作為用戶的我們，是不是幾近瘋狂。
1、註冊之後才能瀏覽
沒有什麼比得上註冊後操作、瀏覽讓人們想破口大罵、鄙視了又鄙視的事情了。我承認，這是一個獲得用戶電子郵件或者其他信息的方法，但是反過來想：你有失去了多少用戶呢？(PS:PEACE OUT=BYEBYE)
2、忘記多設備支持
人們已經不再僅僅是使用電腦了，手機、平板也成了瀏覽工具，所以，不要幻想用戶喜歡用手機等小屏幕設備瀏覽電腦網頁。開發移動應用程序吧，從長遠看，你給與了用戶更多靈活性。
3、讓人頭皮發麻的表格填寫形式
沒有人喜歡填寫冗長的表格，特別是在移動設備中。如果可以，就可能減少不需要的表格內容、選項。
4、難以閱讀或花哨的文字
你希望人們能夠閱讀你的網站，並喜歡你的網站。網站字體會給人留下第一印象，所以不要把它搞砸了。記住，選擇一個對瀏覽者友好的字體。
5、一個糟糕透頂的內容搜索欄
當一個頁面或網站雜亂無章，用戶也不見得會想去通過搜索尋找結果，情況就是這樣。
糟糕的搜索功能的結果，會引起用戶的不滿，最終離開網站。
6、長篇大論轟炸用戶的眼球
Web是一個可視化媒體，他更像是彩印的雜誌而不是垃圾小說。
在網站中使用圖片、照片、視頻，和長篇大論說byebye。如果不這樣做，我想只會讓讀者犯困或不在繼續訪問。
7、低解析度的產品圖片
如果比的網站是一個電子商務網站，那麼Web就是你的展
覽廳。所以，不要拿一些顆粒狀、如同郵票的圖片給你的客戶觀看。你不僅僅要提供高質量的圖片，還要提供多元產品給瀏覽者。
更多好文章：
近幾年Web前端框架層出不窮，比如 React, Vue, AngulaJS等吸引了大量的注意力，前端技術發展勢頭迅猛，各大互聯網公司也越來越重視前端開發，前端開發再也不是過去那種按照設計圖做靜態網頁，再隨便寫點jQuery的職位了。現在，市場上對於前端開發的需求越來越大，我們經常聽說前端開發入門難度低，但學習前端開發究竟需要多長時間呢？學多長時間就能找到工作賺到錢？結合了周邊同事和自身的經驗來談談學習網頁開發到底需要花多長時間。
Note：一定要下定決心，並且要堅持。
1. 網頁設計的基本概念和理論知識（10天）
在學習製作網頁之前，必須掌握網頁設計的基本概念和理論知識。什麼是靜態網頁？什麼是動態網頁？網頁的整體布局是什麼？網頁設計的原則是什麼？網頁基本構成要素是哪些？基礎的網頁設計概念都不了解，那麼對於之後要製作網頁更是難上加難。我認為利用10天時間了解網頁設計的基本概念和理論是必不可少的，時代在不斷變化，網頁設計也會更新換代。所以了解基礎知識是為了之後設計製作打好基礎。當然，還需要了解基礎的SEO知識。網上的視頻教程個人建議還是少看，一本好的書絕對讓你受益匪淺。推薦幾本好書供大家學習：
製作網頁設計
1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT
如何讓網頁設計更加功能化
2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT
前端開發
3. LEARNING WEB DESIGN: A BEGINNER』S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS
可用性：
4.DON』T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG
2. CSS+HTML+JavaScript（1個月）
相對來說， HTML是最簡單的，只是標籤語言， 格式規範; CSS相對來說複雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現很多頁面效果, 裡面涉及的變化太多了。如果你只會基礎語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這裡說說我的經驗吧，我一開始學習的Bootstrap，簡單點說，就是給現有電商項目套上Bootstrap做的響應式皮膚。Bootstrap確實挺好上手，靠著官網的手冊，基本上遇到的問題都能自己解決。
JavaScript 也沒有那麼難，你要知道Brendan Eich創建JavaScript語言一共就用了10天時間，所以它的語法並不複雜，相信你很快就能掌握基本語法。你可能還需要學習一些常見的庫的API，這個可以根據你的需求來安排，你要用到什麼庫，就學習它的文檔。
我覺得最好的網頁開發學習資料就是 Mozilla Developer Network(https://developer.mozilla.org)的文檔了，涵蓋了HTML, CSS, JavaScript的方方面面，不論是初學還是老手查閱都是非常有用的，推薦給大家。
3. 開始製作網站（1個月）
了解了基本的知識，做了一些小練習之後，我認為最重要的是儘早參與實際項目，這樣才能得到真正的鍛煉。使用 Jekyll + GitHub Pages 為自己搭建一個靜態博客是一個很好的開始，只需要簡單的配置，不需要任何後台開發，幾乎完全是前端開發。
建站的時間取決你自己對網站完成的滿意度，如果參考模板， 那麼幾個小時內就可以搞定了；如果是要獨立開發一個新的網站又要內容全面好看，1個月是跑不掉的，甚至需要更長時間。
4. 工具軟體學習（半個月）
工具的掌握程度完全靠個人的領悟能力和學習，網上有很多關於以下這些工具的教學視頻，跟著學會事半功倍的。需要學習的基本軟體：
編輯器：Sublime Text
初學者我不建議立即使用強大的 IDE，先使用編輯器有利於學習。Sublime Text 是一款我個人非常喜歡的編輯器，界面優雅，操作流暢，自動支持語法高亮，還有豐富的插件，你也可以試試。
設計出圖、切片：Photoshop
Adobe Photoshop，簡稱「PS」，是由Adobe開發和發行的圖像處理軟體，Photoshop主要處理以像素所構成的數字圖像，使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作，PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop非常專業，也稍顯複雜，是專業的平面圖片設計人員必須掌握的一款工具。作為前端開發，你需要跟設計師緊密配合，學習一些 PS 知識會對你之後的開發更有幫助。
原型設計：Mockplus（時間成本最低）
是一款上手非常簡單的網頁原型設計工具，通過拖拽就你完成一個簡單的交互，項目類型諸多，有自由項目，網頁項目，自定義項目，當然還有APP項目。網頁項目最大的尺寸為3000*6000，你可以任意設計都沒問題。200個封裝組件和3000個圖標可供使用，最近新出的格子功能更是方便使用，減少了很多重複設計的時間。
掌握一些原型設計知識絕對非常有必要，這是我投入最少卻收益最多的事情之一，我強烈建議你嘗試一下Mockplus，對之後在團隊工作的溝通會非常有幫助。
5. 學習設計知識（持續）
前端開發是一個直接面向用戶的職位，跟後端開發不一樣，你的成果是用戶直接可以看到的，我認為提高自己的審美，多掌握一些設計方面的知識，把握當下流行趨勢和動向也是很有必要的。而這一過程是不能用具體時間來衡量的，需要不斷持續吸收新的東西才能設計出理想的網站。這裡有15個最好的網頁設計博客資源可供大家每日閱讀，我個人還是最喜歡medium。UI設計資源網站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。
總結：
軟體開發是一個需要持續學習的過程，儘管前端開發入門難度低，但是近幾年來前端開發的複雜度越來越高，對個人素質的要求也越來越高。本文只是針對想要入門前端開發而找不到方向的人，經過這個過程後，你可以找到一個初級的開發職位了。不論做什麼事情，學習是根本，希望這篇文章能幫助到新手。
說一下我的經歷，除了早期被欺騙，說只有dw才能打開html文件編輯，用了一下。
後來全部都是自己動手畫一遍，在到ps上設計出來，然後用代碼自己寫出來，該插圖插圖，該編程編程，反而覺得這樣更方便自由。
先學一學HTML，找本自己能看懂的教材，瀏覽為主，不用記住所有的概念，只要記住使用原理就行了，這一階段，估計三天就夠了；然後用兩天時間學CSS，方法同上；進而再花些時間了解一下JavaScript。
然後就可以用記事本嘗試寫幾個網頁，記住這時千萬不要用那些可視化工具，比如Dreamweaver（那些以後再學）。
有一個提高自己「寫網頁」的捷徑，就是上各大網站，把網頁保存下來（什麼？你說你不會保存網頁？就是「文件→另存為」），然後打開保存下來的網頁，點擊右鍵→查看源文件，看看人家的網頁是怎麼寫的，然後模仿他們的寫法，不斷規範自己的代碼。嘿嘿，這個方法不錯吧。先好好模仿一下吧。
接下來該學一下PS（用的最多也是大家聽到最多的）、fireworks（可以做矢量圖的）、DW（可視化的網頁編輯器），另外還有許多可以逐步了解。建議一開始就到網上找些實例教程，這些實例教程一般都介紹得很詳細，跟著它一步一步做下來，每學會一個實例就掌握了幾項操作，而且也有了自己的作品，很有成就感的，長期積累下來對自己的提高很有幫助。學Fireworks主要是學矢量圖片處理，比如加一些效果，這對於初學者是很重要的。
這時還可以結合Dreamweaver進行學習，你就可以體會到Dreamweaver和Fireworks的無縫集成了。利用這些工具多做幾個網頁，你就可以達到一定水平了。
要是想讓你的網頁多一些炫目的效果，建議你學一下Flash，難度並不大，而且要是前面的JavaScript基礎打得好的話，學到Flash中ActionScript時，你會有一種似曾相識的感覺，因為這兩種語法幾乎是一模一樣的。
到這時，相信你就可以真正領會到「網頁設計常用軟體」的威力了。
在實踐中不斷提高
要是每天能拿出兩個小時來學習，完成以上這些學習估計只要20天就差不多了。要是天賦高的話（比如說像一些高IQ者這樣的，呵呵)，那需要的時間就更少了。接下來該實習了，找個地方鍛煉一下自己，比如可以去一些公司乾乾兼職，威客其實也行、或是給自己的單位設計一下主頁等。
最好是能進入一個正規的開發團隊，你就會學會如何以團隊合作的方式開發網站，特別是怎樣和程序組合作，把頁面與後台程序資料庫配合起來。可能你會擔心自己是新手，人家會嫌棄你，沒關係，只要努力去找，總會有機會的。
到此，你就基本可以稱作是一個「准Web Designer」了，不過要從根本上提高自己，最好去學學美術，這是當一個網頁設計師的基本功。
作為一個過來人，表示大家不要站在很高的立場上看問題，因為你所給出的答案往往是中級到高級的步驟，而不是一個給零基礎的人入門的方法。
初學者，很簡單，最直接的方法是學Dreamweaver（不一定要最新版，DW8就可以），自己先弄出幾個網頁來（最好能了解一些域名、FTP、主機等知識，搞一個自己的靜態網站），有一點成就感，之後的路才能堅持走下去。
在使用Dreamweaver的過程中，自然會慢慢接觸到HTML，也需要學一些作圖軟體，首選Fireworks（雖然剛被砍掉）和PS。
這是怎麼回事？
這個世界怎麼了？
知乎上搞網頁設計的在這個時間段都不在了么？
得票最多的答案的票數是怎麼來的？默默點贊的是什麼心態？
這就是網頁設計？
那要用戶體驗幹什麼？要交互設計幹什麼？要視覺設計幹什麼？
純粹的誤人子弟 啊！
web design怎麼又和前端扯到一塊了？
補充說明什麼都沒，提問者就沒有詳細描述么？
靜待摺疊！
真正的設計師，速來。
網頁設計其實很簡單，具體說來，可分為理論和軟體設計兩部分，任何的設計，都是由這兩部分構成。
1.理論部分
網頁設計只是設計當中的一種，那麼，從視覺上來說，需要學習設計的基礎知識，而這些基礎知識，是貫穿設計的全部。
設計的基礎知識包括
平面構成
色彩 構成
立體構成
平面構成會教你一些平面排版方面的知識，色彩構成會讓你學會配色，而立體構成，也讓你有空間感
具體的，可以搜索相關書籍
二 實踐部分
你的學會軟體，比如ps
網頁設計不同於平面設計，它需要考慮操作的可用性，所以，你需要學習一些交互設計方面的知識
首先需要提高下審美，看看好看的網站應該是什麼樣子的。看看國外的設計風格，設計細節，汲取點別樣的因素。
Hotmail login, Breaking news, Outlook, Skype and Video
首頁排列整齊，每個頻道四列分布
Univision, novelas, shows, noticias y deportes - Univision
首頁導航下拉時，其他內容模糊處理。讀者注意力集中於導航，同時畫面更清爽
http://www.reuters.com/
-首頁導航居中
-左側的7*24小時直播淺灰色底，細長簡潔
Top News, Latest headlines, Latest News, World News U.S News
中間一豎欄，立體式方塊，簡潔
thestar.com | Toronto Star | Canada"s largest daily
首頁Today『s Video設計
Ottawa Citizen
最後一屏設計（絕大多數外國網站會在首頁底部展開網站導航）
The largest online art gallery and community
不看內容，整體的排列、顏色、風格
Walker Art Center
最上面四個圓的設計比較顯眼，比長方形的Banner更有設計感
Turner Contemporary
-最底下的滾動式焦點圖，每日要聞推薦可參考
-最後的滾動字條挺好玩的
nationalgalleries.org
小細節：大圖不動，下拉內容慢慢蓋住大圖，效果贊
Accueil | Musée Rodin
透明式導航、透明式下拉框
WIRED
小方塊設計、清爽
The New Yorker
首頁每個欄目精心設計，手繪風，贊
如果你在過去10年里經常訪問外國網頁，你肯定會瀏覽過Reddit, Craigslist, Wikipedia, 4Chan, Hacker News或者是The Drudge Report這樣的網站。雖然這些網站都各自有其各自的行業所屬，但是它們都有一個共通點，那就是它們的網頁視覺效果都極差，可是它們卻又都是最受歡迎的網站。
Web技術經過了這些年的提升，設計師們可以透過這些技術和一些工具來處理更多前端視覺效果。然而，這些網站的功能布局不良，在今天的網路環境下並沒有與現代的設計理念相連接。
為什麼還有一些網頁看起來還像是在九十年代？是因為那樣的頁面布局乾淨、字體精簡而又顏色互補嗎？
根據記錄，The Drudge Report和Craigslist自從1995年推出以來都已經超過了20歲了。維基百科還差15個月就到20歲，Reddit已經10歲，4Chan也奔向了13。
重點是，這些網站受歡迎與否並不是看網站是否經過了精心的設計。你可能一眼看上去就會對一個網站有第一印象，喜歡還是不喜歡。但有好的設計不僅僅是創造一個美觀的布局。你還要考慮的是如何去使用這個網站，如何幫助訪客更好地透過網頁效果完成他們所想要達到的目的和任務。
Data Visualization的創始人兼CEO Amit Das對此應該很有發言權。
這是在設計上與Reddit、4Chan等站的巨大差距。差距來自今天內容消費者對於媒體的預期已經從聚合內容轉移到了用戶生成。就像Facebook和Twitter這樣的社交媒體以及，一些分類驅動的內容平台就像Craigslist那樣，當然還包括一些論壇像黑客新聞。
但我們從上述網站的現狀來看，他們已經存在很長一段時間了。在2016年到來之際並沒有初步達到受眾的期望。作為組織，他們的重點是偏向於內容業務，他們有強有力的流量和用戶基礎。例如Reddit，這是全球點擊量排名第32的網站。
人們總是期待著有新的競爭對手的加入，有更好的設計和視覺效果來挑戰這些舊的網站。這就像房產網站Trulia挑戰Craigslist那樣。但是卻有不得不面臨流量這座大山，要知道房產搜索一大部分流量都來自於Craigslist。而這僅僅是Craigslist在全球廣告業務的冰山一角。
▍到底是什麼造就了丑爆了的設計？
一些最可能的原因就是以下幾點：
易讀性不佳：各種字體和衝突的顏色可以讓網站很難讀，特別是一些很長很難度的帖子。
網站導航混亂：如果用戶在您的網站上不知道該看些什麼，或者不知道一個鏈接會給他們帶來什麼，他們不會在你的網站待多久。
載入緩慢：如果你的設計使用了很多腳本，圖片和動畫，那麼打開你的網站就需要很長一段時間，因為需要慢慢載入。一般人可等不起。
如果身為設計師的你規避了以上幾點，相信您已經具有一定的設計水準。
維基百科的版面設計看起來好像也已經過時了，但是裡面的信息都還是清晰可辨。Reddit可能第一次使用的時候不是那麼好用，但是它的載入及其迅速而且在與眾多站點的比較當中都算得上是輕量級的。
沒有說笑，這就是The Drudge Report在2016年你會看到的樣子。
在2008年，Basecamp的聯合創始人Jason Fried認為The Drudge Report的版面設計是相當成功的，他認為即使在今天一些設計理念也是很好的。因為它的設計理念很經典，易於維護且兼容性強。另外它的設計也是真正獨特的。
這些就是重要的考慮因素，因為一個堅實的設計是需要花費時間反覆迭代、反饋並認真實施的。
Hacker News的布局靈感來源於UNIX
Y Combinator的黑客新聞編輯Daniel Gackle解釋了為什麼vote-based 鏈接能夠將創業者和開發者零散的界面這麼好地連接起來：
這是因為Hacker News強調內容高於一切，花哨的UI界面會把人們的注意力分散。而這裡面的文字和編碼內容卻是永恆的。Hacker News的信息密度是經過仔細校準過的，想要擠出更多的空間塞信息進去或者使得信息太輕薄都不實際。
Hacker News的設計指導精神其實也是為了簡化，而且是要讓讀者自己決定什麼是好的。
要做出一個漂亮的東西是基於代碼腳本設計的，頁面需要最小的負荷。我們用戶關心的東西可能很多，我們要做的一定要比他們更多。社區也有其自身的優勢，我們追求的是經典而不是現代。同時，我們希望吸引人的東西是內容，而不是花哨看起來新奇的東西。
▍有時候丑是不可避免的
騰訊的主頁看上去就是一個忙碌的典型。
在外國人看來，中國的信息攝入以及互聯網速度普遍比較低，一些網站也因此可以減輕網站的鏈接負擔，有的也刻意減少用戶的想要查找的頁數。
根據Reddit和The Drudge Report的案例顯示，用鏈接來填充頁面是一件十分不可行的事。雖然一方面，它長得不漂亮，但另一方面，它卻可以讓你快速瀏覽大量的有效信息，讓你的時間價值最大化。優化網站只是為了讓新的訪問者能夠更好地去找到這些新聞來源，這麼做也都是在經典的設計基礎上做出的一些新的小嘗試。
Gackle更提到了：
Hacker News的缺點在於他對於新訪客來說有點兒神秘。在早期，探索未知像是一種樂趣，但到了現在更像是在解決一個難題。但是事情狀況不會這樣一直持續下去，當網站有了更大的內容儲量時，必須解決掉易讀性這個問題。一旦設計更複雜，那麼事情不會變的清晰簡單。顯然我們不會這麼做。
▍那改變會是好事嗎？
當我們還在對於網站設計缺陷頗有微詞的時候，唯一的解決辦法就是徹底地改造他們。但有一點值得注意，重新設計對於用戶來說是一次衝擊，Digg當時這麼做的時候就使得用戶數量下降了可怕的34%，雖然它有了一個全新的面貌。
Das說明了為什麼大改版不會是一件好事：
考慮到這是一些大流量的網站，一些小的設計變化都可能造成一些大的衝擊。事實上Reddit最近在做一些設計上的改動測試，這個動作最起碼錶明了其實他們也是在適應設計技術的發展變化。
很多人認為Reddit會進行大改版，但是一點一點的不斷做一些小的改動才應該是理想的，因為這樣不會影響站點內的主要業務及變化。
當然大改動還是小改動都有可能通向成功，就像DeviantArt這個世界上最大的藝術和設計社區。重新整頓了網站以全新的品牌運營了幾年後，還不錯。這其實都是因為產品核心的DNA並沒有改變，它仍然在慢慢改變內部的頁面模板。他們認為要跟上技術的發展變化，不斷做出變化是一個好的方法。
Gackle也闡述了一下Hacker News的主張：
相比起一下激起大的水花我們更喜歡以溫水煮青蛙的方式來進行改變。其實我們跟我們的一些用戶一樣，都討厭改變。我們實際上已經改變了很多在過去兩年的事情，但有些東西就是只適合原來那樣的，不需要有多少的變化和差異。當添加新功能的時候，程序員如果發現在代碼上不用太大變化的話會很有樂趣。因為這驗證了他們之前設計的價值。
我們喜歡的變化是把一些不必要的東西給拿掉，YC和Hacker News的CEO Paul Graham就是一個如此追求簡單的人，對於我們來說，勝利就是看見我們的結構不斷簡化。
當你添加了新功能然後再把它刪除掉的時候，你會發現簡化的感覺真好。有一件事情我們不會做，那就是追求時尚潮流的設計。這對於Hacker News來說是一個很大的工程，因為首先你要去學習更多，然後透過重新的運營去提高內容的質量。
有哪些長得很醜的網站，可是你卻很喜歡的，請告訴我們！
強烈建議絕對不要先學html之類的，先學ps，學會自由的設計你想要的網頁，然後再切圖到dw裡面。因為先學html的話，你會因為布局方面碰到的障礙阻止了你對網頁應該如何設計的自由思考。
編程語言Java，已經21歲了。從1995年誕生以來，就一直活躍於企業中，名企應用天貓，百度，知乎......都是Java語言編寫，就連現在使用廣泛的XMind也是Java編寫的。Java應用的廣泛已經到了「無處不用」的盛世，而且一直在語言排行榜榜首，從未被超越。廢話不多說，今天主要是給大家講講怎樣學習Java，給大家建議一條輕鬆精通Java的學習路線。有了相對標準的流程，那麼你的學習效率一定會倍增。
基礎篇發出後大家反響還是較好的，感興趣的朋友可以百度《黑馬程序員：輕鬆精通Java學習路線連載1-基礎篇》，即可查看基礎知識的學習內容。我出Java學習路線的系列文章，只是想給予愛好技術的人一個借鑒而已，也就是提前亮，希望可以在你學習與想要學習Java的時候盡一點微薄之力。文字我會盡量使用大白話說明，畢竟一些知識點也無法用大白話說清楚還請諒解。
JavaWeb網站設計基礎階段
簡單理解JavaWeb就是網站設計，通過此階段的學習過後應該要掌握以下幾方面能力：
1.可以仿製任何網站前端頁面
2.可以解決網頁瀏覽器兼容性問題
3.可以解決PC端和移動端兼容性問題
4.可以使用前端腳本進行相關網頁功能特效編寫
5.可以使用JavaWeb核心技術輕鬆寫出任何網站功能模塊
6.可以使用JavaWeb高級部分知識解決網站的相關高並發問題
你完全可以勝任JavaWeb開發工程師的工作，為之後的框架和整體項目的學習打下良好的基礎，下面我對知識點進行一個詳細的介紹。
一、前端技術
1.HTML
超文本標記語言，標準通用標記語言下的一個應用。「超文本」就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。（網站頁面的布局，可以點開任意一個頁面右鍵查看源代碼，即可看到html的字樣）超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。
學習內容：了解HTML語言，HTML語言背景知識，掌握HTML的整體結構、文件標籤、排版標籤、塊標籤、字體標籤、列表標籤、圖形標籤、超鏈接標籤、表格標籤、表單標籤(form標籤、input標籤、select標籤等)、分區標籤、頭標籤。
2.SS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。簡單說就是網頁的樣式製作。
學習內容：CSS介紹、CSS導入方式(內部樣式表、內聯樣式表、外部樣式表)、五大CSS選擇器(ID選擇器、類選擇器、元素選擇器、屬性選擇器、偽類等)、樣式屬性介紹。
3.JavaScript
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
學習內容：JavaScript編程，JavaScript語法、數據類型、運算符、表達式、流程式控制制，JavaScript內部對象、數組、字元串、日期時間、數學函數、正則表達式，JavaScript函數、自定義函數、全局函數，BOM介紹、window對象、location對象、history對象使用。 DHTML編程，理解DOM樹，DOM對象，常用DOM對象的屬性、方法 和事件，編寫事件處理程序、使用DOM操作HTML文檔、遍歷文檔樹上的節點、搜索文檔中特定的元素、修改文檔內容、往文檔添加新內容、使用DOM操作 XML文檔。
4.jQuery
JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。jQuery是免費、開源的，使用MIT許可協議。
jQuery的語法設計可以使開發更加便捷，例如操作文檔對象、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發的庫。
學習內容：認識JQuery、選擇器介紹、css選擇器、jQuery選擇器及其優勢勢、基本選擇器、層次選擇器、過濾選擇器、表單選擇器、選擇器練習小案例等;JQuery操作DOM：DOM分類、查找元素/屬性節點、創造元素/屬性/文本節點、插入節點、刪除節點、複製節點、替換節點、包裹節點、屬性操作、樣式操作、遍歷節點、CSS-DOM操作;動畫和事件：jQuery中的事件、載入DOM、事件綁定、合成事件、事件冒泡、事件對象的屬性、移除按鈕上註冊的事件、模擬操作、JQuery中的動畫。
5.BootStrap
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。[1] 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。
Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。
學習內容：響應式頁面的的開發與設計，強大的柵格布局，內置的CSS類庫，JS插件，快速布局商城頁面。
二、MySQL及JDBC
MySQL是一個關係型資料庫管理系統，由瑞典MySQL AB 公司開發，目前屬於 Oracle 旗下產品。MySQL 最流行的關係型資料庫管理系統，在 WEB 應用方面MySQL是最好的 RDBMS (Relational Database Management System，關係資料庫管理系統) 應用軟體之一。
JDBC（Java Data Base Connectivity,java資料庫連接）是一種用於執行SQL語句的Java API，可以為多種關係資料庫提供統一訪問，它由一組用Java語言編寫的類和介面組成。JDBC執行SQL語句操作資料庫。
這裡在說明一下，資料庫是非常重要的，以後可以說做項目做開發就離不開它，所以大家一定要好好學習此階段課程。不知道大家有沒有記憶，在基礎階段就學習MySQL和JDBC了,這裡又加強學習，可以看出其有多重要。學習內容：
1.Mysql資料庫回顧資料庫使用，SQL語句介紹、資料庫增刪改操作DDL語句使用、表增刪改操作DML語句使用、表查詢操作DQL語句使用、以及查詢語句條件、排序、聚合、分組操作。
2.JDBC開發回顧JDBC介紹、驅動的原理及使用、JDBC核心使用、DriverManager、Connection、Statement、ResultSet詳細使用，JDBC的CURD操作、防止SQL注入及PrepareStatement使用。
3.連接池和DBUtils連接池的介紹，自定義連接池。常用的開源連接池的DBCP 和 C3P0的介紹和使用，JDBC的工具類DBUtils的使用。
三、JavaWeb開發核心內容
學會Web核心技術就擁有了開發b/s系統的基礎能力可以來開發一個網站了，如：實現網站的用戶登錄、註冊，商品信息的分頁顯示、商品信息的非同步動態查詢，用戶名非同步校驗等功能，下面是學習內容：
1.XMLXML的概念與基本作用、XML的基本語法、XML的約束模式、DTD、Schema、名稱空間。XML解析介紹、DOM4J 解析XML、XPath的使用。
2.HTTP及TomcatWEB伺服器的工作原理、Tomcat的安裝與啟動運行、Tomcat的體系結構、在Tomcat中配置WEB虛擬目錄與發布WEB應用程序的方式、設置目錄的默認網頁、使用Tomcat配置虛擬主機、WAR文件生成與使用。HTTP協議詳解。
3.ServletServlet簡介、Servlet生命周期、servlet配置詳解、訪問servlet路徑分析、ServletConfig使用及servlet初始化參數的使用，ServletContext使用、系統初始化參數、web資源獲取。
4.request與responseHttpServletResponse和HttpServletRequest的應用、HTTP協議在web開發中應用、請求轉發與重定向使用。
5.Cookie與SessionCookie及Cookie的應用，Cookie實現商品瀏覽歷史記錄、Cookie實現記住用戶名和密碼,Session及Session域的應用，Session跟蹤機制，利用Session防止表單重複提交，MD5演算法及其應用，Session的持久化。最後結合之前所學知識完成一次性驗證碼和購物車小案例。
6.JSP技術JSP運行原理、JSP中的9個內部對象和作用、JSP表達式、JSP腳本片段、JSP聲明、JSP注釋,EL表達式簡介，EL獲得數據、EL執行運算、EL內置對象、EL函數，page指令及其重要的屬性，在web.xml文件中設置全局錯誤處理。JSP中的include指令及其典型應用。pageContext對象的詳細講解。JSP動作標籤介紹。JSTL標準標籤庫的介紹及使用。JSP模式介紹、MVC模式介紹、JavaBean介紹、BeanUtils使用。
7.JDBC高級JDBC的事務，轉賬案例的實現。JDBC的CRUD及分頁，條件查詢。
8.AJAX開發AJAX介紹、XMLHttpRequest對象詳解、JQuery的AJAX、JSON介紹、JSONLIB插件的使用。
9.JavaWeb高級開發技術Servlet Listenert監聽器介紹及使用、Servlet Filter過濾器介紹、過濾器生命周期、過濾器鏈分析、FilterConfig介紹。郵件發送，自動登錄功能的實現。
10.基礎加強註解介紹、自定義註解介紹、元註解使用、代理介紹、動態代理Proxy使用、類載入介紹。
11.Linux虛擬機安裝及使用，CentOS的安裝，Linux的常用命令，組、許可權命令，在Linux上安裝JDK，Tomcat，MySQL。
12.RedisRedis是時下非常流行的NoSQL資料庫，使用Redis可以實現高性能的緩存方案，知識點包括：NOSQL介紹、什麼是redis、redis安裝配置、redis數據類型及操作(String、Hashs、Lists、Sets、Sorted Sets)、Jedis使用、發布訂閱、持久化、主從複製。
四、階段案例
學習了這麼多知識沒有項目案例的檢驗，根本不知道到底學了這麼多有沒有用，所以除了每個階段的小案例外，最後一定要自己獨立完成這個網站才可以。結合之前所學知識完成JavaWeb階段電子商城，本系統採用經典的MVC設計模式，從需求分析到編碼將涉及到Java Web大部分常見的技術，讓學員理解真實項目的軟體開發流程(分析、設計、編碼、測試、部署)，通過此項目的鍛煉學員可以熟練掌握基本的Java Web開發和複雜問題的解決方案，為後面的學習奠定基礎，使用了最新的技術完成該案例，在項目中會使用Redis緩存技術，會抽取IOC的工廠，並且可以運行在Linux伺服器上。
JavaWeb的知識相對於Java基礎的知識來說不會那麼枯燥，大家在學習的時候一定要「燥起來」，多練習多打代碼，自己喜歡什麼樣的頁面，就趕快看看源代碼，看多了自己就會做了。做出自己的想要的網站是一件多麼自豪的事啊。
不管做什麼，你都要先去知道你所做的是一個什麼樣的事物。這是我們認知的一個基礎的前提，對於我所說的網頁設計，有很多的人們都會說，不就是一個網頁嗎，沒什麼可認知的。其實這樣的觀點是大錯特錯的，在很多的新站長來說，都是有著更加的深的體會的，有的站長認為網頁嘛，不需要那麼刻意的去設計，只要自己的網站文章原創，搜索引擎收錄，PR高，那麼網頁就無所謂了。這樣的觀點最大的錯誤，我個人認為就是這樣的網站徹底忽略了用戶的感受，是的，你的網站什麼都好，但是你要明白你的網站是做給誰看的，是搜索引擎嗎，是虛擬的嗎。其實我們所做的網站是做給我們的用戶去看的，所以如果一個好的網站，所有的方面都是十分的優秀的，但是網頁做的十分的簡單，空洞。那麼試想一下，我們的用戶會在你的網頁停留多久呢，這就是所謂的網站的外干內強了，即使你的網站做的再優秀，我想也不會有什麼成效的。
有的站長就說了，那麼把網頁做的漂漂亮亮的，把心思都放在網頁的設計之中不就好了。這樣的思想還是有著很多的，我自己也遇到過這樣的事情，以前做一個網站，打開首頁的時候，我感覺真的是十分的漂亮，但是當我仔細去看的時候，發現整個網站頁面除了漂亮，根本沒什麼可讀性，沒什麼文字內容，再去一查才知道網站收錄基本沒有，網站推廣也做的十分差勁。這樣的現象就是太注重表面了，忽略了我們的搜索引擎，這樣的網站也是不好的，讓我們的用戶在美感上有著很好的感受之後就再也沒什麼感受了，這樣的現象就是所謂的外強中乾了。
可行性建議：著手設計網頁，利用SEO知識進行網站優化，推廣，雙管齊下，讓自己的任何方面都完美化。參見過來人寫的文章：網頁設計入門經驗--一覽文庫。
我接觸網頁設計算比較晚的
大概在高二時候
走了很多彎路曲曲折折的
最後也總結除了少許經驗
2.從PS開始。PS十分重要，網頁簡單點就是圖片和文字的組合，你網頁所需要最切合的圖片是不可能從網上都能找到的，這時候就需要用PS自己加工。同時PS現在也可以直接做出網站來，你可以先做出大體形狀，然後利用切片工具。即簡單又實用，最關鍵是他可以增加你對網頁設計的興趣，不至於還沒開始就放棄。
3.開始接觸DW，DW功能越發強大，這也是網頁設計一個必須掌握的開發軟體，你有用PS設計網頁的經驗了，雖然說對學習DW的作用不大，但是至少你能大體懂網頁的結構構造和一些基本東西，這樣你學習起來至少不會十分吃力。
4.接觸CSS。CSS的作用不言而喻，強大，用他布局簡直神器。布局直接影響的是你網站的可賞性，對於一個網站很重要。
5.開始JS。靜態已經熟悉了，再逐步開始加點特效。
推薦閱讀：