布局是您網(wǎng)站的基礎(chǔ)。它引導(dǎo)用戶通過這些部分，并告訴他們最重要的是什么。它也設(shè)置了網(wǎng)站的審美。因此，您需要仔細(xì)考慮如何布局內(nèi)容。
盡管不讓您的創(chuàng)意陷入可用性的方式，原創(chuàng)的創(chuàng)意布局在改善網(wǎng)站用戶體驗(yàn)方面也有很長的路要走。像往常一樣，我們必須把自己放在用戶的鞋子里：我們希望他們先看看什么？你的消息如何最好地傳達(dá)？在開始設(shè)計(jì)之前，我們必須先提出這些問題，因?yàn)椴季謺?huì)塑造其余的設(shè)計(jì)。
那么，以下網(wǎng)站有一些相當(dāng)不尋常的布局。他們不一定是完美的;?還是瀏覽他們，也許，也許，你的創(chuàng)意天才會(huì)被激發(fā)。
原始Web布局鏈接
Beurre＆Sel?
這個(gè)網(wǎng)站是美麗的。自動(dòng)幻燈片播放在后臺(tái)，主導(dǎo)航欄位于頂部。當(dāng)您向下滾動(dòng)時(shí)，導(dǎo)航縮小，但仍保持固定在頂部。以下是該公司制作的不同餅干的豐富多彩的列表，但這些也是子菜單中的按鈕。當(dāng)您點(diǎn)擊風(fēng)味時(shí)，信息與此子菜單重疊，允許您點(diǎn)擊各種Cookie風(fēng)味。頂部的導(dǎo)航欄和子菜單僅限于三列網(wǎng)格的中間列，將用戶的焦點(diǎn)保持在中心位置。
Hackery，Maths＆Design?隨著頁面的加載，一個(gè)有趣的3D線條動(dòng)畫開始填滿屏幕。箭頭表示運(yùn)動(dòng)和流動(dòng)性，并鼓勵(lì)用戶向內(nèi)滾動(dòng)。下面的內(nèi)容被布置在具有兩個(gè)主列和一個(gè)較小側(cè)邊欄的三列網(wǎng)格中。然而，它不會(huì)感到僵硬和約束，但是有一個(gè)更開放的感覺 - 這是由于給出足夠的空間和使用圓角。該網(wǎng)站的布局對(duì)用戶來說很舒適。
繪畫室?我喜歡這個(gè)布局，簡(jiǎn)單但視覺有趣。該工作室的工作以不同大小的鉆石形狀顯示在一起。中心鉆石是銘牌，不是太突出，所以不會(huì)減損工作。當(dāng)您將鼠標(biāo)懸停在鉆石上時(shí)，它將填充對(duì)作品的描述。這個(gè)單頁網(wǎng)站有一個(gè)原始和干凈的布局，它易于使用。
我們愛噪音?Luke Finch的作品組合有趣且友好的布局。這項(xiàng)工作似乎是隨意分散的，擺脫了太干凈和可預(yù)測(cè)的做法。過渡會(huì)告訴你一些項(xiàng)目，你可以使用箭頭導(dǎo)航。左上角的小心是整個(gè)網(wǎng)站的導(dǎo)航，它在主頁上旋轉(zhuǎn)成“i”。查看項(xiàng)目時(shí)，可以通過懸停在心臟上退出。
Ende?這個(gè)布局是動(dòng)態(tài)的。加載時(shí)，它會(huì)以一張古怪的照片向您致意，并提示您向下滾動(dòng)，導(dǎo)航出現(xiàn)在哪里，并最終貼在頂部。我真的很喜歡透明的導(dǎo)航欄，它打開了一個(gè)頁面，揭示了下面的內(nèi)容。內(nèi)容分散在頁面周圍，雖然網(wǎng)站確實(shí)有結(jié)構(gòu);?每個(gè)部分都被不同的背景顏色分開。這些項(xiàng)目突出顯示在三列網(wǎng)格中，但是團(tuán)隊(duì)成員的部分將從網(wǎng)格中分離出來，并以有趣的方式使用該空間。
愛德華·卡瓦略·莫納漢?怎么樣一些顏色？這個(gè)投資組合網(wǎng)站有一些嚴(yán)肅的個(gè)性，工作是響亮和活潑的。最有效的是風(fēng)格的一致性。該網(wǎng)站作為一個(gè)完整的工作，代表設(shè)計(jì)師，同時(shí)支持個(gè)人投資組合 - 這正是這樣一個(gè)網(wǎng)站應(yīng)該做的。調(diào)色板被并入銘牌，閃爍的動(dòng)畫給網(wǎng)站帶來了精力。
HUYS?這個(gè)網(wǎng)站有上與頁面作用就像是一種信箋右側(cè)布局原來的取，提供像他們是誰所有必要的信息和他們做什么。頁面的左側(cè)垂直滾動(dòng)，類似于它們構(gòu)建的公寓的窗口的布局。點(diǎn)擊后，您將被引導(dǎo)到更易于瀏覽的博客式布局。
KathArt?KathArt有一個(gè)很棒的視頻布局。當(dāng)你遇到這個(gè)團(tuán)隊(duì)的成員時(shí)，這個(gè)簡(jiǎn)單而高效的設(shè)計(jì)就會(huì)滲透出個(gè)性。團(tuán)隊(duì)成員在工作時(shí)被介紹，就好像你和他們一起在辦公室！導(dǎo)航作為時(shí)間線是聰明的，因?yàn)槟梢暂p松跟蹤視頻的進(jìn)度。
Wacom?Wacom通過其網(wǎng)站針對(duì)廣泛的專業(yè)和非專業(yè)創(chuàng)意人士。布局是其中的一個(gè)組成部分，并創(chuàng)建一個(gè)用戶友好的體驗(yàn)。左側(cè)的導(dǎo)航最小化時(shí)，可以顯示各種可用的類別。用戶可以控制，可以選擇要查看的產(chǎn)品;?他們沒有被強(qiáng)迫或受到銷售。主頁的布局很簡(jiǎn)單，可以指導(dǎo)用戶最適合自己需要的產(chǎn)品。我喜歡伴隨產(chǎn)品的微妙手繪元素。
阿姆斯特丹舞蹈活動(dòng)?這里的布局真的有助于展現(xiàn)這次活動(dòng)的態(tài)度和精神。導(dǎo)航運(yùn)行在左側(cè)，成為整個(gè)網(wǎng)站的參考點(diǎn)。強(qiáng)大的，視覺刺激的圖像的幻燈片旋轉(zhuǎn)，與戲劇的節(jié)日，游樂場(chǎng)和會(huì)議。這是吸引用戶的有效方式。
當(dāng)您向下滾動(dòng)頁面時(shí)，下面的內(nèi)容將滑過幻燈片，將子菜單從底部移到頂部。網(wǎng)站的每個(gè)部分都有橫幅，橫跨屏幕，為視覺上吸引人的介紹該部分。其余的文章被布置在網(wǎng)格中。網(wǎng)格中的行不完全排列;?每列開始略低于最后一個(gè) - 另一個(gè)小而有效的視覺設(shè)備。
Cropp?Cropp有一個(gè)大的和大膽的個(gè)性，布局展示它。當(dāng)您將圖像懸停在圖像上時(shí)，圖像將無法識(shí)別，從而引起您的注意。頂部的導(dǎo)航欄在所有頁面上是一致的，主頁基本上是導(dǎo)航中選項(xiàng)的響亮，可視化的表示。該布局捕捉到pixellation的想法，所有的照片和視頻都是以塊像形式排列成塊。
Neue Yorke?Davy Rudolph的投資組合的網(wǎng)格布局簡(jiǎn)單而簡(jiǎn)約，對(duì)用戶來說非常直觀和自然。每個(gè)頁面只有兩種顏色，該頁面是唯一的。當(dāng)您點(diǎn)擊其中一個(gè)項(xiàng)目時(shí)，展示會(huì)優(yōu)先，主導(dǎo)航面板消失。我對(duì)投資組合網(wǎng)站的這種方式所喜歡的是，雖然它具有個(gè)性，但個(gè)性并沒有減損設(shè)計(jì)師的工作。
朱莉安娜自行車?朱莉安娜有一個(gè)相當(dāng)不尋常和創(chuàng)新的設(shè)計(jì)為一個(gè)自行車店。裝載后，美麗的照片可以豐富和溫暖地填滿屏幕。該網(wǎng)站分為四個(gè)部分，隱藏在導(dǎo)航圖標(biāo)后面。這種設(shè)計(jì)似乎有著更加女性化的感覺，而排版是大膽和強(qiáng)大的，有一點(diǎn)天賦。自行車上的3-D懸停效果也是一個(gè)很好的感覺。
Esquire?這里的布局簡(jiǎn)單，干凈，方便。Esquire的身份是單色的黑色和白色。這篇文章是有趣的，它吸引了讀者的眼球。懸停效果也很簡(jiǎn)單，下面是前貼文字的描述。導(dǎo)航位于網(wǎng)站的中間，功能非常類似于報(bào)紙，讀者會(huì)因?yàn)閮?nèi)容上的內(nèi)容而感興趣。圖像，顏色和簡(jiǎn)短的標(biāo)題抓住用戶的注意力。
Institut Choiseul?Intitut Choiseul有一個(gè)有吸引力的塊布局，適合一起像一個(gè)謎題。層疊的外觀與板的顏色有助于建立身份。在頁面的下方，布局轉(zhuǎn)變?yōu)楦鼈鹘y(tǒng)的網(wǎng)格，盡管每個(gè)故事都在不同大小的塊中，創(chuàng)造出一種有趣和動(dòng)態(tài)的審美。不同的顏色塊從網(wǎng)站的不同部分出發(fā)，使其易于瀏覽和閱讀。該網(wǎng)站具有復(fù)雜和精致的品質(zhì)，適合其目的。
獎(jiǎng)勵(lì)?獎(jiǎng)勵(lì)創(chuàng)意，其中性設(shè)計(jì)美學(xué)為設(shè)計(jì)師的有效工作奠定了基礎(chǔ)。網(wǎng)格布局沒有任何剪裁或褶邊，會(huì)損害或與任何設(shè)計(jì)的特征相沖突，但有趣的懸停效果具有很好的像素化陰影。導(dǎo)航固定在頁面的左側(cè)，搜索和過濾器功能固定在頂部。這種導(dǎo)航安排最適合展示網(wǎng)站的內(nèi)容。
Andrew McCarthy的?安德魯·麥卡錫（?Andrew McCarthy）的投資組合具有獨(dú)特的布局。彩色條帶清洗頁面，有關(guān)設(shè)計(jì)師的更多信息會(huì)在您向下滾動(dòng)時(shí)顯示。當(dāng)您滾動(dòng)時(shí)，像素化的貓科動(dòng)物的巧妙的停止運(yùn)動(dòng)圖形就會(huì)運(yùn)行。我喜歡這個(gè)簡(jiǎn)單的想法創(chuàng)造的運(yùn)動(dòng)。順便提一句，網(wǎng)站還依賴于用戶的互動(dòng)。
Mikael Edwards?動(dòng)畫公司明智地使用時(shí)，真的可以為網(wǎng)站的功能做出貢獻(xiàn)。Mikael Edwards使用的動(dòng)畫視覺吸引力和功能。我們正在為Web設(shè)計(jì)，對(duì)吧？沒有必要將所有內(nèi)容都?jí)嚎s到頁面上，或者圍繞圖像包裝文字。為什么不包括互動(dòng)動(dòng)畫，讓它有趣？這個(gè)想法在這里適用于懸停效果。藍(lán)點(diǎn)表示光標(biāo);?當(dāng)您將鼠標(biāo)移動(dòng)時(shí)，圖像會(huì)移動(dòng)，為文本留出空間。
設(shè)計(jì)師的朋友?不是你從設(shè)計(jì)師網(wǎng)站預(yù)期的，對(duì)吧？設(shè)計(jì)師的朋友看起來像網(wǎng)站本身后面的HTML代碼。您需要知道的一切都在代碼中，標(biāo)簽用作標(biāo)題?！疤崾救铡笨蚴且龑?dǎo)用戶瀏覽網(wǎng)站的精彩設(shè)備。
陰影?Hatched的布局由導(dǎo)航和橫跨屏幕的部分錨定，創(chuàng)建一個(gè)大膽和開放。響應(yīng)式導(dǎo)航很有趣。在一個(gè)較小的屏幕上，它可能看起來很笨拙;?但是在這里，包括社交網(wǎng)絡(luò)按鈕的導(dǎo)航被保存在一個(gè)菜單按鈕上。
新興問題研究所?本網(wǎng)站具有良好的一致性過渡，隨著頁面加載，圈子會(huì)彈出。該網(wǎng)站結(jié)構(gòu)合理，圈子與下面的統(tǒng)計(jì)數(shù)據(jù)建立了友好的對(duì)照?！疤魬?zhàn)”部分的標(biāo)題看起來像是言語泡沫，增添了友好的氛圍。這些字幕的懸停效果在視覺上具有吸引力和功能。用戶沒有被統(tǒng)計(jì)數(shù)據(jù)轟炸，因?yàn)閿?shù)字被隱藏并顯示只有在懸停時(shí)。
進(jìn)入北極進(jìn)入北極?的布局吸引用戶并融合其互動(dòng)。背景中的視頻吸引用戶并說明其原因。導(dǎo)航的風(fēng)格是不同的 - 當(dāng)你懸停在它上面時(shí)，它會(huì)折疊出更多的信息，如小冊(cè)子。排版也引人入勝，拉引特別強(qiáng)。網(wǎng)站的設(shè)計(jì)真的很好執(zhí)行。
約翰·雅各布（John Jacob）?該投資組合具有橫向滾動(dòng)，這是非常不尋常?當(dāng)您點(diǎn)擊查看作品時(shí)，展開到屏幕中間，放大視圖和簡(jiǎn)短的工作說明。工作的描述和清單簡(jiǎn)潔扼要;?你不覺得你不斷被重定向到其他頁面。我真的很喜歡導(dǎo)航，集中在左上角，設(shè)計(jì)師的社交網(wǎng)絡(luò)鏈接在右下角，構(gòu)成了頁面。設(shè)計(jì)人員有效利用空間，旋轉(zhuǎn)效果非常有趣。
印象?這里的白色空間令人耳目一新，營造出開放和友善。白色空間允許用戶閱讀和瀏覽舒適，有效地使用網(wǎng)站。懸停效果不同;?就像一半的紙折疊起來。點(diǎn)擊時(shí)，按鈕會(huì)像書一樣折疊，以顯示更多信息。
Postable?Postable有一個(gè)可愛的概念;?它通過電子郵件為您發(fā)送精美設(shè)計(jì)的感謝卡，網(wǎng)站的設(shè)計(jì)有一個(gè)真正的蝸牛郵件外觀。設(shè)計(jì)和布局在溝通這個(gè)概念方面起著不可或缺的作用。背景有一個(gè)真正的紙紋理，頂部的邊框類似于老式的信封。真實(shí)的現(xiàn)實(shí)生活感覺是Web表單上的一個(gè)可愛的觸摸，就像你在筆記本上的一張紙上涂抹你的信息一樣。
國家LGBT博物館
這個(gè)網(wǎng)站有一個(gè)新的單頁布局。這里的滾動(dòng)機(jī)制真的很酷?頁面分成兩半，兩個(gè)半部分在不同方向滾動(dòng)，創(chuàng)建動(dòng)態(tài)效果。這些部分是不同的顏色，并在您滾動(dòng)時(shí)在一起。
Lucas Nikitczuk?我非常喜歡Lucas Nikitczuk的作品集，因?yàn)樗故玖怂募记?。它直接到達(dá)了這一點(diǎn)，設(shè)計(jì)師的簡(jiǎn)短傳記和他的作品在主頁上。圈子創(chuàng)造出友好和流暢的審美。油漆在后臺(tái)溢出添加到此，并創(chuàng)建一個(gè)開放和游離的網(wǎng)站的身份。導(dǎo)航很簡(jiǎn)單，在整個(gè)網(wǎng)站上都是一樣的。另一個(gè)很好的感覺是，您可以使用箭頭鍵導(dǎo)航，這對(duì)筆記本電腦用戶很有幫助。
結(jié)論鏈接
布局是您網(wǎng)站設(shè)計(jì)的基礎(chǔ)，也是任何創(chuàng)意努力的重要組成部分。考慮用戶以及他們?nèi)绾闻c網(wǎng)站進(jìn)行互動(dòng)。他們可能只會(huì)在移動(dòng)設(shè)備上查看您的網(wǎng)站嗎？怎么會(huì)影響布局？我希望你已經(jīng)收集了一些靈感來自己處理一些布局設(shè)計(jì)！
