網頁設計是一個多變的產業。就像其他所有的藝術表現形式，網頁設計經歷了一個令人驚訝的快速持續發展。一旦愛好者樂園，它已成為一個成熟的富人中具有較強的審美和功能的吸引力。事實上，我們正在經歷什么，可能是網頁設計 - 或至少是最好的時期黃金時期迄今。我們有我們的處理（對CSS3，HTML5的，字體嵌入等），一個免費提供資源，強大的設計界也大量強大的新工具（如果你需要更多的?。┛煽康腤eb標準支持的主要瀏覽器。

我們看到更好的互動設計，更美觀的設計。而我們看到更多的個人，從事和令人難忘的網站，太。但究竟是什么使不同？哪些新的方向是Web設計在今天的標題？有什么新技術，概念和想法正在成為重要的？在這篇文章中，我們提出關于網站設計的現狀提出一些看法。我們描述 現有的和即將到來的趨勢 并解釋如何網頁設計可能演變在今后幾個月甚至幾年。我們也將觸及我們作為Web設計者應準備，以隨時掌握新的挑戰和機遇。

1。設計迪萊特

作為設計師，我們的工作是有效地溝通思想。對于每一個特定的信息，我們創建了一個環境中工作的消息將最好的，指導用戶實現他們的任務，贏得他們的信任或有說服力的任何我們溝通他們。當然，有無窮的方法來創建此背景下。其中之一是為視覺美感，驚喜，歡樂的設計，幸福 - 足以怡情，設計; 設計是令人難忘和卓越。

有吸引力的東西更好地工作，幫助重點，保持用戶的關注。增加興奮難忘的設計和品牌的產品，從而增加接觸。事實上，一個強大的，可靠的客戶和他們之間的關系，觀眾的情緒可能是有史以來最好的事情發生在你的事業。

Brizk設計工作室 有一個驚人的美學設計，微妙的動畫，漂亮的印刷字體和一個干凈的布局。當您在頁腳中，Twitter的一個小盒子，揭示紅色鳥翱翔。一流的設計，是一個純粹的喜悅。

雖然絕大多數的品牌仍然保持沉默，被動和客觀的，我們已經看到更多的網站，很努力地從事我們的感官，無論是通過一個強有力的美感，通過詼諧的動畫內容塊，或只是通過一個小的額外注意小在“關于”頁面設計元素。這種設計美觀，瀏覽的樂趣，但最重要的，令人難忘 - 原因很簡單，他們是不同的。通過增加愉快的個人接觸到您的設計，從你站在人群中，給游客講的東西與朋友和同事對和共享。這是一個良好的開端。

您可以引起多種設置在喜悅：在您的維護模式頁，404錯誤頁面，在你的前裝載機，和世界各地。這樣做是為了給他們一些驚喜愉快談談游客。

邦蒂貝弗
邦蒂貝弗是一家飲料公司，擁有一個美麗的網頁設計。除了其微妙的懸停效果和動畫，網站有一些不錯的演員：如果你用鼠標向下滾動的輪子，一個小彈出的頁面手動出現詢問您是否需要一個升降機。印刷術是強大的，令人難忘，設計是好玩。簡單，明確和個人，該網站留下了強烈的積極印象。

Analog.coop
模擬提供了一種非常的親身經歷向旅客。當您訪問的頁面，它會顯示您所在，并告訴你誰是最親密的團隊在我們的例子中，艾倫和喬恩，誰是大約500英里以外的布里斯托爾到您（會員）。該網站有一個很好的復活節蛋是不是在第一眼看到的情侶。你可能想發揮與團隊的標題和照片左右。該網頁是有趣的探索。

Forrst
美麗的設計有吸引力的視覺元素和原始的導航 - 設計，管理，使良好的持久的印象。請注意如何在頁面上面積變化的背景時，瀏覽器窗口大小調整（視差效果）。在“盒子”日志是很冷靜，太。出人意料的是，形式是建立與某種原因表。

比利坦普林
在他的博客，比利坦普林集中在他生活中的小勝利。每一個職位記錄了個人的成就，顯示一個自定義設計的徽章，也是值得征服的解釋。比利整個網站使用這個比喻，“超級網絡能力說話”（敏捷的CSS，PHP的準備，IE6的增強，等等）和“英雄設計實力”（人性化的宗旨，銳意創新的細節，等等）。他還對網站上的個人投資組合。請注意好配色方案適合的主題。設計簡潔，美觀，和“成就”，是不尋常的轉折，令人難忘。

