網(wǎng)站設(shè)計(jì)

Website development

黑色和白色的設(shè)計(jì)靈感的網(wǎng)站布局的例子

發(fā)布時(shí)間：2016-12-28 12:01:47

顏色可以顯示在設(shè)計(jì)很多東西：對(duì)比、情感、風(fēng)格，甚至主題。使用黑色和白色的設(shè)計(jì)網(wǎng)絡(luò)上的傳統(tǒng)上傾向于兩大網(wǎng)站：創(chuàng)意機(jī)構(gòu)和新聞出版物。

但這種高對(duì)比的配色方案，可以在任何地點(diǎn)使用時(shí)正確實(shí)施。

下面我收集了一些好的網(wǎng)站，在很大程度上依賴于黑色和白色的顏色。每個(gè)站點(diǎn)使用這些顏色不同的目的，從極簡主義到現(xiàn)代主義和各具特色的專業(yè)風(fēng)范。我分析了每個(gè)例子幫助解釋的設(shè)計(jì)元素，以及如何將類似的想法進(jìn)入你自己的工作。

布恩的選擇

Lawrence Boone選擇使用抽象的設(shè)計(jì)手法與形狀和奇怪的行距排版。這肯定不是一個(gè)網(wǎng)站的布局規(guī)范，因?yàn)樗鼪]有定義網(wǎng)格或靜態(tài)要素。

它依靠了深灰色和淺灰色的色調(diào)減少純黑色和純白色之間的嚴(yán)酷的對(duì)比。

lawrence boon selections

這也

這也是一個(gè)數(shù)字創(chuàng)意工作室專業(yè)從事平面設(shè)計(jì)和UI設(shè)計(jì)。其簡約的網(wǎng)站使用鮮明的黑白給清晰可見的所有文本在頁面上。這不是一個(gè)迷人的布局，但它提供了關(guān)于工作室簡潔的信息。

this also agency

西伯利亞

另一個(gè)創(chuàng)意工作室siberia.io打斷了他們的界面以白色和黑色的背景部分。文本顏色白與黑之間的交替保持對(duì)比。

該網(wǎng)站還使用黑白圖標(biāo)與簡單的平面風(fēng)格展示思想視覺。它的設(shè)計(jì)是新的但同時(shí)熟悉。

siberia agency website

攔截

一個(gè)好的在線新聞來源的攔截讓他們的設(shè)計(jì)簡單，所以內(nèi)容可以發(fā)光。任何給定的文章具有特色的標(biāo)題圖像在黑色背景白色文字。頁面的其余部分是文本居中的純白色。

整體設(shè)計(jì)風(fēng)格散發(fā)著誠信和專業(yè)精神的感覺。我真的很喜歡它的內(nèi)容的攔截，但設(shè)計(jì)也令人難以置信的使閱讀變得輕而易舉。

the intercept magazine

環(huán)球郵報(bào)

全球后又是一個(gè)偉大的新聞網(wǎng)站與類似的黑色和白色的設(shè)計(jì)。新聞的中心舞臺(tái)和顏色保持在絕對(duì)低。

布局是靠一些高亮顏色深淺不一的紅色，但布局95%是純白色和黑色。這是典型的新聞網(wǎng)站，想保留焦點(diǎn)。

global post website

毛

公司生產(chǎn)的毛在廣告業(yè)工作，這說明他們的工作質(zhì)量。投資組合本身是非常簡單的，非常注重排版和過去的客戶工作的照片。

他們的布局的一個(gè)很好的事情是重復(fù)的網(wǎng)格系統(tǒng)。縮略圖照片交替從右到左伴隨著純黑色的文字。它不是傳統(tǒng)但數(shù)字制作機(jī)構(gòu)它是完美的。

furlined website

偉大的不滿

偉大的不滿是Web和打印專業(yè)雜志。他們的網(wǎng)站是一個(gè)沉重的重點(diǎn)放在圖片的雜志風(fēng)格的布局。

他們的設(shè)計(jì)依賴于自然的字體因?yàn)閮?nèi)容是出版界的國王。文章有大的照片，超大的文本，和明快的對(duì)比的黑色和白色的每一頁上。

the great discontent website

希德李

