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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

URLshrinker
創(chuàng)意設(shè)計(jì)解決方案，因?yàn)檫@可以作為一個(gè)簡(jiǎn)單的。一個(gè)由URLshrinker典雅迷人的布局。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?

?