混合
混合實驗室，一個社區為設計人員和Web開發人員的博客，沒有隱藏的功能，吸引人的動畫或懸停效果顯著。相反，它有一個一致的，視覺吸引力的設計：你能現場豐富多彩的地點和方式往往是整個網站界重復？設計強調的內容，具有個人風格。簡單美麗。

藍天簡歷
這是在寫簡歷時有一個小團隊的網站在設計好的不同尋常的演員夫婦：標頭包含一個基于Flash的云動畫完全符合該公司的品牌。該網站也有微妙的動畫和軟懸停效果。和“關于”頁面介紹了一個令人難忘的方式相當原始和每個同事。

Mailchimp
MailChimp大量采用了在其設計的各個方面猴子的比喻。最近的更新通知客戶，Mailchimp目前的ASCII動畫，告訴用戶在什么背景下發生的，這是令人驚訝的還不錯的細節不顯眼。該公司還使用個人的，友好的，甚至有時令人討厭的語言在處理用戶的需求。這是圖像的一部分，MailChimp若有所思在Web應用程序保留。

大版本

進一步閱讀

• 52周的UX操作系統：設計喜悅
  這篇文章解釋了足以怡情，設計的重要性和特點，嘗試一些網站進行用戶的感官。
• 糖果在眼國防部長
  研究證明，有吸引力的東西更好地工作。我們如何認為不能脫離我們的感覺如何。下一次的老板，客戶或同事嘲笑的概念，美是很重要的界面設計，其皮珀斯點這里。
• 看起來很重要，因為我們都感覺
  論述了情感在設計和美學的重要性。

2。按鍵導航

作為設計師試圖使他們的設計更直觀，這是毫不奇怪的網站變得更加敏感。這不僅適用于用戶界面在現代Web應用程序（即正變得像桌面應用程序強大 - 而且往往更聰明），但隨著JavaScript庫的廣泛應用，“經典”網站正變得更強大和互動，也。其中一個方法，使網站更加敏感，通過“按鍵導航”，這并沒有被廣泛沿用至今。但是最近我們已經看到更多的設計方案有效地執行這個。對這類導航最流行的設置，如Flickr或FFFFound在照片的網站。

總的想法是讓用戶的鍵盤快捷方式，幫助他們執行諸如博客文章之間航行，繁瑣的任務，通過圖像移動的幻燈片，改變當前視圖（從水平到垂直網格），喜歡文章和章節之間的導航，例如一個網站。按鍵導航在Flash為基礎的設計常見的，但我們現在看到它適用于基于CSS的設計，也。 谷歌閱讀器 是先進的按鍵導航最好的例子，但其他網站有良好的實現，也。

它們使企業應用
一兩個月前，他們讓企業應用開始作為替代傳統的滾動為用戶提供平穩和先進的鍵盤導航。用戶可以切換使用兩頁的主要導航下拉菜單模式。在“鍵盤導航模式，”用戶使用箭頭鍵來瀏覽內容塊之間;“返回”鍵觸發了詳細查看和“逃避”返回到首頁。由于某些原因，該導航再也無法使用。

圖片來源

瘋狂- ar.ch
馬克安東達門的網站是基于Flash的，它的導航是很先進的：用戶可以直接進入以“C”與“ - ”和“+”，然后規模圖像的聯系方式導航和排序圖像，并通過文字滾動的垂直箭頭鍵。

圖片來源

9GAG
9GAG是一個社會書簽網站的形象。用戶可以瀏覽到下一個和以前的圖像使用的“j”和“k”分別。目前的圖像可以被否決了用“升”（愛）：沒有鼠標滾動必要的。在這種情況下，一到網格視圖中，快捷將是很有用。

FFFFound！
第一次社會書簽網站的形象之一，FFFFound提供快捷跳轉到頁的頂部（為“H”），改變圖像的視圖（“V”形），瀏覽圖片（“K”版和“j”）和跳到下一個頁面（“升”）。

