網(wǎng)站設(shè)計中40創(chuàng)意設(shè)計布局

????? 多年來，我們已經(jīng)看到一個強大的最后幾個月的趨勢更 個人網(wǎng)站設(shè)計。這些設(shè)計從日常生活中使用，如手工繪制的元素，腳本字體，別針，回形針，有機紋理和剪貼簿，現(xiàn)實主題。這不是一個很大的驚喜，因為他們服務(wù)的功能，不露面，有光澤，玻三維按鈕完全不提供：個性和人格。 “個人”的設(shè)計顯得更加熟悉，更友好。如果使用得當(dāng)，這些內(nèi)容可以提供人性化的設(shè)計和溝通，在一個真正獨特的方式內(nèi)容。

然而，除了視覺設(shè)計元素，還可以得到與創(chuàng)意 布局 該網(wǎng)站 - 它的結(jié)構(gòu)和方式的信息介紹和交流。為了讓你到底是可以做到的一些想法，我們一直在收集創(chuàng)意設(shè)計布局的例子。比設(shè)計更重要的是一些有創(chuàng)意的想法具體的實施給我們。我們也沒有興趣的代碼是否驗證或沒有。下面是一些我們已經(jīng)找到迄今為止例子。

目前，我們在下面展示 40創(chuàng)意出位的現(xiàn)成布局 這打破沉悶2 - 和3圓柱形，盒裝布局。我們已經(jīng)收集到的CSS + JavaScript的布局以及閃存設(shè)計純CSS的設(shè)計。以下風(fēng)險的網(wǎng)站結(jié)構(gòu)和內(nèi)容呈現(xiàn)不尋常的做法提出了大多數(shù)設(shè)計。那是什么使他們不同。希望你會發(fā)現(xiàn)一些有創(chuàng)意的想法，你可以在你的未來發(fā)展項目的進一步。

我們強烈 鼓勵設(shè)計者打破 通常的盒裝布局公約，新的辦法和風(fēng)險瘋狂的思想實驗。顯示你有能力！

20 ×創(chuàng)意的CSS入門

帕維爾布本
帕維爾布本使用他的單頁，現(xiàn)場一本雜志封面式布局。不幸的是，有沒有內(nèi)部的網(wǎng)頁 - 這將是有趣的尋求如何將設(shè)計。一個有趣和不尋常的做法。

艾加洛杉磯
艾加洛杉磯創(chuàng)造性地使用在框。所有設(shè)計元素被放置到底層按網(wǎng)格，但他們清楚地走出箱子。這種方法在設(shè)計制造緊張局勢，并期待真正的與眾不同。

SpaceCollective
其畫廊節(jié)SpaceCollective使用5列網(wǎng)格。文本和圖像是完全放在提供一個完整的表格的網(wǎng)格布局和秩序感。請注意不同的字體大小和文本樣式的設(shè)計 - 它們引入到布局這完全屬于復(fù)雜，不可預(yù)測的布局作品深刻的視覺層次。

賈森圣瑪麗亞
賈森圣瑪麗亞采取了與他的站點布局真正不同的路線。每篇文章的布局不同，與排版和視覺清晰度的強烈關(guān)注。下面的布局提出了三個。您可能也很難在網(wǎng)上找到類似的布局。

結(jié)帳：為Mac點終端（POS銷售）
在乍看之下，結(jié)帳看起來像一個普通的蘋果電網(wǎng)布局。是什么使布局有趣的是，不僅其視覺元素的立場，但事實上，每個部分都有其個人網(wǎng)頁（雖然）相一致的設(shè)計。盡管如此，布局是非?？蓲呙韬椭庇^。

NOFRKS.design
NOFRKS使用JavaScript幻燈片之間的網(wǎng)站的不同部分。我們發(fā)現(xiàn)更有趣的是內(nèi)容的呈現(xiàn)方式。大多數(shù)元素被放置在一個范圍內(nèi)，給予內(nèi)容次要的意義。

短信停車場
乍一看SMSParking在沒有任何布局。設(shè)計似乎是一個單一的畫像 - 所有的元素完美地相互配合，形成視覺上的和諧與平衡，封閉感。

三運
有時，一個背景圖片，就足以使布局突出。雖然人們可以識別常規(guī)布局結(jié)構(gòu)在這里，獨特的外觀設(shè)計，令人難忘。該網(wǎng)站的背景圖片完全適合公司，該公司提供郵寄服務(wù)。

Matriz Communicacao
這家巴西公司提供了一個完美的例子可以無縫設(shè)計和內(nèi)容被集成在一個完整而簡單的布局。

Mihmorandum
Mihmorandum在一個不尋常的方式使用一個共同的三列布局。雖然是很平常的結(jié)構(gòu)，獨特的設(shè)計本身看起來就像一張紙和一堆放在一個文件夾內(nèi)。