Sid Lee的網(wǎng)站的功能，像一個(gè)奇怪的照片和網(wǎng)格的內(nèi)容。這是一個(gè)黑暗的背景給予了更多的個(gè)人接觸到布局控制。

還有一個(gè)奇怪的儀表板頁面Sid Lee從現(xiàn)實(shí)世界的數(shù)據(jù)域計(jì)數(shù)。這還用一個(gè)普通的黑白設(shè)計(jì)，純文本和扁平化的圖標(biāo)。這個(gè)儀表盤布局更像是一個(gè)藝術(shù)作品比界面設(shè)計(jì)，但它仍然值得一看。

sid lee website

幸福的感知

幸福的感知是由設(shè)計(jì)師網(wǎng)站首輪領(lǐng)先者雷恩。這是一個(gè)個(gè)人網(wǎng)站，他可以分享他的主題的意見。

設(shè)計(jì)是全黑的背景中的一些紋理和邊框。我覺得用深色的背景更個(gè)人的，尤其是在這個(gè)版面風(fēng)格。文本對(duì)比了淺灰色而不是純白色的，但很容易對(duì)眼睛和仍然清晰可讀。

blissfully aware website

3圣·詹姆斯街

這里是3圣杰姆斯廣場的一個(gè)有趣的網(wǎng)站，在倫敦市中心的建筑。這是一個(gè)相對(duì)簡單的布局使用深色的背景和較輕的背景和文本的高對(duì)比度。這也是一個(gè)我見過的一些網(wǎng)站使用倫敦TLD

st james building website

推子

推桿是一個(gè)非常干凈的布局在線雜志。文字落在你所期待的，顏色很相配，都是易于使用的。

在這種布局中的色彩不給職業(yè)感，但現(xiàn)代意義。這是一個(gè)創(chuàng)造性的藝術(shù)雜志而不是傳統(tǒng)的報(bào)紙–大多因?yàn)榕虐婧皖~外的空格。

the fader magazine

紐約時(shí)報(bào)

相反，這里的每個(gè)人都應(yīng)該知道的網(wǎng)站。紐約時(shí)報(bào)已經(jīng)運(yùn)行超過100年，仍然是主要的新聞來源可靠。他們的網(wǎng)站看起來可能平淡無奇，但它在內(nèi)容方面的一切。

在紐約時(shí)報(bào)網(wǎng)站的黑色和白色的顏色模仿報(bào)紙。這可能是為什么襯線字體添加到專業(yè)的感覺，當(dāng)它涉及到新聞網(wǎng)站。

the new york times magazine

掌握磨削

主磨是廚師和廚師愛好者銷售網(wǎng)站（又名人做飯）。本設(shè)計(jì)采用中心頁白裝在充滿黑暗的背景。

每一頁都跟這個(gè)相同的布局和它的出色的結(jié)構(gòu)和內(nèi)容的方法。內(nèi)容組織可能需要重組，但布局本身和如何利用顏色提供了對(duì)讀者有很大的影響。

master grinding website

Abduzeedo

流行設(shè)計(jì)網(wǎng)站Abduzeedo近進(jìn)行了重新設(shè)計(jì)的黑色文字在白色背景。列有融合成的布局無形的指引。

文本仍然可讀但一些地區(qū)使用等寬字體。設(shè)計(jì)的評(píng)價(jià)褒貶不一，但總體很簡單，干凈，直奔主題。

abduzeedo website blog design

70percentpure

Stephanie Duval是來自比利時(shí)的自由撰稿人。該網(wǎng)站70percentpure是她的個(gè)人網(wǎng)站/博客展示她的作品在寫作和攝影。

這是令人難以置信的簡約與水平上市導(dǎo)航和幾個(gè)鏈接。內(nèi)容導(dǎo)航，從用戶體驗(yàn)角度看并不完美，有點(diǎn)困難，但絕對(duì)是精心設(shè)計(jì)的–尤其是個(gè)人網(wǎng)站。

seventy percent pure website

JR及相關(guān)

JR和相關(guān)éE是一個(gè)總部在巴黎的藝術(shù)家和創(chuàng)意專業(yè)人士管理組。他們的網(wǎng)站使用一個(gè)很好的混合的白色，黑色，灰色的顏色。這是一個(gè)很好的設(shè)計(jì)，感覺既專業(yè)又免費(fèi)的同時(shí)流動(dòng)。