羊乳酪
還有一個基于Flash的網站，可以讓您使用左，右箭頭鍵來瀏覽一節項目，向下鍵選擇和行動的關鍵回去。

紐約時報：時代斯基默
紐約時報快速瀏覽頁面已經非常先進的導航按鍵。用戶可以使用箭頭導航部分，放大使用“轉變，”回歸與“噸之上，”刷新“R”的文章中，用選擇當前節“1”和箭。學習的關鍵是有點費時，但一旦你有他們，在瀏覽網頁是容易得多。

Pictory
PictoryMag，致力于照片故事一本雜志，也有“J”的和“k”導航，瀏覽圖片。

CrushLovely
CrushLovely，一個單頁的投資組合，讓您使用箭頭鍵來瀏覽的網頁板塊。

一個生活的思考
想了生活讓用戶使用左，右箭頭，導航功能之間的報價。

野餐Extraterrestre
除了從最不尋常的，我們已經看到迄今設計之一，伊萬費雷羅的野餐Extraterrestre有相當先進的按鍵導航。設計模仿圖文電視和做了很好的工作。所有導航項目可以加載使用數字快捷鍵。現在的樂趣！

編碼技術和教程

請注意，當實施你的設計按鍵導航，請確保您定義的快捷方式不會與通用的瀏覽器快捷鍵，操作系統快捷鍵，屏幕閱讀器的快捷方式或用戶定義的快捷鍵沖突。這聽起來可能比簡單的。像往常一樣，廣泛的測試（有精明和新手用戶）實施前將幫助你找到你的快捷方式問題。這是安全的假設上的箭頭鍵，“J”型和“k”組合和“逃避”的關鍵是安全的。另一方面，使用“控制”，“Alt”鍵和“移”鍵不建議。

此外，認為這是額外的（因此可選）功能，將不會提供給用戶誰在他們的瀏覽器禁用JavaScript的按鍵導航。因此，強烈建議你提供一個次要的，不是小學，導航層鍵盤導航。下面，你會發現一些有用的技巧，教程和實施你的設計按鍵導航參考。

• 使用jQuery添加鍵盤導航
  本視頻中介紹了如何實現鍵盤導航移動滑塊向后和向前。該演示和代碼都可用。
• 如何創建按鍵導航使用jQuery
  本教程介紹了如何實現按鍵導航，瀏覽網站的部分。
• 先進的導航按鍵與jQuery
  你可以使用鼠標來選擇鏈接，但你也可以使用箭頭鍵（即向上和向下）瀏覽列表中。這個腳本是位高級由于額外的功能，當用戶將鼠標懸停和結合按鍵。
• 在JavaScript中使用鍵盤快捷鍵
  在這篇文章中，您將學習如何使用JavaScript的鍵盤快捷鍵，有和沒有jQuery框架。
• 如何建立一個與鍵盤導航網站：密碼為HTML
  本文探討了如何添加鍵盤導航網站使用JavaScript的一些簡單的線條。首先，您將創建一個簡單的主題，在Photoshop中，然后轉化為一個工作網站，提供鍵盤功能，它跳頁。

插件和有用的資源

• js中，熱鍵：跨瀏覽器的Javascript的jQuery插件可連接鍵盤事件
  該jQuery.Hotkeys插件可以讓你輕松地添加和刪除代碼中的任何地方鍵盤事件的處理程序，它支持幾乎任何鍵組合。綁定和解除綁定的熱鍵組合需要一行代碼。
• 鍵盤導航的jQuery插件
  鍵盤導航的jQuery插件，提供了網頁元素被導航能力，并通過鍵盤上的箭頭鍵激活。
• 熱鍵：可編程鍵盤快捷鍵與原型js中圖書館
  熱鍵提供的功能類似的訪問，但關鍵屬性，為更多的鍵盤驅動的接口細粒度控制讓許多增強功能。
• 檢測擊鍵：參考表
  檢測用戶的擊鍵原來是一對事件處理的專業機構。這頁的詳情更惱人的一些問題，包括強制兼容表。

3。平面設計的影響

而喜悅的設計主要是意想不到的喜悅和涉及到的設計，現代的Web設計人員對旅客留下深刻印象往往走一步，實驗與他們工作的基本細節，產生更多的創造性和獨特的布局。事實上，一個沒有被專家看到了傳統印刷的網頁設計技術日益增長的影響力。他們往往體現在所謂的“藝術指導的”博客文章（或“blogazines”），即每一個博客帖子有一個獨特的設計和精心制作的。

