你鼓舞了我是世界杯主题曲吗

by Kristoffer Andreasen

通过克里斯托弗·安德烈森

选择方法和鼓舞人心的网站列表 (The pick and choose approach and a list of inspirational websites)

In the past couple of years I have created quite a few websites. In the beginning, I hardly knew how to code or design. But I had a goal and a vision for my site. It was definitely a long term goal at the time but I knew it was possible. I have since created and redesigned the websites multiple times in a 1-year span. It’s just never quite done in your own opinion.

在过去的几年中，我创建了很多网站。 一开始，我几乎不知道如何编码或设计。 但是我对网站有一个目标和愿景。 当时肯定是一个长期目标，但我知道这是可能的。 从那以后，我在1年的时间里多次创建和重新设计了网站。 根据您自己的看法，从来没有完全做到这一点。

Setting out on a path to create websites has taught me that beautiful websites are a result of a wide variety of skills combined into one product. At first, I definitely neglected the design part and thought my own aesthetic sense would be sufficient to create the look and feel I was going for.

踏上创建网站的道路告诉我，精美的网站是多种技能结合在一起的产物。 一开始，我绝对忽略了设计部分，并认为我自己的审美意识足以创造我想要的外观。

I couldn’t have been more wrong. Design is a huge part of creating websites. In my opinion it serves one of the most important purposes for the website: conveying professionalism. A website is usually connected to a business and, in this case, the purpose is to convert visitors into customers.

我不可能错得更多。 设计是创建网站的重要组成部分。 在我看来，它是网站最重要的目的之一：传达专业精神。 网站通常与企业相关联，在这种情况下，其目的是将访问者转化为客户。

Professionalism is an extremely important indicator for me to become a customer. I’m definitely biased from working in the field myself, and I tend to consider beautifully crafted websites as a factor when deciding between products. And this could be for any product. Not just modern tech products. A beautiful website has an even bigger impact when dealing with smaller companies, as it might become an important advantage over competitors.

专业精神对于我成为客户至关重要。 我绝对不愿意自己从事这一领域，因此在决定产品时，我倾向于将制作精美的网站视为一个因素。 这可能适用于任何产品。 不只是现代科技产品。 一个漂亮的网站在与小公司打交道时会产生更大的影响，因为它可能会成为超越竞争对手的重要优势。

I learned the hard way I’m not the best designer. After creating what I believed to be finished products, I looked at them and concluded they looked nothing like the popular sites around the web.

我学到了不是最佳设计师的艰辛方法。 在创建了我认为是成品的产品之后，我看了看它们并得出结论，它们看上去并不像网上流行的网站。

After I acknowledged the difference, I started looking for the individual differences in the segments of the page. What made their websites look stunning, while mine was plain?

确认差异后，我开始寻找页面各部分中的个别差异。 是什么让他们的网站看起来很漂亮，而我的却是普通的？

The answer wasn’t just one thing. It was both individual elements, and the general composition of the page. My solution to this problem turned out to be an approach that stuck with me for a while.

答案不只是一件事。 它既是单个元素，又是页面的一般组成。 事实证明，我对这个问题的解决方案一直困扰着我一段时间。

选择并选择您喜欢的元素 (Pick and choose the elements you love)

The solution for me was to create a folder with inspirational sites. Not because all these sites created a perfect design but because they managed to style individual elements beautifully. My inspirational sites have primarily been selected based on their landing page. This does not mean the other pages on the sites aren’t executed beautifully. Have a look around the sites and find inspiration for your own sites.

对我来说，解决方案是创建一个包含励志网站的文件夹。 不是因为所有这些网站都创建了完美的设计，而是因为它们设法对单个元素进行了精美的样式设计。 我的励志网站主要是根据其目标网页选择的。 这并不意味着网站上的其他页面执行不佳。 环顾四周，寻找自己网站的灵感。

我的一些励志网站 (A few of my inspirational websites)

Let’s dive into my list of 8 inspirational sites, and discuss which elements make these sites so enjoyable.

