選擇方法和鼓舞人心的網站列表 (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!

編碼愉快！