UI & UX
Article:2022/05/24
众所周知,时尚是个圈。
风格趋势兜兜转转,粗野主义(Brutalism)又进入了我们的视野,只不过这次换了个名字——新粗野主义(Neubrutalism / Neobrutalism)。
粗野主义网页设计的说法始于brutalistwebsites.com的创始人Pascal Deville。即使您从未听说过这个词,您也大可能曾访问过粗野主义风格的网站。顾名思义,它是一种野蛮、大胆、直截了当的设计思想。本文将为大家介绍...
“
什么是粗野主义?
粗野主义是二战后出现在欧洲的一种建筑风格,在20世纪50年代和60年代达到鼎盛时期。
战争造成了巨大的破坏,迫切需要尽快重建学校、教堂、办公室和其他重要建筑。战争导致廉价的混凝土和钢材变得丰富,这些是用于建造粗野主义建筑的主要材料。粗野主义逐渐在世界大城市流行起来,因为它成本低且易于施工。
粗野主义源自法语béton brut,意思是粗混凝土。粗野主义建筑的特点是工业原始的外观、放弃装饰、简单的几何形状。
“
粗野主义进入网页设计领域
充满争议的粗野主义在突然走红之后,又最终在20世纪70年代迅速衰落。 但粗野主义并没有完全消失,互联网早期建立的网站也是粗野的。
Craigslist网站在 2000 年的样子
事实上,今天存在的一些上世纪90年代的网站保持着这种风格。Craigslist成立于1995年,是粗野主义网页设计趋势中最受欢迎的案例之一。
Craigslist网站在 2022 年的样子
虽然该网站变化后给人一种更精致的感觉,但原始结构和原始设计方法保持未变。Craigslist 使用列标题和蓝色超链接来构建其主页。
“
粗野主义网页设计
粗野主义不仅提供纯粹的功能,也为我们提供了特别的审美体验和精神态度。这种特质在许多创意领域得到认可,包括网页设计。
粗野主义网页设计凭借其实验性设计和几何、工业外观,与主流网页设计中流行的干净、极简主义美学形成鲜明对比。
粗野主义的初衷是将设计和构造剥离到最基本的部分,使其更加实用。
粗野主义网页设计诚实且具有实用性,设计师和用户发现这样的风格令人耳目一新。当将不合适的文本或花哨的图形等内在元素与思维过程的透明度相结合时,这会吸引用户的注意。
www.ethicsfordesign.com上的非传统导航
Creative Momentum的Matt Stewart总结了粗野主义网站的常见特征:
· 黑色或白色背景
· 没有渐变或阴影
· 重叠元素
· 缺乏对称性
· 拥挤的设计
· 没有明显的层次结构
· 等宽字体
· 始终使用一种字体
· 对比色板
· 缺乏动画
· 稀疏图像
· 简单或不存在的导航
· 单页网站设计
粗野主义网页设计肯定不适合所有人。尽管如此,它的叛逆和令人惊讶的设计特征对于富有创意和打破常规的品牌或任何想要突破界限并忽视传统设计规范的人来说可能是完美的。
“
新粗野主义网页设计
新粗野主义(Neubrutalism / Neobrutalism)是网页设计中的常规粗野主义(Brutalism)和更现代的排版、插图和动画标准的混合体。
常将传统的布局概念与超高对比度、纯色、故意冲突的颜色和更简单但古怪的排版相结合。
Yan Ageenko / Mitya Andrievskiy 的粗野主义案例
“
TIPS
大文本
在典型的粗野主义网站中,所有文本都比它本身需要的大小更大一点。
如果您希望文本非常大,请根据您的网站属性策略性地使用。对于作品集网站来说,用巨大文本可能是有意义的,但这对于电子商务网站可能就没有意义了。
强对比的颜色
新粗野主义不怕将纯黑色 (#000000) 与其他颜色融合在一起。这是大多数其他设计风格都试图避免的做法,因为在保持可访问的对比度的同时,我们不想给用户造成眼睛疲劳。
一个良好的功能性网站常必须确保不会让用户不知所措,因此在选择调色板时通常不会选择极度饱和的颜色,从而避免使用户很难阅读和欣赏。
而粗野主义选择突破,您在用此风格设计时注意不损坏可用性即可。
此外,粗野主义网站最初故意剥离色彩,因此有些网站也通常缺乏色彩。个性的黑白网站效果也很不错。
图片
粗野主义网站的图片及其形式在很大程度上取决于您网站的目的。它们可以很大、有有趣或平滑的过渡、与文本的颜色产生关系、也可以是黑白的、甚至可以与其他元素重叠(无缝)。
阴影
新粗野主义的阴影通常避免使用模糊,希望它们尽可能清晰,看起来好像在下方只有另一个更暗的图形。
虽然这对于可访问性来说非常好,但也为我们的大脑添加了更多要处理的对象。
故意打破审美原则
此案例中,可见三张卡片故意不一致。更引人注目的是,最典型的按钮也并非文本居中而是略微错位。
这种形式使非常规审美的东西正常化,让使用者在心理上更容易接近——他们会想“我可以自己做!” 它没有威胁性,似乎任何人都可以做到,显得亲切、原始。
排版
排版在这种风格中起着非常重要的作用,但它的表现方式要保守得多。虽然有时候字体会有点古怪或时髦,但它们的排版方式(有足够的空白、字体通常很厚重......)常为了最大限度地提高可读性。
有时,元素与背景的对比度可能看起来很糟糕,就像上图案例中一样,但这很可能会吸引观者停留注意。
“
更多案例激发您的灵感
Apelido & Apelido
Balenciaga
https://orto.diaria.co/
Baseline (Shopify Theme)
PW Magazine
DAPP BOI
https://www.wildfoxsquad.com/
https://gumroad.com/
rubens.design
“
总结
新粗野主义有多种形式,将它们聚集在一起的是打破主流网页设计规则的渴望。它的实验性和有时令人不舒服的风格非常适合想要脱颖而出并给人留下深刻印象的网站。
就像大多数设计风格和策略一样,粗野主义设计有优势也有陷阱。诀窍是为您的品牌、业务或行业选择合适的网页设计美学风格。
粗野主义通过引人注目和大胆的设计打破规则,也让设计师获得乐趣。
(部分图文来自网络,若有侵权,请联系删除。)
福利时刻
扫码添加小助手微信
凭文章转发+截图
领取书籍福利~
加入UI&UX交流社群~
设计资源/书籍资源/知识互动
还有更多神秘福利!
一起创作更好的设计~
往期推荐 | Read More
设计资讯:超越屏幕的交互设计?来看看AR & 空间交互设计!
听说你还在研究产品设计与用户体验设计的区别?这篇文章帮你判断!
案例研究:在游戏中创建的理想世界变成现实?AR社区应用程序—Project Portland
文字丨Jelly
编辑丨Jelly
如果觉得我们做的还不错点个赞和在看吧!:)