• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 从建筑到网页,粗野主义风格确实有着它独特的魅力

从建筑到网页,粗野主义风格确实有着它独特的魅力

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含2017设计趋势,粗野主义,经验分享,设计风格等相关知识,希望在学习及工作中可以帮助到您

近两年粗野主义开始入侵网页设计领域,这种被视作为网页风格领域泥石流的设计趋势,并不是毫无根基、简单粗暴的存在。粗野主义风格的网页设计乍一看,是一堆形态结构粗犷不羁的元素,承载着鲜艳的色彩,在拙稚粗劣的排版布局之下,所呈现出来的网页设计作品。这种有着典型上世纪质感的设计风格,影响着许多设计师,甚至彭博社都采用了这种设计风格来制作页面。在之前的文章当中,我们对于粗野主义设计有过讨论:《辣眼睛?这种粗粝但有趣的设计风格正悄然流行》

但是讲真,这种风格到底是从何而来?虽然它的灵感来源似乎非常庞杂,整体架构也颇为随性,但是如果仔细追溯源头,会发现它并非是无本之木。在上世纪中期,计算机技术蓬勃发展的年代,冷战尚未结束的背景之下,许多充满粗粝感但是足够壮观的庞大建筑物拔地而起。这些强调结构和功能但是不苛求细节的建筑物充满了质感,气势十足,外露的混凝土墙面又时刻给你一种沉闷的压迫感,冷峻而严酷的特征在周围环境的衬托下,还带着一缕挥之不去的黑暗基调。当你回溯那个年代,你会发现这些建筑物简直是最好的总结。

粗野主义网页设计和这些建筑在精神上有着共通的地方,如果仔细审视,会发现它们在设计元素和手法上,也颇为接近。从图片素材的使用,到配色方案的选取,这些建筑能够给你最好的参考。

今天的文章,我们通过对比来归纳和回溯粗野主义网页设计的源头,将它的特征和手法摆在你的面前。如果你真的想采用这种风格的设计,它们会是带你走向风味醇正的粗野主义设计的路径。

色彩

这批诞生于上世纪中叶的建筑,受到时代背景和氛围的影响,混凝土外露的设计和冷峻的风格,使得它们直到现在和颇受争议。现在粗野主义风格的网页设计中,许多作品沿用了这些建筑的配色,灰色、黑色、棕色被大量地使用,而这些建筑的相关照片更是营造这种氛围的实用素材。

形状

在所使用的元素的形状上,你会发现这些建筑和粗野主义网页设计有着许多相似的地方。

首先,在粗野主义风格的网页当中,形状独特而大胆的元素越来越多。这些元素被设计师用来吸引用户的注意力,而这一点在建筑上也体现的淋漓尽致:建筑设计师借助混凝土的强大可塑性,将几乎任何可以想到的形状,都融入进来。而采用粗野主义风格的网站更是随性地使用各种二维和三维的图形,用以维系独特的视觉体验。

比例与气势

粗野主义风格的建筑有着宏伟、极具压迫感的特征,这一点最终也反映到了粗野主义风格的网页当中。这些以黑白灰为主也得建筑因为缺少带有情绪的色彩,加上庞大的体积,从而显得压迫感十足,传统的建筑即使采用同样的色调也会借助曲线和装饰来淡化建筑的冷硬感。

而粗野主义风格的网页也很好的把握了这一特质。在排版和图片的运用上,通过控制比例很好的创造了视觉压迫力,适当地弱化可读性和视觉吸引力,从而营造出粗粝森冷的体验。

异化和突出

今天的建筑设计通常会尽量设计得和环境相得益彰,要么融入周围的环境,要么采用大量的玻璃幕墙,来反射天空和环境以达到融入的目的。但是这批诞生于上世纪中叶的建筑则不同,设计者和建造者通过微妙的异化,让它们同周围的环境构成对比,产生和环境的剥离感,视觉上显得颇为突出。

异化在粗野主义风格的网站上有了明显的体现。异化的设计元素在页面中营造出了具有视觉冲击力的特征,引起用户主义。许多元素明显是故意为之,并且纯粹是为了吸引人而存在。

这一特征正好和粗野主义风格建筑相同。许多建筑师会设计的时候尝试新的形状、结构和装饰。

这些设计通常不会采用终端用户常见的设计样式,而是采用那些非常规的、带有戏剧感和视觉冲击力的设计样式。

从这一点上来看,粗野主义的设计似乎会带有更加明显的设计师印记,诸如音乐和美术相关的网站会更适合使用粗野主义风格来承载,这也是它受到越来越多关注的原因。

【更多设计实战在这里】

  1. 《富有未来感的柏林之夜APP,是这样设计出来的》
  2. 《设计实战!城市指南网站着陆页是这样设计出来的》
  3. 《这款给医生的专业APP,设计上有着怎样不同的要求?》
  4. 《帮你策划盛大婚礼的APP,设计思路是这样的》
  5. 《这款面向大众的理财APP,设计过程是这样的》
  6. 《一款真正让人专注的效率应用,应该这么设计》

原文地址:designmodo
原文作者:Ben Bate
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 超全面总结!2017年UI设计领域流行过这21个设计趋势
  • 最后一个月,这3个设计趋势是网页设计师的最爱
  • 这10个趋势,是2018年用户体验设计关注的重心
  • 用这5个技巧在网页设计中玩转视差特效
  • 人工智能与设计零基础手册!发展历史和定义+底层设计阐述
  • 秋风渐起,大咖们都跟随这些趋势做网页设计
  • 从建筑到网页,粗野主义风格确实有着它独特的魅力
  • 2017年最后几个月,网页设计师值得注意的趋势
  • 这3个趋势,在接下来的9月会影响更多设计作品
  • 背后的分析!iOS 11的设计理念和3个设计方向总结

相关文章

  • 2018-08-239个小技巧,让你的作品也能上Behance 热门!
  • 2017-08-06Web 设计 实现干净代码的12条定律[图文]
  • 2018-08-23为什么你的设计时间总不够用?告诉你提高效率的方法!
  • 2018-08-23聊聊市面上的「真伪」设计系统
  • 2018-08-23「得到」的猫头鹰Logo 是怎么诞生的?来看主创设计师怎么说!
  • 2018-08-23用一张图阐述一个设计师的思考与成长历程
  • 2018-08-23在Justinmind眼中,这7款APP的UI设计是今年最佳
  • 2018-08-23作品集准备好了吗?来看高手为你准备的12个作品集设计技巧
  • 2018-08-23做好网页排版,不要犯这10种错误
  • 2018-08-23超干货!如何利用记忆心理学提高用户体验?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 想进阶成PPT 高手?得先学会这些高级动画特性!
    • 一篇长文,读懂「10万+」标题的全部套路
    • Helvetica 字体60岁了,它是如何变成了人们生活中的日常?
    • 眼见不一定为实!设计中常见的 9 种视觉错觉!
    • 朋友网手机客户端下载页面的设计分享(图文)
    • 网易高手:角色权限设计的100种解法
    • 我用这个极限推敲法,有效推进视觉设计
    • 新手建站入门教程帖⑦:做一个漂亮的网站就这么简单
    • 产品思维入门实战!对社交类产品的分析和思考
    • 除了 Helvetica ,UI 设计师还应该知道哪些经典字体?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有