10 多个开创性的最佳架构网站设计
已发表: 2021-08-12对于建筑公司来说,需要有影响力和引人入胜的演示是不容商量的,因为他们在高度视觉化的行业中运营。 由于网站可以成为他们的主要营销工具,难怪本文中介绍的架构企业认真对待他们的网站设计。
毕竟,75% 的用户根据他们网站的外观来判断企业的可信度。
在这里,我们列出了 10 多个最佳架构网站设计示例,这些示例具有构建良好的美学、功能和导航——高质量网页设计的基础。
目录
- 由 Page Black 设计的 Artikon
- Marme by sphynx.studio
- MTG Interieur by Digital Cover
- 米格尔·特里亚斯 (Miguel Trias) 的 E5 控股公司
- 豪斯豪宅 by Kay Jilesen
- Wunder Werkz 办公室的未来
- Romb Studio 的 Rise Ap.Art
- 全球实验室的 Evernest
- Favre+Guth by TWKS
- Moddit 的 Abro
- 四十八点一的空状态
1. Page Black 的 Artikon

突出特点:
- 品牌视觉效果
- 独特的排版
- 快速加载时间
Artikon 是一家挪威建筑和工程公司,其网站和新标志由 Page Black、他们的同胞和品牌专家设计。
该公司的工程风格从现代建筑美学中汲取灵感:锐利的线条、裸露的表面和最小的形状——所有这些都转化为他们的建筑网站设计。
正如预期的那样,房屋、建筑物和其他建筑的图像是网站视觉效果的主要贡献者。 可互换的黑白背景面板采用清晰的无衬线字体,为该公司的建筑品种赋予品牌感。
Artikon 网站的主菜单导航位于右上角,可以快速打开以显示一系列服务和其他公司页面。
导航的快速加载特性是整个网站反复出现的主题:它的外观不会影响页面加载时间,因为一切都以可用性和方便的用户体验为导向。
2. Marme by sphynx.studio

突出特点:
- 粘性左侧导航
- 全面的项目组合
- 最小的设计依赖于负空间
Marme 是一家位于法国西海岸 l'Île de Ré 的木工和翻新店。 其网站由 sphynx.studio 开发和设计,体现了品牌对细节的关注和独特的自然魅力。
该网站打开一个单屏页面,其中包含三角形屋顶的高分辨率照片,在蓝天背景下,其几何精度形成类似于现代绘画的图像。 它被一个白色的负空间框起来,它的左侧有一些导航链接。
当用户浏览以他们过去作品为特色的令人羡慕的页面选择时,菜单会保留在页面上。 这些页面主要由按 3 列网格组织的图像组成,并展示 Marme 的各种内部和外部解决方案。
这种特定架构网页设计的简单性和精致性导致了易于遵循和理解的交互式组合。
同样,这些良好架构网页设计的基本原则也适用于网站的移动版本,其中主菜单和品牌切换到页面顶部。
3. MTG Interieur by Digital Cover

突出特点:
- 微动画
- 柔和的颜色
- 动态用户界面
法国建筑工作室/品牌机构配对的另一个特色是来自里昂的室内设计业务 MTG Interieur 和网页设计专家 Digital Cover。
白色、黑色和粉红色的独特调色板迅速引起了人们的注意。 该网站的艺术方向是由 MTG 内部作品的惊人图像和普遍的圆形形状驱动的,这些圆形描绘了公司创作的欢迎性质。
在网站的某些部分时尚地使用颜色叠加增强了信息的内容和重要部分。
全屏视频让访问者沉浸在 MTG 的专业知识和工艺中,这进一步改善了用户旅程。
衬线和无衬线字体为流畅、引人入胜的网站带来优雅和精致,从而在所有设备上提供出色的导航和可读性。
4. Miguel Trias 持有的 E5

突出特点:
- 独特的大字体
- 逐渐加载内容以加快网站速度
- 全屏导航
E5 Holding 的网站由来自马略卡岛的多学科设计师 Miguel Trias 设计,使用白色背景将主要内容框起来并保持在一起。 在该框架内发生的事情非常引人注目且富有创意。
折叠上方的开场屏幕具有全宽视频背景,其顶部是专为该客户设计的独特字体的醒目副本。
向下滚动会引导访问者进入用户旅程,该旅程具有以粗体突出显示的大型无衬线字体,带有矢量插图、多样但互补的颜色、总部照片和客户推荐。
在右上角,访问者会发现一个加号,打开占据整个屏幕的综合主菜单导航。 它指向网站的所有重要部分,促进访问者的服务定位和转换。
5. Kay Jilesen 的 HOUS 豪宅

突出特点:
- 很多空白
- 图片优先于副本
- 网站的轻量级感觉
Kay Jilesen 是荷兰建筑、施工和翻新实体 HOUS 网站背后的创意力量。
这个建筑网站的灵感大多是最小的,并利用了大量的白色空间,它的灵感依赖于简单的三色调色板(白色、黑色和铜色),同时在着陆页的折叠上方具有醒目的图像。
所有元素,包括社交媒体图标、导航和品牌标志,都采用清晰的无衬线字体。 向下滚动,访客会解开一个品牌故事,强调客户利益和精心挑选的项目组合。
每个新页面都以流畅的动画打开,显示每个住宅项目的高分辨率图像。 传统的顶部导航是粘性的,并包含突出显示的“联系”按钮,以实现更有效的潜在客户转换。
6. Wunder Werkz 的办公室的未来