让我们深入研究我列出的8个鼓舞人心的网站，并讨论哪些元素使这些网站如此令人愉悦。

Product Hunt and Desk both have beautifully styled individual elements on their landing pages.

Product Hunt和Desk的着陆页上都具有精美样式的单个元素。

Product Hunt has a few features I find specifically beautiful. The subtle hover effects on the featured products and the border radius invite the user to explore the site.

Product Hunt具有一些我认为特别漂亮的功能。 特色产品上的细微悬停效果和边框半径邀请用户浏览站点。

Apart from these elements, the general layout is surprisingly simple and effective. Users simply cannot get lost on the page, as all products are featured as a popup in the app.

除了这些元素之外，总体布局令人惊讶地简单有效。 用户不会在页面上迷路，因为所有产品都在应用程序中显示为弹出窗口。

Desk.com features multiple elements I would recommend ‘stealing’ for your own website. The testimonials on the landing page are beautifully executed. Subtle animation with a beautifully styled logo bar and a simple color for each customer. It can be pretty tricky to recreate but will provide an excellent challenge in a learning process.

Desk.com具有多个元素，我建议您为自己的网站“窃取”。 登陆页面上的推荐书精美执行。 微妙的动画效果，带有精美的徽标栏和适合每个客户的简单颜色。 重新创建可能非常棘手，但在学习过程中将带来巨大挑战。

Desk continues to excel at using a variety of colors on their product page desk.com/product. It shows how gradients can be included to provide awesome backgrounds for information display.

Desk继续在其产品页面desk.com/product上使用各种颜色方面表现出色。 它显示了如何包括渐变以提供令人敬畏的背景来进行信息显示。

Infogram and Linkfire provides another source for great inspiration. I am usually not a big fan of parallax effects as it tends to be misused on a lot of sites. However, Infogram really captures a simple way of using it on a single colored background compared to the regular image parallax effects. Apart from this, they managed to create an individual style in all the elements. They have included stylish carousels and individual gifs that load on hover. All elements that drive the user to increase interest in the product.

Infogram和Linkfire提供了另一个启发灵感的来源。 我通常不太喜欢视差效果，因为它经常在许多站点上被滥用。 但是，与常规的图像视差效果相比，Infogram确实捕获了一种在单色背景上使用它的简单方法。 除此之外，他们设法在所有元素中创造出个性化的风格。 其中包括时尚的轮播和悬停时加载的单独gif。 促使用户增加对该产品兴趣的所有要素。

Linkfire initially has the look and feel of a generic template site. After the section above the fold, a few interesting designs are shown. The application functionality is shown on an iPhone, where hover effects display the individual parts. Furthermore, the next section features live data with a simple parallax background effect displaying a grid of records. Both beautifully executed.

Linkfire最初具有通用模板网站的外观。 折叠后的部分之后，显示了一些有趣的设计。 该应用程序功能显示在iPhone上，其中悬停效果显示各个部分。 此外，下一节将介绍具有简单视差背景效果的实时数据，并显示记录网格。 两者都执行得很好。

In addition to the individual elements on the page, both websites feature a elegant navigation bar transition. The sites start with a transparent navigation bar that gets a visible on scroll. This allows the websites to fully leverage space above the fold.

除了页面上的各个元素之外，两个网站还具有优雅的导航栏过渡。 这些站点以透明的导航栏开始，该导航栏在滚动时可见。 这使网站可以充分利用首屏上的空间。

Two more great sources for inspiration. MapBox provides a very extensive landing page showcasing an abundance of features included with the software. One of the things that stand out is their use of gifs to display the functionalities. They managed to keep the gifs simple and relevant for the product. Furthermore, all the ‘icons’ or circle images used are custom to their site. Generic free icons found around the web does not really cut it when it comes to creating your own brand through your website.

