页面布局让footer居页面底部_8个页面布局独特的网站设计赏析

很多网站仍然在使用老旧的页面设计,比如国内一些企业官网,万年不变的相类似的模板,外国的则是hero页面,带CTA按钮,三栏式的布局。这些设计不能说是不好的设计,很实用,用户能够预测展示的内容,也容易找到需要的内容。但是正因为可预测,用户没有新鲜感,没有期待,所以我们找了一些不仅打破常规,也依然有良好用户体验的网页设计。

1. Heco Partners

网址:http://helloheco.com/

布局设计:流动的动态线条加滚动指示箭头,滚动页面后展示一段介绍,然后进入交错的两栏项目展示布局。

79e951b6e9eb77130a5d355f4253cfc6.png

Heco Partners首页的流动线条波浪吸引您进入他们的网站

当我们访问这家位于芝加哥的设计公司官网时,您会看到“We turn information into experiences that people care about”这段文字展示在波浪之上。该网站展示了如何将设计案例与背景信息相结合。

2. The Goonies

网址:http://the-goonies.webflow.io/

布局:头部采用全屏图像,滚动页面后进入一系列网格布局的页面

af9a7801027371debe97cc6dd3868e76.png

约瑟夫·贝里(Joseph Berry)决定将他最喜欢的电影之一(1980年代的经典电影《The Goonies》)转变为宣传风格的网站。The Goonies获得了Awwwards的“年度最佳提名奖和网站奖”,这是用滚动的方式讲故事的一个很好的例子。

55076bc25eb41106f9ba5e614b0ec8ff.gif

3. Nelu Cebotari’s portfolio

网址:http://nelucebotari.com/

布局:变化后的三栏设计,可转换为滚动显示的导航菜单

3701473d0a9d64bd53b9e72fa0eb12e6.png

设计作品集不仅为您提供了展示所从事的项目,而且还可以通过页面本身展示您的设计技能。设计师Nelu Cebotari就是这样设计自己的个人网站。

网站使用的黄色背景可能会有点刺眼,但他为背景添加了柔和的背景纹理,变得不那么刺眼。

该网站设计的独特部分是导航的设计。将鼠标悬停在每个按钮上都可以看到一个从底部向上滑动的盒子。这些方块中的每个方块都有一些文字,提示您了解更多或保持联系。

1cbb88ae50284e41ee4bcd6f3b7d798f.png

4. Soul Jazz Records

网址:https://soundsoftheuniverse.com/

布局:基于网格设计的实体唱片存储体验的复制品。

d172db8cc3fbea7b89e7648517c719ea.png

进入这个网站,仿佛进入了一家实体唱片店,在这里,你可以找到晦涩的放克,爵士乐和朋克音乐,听到可能不会引起太多关注的音乐。

他们的网站很好地代表了他们发布的许多流派。网站还有很多关于艺术家以及声音样本的背景信息,更全面的了解他们的声音。

3cfc54b183e06e153cde17f8c88da2d8.gif

5. San Francisco Museum of Modern Art

网址:https://www.sfmoma.org/

布局:全屏背景图片,带有指示性的基本链接。

45485331506c48e15155e7860d95268c.png

博物馆里的艺术激发和吸引着我们的想象力。他们的网站应该做同样的事情。不过大多数博物馆网站在炫耀特色作品,宣传当前展览以及提供重要的游客信息(例如营业时间和票务信息),而SFMOMA在展示这些信息方面做得更好,而且还有不一样的体验。

6. R2D3

网址:http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

布局:两列Z模式,带有大量动画图。

f7c4bac8fe1ffac0070fda5bb15cb093.png

网站是一种可以教学的工具,R2D3利用网站来图解机器学习。

R2D3通过“机器学习的可视化介绍”来科普。通过一系列动画,他们能够以相对简单的方式传达这个复杂的概念。引人入胜的体验学习知识比盯着教科书中的单词和数字更有趣。

ddcd0b71dab04b918a6b4ff994fa0c0c.gif

R2D3使用引人注目的动画向我们展示了机器学习的工作原理

7. Lauren Wickware’s portfolio

网址:http://laurenwickware.com/

布局:全面屏头部页面切换到分屏显示设计项目。

b17e9499d3b50891d5cb01bbf1817953.png

这是籍设计师Lauren Wickware's的个人作品网站。多维滚动创造出令人惊奇的平滑和引人入胜的体验。

8. Poulos Collective

网址:https://www.poulos.co/

布局:砖石风格的布局,带有不同的卡片模块,随着滚动而逐渐消失。

5ea47bab95c654f39a71d7a0eb9a65a9.gif

Poulos Collective是一家专门从事UX设计和策略的设计咨询公司。它的站点提供了干净简单且最重要的功能体验。该网站的简单性是由Stefan Poulos创建的。颜色令人愉悦,文本易于阅读,并且轻巧的外观和感觉使加载速度极快,从而提供了出色的用户体验。

寻找灵感并进一步推动自己的设计

作为设计师,我们知道客户经常只需要经过实践检验的真实解决方案。而且,我们可以轻松满足他们的要求。完全按照客户的想法设计没有问题,但是设计中还有很大的空间可以尝试不同的东西。通过采用非传统的方法,我们可以提出令人难忘的网站设计,并且不会在统一的海洋中迷失方向。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要了解一下Flex布局的基本概念和属性。Flex布局是一种基于容器和项目的布局模型,它可以自适应不同的屏幕尺寸,并且可以轻松地实现水平和垂直中等效果。以下是一个简单的Flex布局的代码示例: HTML代码: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` CSS代码: ```css .container { display: flex; justify-content: space-between; align-items: center; } .item { width: 100px; height: 100px; background-color: #ccc; } ``` 在上面的代码中,我们使用了`display:flex`来定义容器的布局模式。`justify-content`属性可以定义项目在主轴方向上的对齐方式,这里我们选择了`space-between`,表示项目之间平均分配空间。`align-items`属性可以定义项目在交叉轴方向上的对齐方式,这里我们选择了`center`,表示项目在交叉轴方向上中对齐。 接下来,我们来实现一个产品页面的布局。假设我们的产品页面包含一个顶部导航栏、一个左侧菜单栏、一个主要内容区域和一个底部信息栏。以下是一个简单的Flex布局的代码示例: HTML代码: ```html <div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> ``` CSS代码: ```css .container { display: flex; flex-direction: column; height: 100vh; } .header { height: 60px; background-color: #f5f5f5; } .sidebar { width: 200px; background-color: #eee; } .content { flex: 1; background-color: #fff; } .footer { height: 40px; background-color: #f5f5f5; } ``` 在上面的代码中,我们使用了`flex-direction:column`来定义容器的布局方向为纵向布局。`height: 100vh`用于设置容器的高度为视口的高度。`header`和`footer`分别设置了固定高度,`sidebar`设置了固定宽度,`content`的`flex:1`表示它会自动填满剩余的空间。 这样,我们就完成了一个简单的产品页面的布局。当然,实际应用中还需要更多的样式和细节处理,但Flex布局可以让我们轻松地实现各种复杂的布局效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值