布局是網(wǎng)站設(shè)計(jì)的基礎(chǔ)。通過部分和引導(dǎo)用戶，告訴他們什么是最重要的。它還設(shè)置了審美的網(wǎng)站。因此，你需要仔細(xì)想通過你怎么躺在內(nèi)容。
原始的，富有創(chuàng)意的設(shè)計(jì)很長的路要走，以改善用戶體驗(yàn)的網(wǎng)站，雖然沒有讓你的創(chuàng)造力得到可用性的方式是很重要的。像往常一樣，我們必須把自己放在用戶的鞋：什么，我們希望他們看到的第一個(gè)？您將如何最好地傳遞消息？在開始設(shè)計(jì)之前，我們要問這些問題，因?yàn)椴季謱⑺茉炱溆嗟脑O(shè)計(jì)。
好了，下面的網(wǎng)站有一些相當(dāng)...不尋常的布局。他們不一定是完美的，還是通過瀏覽他們，也許，只是也許，你的創(chuàng)作天才將被觸發(fā)。
原來的Web布局
BEURRE SEL
這個(gè)網(wǎng)站只是個(gè)美麗的。自動幻燈片播放的背景下，主導(dǎo)航欄在頂部。當(dāng)你向下滾動，導(dǎo)航收縮，但仍固定在頂部。下面是一個(gè)多姿多彩的名單不同的餅干公司，但這些也將作為子菜單中的按鈕。當(dāng)你點(diǎn)擊風(fēng)味，信息重疊的子菜單，允許您通過點(diǎn)擊琳瑯滿目的餅干口味。在頂部導(dǎo)航欄和子局限于一個(gè)三列的網(wǎng)格中間一列，保持用戶的關(guān)注的中心。
在頁面加載的兩輪牛車，數(shù)學(xué)及設(shè)計(jì)，好玩的3D的行動畫開始，以填補(bǔ)屏幕。圖中箭頭表示運(yùn)動和流動性，并鼓勵(lì)用戶向內(nèi)容向下滾動。下面的內(nèi)容是奠定了在一個(gè)三列的網(wǎng)格有兩個(gè)主要列和一個(gè)較小的側(cè)欄。但是，它并沒有感到四四方方和約束的，但有一個(gè)更開放的感覺-這是由于給予充足的空間和使用圓角。本網(wǎng)站的布局，為用戶舒適。
客廳，
我喜歡這個(gè)布局，既簡單又如此有趣的視覺。顯示該工作室的工作結(jié)合在一起的不同大小的鉆石形狀。鉆石中心的銘牌，這是不是太突出，因此不會影響工作。當(dāng)你將鼠標(biāo)懸停在一個(gè)鉆石，它填補(bǔ)工作的描述。此單頁的網(wǎng)站有一個(gè)原始的和干凈的布局，很容易使用。
我們愛噪聲
盧克·芬奇的組合有一個(gè)有趣的和友好的布局。工作似乎是隨意散落，脫離太干凈的和可預(yù)見的方法。過渡告訴你一個(gè)位的項(xiàng)目，你可以使用箭頭導(dǎo)航。在左上角的小心臟是整個(gè)網(wǎng)站的導(dǎo)航，它可以旋轉(zhuǎn)成一個(gè)“i”的主頁上。當(dāng)查看一個(gè)項(xiàng)目，你可以退出上空盤旋的心。
恩德
這種布局是動態(tài)的。加載后，迎接你用一個(gè)古怪的照片，并提示您向下滾動，導(dǎo)航出現(xiàn)，并最終固定到頂部。我真的很喜歡透明的導(dǎo)航欄上，打開頁面了一下，露出了下面的內(nèi)容。分散在各地的內(nèi)容頁面，雖然該網(wǎng)站確實(shí)有結(jié)構(gòu)，每一部分設(shè)置不同的背景顏色。一個(gè)三列的網(wǎng)格中突出顯示的項(xiàng)目，但部分隊(duì)員打破遠(yuǎn)離電網(wǎng)和有趣的方式使用的空間。
愛德華·卡瓦略莫納漢
的一些顏色？該組合的網(wǎng)站有一些嚴(yán)重的個(gè)性，和工作是響亮和熱鬧的，因?yàn)樗笥乙苿印Ｗ钣行У氖窃陲L(fēng)格上的一致性。網(wǎng)站黏結(jié)作為一個(gè)完整的作品，代表設(shè)計(jì)師，同時(shí)支持單個(gè)組合件-這正是這樣的網(wǎng)站應(yīng)該做的。調(diào)色板注冊成立的銘牌，和閃爍的動畫帶來能量的網(wǎng)站。
HUYS
這個(gè)網(wǎng)站有原始布局的頁面右側(cè)的作用像一種信箋，提供所有必要的信息，如他們是誰，他們做了什么。左側(cè)頁面垂直滾動和類似的布局，他們建造的公寓的窗戶。一旦你點(diǎn)擊，你被定向到一個(gè)博客式的布局，這是易于瀏覽。
KathArt
KathArt有一個(gè)偉大的視頻布局。只是滲出從這個(gè)簡單而高效的設(shè)計(jì)，個(gè)性的你滿足這個(gè)團(tuán)隊(duì)的成員。隊(duì)員們介紹，他們正在努力，好像你在辦公室與他們！導(dǎo)航作為一個(gè)時(shí)間軸是聰明的，因?yàn)槟憧梢暂p松地跟蹤進(jìn)度的視頻。
Wacom公司
Wacom公司針對廣泛的觀眾，其網(wǎng)站的專業(yè)和非專業(yè)的廣告。布局是一個(gè)不可分割的一部分，并創(chuàng)建一個(gè)友好的用戶體驗(yàn)。左最大限度地減少上空盤旋時(shí)，它顯示了各類導(dǎo)航。用戶控制，可以選擇看哪些產(chǎn)品，他們不強(qiáng)迫或推銷。在主頁的布局簡單，引導(dǎo)用戶的產(chǎn)品，最適合他們的需求。我喜歡淡淡的手繪元素，伴隨產(chǎn)品。
阿姆斯特丹舞蹈活動
這里的布局真的有助于向人們展示了這一事件的態(tài)度和精神。左側(cè)導(dǎo)航運(yùn)行，成為整個(gè)網(wǎng)站的一個(gè)參考點(diǎn)。旋轉(zhuǎn)強(qiáng)，視覺刺激圖像的幻燈片事件的節(jié)日，操場和會議的玩笑。這是一種有效的方式來吸引用戶。
當(dāng)你向下滾動頁面，幻燈片在幻燈片下面的內(nèi)容，使子菜單從底部到頂部。每個(gè)網(wǎng)站的部分有一條橫幅，在屏幕上運(yùn)行，使得該節(jié)視覺上吸引人的介紹。其余的文章都在網(wǎng)格中。網(wǎng)格中的行不排隊(duì)完美，每列開始比去年略低 - 另一個(gè)小而有效的視覺裝置。
CROPP
CROPP有一個(gè)大和大膽的個(gè)性，展示了它的布局。當(dāng)你將鼠標(biāo)懸停在圖像，圖像pixelates面目全非，抓住你的注意力。在頂部的導(dǎo)航欄是一致的所有頁面和主頁基本上是一個(gè)響亮的可視化表示，在導(dǎo)航的選項(xiàng)。布局捕捉像素化的想法，并奠定了在像素化圖像塊，像所有照片和視頻。
NEUE約克
戴維·魯?shù)婪虻耐顿Y組合是樸素?zé)o華的網(wǎng)格布局-非常簡單，自然的用戶。每一頁只有兩種顏色，獨(dú)特到該頁面。當(dāng)你點(diǎn)擊他的項(xiàng)目之一，展示的優(yōu)先級，主要的導(dǎo)航面板消失。我喜歡這種方法組合網(wǎng)站的是，雖然它有個(gè)性，個(gè)性不影響設(shè)計(jì)師的作品。
娥
娥自行車自行車店有一個(gè)相當(dāng)不尋常的和創(chuàng)新的設(shè)計(jì)。裝載后，一個(gè)美麗的照片充滿豐富和溫暖的畫面。該網(wǎng)站是奠定了四節(jié)，保持背后隱藏的導(dǎo)航圖標(biāo)。它的設(shè)計(jì)似乎更女人味，和排版有點(diǎn)天賦是大膽和強(qiáng)烈的。3-D懸停效果上的自行車是一個(gè)很好的接觸。
君子
這里的布局是簡單，干凈和方便。Esquire的身份是一個(gè)單色的黑色和白色。文章玩笑色彩，吸引讀者的眼球。懸停效果也簡單，與傳情標(biāo)題下面的說明。導(dǎo)航是在中間的網(wǎng)站，功能很像一個(gè)報(bào)紙，讀者變得好奇倍以上內(nèi)容。的圖像，色彩和簡短的標(biāo)題抓住用戶的注意力。
研究所喬依紹爾
Intitut的舒瓦瑟爾有一個(gè)有吸引力的塊布局，適合在一起，就像一個(gè)謎。與磚的顏色層次感，幫助建立身份。進(jìn)一步向下的頁面的布局轉(zhuǎn)換到一個(gè)更傳統(tǒng)的電網(wǎng)，雖然每個(gè)故事是在一個(gè)不同大小的塊，創(chuàng)建一個(gè)有趣的和動態(tài)的審美。不同色塊掀起的網(wǎng)站的不同部分，使其易于瀏覽和閱讀。該網(wǎng)站有一個(gè)復(fù)雜的和精致的品質(zhì)，適合其目的的。
獎(jiǎng)
獎(jiǎng)慶祝創(chuàng)造力，中性的設(shè)計(jì)美學(xué)設(shè)計(jì)師的作品有效地設(shè)置了舞臺。網(wǎng)格布局不修剪或有任何多余的裝飾，將有損或抵觸任何特色設(shè)計(jì)，但有趣的懸停效果有一個(gè)很好的像素化下拉陰影。過導(dǎo)航頁面左側(cè)的固定，固定在頂部的搜索和過濾功能。此導(dǎo)航的安排是最適合展示網(wǎng)站內(nèi)容。
Harry是
本網(wǎng)站的經(jīng)驗(yàn)，是可愛的。設(shè)計(jì)師大量使用的網(wǎng)格，其中有一個(gè)經(jīng)典的上訴適當(dāng)?shù)哪繕?biāo)市場。開放的，清潔的，結(jié)構(gòu)化的設(shè)計(jì)使得一個(gè)愉快的用戶體驗(yàn)。作為一個(gè)網(wǎng)站，銷售男士剃須刀，哈利的功能，是復(fù)雜的和男子漢的圖像而不粗野的感覺。
國王的夏季的
Tumblr網(wǎng)站的照片，偶爾GIF，從電影和古怪的線條布局，這部電影傳達(dá)的魅力。它有一個(gè)嚴(yán)謹(jǐn)?shù)唤y(tǒng)一布局，滾動的樂趣，手寫類型的標(biāo)題，有助于建立一個(gè)廢書的感覺。內(nèi)容塊的獨(dú)特的安排，創(chuàng)造了一個(gè)有趣的視覺，圖片和GIF重疊飄飛，指導(dǎo)各地的網(wǎng)站用戶的眼球。電影網(wǎng)站應(yīng)該傳達(dá)的長篇電影，復(fù)雜的個(gè)性，雖然我還沒有看過這部電影，我肯定有一個(gè)想法，它的個(gè)性。
世界烘焙日
世界烘焙日的布局要求的用戶互動，從得到去。當(dāng)頁面加載時(shí)，系統(tǒng)會提示您一個(gè)動畫手繪箭頭來選擇你的烘烤水平。如果您選擇查看各個(gè)層面的所有配方，而不是一次一個(gè)，然后你會看到整個(gè)畫面充滿美味，令人垂涎的食譜。
布局對待食物，如一個(gè)藝術(shù)作品，展示焙烤食品的照片，大部分頁面重定向到另一個(gè)頁面的配方本身。食譜是整齊的三列：成分在左邊，在中間的指示信息，在正確的貢獻(xiàn)者。
紙和涂料
紙和涂料的布局和相互作用是原始的。當(dāng)你瀏覽網(wǎng)站幾乎從一節(jié)一節(jié)扣，布局和結(jié)構(gòu)適合的產(chǎn)品。導(dǎo)航是隱藏的，當(dāng)你選擇一種顏色方案。圖像突出顯示在滾動，每個(gè)后續(xù)的圖像的頂部挑逗用戶，邀請他們滾動才能看到更多。
我喜歡的方式，你向下滾動頁面，圖像向內(nèi)移動，一個(gè)有趣的可視化動態(tài)。另一個(gè)很好的互動功能是“畫”在墻上不同的顏色使用鼠標(biāo)，增添了幾分樂趣。
“新聞周刊”
這樣的布局是什么，但傳統(tǒng)的新聞網(wǎng)站?！靶侣勚芸钡闹黜撌呛唵味竽懙模U的故事作為背景圖像的照片。紅色的小標(biāo)簽的網(wǎng)站，整個(gè)路標(biāo)指示類型特色的故事。被分解成不都遵循相同的網(wǎng)格的部分的布局?！靶侣劗嬳摗币还?jié)中使用的一個(gè)標(biāo)準(zhǔn)的網(wǎng)格，但脫離常規(guī)的查表，與一些圖像顯示為圓圈，而不是通常的正方形。當(dāng)你向下滾動，每天的新聞相同的模式奠定了這種方式，創(chuàng)建一個(gè)讀者容易理解的一致性。
艾比Putinski
組合現(xiàn)場的原始的方法，艾比Putinski的正副自己作為一個(gè)創(chuàng)造性的插畫家和平面設(shè)計(jì)師。在加載時(shí)，動畫的介紹窗口落在邀請用戶去探索她的作品搬上銀幕。一旦你關(guān)閉該窗口，你走動的地圖編譯所有她的冒險(xiǎn)。本網(wǎng)站不真的有一個(gè)布局，是免費(fèi)開放的，沒有明確的區(qū)域界線，使得它這么有趣的導(dǎo)航。當(dāng)你點(diǎn)擊一個(gè)工作，在一張明信片式車架形象下降到頁面上，重申冒險(xiǎn)和旅行的想法。導(dǎo)航是始終可用的和固定的頂部在同一個(gè)系列，美育。
Baumastisch
這種緊密的網(wǎng)格布局是一個(gè)很好的方式，向人們展示了組合的工作。當(dāng)你將鼠標(biāo)懸停在每件作品，題目給定的，但是當(dāng)你點(diǎn)擊一個(gè)工作時(shí)，會出現(xiàn)一個(gè)“頭版”的工作。此頁面提供了所有必要的信息有關(guān)的項(xiàng)目，如日期，客戶端，DESINGER的作用等，這是貫穿始終的所有項(xiàng)目。你必須通過點(diǎn)擊填滿屏幕幻燈片查看項(xiàng)目。我認(rèn)為這是一個(gè)非常有效的方式來展示工作。
諾威治大學(xué)藝術(shù)
強(qiáng)大的攝影和美麗的圖像做了偉大的工作，展示藝術(shù)才華，從一開始就在這所大學(xué)的權(quán)利。背景圖片在主頁上講述了一個(gè)故事，吸引用戶進(jìn)來，我喜歡的布局，導(dǎo)航到一邊，它是不同的，但運(yùn)作良好，并沒有壓倒的圖像或布局。標(biāo)簽都是黃色的，創(chuàng)建一個(gè)一致的視覺形象。下拉菜單點(diǎn)擊一個(gè)類別時(shí)采取突出，布局可容納。
標(biāo)志也引起了我的注意，其整齊的黑體刻字。它不是太強(qiáng)，但在“N”的傾斜增加了不同的東西，有點(diǎn)仙水。我們的第一印象是建立大的背景圖像，但隨后箭頭邀請我們向下滾動以查看大標(biāo)題縮略圖的各種故事，這是特色。的頁面的其余部分是相當(dāng)傳統(tǒng)的。
斯克工業(yè)
斯克工業(yè)是一種病毒的網(wǎng)站，新的X戰(zhàn)警電影。布局是簡單而有效的。它被劃分為三部分，導(dǎo)航側(cè)欄固定到左右，在中心的視頻，和主要內(nèi)容的右側(cè)垂直滾動。這里使用視頻創(chuàng)建電影的期待。在導(dǎo)航圖標(biāo)的動畫懸停效果是一個(gè)很好的接觸。，表現(xiàn)突出視頻網(wǎng)站的點(diǎn)是明確的。轉(zhuǎn)換是相當(dāng)漂亮的，滑出內(nèi)容部分和備份。另外，嘗試調(diào)整您的瀏覽器看如何布局的變化-導(dǎo)航是隱藏的，你向下滾動頁面的內(nèi)容可見。
亞當(dāng)HARTWIG
這個(gè)網(wǎng)站是真的很有趣，它似乎缺乏布局。它是創(chuàng)建類似Flash動畫的版式繼續(xù)自動播放整個(gè)網(wǎng)站。通過點(diǎn)擊不同類別，用戶即使沒有得到一個(gè)想法的設(shè)計(jì)師的作品，通過動畫的幻燈片。動畫是一致的，插圖是可愛的，做了偉大的工作，說明設(shè)計(jì)師的創(chuàng)作個(gè)性。
Contad
這里的一切- HTML，CSS，JavaScript和的的SVGs -動畫，當(dāng)你滾動。這太瘋狂了！鮮艷的色彩刺激，而且設(shè)計(jì)是由復(fù)雜的插圖。不足之處是，該網(wǎng)站只開發(fā)了適用于臺式電腦用鼠標(biāo)，它只能在Chrome。
美國國家科學(xué)院博物館
這種布局有一個(gè)分層的感覺，表現(xiàn)出一種模塊化的方法。不同頁面上的元素似乎相互重疊，例如，在導(dǎo)航欄約四分之三的方式在頁面上停止。照片位于下方的導(dǎo)航按鈕和標(biāo)題都寫在加入的模塊化分層審美的彩色塊，。我也很喜歡下拉陰影效果，在下拉菜單中的導(dǎo)航，它創(chuàng)建了一個(gè)有趣的深度。
安德魯·麥卡錫
安德魯·麥卡錫的組合具有獨(dú)特的布局。顏色帶洗頁面，您向下滾動的設(shè)計(jì)師透露更多信息。一個(gè)聰明的停止運(yùn)動圖形的像素化的貓科動物中運(yùn)行，當(dāng)你滾動。我愛運(yùn)動創(chuàng)造的這個(gè)簡單的想法。順便說一句，該網(wǎng)站還依賴于用戶的互動。
的Mikael愛德華茲
動畫，當(dāng)用在刀刃上，才能真正促進(jìn)一個(gè)網(wǎng)站的功能。Mikael愛德華茲的使用動畫，視覺吸引力和功能。我們?yōu)閃eb設(shè)計(jì)的，對不對？有沒有需要到壁球一切到頁面或圖像周圍環(huán)繞文字。為什么不包括交互式動畫，讓它變得有趣？這個(gè)想法運(yùn)作良好，在這里作為一個(gè)懸停效果。藍(lán)色圓點(diǎn)代表光標(biāo)，當(dāng)您移動鼠標(biāo)，圖像的變化，使文本的空間。
設(shè)計(jì)師的朋友
不太你所期望從一個(gè)設(shè)計(jì)師的網(wǎng)站，對不對？設(shè)計(jì)師的朋友，看起來像背后的網(wǎng)站本身的HTML代碼。你需要知道的一切是正確的代碼，作為標(biāo)題標(biāo)簽?！懊咳仗崾尽笨?，引導(dǎo)用戶通過網(wǎng)站是一個(gè)奇妙的裝置。
孵化
出殼的布局是固定運(yùn)行寬在屏幕上的導(dǎo)航和部分，創(chuàng)造一個(gè)大膽和開放性。有趣的是，響應(yīng)導(dǎo)航。在一個(gè)小屏幕上，它可能看上去很笨拙，但在這里，導(dǎo)航，包括社交網(wǎng)絡(luò)按鈕，保存到一個(gè)菜單按鈕。
研究所對新出現(xiàn)的問題，
這個(gè)網(wǎng)站有好的一致的過渡，彈出頁面加載界。該網(wǎng)站是結(jié)構(gòu)良好，和各界創(chuàng)造一個(gè)友好的對位下面的統(tǒng)計(jì)數(shù)據(jù)。在“挑戰(zhàn)”一節(jié)的標(biāo)題看起來像講話氣泡，友好的氣氛。這些字幕的懸停效果是視覺上的吸引力，以及功能。用戶的統(tǒng)計(jì)數(shù)據(jù)，因?yàn)闆]有轟炸的數(shù)字是隱藏的，只有當(dāng)發(fā)現(xiàn)上空盤旋。
進(jìn)入北極地區(qū)
的布局進(jìn)入北極地區(qū)從事用戶，并結(jié)合他們的互動。視頻的背景深深吸引用戶，并說明其原因。導(dǎo)航的風(fēng)格是不同的-你將鼠標(biāo)懸停在它折疊出更多的信息，像一本小冊子。排版也是誘人的，拉引號都特別強(qiáng)。網(wǎng)站的設(shè)計(jì)真的很好執(zhí)行。
約翰·雅各布
該組合具有橫向滾動，這是非常不尋常的。當(dāng)您單擊“查看工作，它展現(xiàn)在屏幕中間的放大視圖和一個(gè)簡短的解釋工作。的描述和工作列表簡明扼要，你不覺得你不斷地被重定向到其他頁面。我真的很喜歡聚集在左上角與右下角設(shè)計(jì)師的社會網(wǎng)絡(luò)中的鏈接，導(dǎo)航，幀頁面。設(shè)計(jì)人員使用的空間有效，有趣的是，和旋轉(zhuǎn)的效果。
留下深刻的印象，
這里的空白爽快，并且創(chuàng)建一個(gè)開放和友好?？瞻自试S用戶舒適地閱讀和瀏覽，并有效地使用本網(wǎng)站。懸停效果是不同的，這是因?yàn)殡m然一半的紙張折疊起來。當(dāng)點(diǎn)擊按鈕時(shí)，折疊，就像一本書透露更多的信息。
可過帳
可過帳有一個(gè)可愛的概念，它發(fā)送設(shè)計(jì)精美的感謝卡，為您的電子郵件和網(wǎng)站的設(shè)計(jì)有一個(gè)真正的蝸牛郵件看看。整個(gè)的設(shè)計(jì)和布局起到通信的概念的一個(gè)組成部分。背景有一個(gè)真正的紙張質(zhì)地，頂部邊框，像一個(gè)老派的信封?，F(xiàn)實(shí)生活中的真實(shí)感覺是一個(gè)可愛的Web表單上的觸摸，好像你一張?jiān)诠P記本上涂鴉您的信息。
國家LGBT博物館
這個(gè)網(wǎng)站又有了新的單頁布局。這里的滾動機(jī)制是真的很酷;頁面分割成兩半，用在不同的方向滾動的兩半，創(chuàng)建一個(gè)動態(tài)的效果。部分是不同的顏色和扣合在一起，當(dāng)你滾動。
盧卡斯Nikitczuk
我真的喜歡布局盧卡斯Nikitczuk的組合，因?yàn)樗故玖怂募寄堋Ｋ玫介_門見山，設(shè)計(jì)師和他的作品的主頁上有一個(gè)短的傳記。界創(chuàng)建友好和流體的的審美。在背景中添加的油漆泄漏并創(chuàng)建一個(gè)開放和游離度到網(wǎng)站的身份。導(dǎo)航是非常簡單的，整個(gè)網(wǎng)站的工作原理相同。另一個(gè)很好的接觸，你可以用箭頭鍵，這是幫助筆記本電腦用戶導(dǎo)航。
結(jié)論
布局是您的網(wǎng)站的基礎(chǔ)和重要組成部分，任何創(chuàng)造性的努力。考慮用戶，以及他們將如何與網(wǎng)站互動。他們可能會只在移動設(shè)備上查看您的網(wǎng)站嗎？會如何影響布局？我希望你已經(jīng)收集到了一些自己解決一些布局設(shè)計(jì)的靈感！
本文作者來自網(wǎng)站建設(shè)公司-傳誠信www.94883.cn，轉(zhuǎn)載請注明出處！
