企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

黑色和白色的设计灵感的网站布局的例子

发布时间:2016-12-28 12:01:47

TAGS:网站设计

颜色可以显示在设计很多东西:对比、情感、风格,甚至主题。使用黑色和白色的设计网络上的传统上倾向于两大网站:创意机构和新闻出版物。
bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

但这种高对比的配色方案,可以在任何地点使用时正确实施。
bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下面我收集了一些好的网站,在很大程度上依赖于黑色和白色的颜色。每个站点使用这些颜色不同的目的,从极简主义到现代主义和各具特色的专业风范。我分析了每个例子帮助解释的设计元素,以及如何将类似的想法进入你自己的工作。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

布恩的选择bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Lawrence Boone选择使用抽象的设计手法与形状和奇怪的行距排版。这肯定不是一个网站的布局规范,因为它没有定义网格或静态要素。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

它依靠了深灰色和浅灰色的色调减少纯黑色和纯白色之间的严酷的对比。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

lawrence boon selectionsbTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这也bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这也是一个数字创意工作室专业从事平面设计和UI设计。其简约的网站使用鲜明的黑白给清晰可见的所有文本在页面上。这不是一个迷人的布局,但它提供了关于工作室简洁的信息。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

this also agencybTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

西伯利亚bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

另一个创意工作室siberia.io打断了他们的界面以白色和黑色的背景部分。文本颜色白与黑之间的交替保持对比。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

该网站还使用黑白图标与简单的平面风格展示思想视觉。它的设计是新的但同时熟悉。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

siberia agency websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

拦截bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一个好的在线新闻来源的拦截让他们的设计简单,所以内容可以发光。任何给定的文章具有特色的标题图像在黑色背景白色文字。页面的其余部分是文本居中的纯白色。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

整体设计风格散发着诚信和专业精神的感觉。我真的很喜欢它的内容的拦截,但设计也令人难以置信的使阅读变得轻而易举。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

the intercept magazinebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

环球邮报bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

全球后又是一个伟大的新闻网站与类似的黑色和白色的设计。新闻的中心舞台和颜色保持在绝对低。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

布局是靠一些高亮颜色深浅不一的红色,但布局95%是纯白色和黑色。这是典型的新闻网站,想保留焦点。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

global post websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

公司生产的毛在广告业工作,这说明他们的工作质量。投资组合本身是非常简单的,非常注重排版和过去的客户工作的照片。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

他们的布局的一个很好的事情是重复的网格系统。缩略图照片交替从右到左伴随着纯黑色的文字。它不是传统但数字制作机构它是完美的。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

furlined websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

伟大的不满bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

伟大的不满是Web和打印专业杂志。他们的网站是一个沉重的重点放在图片的杂志风格的布局。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

他们的设计依赖于自然的字体因为内容是出版界的国王。文章有大的照片,超大的文本,和明快的对比的黑色和白色的每一页上。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

the great discontent websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

希德李bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Sid Lee的网站的功能,像一个奇怪的照片和网格的内容。这是一个黑暗的背景给予了更多的个人接触到布局控制。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

还有一个奇怪的仪表板页面Sid Lee从现实世界的数据域计数。这还用一个普通的黑白设计,纯文本和扁平化的图标。这个仪表盘布局更像是一个艺术作品比界面设计,但它仍然值得一看。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

sid lee websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

幸福的感知bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

幸福的感知是由设计师网站首轮领先者雷恩。这是一个个人网站,他可以分享他的主题的意见。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计是全黑的背景中的一些纹理和边框。我觉得用深色的背景更个人的,尤其是在这个版面风格。文本对比了浅灰色而不是纯白色的,但很容易对眼睛和仍然清晰可读。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blissfully aware websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3圣·詹姆斯街bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这里是3圣杰姆斯广场的一个有趣的网站,在伦敦市中心的建筑。这是一个相对简单的布局使用深色的背景和较轻的背景和文本的高对比度。这也是一个我见过的一些网站使用伦敦TLDbTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

st james building websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

推子bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

推杆是一个非常干净的布局在线杂志。文字落在你所期待的,颜色很相配,都是易于使用的。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这种布局中的色彩不给职业感,但现代意义。这是一个创造性的艺术杂志而不是传统的报纸–大多因为排版和额外的空格。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

the fader magazinebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

纽约时报bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

