返回  

2020年的现代网站设计是什么?20个例子让你印象深刻(上)

2020/05/12 18:17:27 来源:小编

现代网站设计的特点是什么? 这是一个很常见的问题。


从客户在项目开始前提出需求,到设计师试图弄清楚如何结合最新和流行的元素,弄清现代网站设计的外观是我们在工作中所面临的最大的挑战之一。

实际情况是,你可能很容易说出现代网页设计不应该是什么样子的,当你看到某个过时的设计时,便会知道。 在这里,我们收集了20个典型的最新示例,以帮助你探索如何制作现代的网站设计


1.极简主义(Minimalism)

Minimalism

当然,你不必像Whiteboard那样精简,但是你必须承认极简风格的设计引人注目,并且几乎能够迫使你阅读屏幕上的每个单词。

极简主义是有效传达信息的绝佳工具。 这种风格为你要交流的内容提供了明显的重点。 技巧是确保元素具有足够的吸引力,在上面的这个例子中,使用的技巧就是一个有趣的加粗加大的字体。


2.大胆的颜色(Bold Color)

Bold Color

过去较为流行的中性色网站和灰色网站已经一去不复返了。 现代网站的特征是明亮,大胆的颜色。 从柠檬黄(上图示例)到紫色,绿色和粉红色,你所使用的调色板几乎没有禁忌。

技巧? 选择一种颜色并很好地使用它,从整体项目中汲取灵感。


3.大胆的版式(Daring Typography)

Daring Typography

2020年很有可能将是网站设计排版样式最为突破的一年。 你已经可以看到似乎已经打破了常规的设计,但看起来仍然很棒。

Online Women Biz是这些设计之一。 从巨大的W(我的意思是巨大的W)开始,W占据了整个屏幕的大部分。 徽标使用带有颠倒字母的时髦字体。 滚动图标放置在添加动效的文本环中,并且使用了多种字体和样式。

所有这些违反常规的方法,看起来都很棒,易于理解,并且具有可以正常使用的功能。


4.让人印象深刻的图像(Incredible Images)

Incredible Images

使用精心策划和制作的图片的网站与没有该元素的网站之间存在明显的区别。

前者更多的北使用于采用现代网页设计。 如上,请注意Squarespace的Dreamers页面设计中的每种颜色如何匹配(从主题的衣服到背景再到阴影)。 它强调了文本颜色,为图像中的文本元素创建空间。

所有这些都创造出令人惊叹的视觉效果。


5.简化导航(Streamlined Navigation)

Streamlined Navigation

简化的导航提供了网站设计最重要内容的入口以及概览。 它应包含关键页面或访问量最大的页面,它不应该包括网站上的每个页面。

没有什么比大型下拉菜单更能说明这是一个“过时”的设计了。


6.多个入口点(Multiple Entry Points)

Multiple Entry Points

尽管通常最好的做法是为用户提供内容选择,但对于某些内容类型,多个入口点可能更加有效的。 我们已经在分屏设计中看到了很多成功的案例,例如Tempo的设计(如上)。

注意主页上的按钮数。 用户可以从一开始就选择自己的旅程,每个入口点都是为不同的人设计的。 这是在单个页面上处理多个目标的好方法。


7.用户参与体验(User Engagement)

User Engagement

《The Bear and His Scarf》是一本在线故事书。 “页面”的设计类似于具有大量插图和少量单词的传统书籍页面,但还包含动画和交互式元素,以保持其趣味性。


8.有目的的空白(Purposeful White Space)

Purposeful White Space

空白应在设计中发挥作用。 Lars Franzen使用非常有目的的空白来引导用户浏览其作品集中的图像。

空白有助于构图并在屏幕上增加图像的吸引力。 在这里也有另一个目的——它是一种导航工具,可鼓励左右滚动。


9.有效的微文本(Actionable Microcopy)

Actionable Microcopy

微文本应该告诉用户接下来会发生什么,并且无需太复杂。

使用提供明确说明的可操作短语,例如Gracie Mansion的按钮(上方):预订旅程。 它是直接的,并提供清晰的说明。


10.大尺寸的英雄图像(Huge Heroes)

Huge Heroes

在现代网站设计方案中,越大越好。 比常规英雄图像区域大,可以与用户建立联系,并将其吸引到内容中。

这点,“Owl Design”使用了令人惊叹的图像以及一些意外的动画来吸引你(这是你可以凝视数小时的图像设计之一)。