网站design is changing. While some constants remain — such as the need for relevant, timely, and engaging content — additional elements that can boost website impact continually emerge.
其中一些元素有助于讲述故事并解释您公司的本质，而另一些元素则立即捕获用户兴趣或改善任何设备上的体验。raybet电子竞技不需要同时使用每个元素（这可能会导致混乱且令人困惑的体验），但是选择与您的品牌和网站目标保持一致的特定元素可以帮助增强整体影响。
为了帮助您缩小关注点并为您的网站找到最佳元素，我们正在分解现代最重要的元素网站设计you can implement to improve your site's performance.
11现代网站设计元素
- 独特的版式
- 引人入胜且敏感的英雄图像
- 背景视频
- 半片设计
- 汉堡菜单
- High-quality Product Images
- 卡设计
- Feature Videos
- 移动友好的布局
- White Space
- Speed Optimization
1. Unique Typography
大多数公司都有特定的字体或版式，用于帮助客户立即确定他们与竞争对手。近年来，设计师可以访问更多的字体选择，从而使企业更容易通过排版更准确地表达其品牌。
例如，纽约客通过使用独特的字体立即被认可Adobe Caslon Pro。
Why is unique typography useful in modern web design?
Typography is a singular design element that gives a uniform look across each page on a website. For instance,The New Yorker网站leads visitors from one section to another based on the typography and font sizes.
在创建公司的品牌时，您在排版方面的选择raybet电子竞技会表明您代表的内容有微妙的提示。您的业务很有趣还是认真？功能或信息性？无论您选择哪种字体，都要确保您的设计师在浏览器和计算机上考虑其适用性。选择普通浏览器和计算机不支持的字体可能意味着您的网站会在不同的设备上尴尬地显示。
2.引人入胜且敏感的英雄图像
您不必超越受欢迎的出版网站Medium看看一个伟大的英雄形象的例子。
图片like this onedo away with the concept of above and below the fold, instead offering a singular point of view. By focusing on just the image with text rather than a CTA or social buttons, Medium creates a strong visual experience that encourages you to scroll down to read more.
英雄形象也而声名狼籍n placed in the background with text and other content overlaid on top. Regardless of the approach you utilize, large images can help visually tell your story without having to rely on just text.
Why is it useful?
英雄图像为您的网站设定了基调，而无需文本或视频 - 正确的图像可以立即使访问者了解您的品牌的意义，您的工作或使您与众不同的内容。结果，既可以集思广益英雄形象的想法并从多个来源获得反馈，以查看哪个图像带来最大的影响，这是一个好主意。
3. Background Videos
Videos that automatically play in the background can add a lot of intrigue to a page. They can be used to tell a story and significantly reduce the amount of other content that is needed to explain your business.
拿Wistia的例如，网站。当您降落在他们的主页上时，大型视频会自动开始在后台播放，然后单击“播放”按钮，您可以更深入地了解公司：raybet电子竞技
This background video serves as a brilliant way to get the visitor to click-through and stay on the page longer.
Why is it useful?
Background videos focus on enticing the visitor from the moment they land on your page. The video allows your visitor to understand the key points about your company without ever having to read a single line of text.
此外，处理视频60,000 times faster与文本相比，我们的大脑。尽管人们通常不愿阅读大量文字，但视频看起来毫不费力，可以很快消费。这也有助于连接速度正在增加，移动设备尺寸正在增长，从而为更好的视频体验提供了增长。
4.半静电设计
Simply put, flat design is any element that does not include or give the perception of three dimensions, such as shadows. Not only is flat design easier for users to understand, but it can also load more quickly on websites without complicated or overly technical elements.
Many organizations — both large and small — have shifted from realistic skeuomorphism to flat design. However, companies like Uber have put their own spin on the style by adding subtle shadows and dimensions.
正如您在下图中看到的那样，由于周围的阴影而没有过多，图形元素具有深度感。
Why is it useful?
扁平设计可帮助访客更快地了解您的内容，并添加一些深度元素可以使其栩栩如生。无论您是使用扁平设计还是利用阴影和其他元素来完全设计网站，在整个网站上保持一致非常重要。确保您的主页，产品页面和网站的任何其他关键部分都利用相同的设计线索，以便访问者可以立即了解他们正在查看的内容。
5. Hamburger Menus
Most websites have long menus of options to choose from. The advantage of this is that the menu can take the visitor directly to where they want to go. The disadvantage is that they generally take up a ton of valuable screen space. The hidden, or hamburger, menu changes this. This condensed menu saves space and is intuitive for users to navigate.
Wondering why it's called a hamburger menu?
如果您使用自己的想象力，那么彼此堆叠的三条线看起来像两个汉堡包和一个小馅饼。聪明的。
Why is it useful?
您网站的页面应该为用户带来清晰的途径。删除繁忙的导航使体验更清洁和无注意。这增加了用户找到完成所需操作所需的信息的可能性。
6. High-Quality Product Images
许多B2B网站开始在其网站上显示大型产品图像，以突出其产品的不同功能或部分，这并非偶然。
为了让您更好地了解我们所说的内容，让我们看一下产品页面HubSpot的营销枢纽：
此页面上有一个大型特色图像，当您向下滚动时，您会发现其他深入的产品图像。这些图像也是响应迅速的，旨在确保为来自不同设备的观众提供优化的体验，如我们前面提到的那样。
Why is it useful?
High-quality product images help designers highlight different features of a product in a more efficient and effective way.
这种方法通过提供机会突出最有价值的作品来增强功能的好处。
这些大图像也对扫描。它们通过通过图像而不是单词传达不同的产品功能来帮助访问者对不同产品功能的作用深入了解。
7.卡设计
With the rise of Pinterest, designers and marketers alike have become fascinated with cards. Individual cards help distribute information in a visual way so the visitors can easily consume bite-sized pieces of content without being overwhelmed.
Miiryia的主页是行动中卡设计的一个很好的例子：
通过将不同的内容分解为卡，用户可以选择他们想要扩展的文章。这有助于使主页保持干净和井井有条，而无需依赖大量文本。
Why is it useful?
在B2B和B2C网站上，卡设计变得越来越受欢迎，因为它有助于为用户提供易于消化的信息。在您的网站上使用此设计可以帮助突出多个产品或解决方案。
请记住，您的卡应该响应迅速。这意味着，随着屏幕尺寸变小或更大，所显示的卡的数量和大小应相应适应。
8.功能视频
In addition to background videos, short product or feature videos are also on trend as they can be used to highlight a specific use case. These short videos are great at bringing your solution to life, while not overwhelming the visitor with a long experience that they must sit through.
一个很好的例子来自Invision。They display this short illustrator of how easy it is to use their product by dragging-and-dropping a design directly on their homepage:
Why is it useful?
B2B公司受益于解释其产品的视频，以帮助积极影响买方的决策过程。
9.移动友好的布局
First-generation websites were designed for desktops. As a result, they were built to accommodate larger monitors and point-and-click mouse control. The rise of mobile devices, however, means that web traffic may come from multiple sources — and your website must deliver the same experience regardless of user device type.
在实践中，这意味着创建对移动友好的网站布局，以利用响应式网络设计原理，该网站允许诸如图像，文本和用户界面（UIS）之类的网站元素自动缩放并根据用于访问网站的设备进行调整大小。
Why is it useful?
移动设备流量现在的帐户超过54 percent of all web traffic worldwide。This means that if your site isn’t mobile-friendly, you could be losing up to half of all prospective customers.
考虑智能手机用户访问的桌面友好网站。如果文本，图像和按钮无法调整以匹配触摸屏控件和较小的屏幕尺寸，那么潜在客户几乎不可能找到他们想要的东西 - 经过一些错误关注，他们可能会将业务带到其他地方。
10.空白空间
空白空间是简约的网页设计的一个元素，但现在是有效的现代现场框架的关键特征。通过平衡诸如链接，文本和视频与相似数量的空白之类的内容，用户自然会吸引您网站的关键方面。尽管您需要的空白量没有硬性标准，但一个好的经验法则是在每个内容元素之间至少创建一些空白。
Why is it useful?
网站navigation plays a critical role in user satisfaction. If visitors struggle to find your product or contact pages, they’re far less likely to click through and begin the conversion process.
White space helps focus user attention on the elements that matter most to your business. For example, if you have a featured product image or video at the top of your homepage, separate it from further content with white space. This helps it stand alone and highlights its importance compared to the rest of your site. If you surround it with visually noisy elements, however, the focus is quickly lost.
11.速度优化
Having an engaging, content-rich website won’t help drive conversions if your site loads slowly and users point their browsers elsewhere. As a result, it’s critical to optimize all elements of your site for speed to reduce the amount of time between click and content.
在实践中,这意味着优化所有图片到balance image quality and file size. For example, while PNG images offer higher quality and transparency, they’re much larger than JPEG images; in most cases JPEGs offer the best balance between speed and quality. GIFs, meanwhile, are ideal for animated images but use fewer colors, making them less-than-ideal for static images.
压缩网站上托管的任何文件也是一个好主意 - 许多现代压缩工具可以显着降低文件大小而不会相称的功能损失。站点所有者还应考虑其托管环境：例如，专用或VPS托管通常会提供比共享托管解决方案更快的站点加载速度。
Why is it useful?
According to statistics fromGoogle，随着页面加载时间从1秒增加到10秒，访客的反弹率上升了123％。搜索巨头还指出，尽管转向了更强的4G连接，但“大多数移动站点仍然很慢，并且肿胀的元素过多。”
As a result, even small investments into website speed optimization can pay significant dividends, especially since landing page speed is now used by Google as a ranking factor for mobile searches and Google Ads.
风格元素
现代网络设计需要定期评估，以确保您的网站提供引人注目的视觉效果，引人入胜的内容，并为用户提供统一的体验，无论设备如何。上面列出的元素提供了一个可靠的起点，可以创建时尚，精简和快速的网站，以捕获用户兴趣并有助于驱动转换。
Editor's note: This post was originally published in August 2018 and has been updated for comprehensiveness.