突出特点:

- 复古调色板和大排版
- 一页的故事讲述和用户旅程
- 互动元素和自动播放视频
The Future of Office 是位于科罗拉多州丹佛市的 TAXI 的网站。其目的是为来自不同行业的公司创建协作工作空间,包括 IT、建筑和设计。
他们的网站由 Wunder Werkz 构思和开发,是一页用户旅程中的一项练习,将复古美学与现代功能相结合。
多色调色板使用柔和的颜色,并随着用户向下滚动漏斗而变化。 从标题和全屏视频复制到场地和位置图像的地图,每个视觉元素都明确而有目的地变大。
一个单一的号召性用语是右上角的粘性圆形按钮,邀请用户通过与他们联系或在 Instagram 上关注他们来加入 TAXI。
7. Romb Studio 的 Rise Ap.Art

突出特点:
- 圆角边缘和斜线
- 出色的导航流动性
- 黑色和白色环境中的黄色口音
Rise Ap.Art 是一个由来自罗马尼亚布加勒斯特的建筑商、建筑师和设计师组成的团队,以创造“独特的住宅项目,让城市中心充满活力”而闻名。
他们的品牌和传播机构 Romb Studio 的网站是一页式的,由流畅的斜线、背景视频(整个列表中反复出现的元素)、矢量插图和粘性侧边栏 CTA 组成——全部采用独特的黄色、黑色和白色调色板。
当用户向下滚动网站时,他们的住房解决方案的高分辨率照片伴随着简短的、以利益为导向的信息。 这种提升的现代设计利用了轻巧的无衬线字体、圆形和光滑的图像动画加载。
尽管是一页网站,Rise Ap.Art 也有一个粘性导航菜单,其中包含一个语言切换按钮(罗马尼亚语和英语)、一个共享按钮和一个汉堡菜单图标,可在整个页面上打开导航快捷方式。
8. 全球实验室的 Evernest

突出特点:
- 伟大的内容组织
- 带有每个楼层描述的选项卡模块
- 身临其境的360度房屋参观
Evernest 是位于德国汉堡市的一处豪华房地产。 其专用网站由品牌和设计机构 Global Labs 制作。
这个建筑网站设计示例是该物业的全面展示,包括时尚的排版、标签模块、可点击标签、具有运动效果的高分辨率图像、平面图等等。
由于巧妙地使用了黑白背景面板,为每个主题部分提供了区分,因此综合主页不会陷入难以理解的混乱状态。
当用户向任何方向滚动时,主导航会与用户保持一致,甚至可以提供对物业的 360 度游览!
右下角是一个粘性 CTA 按钮和转换点,为用户提供“立即请求公开”。
9. Favre+Guth by TWKS

突出特点:
- 当鼠标悬停在不同对象上时,响应式鼠标光标会改变形式
- 图片、CTA 和链接上的蓝色突出显示
- 与整体设计相得益彰的优秀排版
Favre+Guth 是一家于 1967 年在瑞士苏黎世成立的建筑公司。 他们的多学科方法反映在他们的网站设计中,由 TWKS 网页设计机构提供。
网站首页使用简单的无衬线字体,整体外观让人联想到二十世纪中叶的包豪斯运动。 锐利的边缘和大块的内容与带有宝蓝色调的低调米色背景重叠。
折叠上方的背景动画为网站提供了活力。 独特的鼠标光标采用大蓝点的形式,但当悬停在可突出显示的部分时会变成目标图标。
右上角的导航会打开一个全屏菜单,其中包含指向与网站主页具有相同风格的页面的链接。
10. Moddit 的 Abro

突出特点:
- 黑白块的相互作用
- 很棒的排版
- 简单导航
Abro 是一家荷兰公司,提供全方位服务的建筑和室内解决方案。 他们的网站是由 Moddit 创意机构设计和开发的。
Abro 的建筑网站设计完全是关于黑暗主题和负空间的相互作用,因为黑白块将内容安排在合乎逻辑且令人赏心悦目的部分。 甚至号召性用语也融入了网站,用细的分隔线表示它们的存在。
与此列表中的前一个条目类似,圆形鼠标光标在悬停在不同元素上时会改变形状——甚至在浏览画廊时采用某种可操作的副本,如“Look At”。
排版和导航无缝集成到网站的结构和美感中——后者绝对像 Abro 的解决方案一样现代,而另一个则是非破坏性和直观的。
11. 四十八点一的空状态

突出特点:
- 引人注目的消息
- 两栏滑动内容布局
- 详细的产品展示
Empty Space 是国际知名的照明产品生产商,其产品决定了其网站的独特性质,由四十八点一公司构思和实现。
该网站主要面向寻求高端照明解决方案的室内设计专业人士,这些解决方案可以为每个客户定制不同的东西。
其设计紧跟品牌名称所暗示的关键品质:当使用不同设备浏览网站时,适应性、元素并置和变革潜力都显而易见。
sans-serif Avenue Mono 字体“风度翩翩且温暖”,但暗示着“人性化和高度自动化”的东西。 该网站柔和的调色板受到彩虹蓝色和红色元素和重音的挑战。