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.

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.

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

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.

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 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.

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.

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.

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.

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.

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.

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!