jr associee website

kineda

kineda是自我品牌生活方式雜志專注于科技，文化，娛樂，和幾乎所有其他。我真的很喜歡這個(gè)網(wǎng)站的簡單因?yàn)樗匀桓杏X剛性和結(jié)構(gòu)。內(nèi)容包括網(wǎng)格和側(cè)邊欄小工具在線也使用一點(diǎn)顏色的亮點(diǎn)。

kineda magazine

利亞哈加爾

Leah Haggar是一位藝術(shù)家和數(shù)碼設(shè)計(jì)師與投資組合傾向于奇妙的黑白相間的配色方案。頁面部分黑色和白色背景之間的交替而放置一個(gè)沉重的重點(diǎn)內(nèi)容。她的形象也保持黑白直到徘徊。

leah haggar

做講座

做講座是一系列的研討會(huì)和會(huì)談?dòng)涗浥c網(wǎng)上公布。該網(wǎng)站提供這些視頻和相關(guān)內(nèi)容感興趣的讀者。

這是一個(gè)非常干凈的縮略圖的照片和清晰的排版布局。所有的照片都是黑白的色調(diào)保持一致性。

the do lectures website

好的雜志

好的雜志有一個(gè)好的新聞風(fēng)格的布局我見過。它使用突出的封面故事吸引讀者的注意力非常大的攝影。

它的顏色如藍(lán)色和綠色，需要站出來的元素使用強(qiáng)調(diào)。但一個(gè)典型的文章頁面只有一個(gè)白色的背景，黑色的文字，和一些照片散落在各處。

good magazine website

有線

另一個(gè)著名的雜志是有線，真的印刷世界的開始。他們的網(wǎng)站布局已經(jīng)有幾年依靠卡/雜志設(shè)計(jì)保持類似網(wǎng)格。

每一個(gè)故事都包含在它自己的小盒子用白色黑色邊框作為一大亮點(diǎn)。這一效果應(yīng)用到網(wǎng)頁標(biāo)題、欄柱。有線使用的顏色就像外面的突出的好，但布局主要以黑色和白色的配色方案。

wired magazine website

布列塔尼的埃絲特

Brittany Esther是個(gè)攝影師，她的組合使用深色作為清晰度的手段。因?yàn)榇蟮慕裹c(diǎn)在于意象、網(wǎng)頁文本通常較小。但文本放在一二列的網(wǎng)格，就像照片中的多空間。

brittany esther website

村

村是一個(gè)集字體和字體由專業(yè)設(shè)計(jì)師出售。該網(wǎng)站使用一個(gè)簡單的白色背景在每一頁的一個(gè)小陰影描繪的頭。它的偉大工程，因?yàn)榇謇锏闹饕裹c(diǎn)是排版，所以白底黑字的站出來，就像你所期望的。

forsman bodenfors website

福斯曼和bodenfors

Forsman & bodenfors是一個(gè)基于瑞典的獨(dú)立創(chuàng)意機(jī)構(gòu)。他們的網(wǎng)站的一個(gè)沉重的利息在印刷大大膽的標(biāo)題和混合大寫/小寫文本。

一個(gè)批判自己的站點(diǎn)內(nèi)容策略；很難找出他們事實(shí)上做。但導(dǎo)航，可讀性和布局設(shè)計(jì)都非常適合數(shù)字社。

nymag magazine website

紐約雜志

紐約雜志依賴于類似的布局設(shè)計(jì)為紐約時(shí)報(bào)。多個(gè)列，標(biāo)題和簡短的短片段，散布在整個(gè)頁面的縮略圖。

它還采用了全黑的顏色方案，給出了被直接從編輯部印刷相同的印象。

black&whitetemplate

一些我們喜歡的模板，展示黑/白的設(shè)計(jì)：

純黑色/白色–創(chuàng)意多功能模板

01_details

我是誰–個(gè)人簡歷和作品集

black&white2

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7012,0.html

上一篇：互聯(lián)網(wǎng)運(yùn)營的20年發(fā)展與演變

下一篇：微信小程序與H5（html5）程序差別 | 微信小程序開發(fā) | 微信開發(fā) | 云智互聯(lián)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理