3rdM
3rdM使用圖標(biāo)來表示不同的導(dǎo)航選項。這不是一個類型的布局你會發(fā)現(xiàn)許多其他網(wǎng)站的設(shè)計。這就是使得布局創(chuàng)意。

尼羅河內(nèi)
許多組合使用垂直布局，以展示他們的作品。 Nile.ru按時間順序顯示在其作品，就好像它是一個橫向的博客。

Rockatee
Rockatee使用不對稱的地位卻在一個不尋常的吸引力風(fēng)格內(nèi)容塊。請注意，左邊塊完全符合導(dǎo)航選項對齊“家”在頁面的頂部。在航行了整整兩個選項頁中的截圖，并跨越作為本頁面右側(cè)的描述塊相同的寬度。

在布局中的失真是由于基本有機紋理。雖然設(shè)計是完全一致按網(wǎng)格，它似乎是在第一眼混亂。秩序和混亂之間的緊張關(guān)系造成的緊張局勢和布局看起來非常有吸引力。

獲得倫敦讀
一個有效的背景圖像可以幫助一個布局突出。在這里，效果達到符合與該項目的目標(biāo) - 鼓勵市民多閱讀。

拉：釹（盲）
在乍看之下，布局看上去給人留下深刻印象。它有什么區(qū)別，不過，這些選擇的圖片大小及白色的空間充分利用。公告以及負(fù)空間是如何在側(cè)邊欄，但單個元素清楚分開，并用正確對齊。圖像的寬度等于內(nèi)容塊的寬度。是的，布局是四四方方，但空白明智使用使它遠離無聊。

投資組合的漢尼拔
通常，導(dǎo)航菜單放置在側(cè)邊欄，或在網(wǎng)站的頂部。威廉F萊弗特它是不同的。他的非線性布局字面上爆發(fā)了四四方方的結(jié)構(gòu)，并提供一些完全不同的。有時就足夠了：只要將設(shè)計元素的位置，以達到驚人的實驗設(shè)計方案。

URLshrinker
創(chuàng)意設(shè)計解決方案，因為這可以作為一個簡單的。一個由URLshrinker典雅迷人的布局。

15 ×入門使用CSS + JavaScript的創(chuàng)意

ShopComposition
ShopComposition提供在網(wǎng)站的頂部滑動導(dǎo)航。用戶可以選擇他們想要的內(nèi)容閱讀和選擇的內(nèi)容塊的寬度。這家商店有一個集成的博客和一些進一步的項目，如圖片，每天（）來吸引客戶的注意力。 JavaScript的使用。

forgetfoo
Forgetfoo使用的一個工具和內(nèi)容方面幾乎簡約，簡單的布局。設(shè)計師刪除了所有必要的和不必要的細節(jié)集中在最后的博客條目只。設(shè)計不包含任何類別導(dǎo)航選項。這是不尋常的，但可能會有點太多的簡約了。通過博客文章，是實現(xiàn)了導(dǎo)航的Javascript。

包括
對包含一個內(nèi)容塊和相應(yīng)的導(dǎo)航塊似乎是“掛在空中?！北举|(zhì)上，頁面有兩列，但是。布局似乎是相當(dāng)原始 - 或許是因為對某種原因背景放在奶牛。關(guān)于右側(cè)的導(dǎo)航使用Javascript實現(xiàn)。

神戶
在網(wǎng)站頂部的導(dǎo)航選項略有動畫尚未創(chuàng)造合適的氣氛。一旦被點擊的部分之一，主要內(nèi)容區(qū) 幻燈片垂直 - 第一次的背景圖片，則內(nèi)容。如果內(nèi)容方面也有一定的導(dǎo)航選項，它們是垂直滑行以及。在這種情況下它可能是一個稍微好一點的設(shè)計決定，而不是使用橫向?qū)Ш?，以方便游客來區(qū)分主要和次要導(dǎo)航。

自來水自來水自來水
自來水自來水塔采用了大膽和醒目的布局將郵件傳遞給游人。布局，雖然基本上是側(cè)欄和內(nèi)容方面組成的，是不是在所有的沉悶，看起來有吸引力。在左邊的導(dǎo)航，并進一步影響創(chuàng)建使用JavaScript。

youlove.us
關(guān)于youlove.us布局是肯定非?；钴S。它使用一個生動的大背景圖像和滾動效應(yīng)，使用戶能夠快速地從一個網(wǎng)站跳到另一個部分。請注意，導(dǎo)航區(qū)域是重復(fù)4次，在每個類別?；瑒有Ч灿糜诿總€類別。而不是使用20個單獨的頁面，所有的布局結(jié)合在一個單一的頁面。其結(jié)果是結(jié)構(gòu)緊湊，便于使用。