這些網站的布局往往類似于印刷雜志或海報的人，以醒目的標題，多列文本，突出顯示報價，縮進文本，支持圖像，圖片的標題說明和腳注。這些設計通常堅持電網和有強大的，生動的版式。

設計線人：基于網格的網頁設計，簡體 有一個簡單干凈的兩列布局，明確區分開來說明文字。注意，在作者的姓名的大寫字母的頭下，亦在網頁上的報價設計可見。這里的內容決定了布局。

在大多數情況下，藝術指導的設計是助長純粹的野心和他們的創造者的決心。這樣的設計主要是發現（自由職業者作為個人網站的項目成果），很少發現在企業設置。更廣泛的主要障礙是這些技術的采用，這種設計（或相當的實施與（X）HTML和CSS）的創作是費時。藝術指導的布局是相當困難的代碼和維護，而且往往需要內聯CSS樣式，否則設計師將結束與聯合國在其語義類幾十個樣式表了。此外，這些頁面上整合廣告是困難的，因為他們把設計師的設計難度。因此，在目前，這些設計更多的是因為不經常更新網頁，開銷適當。

如果您決定與藝術指導的設計性實驗，都知道，一篇文章的布局中，應一如既往地支持內容本身，而不是支配它。問題是，一旦你開始設計一個博客帖子，很容易重復設計的頁面元素只是因為你可以，不是因為它的內容支配。事實上，設計界正對是否藝術指導的設計，只是進行的辯論“過度Photoshop處理的文章“純粹為設計而設計。

好的設計是關于有效的溝通，不能以犧牲易讀性裝飾。正如舊金山Inchauste所說，“我認為這是一個'二'樣的情況下挑選。選擇是：偉大的內容，偉大的藝術指導和定期的時間表。如果您嘗試將達到三個，其中之一將開始下降短?！暗拙€：網絡是深受影響，設計印刷設計是美麗的，但只有當您的文章的技術支持。

關于如何做一個小人課
以獨特的布局多姿多彩，很好地說明了文章。請注意不尋常的東西？ 該設計基于表的布局。設計有一個與實際信息，圖形表格數據位的CSS布局。有時候，這對藝術指導的設計需要。

埃文迪恩斯莫爾：21
該網站海報設計。這個博客帖子很簡單，它以生動的圖片替換疲倦純文本。但是，這可能是一個缺點，太：一種基于文本的版本將更加方便用戶瀏覽。

粗體斜體：博士感覺良好
一個非常令人印象深刻的雜志一樣的布局，多列，圖像，標題和補充工具欄。如果你只看到打印出來這個頁面，你就不會承認它作為一個網頁設計。該網頁有40 科 容器。

阿路返回：經修訂的字體堆棧
一個很長，詳細和精心設計。在藝術指導的設計，包括這一個，大的圖像常常被用來推動布局的邊界。這種形象通常都是800至1000像素寬，填補了整個版面的寬度。

克里斯Coyier：在野生動物園的挑戰
這是一個微妙的設計，大幅度，多列文本，縮進標題和腳注。從審美的角度來看，它可能是一個從書頁。

凱爾菲爾德：保持好奇
一個經典之作。你還記得那些使用大行情和視覺效果，以創建文本流的舊雜志？請注意好這個標題和colophone是問號的位置。好用，簡單，新穎的設計。

過夜：是我的鞋評析
一個簡單的基于網格的設計，合理的文字，鞋襯線字體和漂亮的插圖。不幸的是，對齊文本仍然無法在網絡上看起來非常好。

亞龍舍恩：太多的按鈕
有時候，藝術指導的博客職位要求的東西多一點：像一個背景圖像和bakground顏色，以及一個CSS的樣式位。這個例子正正體現了。

粗體斜體：請勿踐踏草地
另一個多列布局顯著的例子...

粗體斜體：灰姑娘的故事
...和另外一個。印刷設計靈感處于最佳狀態。

特拉維斯尼爾森：默認開關
一個平靜，簡單，簡潔的設計自定義標題。

進一步閱讀

