网页设计风格指南:粗野主义 Brutalism

用户头像
广州/网页设计师/1年前/868浏览
网页设计风格指南:粗野主义 Brutalism
什么是网页设计的粗野主义 ?
Brutalism US: ['bru:təlɪzəm] UK: ['bru:təlɪzəm] 粗野主义; 野蛮主义;极简粗犷风格
粗野主义 (Brutalism):一种源于建筑领域的设计风格,强调原始、粗糙和反传统的美学,注重功能性而非装饰性,常使用大胆的排版、不对称布局和强烈的对比色。
“Brutalism”(粗野主义)一词源自法语术语
béton brut
,意为“裸露混凝土”、"清水模"或“清水混凝土”,指未经修饰、直接暴露的混凝土表面。这一术语最初用于描述20世纪40年代末至50年代初在英国兴起的一种建筑风格。粗野主义建筑以其裸露的混凝土结构、严峻的几何形体和强调建筑材料本身的质感为主要特征,并在20世纪50年代至70年代间传播到世界各地。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQxMjQ=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
审计委员会 Tribunal de Contas / Aflalo y Gasperini 圣保罗, 1971
收藏
粗野主义是一种原始、极简的设计风格,它重视功能而非形式和美学。它往往以极其简单,几乎是极简主义的方法来处理布局和UI设计为特征。是对原始、引人注目的视觉设计的一种大胆、反直觉的诠释——并且很难用定义来界定,因为它本质上旨在挑战定义。
和大多数潮流的兴起一样,粗野主义是对之前风格的一种反动:一种想要抛弃早期繁复、难以言喻的华丽设计的愿望。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQxOTY=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
伦敦银行 Banco de Londres y Sudamérica / Clorindo Testa 布宜诺斯艾利斯, 1966
收藏
为什么粗野主义会在网页设计中兴起?
早期的网页迭代都专注于原始的功能和内容:粗暴累赘的HTML编码网站和大胆的90年代设计主题,在概念上自然类似于建筑粗犷、暴露结构的定义特征。这本身就是一个实用性问题。随着时代的发展,网页才慢慢变成了我们今天看到的样子(绝大多数)——布局合理、遵循用户体验、注重美学和色彩理论等。思想、文化、审美、需求是多元的,对于网页的追求也是,主流网页追求高级美观和完美体验,也同时有了粗野主义发展的土壤。
一些人认为主流网页高级的美学和体验,会营造一种美丽的假象,让人会下意识忽略隐藏网页背后可能存在的缺乏道德和恶意的真实意图。粗野主义网页设计的流行,或许也反映了人们希望互联网能够更透明度、更直接。人们希望网站的底层逻辑和真实意图能像粗野主义建筑展示它的原材料和社会理念一样,一目了然。
粗野主义网页设计的特点
突破常规的配色
粗野主义在建筑学领域经常大量使用灰色、黑色、棕色等冷峻氛围的配色。网页的粗野主义则不同,更多使用刺眼、冲突的色彩搭配来进行设计,和主流的网页美学及色彩理论逆道而行。
“我们并不需要所有映入眼帘的都是完美的东西。”
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMDA=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
kaskadproject.com
收藏
非标准的导航和信息层级设计
通常,UX/UI 设计师会遵循用户体验原则,以及合理的信息层级来减少用户认知负荷,并提高网站导航的便捷性。而粗野主义则相反,喜欢使用非标准的导航和粗犷的信息展示方式。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMDQ=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
namespace.studio
收藏
原始和粗粝的设计理念
从布局排版到色彩搭配,粗野主义网站有意营造出一种原始和未经打磨的环境。这可以从上世纪中叶的建筑中找到灵感和来源,由于时代背景和氛围的影响,建筑强调原始、粗糙的外观,呈现出混凝土的真实纹理,不做过多修饰。
让人想起互联网早期没有使用设计排版和美化的网页状态,是对于当前主流网页文化背对而行的设计理念,抛弃美化和装饰,展示真实而粗粝的本质。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMDg=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
wikipedia.org
收藏
重复、独特的形状和图案
粗野主义风格的网页设计通常包含重复的形状或图案,或者是二维、三维的独特图形,这保持了一种独特的视觉体验,也经常从上世纪粗野主义盛行的建筑中找到元素和灵感运用,这是对粗野主义建筑的几何特征的理念延续和模仿。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMTI=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
studio-job.com
收藏
视觉冲击和压迫
粗野主义时期的建筑庞大而不加修饰和外露的清水混凝土和冷峻的几何结构,带来一种粗野巨兽般的压迫感,这种视觉体验也延续到了粗野网页设计中,并且在网页中的运用更加的大胆和自由随性。尤其在追求细腻体验和美观的主流文化对比下,粗野主义网页更显得逆反和异化。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMTY=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
src.plus
收藏
粗野主义风格的网站灵感
Butalist Websites
brutalistwebsites.com 这个网站的内容和命名一样直接,收集粗野主义风格的网页。内容只有一小段介绍和案例。
"In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design." —— 
Brutalist Websites
“在其粗犷和不关心显得舒适或轻松的特质中,粗野主义可以被视为年轻一代对当今网页设计的轻盈、乐观和轻浮的一种反叛。”
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMjA=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
brutalistwebsites.com
收藏
Awwwards/collections/brutalism/
Awwwards 是一个知名的网页设计灵感与奖项平台,在合集中专门收集粗野主义风格的网页设计作品,供设计师获取灵感。这个合集在设计感和交互动画各方面都会更加的优秀。
网页设计风格指南:粗野主义 Brutalism(图ZMTUxMjQyMjQ=) - 教程 - 站酷设计师Rico的设计漫想原创素材 - 站酷ZCOOL
awwwards.com/awwwards/collections/brutalism/
收藏
总结
粗野主义网页设计并不是说抛弃设计,而是把网站的“骨架”直接展现出来,比如用最基础的排版、按钮和链接,不做多余装饰。这样做,是想让用户一眼看清网站的结构和意图,减少误导和隐藏,让一切都“摆在明面上”。把注意力拉回到内容和功能上,让用户更容易找到自己需要的信息。
粗野主义的“粗糙感”其实是一种态度,传递出网站独特的气质和反叛精神。它挑战主流审美,不怕“看起来不完美”,反而用这种“原始感”表达真实和自我。
设计是一个循环,粗野主义从诞生到今日,从潮水来回往复,当然在每个时代都会结合当时时代的特征和文化理念,糅合出新的设计色彩。
比如新粗野主义(Neo-Brutalism),后现代粗野主义(Postmodern Brutalism),工业粗野主义(Industrial Brutalism),赛博粗野主义(Cyber Brutalism)等等,都是时代追求和复古思潮融合下的产物,这些风格源于粗野主义的原始力量和功能性核心,但通过与其他审美或功能需求的结合,形成了多样化的衍生流派。
当然这些衍生的设计风格我们也会在后面的文章中继续来谈谈。
7
阅读原文
|
举报
|
15
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
 网页背景
三个青年正在装修网页矢量插画
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
女生坐在网页面前办公矢量插画
网页背景
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
一个人拿着优惠券准备支付购物电商矢量插画
四个人物分别在上网贴纸合集
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
卡通风格网页页面3D渲染
男生坐在网页面前办公矢量插画
网页电商背景矢量插画
新年快乐送福网页矢量图banner
蓝色简约风格404错误页面
三位美女围着网页看信息矢量插画
网页页面矢量插画
卡通女孩与网页表格3D渲染
网页设计——纸杯蛋糕
卡通女孩与网页表格3D渲染
一个男生和两个女生站在网页前面打招呼矢量
户外旅行飞机情侣假日出行
卡通风格网页页面3D渲染
浏览电脑网页的元素
你可能喜欢
相关收藏夹
大家都在看
登录注册