方法：品牌體驗機構(gòu)
這種設(shè)計機構(gòu)使用一個靈活的基于JavaScript的布局更新其大小在瀏覽器窗口的大小而定。內(nèi)容是“裝在盒子”是常見的，這種基于網(wǎng)格的設(shè)計，但是，在盒子路線，使得設(shè)計字面上脫穎而出。

Viget實驗室
Viget實驗室還使用了一個滑動導(dǎo)航和橫向滾動效應(yīng)，使更多的用戶交互動態(tài)的，因此更具吸引力。但是，更重要的是，本身就代表了布局：布局是無形的，類似的互動Flash的接口。的CSS + JavaScript的使用。粉碎說：5 5星級了。

Lucuma
Lucuma還采用橫向布局以及一個水平滑塊導(dǎo)航。的背景圖片，導(dǎo)航，簡單而有效的整合視頻和內(nèi)容，使布局不尋常，與眾不同。

阿克塞爾Peemoeller設(shè)計
在這個網(wǎng)頁上的所有設(shè)計元素都是可拖動，其中有些是點擊。圖片似乎是對你扔在第一時刻，但最后他們都有道理。這是一個不尋常的組合是難忘而有趣的探索。

IDEO公司
IDEO公司介紹其主網(wǎng)頁上的所有內(nèi)容。該衛(wèi)星的選項放置在黑盒子，不管怎樣安排等內(nèi)容框。一旦黑匣子之一是徘徊，相關(guān)的內(nèi)容塊突出。這不是大多數(shù)用戶所期望的布局。

博赫丹Levishchenko
博赫丹Levishchenko使用與IDEO公司相同的方法，但都呈現(xiàn)在頁面頂部的導(dǎo)航選項。單篇作品的介紹下，導(dǎo)航和蔓延整個布局為圖像。

MelissaHie.com
梅麗莎枝置于一個單一的大網(wǎng)頁上的所有不屑元素。游客基本上都是從一個網(wǎng)站到另一個驅(qū)動使用一個滾動效應(yīng)。

酒店牛津 - 蒂米什瓦拉
一個單頁網(wǎng)站的一個非常平靜和安慰布局。所有的導(dǎo)航選項都可以在第一眼。一旦被點擊的一些選項，在左邊的內(nèi)容塊是動態(tài)替換。酒店的牛津標(biāo)志始終保持自己的位置上。

thruSITES /組合
在這種組合設(shè)計師的作品插圖似乎在某種程度上是一種無形的繩索松散地放置。當(dāng)被點擊的例子之一，所有其他元素的方式安排的內(nèi)容，這說明代表成為主導(dǎo)自己。

歐文鮑爾桶
鮑爾的歐文組合的網(wǎng)站采用不同的方法使用一個pannable用戶界面，但在JavaScript執(zhí)行，而不是在閃光。該網(wǎng)站允許用戶點擊并拖動平移畫布，或使用位置周圍的內(nèi)容鏈接到走動。設(shè)計干凈，模仿與regisration和作物標(biāo)志設(shè)計文件，以及有關(guān)的指示，畫布將鍋當(dāng)你瀏覽的視覺線索。 [通過]

5 ×入門閃存創(chuàng)意

在秘密地點
秘密地點，一個在多倫多的媒體機構(gòu)，加拿大體現(xiàn)他們的工作，通過提供領(lǐng)先的周圍呈現(xiàn)的一個人物故事，身臨其境的閃存經(jīng)驗，以跟隨神秘的路徑，導(dǎo)致了秘密地點?；有问椒浅?，非常不尋常的站點布局。 [通過]

卡米爾哥特瓦爾德
在他的布局卡米爾哥特瓦爾德使用戶能夠定義網(wǎng)站列的寬度手動。要瀏覽的用戶需要垂直滾動水平。因此，沒有垂直滾動條是必要的。多個站點的意見是可能的。

Grooveshark建興
Grooveshark似乎模仿iPod的接口，它確實非常好。雖然它可能不是非常有創(chuàng)意，這樣的布局是很難找到在網(wǎng)絡(luò)上。

杰里米萊溫設(shè)計
Flash提供了一個互動的導(dǎo)航設(shè)計許多創(chuàng)造性的可能性。杰里米萊溫使用動態(tài)紙條這似乎掛在空中。

也使它
也使它已經(jīng)提出了一個有趣的想法，提供一些有多好工作是直覺游人。對樁點擊了解。

木庫工作室
“讓木庫不要你”：這個友好伙計只想保持可見，因此他試圖找到在屏幕上有一些地方把現(xiàn)場的觀眾眼睛。該網(wǎng)站的布局簡單而難忘的 - 好吧，木庫可以確保他會記住后，瀏覽器窗口關(guān)閉。

?

?