• 超級神奇陳木川未來發展趨勢的博客
• 該鏜博客后死亡？
  一項關于這里的藝術指導設計的碎雜志的文章。
• 賈森圣瑪麗亞會談關于他的反思
• WordPress的藝術指導插件
• WordPress郵寄造型插件
• 候WordPress的插件
• 賈森圣瑪麗亞：本印刷設計的影響
• HeartDirected
  一個藝術指導的設計廊。
• 獨特的外觀設計條
  另一種藝術指導的設計廊。

4。 Horizontalism

在過去的一年中，我們觀察到的文本為主的網頁設計方向緩慢轉變。不僅是設計獲得深度和現實主義，但導航的變化中。一些設計師正在增加與滑動導航（如傳統的垂直滾動 這里），通常在一個縱向和橫向兩個方向滾動，甚至單純的橫向滾動。這就是所謂的“horizontalism。”

橫向滾動條網站已更加困難，因為導航是垂直滾動鼠標設計。但是，多觸摸設備的出現，迫使我們重新思考這些設計的可用性問題。畢竟，無論是用戶瀏覽垂直或水平對這種設備沒有真正發揮作用。和一些插件（如 滾動 和 jScrollHorizontalPane）簡化使用戶能夠通過瀏覽使用鼠標滾輪的標準垂直水平的行動，從而縮小了學習曲線。

橫向滾動條一直在那里走了十年，但今天它認為，他們得到了一個新的環境。對水平滾動條移動可能是在一些設計者試圖提供一個較為清晰的用戶體驗。這種設計通常是經過精心策劃和主要網站和詳細的投資組合發現將給電子商務網站。無論horizontalism將擴大到更多類型的網站仍然將在今后幾個月出現。

一個生活的思考
這不僅文章討論有關可讀性的優點和缺點horizontalism，但它也有一個不錯的水平布局本身，與多個文本列。雖然方向是不尋常的第一眼，看后很愉快，舒適。

OurType
阿與橫向的基于Flash的導航比利時型鑄造。內容塊水平滑動。

榮格訴馬特
這個網站有一個導航水平的時間表。請注意，有沒有水平滾動條;旅客使用垂直滾動輪進行操作水平。

您的輔助
許多所謂的“單頁布局之一?！边@些網站的全部內容是在單頁上，無論是導航使用鍵盤，鼠標或菜單（本網站使用了第三個選項）。在這里，我們有一個良好的（共同）的縱向和橫向導航（顯示的組合 jQuery的ScrollTo插件 在行動）。

20六一
這個組合有不同類型的水平導航。除了“上一頁”和“下一步”按鈕，用戶也得到了在下拉菜單中選定內容的概述。一旦他們選擇一個選項，頁面滾動水平。用鼠標滾輪導航水平可能會改善這種設計的實用性。

賈克斯葡萄園
此酒店網站導航有趣而獨特的水平，這是你瀏覽時觸發的葡萄酒目錄。無論是背景圖片和幻燈片的說明葡萄酒水平。簡單的CSS和JavaScript的使用。一個美麗動人的設計。

和C. L.霍洛韋
康迪斯霍洛韋的投資組合有一個很好的采取橫向布局。她的作品被放置在“墻”;水平導航作為一個藝術畫廊散步比喻使用。也很有趣：滾動觸發水平時，在你的鼠標懸停箭頭，沒有點擊必要的。

雅馬哈銀座
你會發現，隨著實驗的角度設計。有時，方向是對角...

Edpeixoto
...有時布局只是掛在空中...

的ASOS
...有時它的傾斜。請注意元素都沒有垂直線。

進一步閱讀

• Horizontalism和可讀性
• 周五關注的焦點：傾斜網頁設計
  一個設計展示的傾斜到一邊，避免垂直線。
• 橫向滾動網站：魅力和教程
• jQuery的ScrollTo插件
  這個插件可以讓用戶通過滾動滿溢元素和屏幕本身。你得到許多不同的自定義選項和多種方式來指定要在其中滾動的方向。

5。富強印刷術

