广州总部电话:020-85564311
20年
互联网应用服务商
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

建筑事务所网站设计:这样官网才配得上精品项目!

发布日期:2026-06-24 17:24:17 浏览次数: 806 来源:筑格品牌传播
推荐语
探索顶尖建筑事务所如何通过网页设计传递美学理念与品牌个性,从OMA到BIG,看设计如何与建筑灵魂共鸣。

核心内容:
1. OMA网页的黑白极简风格与新闻背景的创意结合
2. BIG事务所的像素字体与动态项目交互系统
3. Herzog & de Meuron的几何模块与明快色彩运用
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!


作为建筑事务所对外宣传的媒介之一,

精美的网页设计,

能够传达出事务所的美学观点、

品味个性以及设计风格,

对于提升建筑事务所的互联网品牌形象至关重要。

而随着互联网的成长,

优秀的用户体验同样也是网页设计成功的关键。


作者|Song
编辑|Seven



01

OMA - Architectural Firm Website Redesign

By Rostislav Popov


大都会建筑事务所(The Office for Metropolitan Architecture,简称OMA)是一家总部位于鹿特丹的荷兰建筑公司,于1975年由荷兰建筑师Rem Koolhaas、希腊建筑师Elia Zenghelis、Madelon Vriesendorp和Zoe Zenghelis共同创立。是一家专门从事当代建筑设计、都市规划与文化分析的公司。


Behance.net


事务所网页主要以黑白色系为调色板,位于顶部的导航栏简洁时尚等特征,不难看出,OMA网页设计的内容展示和视觉表达成功地把握住了其创始人Rem Koolhaas的新闻背景,并将其与建筑平面结合得淋漓尽致。整体的网页设计传递可靠且专业的个性,是具有创造性、实验性的。


Behance.net


我们从网页中的文本框形状以及对于图片素材色调上的处理,似乎看到了分隔空间的一个个街区。设计师将排版作为建筑平面,以这种方式寻找着事务所与建筑之间的隐含关系。


Behance.net


Behance.net


Behance.net



02

BIG


BIG建筑事务所是一个由建筑设计师、产品设计师、设计思考者组成的在建筑、城市等多领域广泛合作的位于丹麦首都哥本哈根的国际化事务所。B.I.G与时俱进的设计理念通过对网页的设计也作出了积极回应,非衬线像素字体就此展开,用像素点替代文字结构,形成有趣的视觉观感,保持了极强的创新性、不可预知性。


big.dk


BIG建筑事务所的项目是按照其项目发生时间、项目名称字母、项目规模、项目重视程度、项目建造地点等顺序排列,设计者能够寻找到创造性的方式,将项目特征转化为令人惊讶、简洁而具美观的图形方案,以应对每一个具体和复杂的建筑,无一例外,BIG建筑事务所的每一个项目都有一款无可辩驳的符号图标。当鼠标经过这些项目图标时,用户能够清晰的预览该项目名称与缩略图,为学习者们贡献了一个类型丰富的建筑设计案例素材库。


big.dk


big.dk


按照项目建造地点顺序排列,设计者是将每一个项目图标放置于地球上,用户能够通过旋转球体准确且清晰地查看BIG建筑事务所在不同地域的项目布局数量。


big.dk


big.dk



03

Herzog & de Meuron


位于瑞士巴塞尔的Herzog & de Meuron事务所网站页面,整体是由简单朴素的几何线框构成其页面模块,响应式地点缀上明快的柠檬黄,风格极简且抽象化。左侧的菜单栏框架简明且清晰,例如News模块就是以项目时间的先后顺序排列,模块布局的疏密设计者控制的恰到好处,能够在第一时间定位优先级高的项目。


即便是对于那些没有明确定位的用户群体,设计者可谓是面面俱到,用户只需点击位于左上方的INDEX图标再根据指示箭头排列,就能够查看Herzog & de Meuron事务所创立至今所有的项目缩略图,给予了良好的用户体验。主页的右上角固定着一个小浮窗,浮窗的内容是Herzog & de Meuron事务所最新的项目视频,它像是一张“名片”,“名片”上记录的是Herzog & de Meuron事务所对每一位访客的自我介绍。


herzogdemeuron.com


herzogdemeuron.com


每当用户点击项目链接时,模块还会以桌面弹窗的形式层层叠加且窗口能够任意进行移动,该视觉呈现方式新奇且具有一定还原感。另外,用户通过CHANNELS按钮能够直接跳转Herzog & de Meuron事务所的其余平台的官方账号,实现跨平台联动。


herzogdemeuron.com


herzogdemeuron.com


herzogdemeuron.com



04

Zaha Hadid Architects


扎哈·哈迪德建筑事务所创建于1979年,多年来始终处于建筑、艺术和设计领域前沿,并于2004年获得普利兹克建筑奖。其作品善于运用尖端技术,将前卫的设计理念变成现实。


zaha-hadid.com


zaha-hadid.com


zaha-hadid.com


扎哈·哈迪德建筑事务所的主页中有一个有趣的金属栏,通过点击栏内第二个按钮,则可以随机变换页面中面板的布局,不仅如此,主页中所有的面板仍然可以通过鼠标任意移动到用户设想的位置,以及隐藏,这样的设计不仅增强了与用户的互动性,而且还提升了用户的体验感。主页还设置了几个主题面板,以此来满足不同类型用户的需求:News、Zaha Hadid、Zaha Hadid Design、Featured Project。


扎哈·哈迪德建筑事务所网站页面中使用的icon与其标识中的字母结构有着极强的统一性,符合建筑零件的特征,具备金属感。


zaha-hadid.com


zaha-hadid.com


项目分类根据不同的项目类型设置为四个类目,每个类目划分建设预算、建设地点、建设日期、建设规模等模块,精准清晰的项目分类和检索功能能够极大地压缩用户的检索时间,提高学习效率。



05

WONDER ARCHITECTS


神奇建筑研究室,由朱起鹏、王冲、王斯迪于2017年创立于北京。他们相信神奇建筑的存在,这些房子在用更有趣、更聪明的办法解决问题。他们的工作是找到或创造它们。他们相信普遍联系和地理决定论,热衷博物与考古,珍爱自然并对艺术充满好奇。他们是以建筑设计为兴趣的,激进的保守主义者。


wonder-architects.com


wonder-architects的Home页是一张传统坡屋顶的多层公寓剖轴侧插画,使用黑白线稿勾勒一个个有趣的灵魂并将他们毫无违和感的安置在场景中,整个页面不断轮播wonder-architects的重点项目名称,配合着带有颗粒感的灯光动效。


wonder-architects.com


wonder-architects.com


News页面将wonder-architects近期热点事件融合在插画场景中的显示屏内。


wonder-architects.com


Research页,展厅场景中横向排布着许多的透明容器,容器内是wonder-architects各个综合设计案例的概述插画,每当光标经过各个容器时,会交互式的呈现该设计案例的照片及名称。而令人感到惊喜的是,设计师对于没有设计案例的容器仍然做了有趣的动态处理。


wonder-architects.com


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
和我们在线交谈!