相反,这里的每个人都应该知道的网站。纽约时报已经运行超过100年,仍然是主要的新闻来源可靠。他们的网站看起来可能平淡无奇,但它在内容方面的一切。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在纽约时报网站的黑色和白色的颜色模仿报纸。这可能是为什么衬线字体添加到专业的感觉,当它涉及到新闻网站。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

the new york times magazinebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

掌握磨削bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

主磨是厨师和厨师爱好者销售网站(又名人做饭)。本设计采用中心页白装在充满黑暗的背景。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

每一页都跟这个相同的布局和它的出色的结构和内容的方法。内容组织可能需要重组,但布局本身和如何利用颜色提供了对读者有很大的影响。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

master grinding websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

AbduzeedobTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

流行设计网站Abduzeedo近进行了重新设计的黑色文字在白色背景。列有融合成的布局无形的指引。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

文本仍然可读但一些地区使用等宽字体。设计的评价褒贬不一,但总体很简单,干净,直奔主题。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

abduzeedo website blog designbTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

70percentpurebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Stephanie Duval是来自比利时的自由撰稿人。该网站70percentpure是她的个人网站/博客展示她的作品在写作和摄影。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是令人难以置信的简约与水平上市导航和几个链接。内容导航,从用户体验角度看并不完美,有点困难,但绝对是精心设计的–尤其是个人网站。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

seventy percent pure websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

JR及相关bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

JR和相关éE是一个总部在巴黎的艺术家和创意专业人士管理组。他们的网站使用一个很好的混合的白色,黑色,灰色的颜色。这是一个很好的设计,感觉既专业又免费的同时流动。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

jr associee websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

kinedabTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

kineda是自我品牌生活方式杂志专注于科技,文化,娱乐,和几乎所有其他。我真的很喜欢这个网站的简单因为它仍然感觉刚性和结构。内容包括网格和侧边栏小工具在线也使用一点颜色的亮点。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

kineda magazinebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

利亚哈加尔bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Leah Haggar是一位艺术家和数码设计师与投资组合倾向于奇妙的黑白相间的配色方案。页面部分黑色和白色背景之间的交替而放置一个沉重的重点内容。她的形象也保持黑白直到徘徊。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

leah haggarbTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

做讲座bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

做讲座是一系列的研讨会和会谈记录与网上公布。该网站提供这些视频和相关内容感兴趣的读者。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是一个非常干净的缩略图的照片和清晰的排版布局。所有的照片都是黑白的色调保持一致性。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

the do lectures websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

好的杂志bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

好的杂志有一个好的新闻风格的布局我见过。它使用突出的封面故事吸引读者的注意力非常大的摄影。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

它的颜色如蓝色和绿色,需要站出来的元素使用强调。但一个典型的文章页面只有一个白色的背景,黑色的文字,和一些照片散落在各处。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

good magazine websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有线bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

另一个著名的杂志是有线,真的印刷世界的开始。他们的网站布局已经有几年依靠卡/杂志设计保持类似网格。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

每一个故事都包含在它自己的小盒子用白色黑色边框作为一大亮点。这一效果应用到网页标题、栏柱。有线使用的颜色就像外面的突出的好,但布局主要以黑色和白色的配色方案。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

wired magazine websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

布列塔尼的埃丝特bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Brittany Esther是个摄影师,她的组合使用深色作为清晰度的手段。因为大的焦点在于意象、网页文本通常较小。但文本放在一二列的网格,就像照片中的多空间。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

brittany esther websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

村是一个集字体和字体由专业设计师出售。该网站使用一个简单的白色背景在每一页的一个小阴影描绘的头。它的伟大工程,因为村里的主要焦点是排版,所以白底黑字的站出来,就像你所期望的。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

forsman bodenfors websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

福斯曼和bodenforsbTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Forsman & bodenfors是一个基于瑞典的独立创意机构。他们的网站的一个沉重的利息在印刷大大胆的标题和混合大写/小写文本。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一个批判自己的站点内容策略;很难找出他们事实上做。但导航,可读性和布局设计都非常适合数字社。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

nymag magazine websitebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

纽约杂志bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

纽约杂志依赖于类似的布局设计为纽约时报。多个列,标题和简短的短片段,散布在整个页面的缩略图。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

它还采用了全黑的颜色方案,给出了被直接从编辑部印刷相同的印象。bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

black&whitetemplatebTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一些我们喜欢的模板,展示黑/白的设计:bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

纯黑色/白色–创意多功能模板bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

01_detailsbTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我是谁–个人简历和作品集bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

black&white2bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联


bTl北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7012,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号