印刷術發揮多年來在網頁設計的主要作用了。大膽，強烈，沉重的標題可以有效地傳達了一個電子商務網站或組合的目的，而微妙的結構，內容和標題幫助提高清晰度。顯然，大的變化，我們看到今天更豐富，更靈活的版式，部分可能由 @字體面對面 屬性和字體的嵌入服務，如TypeKit出現。豐富的排版元素現在可以選擇并從瀏覽器，這不是那么容易了幾年前復制。

未來是很大的，大膽的和排版。豐富的字體家庭將不僅用于頭條，但對身體的副本，使從排版印刷到網絡上的做法。此外，實驗設計者將更多的豐富，復雜的 襯線字體 而大膽，施加 板坯字體通過微妙的圖像支持。網頁設計師也增加了更多的深度與字體 文本陰影 對CSS3屬性。當然，這些細微之處是緊密聯系在一起的布局選擇。這些排版設計往往是基于網格和借鑒平面設計之技術，如圖片的標題說明和注解。

我們還注意到，設計師是延長其字體棧，添加越來越多的后備，以防字體一個指定的字體不可用。這很好，因為長寬比（或重量的字體），只要不是太不同，一些屏幕字體將出現更廣泛的或比其他字體更高，因此有一個較大的長寬比，這意味著有些用戶將看到您的網頁比別人更小的字體大小會。你可能想閱讀更多關于CSS的字體在棧 拉斯威克利的演講。

基爾安穆施泰爾
基利安穆施泰爾使用相當的擴展serif字體堆棧他的設計： 字體家庭：帕拉提諾，“帕拉提諾行型活字”，“書安蒂奎”，康士坦奇亞時代，“宋體”，襯線;。在基爾安的博客也有圖片的標題說明該職位。

extrapolish
請注意，這個網頁設計的一個波蘭機構的網站文字設定首都大部分：導航菜單，介紹性文字，甚至聯系地址是在充分的首都。然而，平靜的設計，清潔和拋光。

達爾文的DNA
本網站已在其整個設計只襯線字體： 字體家庭：“skolar - 1”，“skolar - 2”，格魯吉亞，時代，襯線;。請注意，該文本分為列，我們并沒有看到這最后的一年。

COG'AOKE
同樣，巨大的，大膽的平板印刷術，使得一個強大的印象，從事觀眾。

TRüF
這種簡潔的設計機構結合大膽的色彩選擇，同樣大膽的無襯線字體。

先鋒
這個網站結合了生動的圖像和版式嬉戲。設計看起來更像一本小冊子或超過“經典”網頁海報。

科利
西蒙科利森的微妙注意最小的細節使排版字面上脫穎而出。沒有大膽的，尖叫排版這里只是清晰，美觀的設計。

圣約翰的圣經
本網站顯示在其最好的襯線字體。配合主題的字體和布局完全適應。公告有多好一個美麗的視覺設計和經典的印刷術可以一起工作。

啤酒廠
一種類型和視覺效果不錯的組合使這個頁面顯著。但目前還不清楚為什么在頁面的標題有三個不同的字體，兩個就足夠了。

蜱對話
這能否得到任何大膽？大膽的字體大，在整個頁面與傳播大寫字母。當滾動頁面時，看到漂亮的背景效果。一個非常簡單和強大的設計。

德國SEW周刊
此博客已很好玩，對身體的邀請印刷術復制和標題科凱特（Proxima的新星），和它都可以輕松地選擇和復制。這是嵌入字體功率（TypeKit此處使用）。只有襯線字體使用： 字體家庭：“skolar - 1”，“skolar - 2”，格魯吉亞，時代，襯線;。公告文本分成列 - 再次，我們看到一種趨勢，僅此一年。

曼集團
本內曼集團將其納入導航和頭版標題的品牌顏色。輕的字體和經典，并給出了頁面的氣氛。

結論

現代Web設計更好，更豐富，更方便用戶使用。我們看到更好的美學為了取悅用戶體驗和視覺設計使用。從傳統的印刷設計技術正越來越多地應用到網絡，無論是布局的技術或豐富的通用字體。橫向和對角線方向，甚至帶來新的視角，以平2 - D我們已經看到了多年來用自己的文字為主的，基于Flash的網頁（設計）。

這些事態發展是對即將到來的時代，網頁設計，其中設計人員可以使用新的工具和技術，其最大潛力的跡象。網頁設計師應該期待著激動人心和充滿希望的未來歲月。

?