另外两个启发灵感的重要来源。 MapBox提供了一个非常广泛的登录页面，其中显示了软件随附的大量功能。 突出的事情之一是它们使用gif来显示功能。 他们设法使gif文件简单且与产品相关。 此外，所有使用的“图标”或圆圈图像都是针对其站点定制的。 通过网站在网站上创建自己的品牌时，在网络上找到的通用免费图标并不能真正解决问题。

Another great feature is one of the bottom sections, where they feature the different industries with Mapbox implementations. This involves a subtle animation when switching between browser images that easily could be used for other websites.

另一个重要功能是底部部分之一，其中介绍了使用Mapbox实现的不同行业。 在浏览器图像之间进行切换时，这涉及到微妙的动画，而这些图像很容易用于其他网站。

The National Trust for Historic Preservation is an outlier among these software companies. However, it still features a beautiful web design. The initial slow zoom on the background image is the first element executed with grace. Generally throughout the website, they managed to stick to simple effects that all contributed to usability without comprising the design. In addition to the effects, they have beautiful components. The image captions are all different, which emphasizes the different nature of their projects. Lastly, they tend to abandon straight lines to give the site a little more edge. This works well with the simple layout.

在这些软件公司中，国家历史保护基金会是一个例外。 但是，它仍然具有漂亮的网页设计。 对背景图像的初始慢速缩放是第一个以宽限期执行的元素。 通常，在整个网站上，他们设法坚持简单的效果，而这些效果都对可用性有所贡献，而没有包含设计。 除了效果外，它们还具有漂亮的成分。 图像标题都是不同的，从而强调了它们项目的不同性质。 最后，他们倾向于放弃直线，以给该部位更多的边缘。 这适用于简单的布局。

Pexels has been one of my go-to places for high quality stock images. They managed to create exactly what I was looking for. A simple design to get me the right images fast. There is no excess functionality to disturb and the grid is flawless. The image grid is utilized on a large number of popular websites but Pexels manages to keep it distinctly simple. This kind of grid layout is definitely worth recreating in your own projects.

Pexels一直是我追求高品质库存图像的地方之一。 他们设法创造出我想要的东西。 一个简单的设计可以快速为我提供正确的图像。 没有多余的功能要打扰，并且网格是完美的。 图像网格已在许多受欢迎的网站上使用，但Pexels设法使其变得非常简单。 这种网格布局绝对值得在您自己的项目中重新创建。

Treehouse has embraced simplicity. The landing page features a simple call-to-action form above the fold, which definitely has an advantage over a simple image and a button in my opinion. Apart from this, their website features a nice and delicate navigation bar animation that invites the user to check out the free trial. For a great example of testimonials, check the beautifully executed stories page with simple animations and combinations of text and images.

树屋已经接受了简单性。 着陆页在首屏上方有一个简单的号召性用语表格，在我看来，它绝对比简单的图像和按钮更具优势。 除此之外，他们的网站还具有精美精致的导航栏动画，邀请用户签出免费试用版。 有关推荐的一个很好的例子，请通过简单的动画以及文字和图像的组合检查执行精美的故事页面。

All these designs are beautiful in my own opinion. You might have a completely different opinion on the design and layout of a website. The important thing is the approach to creating sites. Find a list of inspirational sites and save them. Pick and choose the individual elements you love on other sites and recreated them with your own unique styling and content. Apart from being a way to create beautiful sites, it is an easy way to find challenges to improve your programming skills.

我个人认为所有这些设计都很漂亮。 您可能对网站的设计和布局有完全不同的看法。 重要的是创建网站的方法。 查找鼓舞人心的站点列表并保存。 在其他网站上挑选您喜欢的单个元素，然后使用您自己独特的样式和内容重新创建它们。 除了创建漂亮网站的方法之外，它还是发现挑战以提高编程技能的简便方法。

Happy coding!

编码愉快！

翻译自: https://www.freecodecamp.org/news/the-pick-and-choose-approach-and-a-list-of-inspirational-websites-361b2048c114/

你鼓舞了我是世界杯主题曲吗