web-design-photo

Three Well-Designed Websites

I thoroughly enjoyed my search of three well-designed websites, as it forced me to rethink what makes ‘good’ web design. During the process, a few websites came into mind when thinking of possible examples of good design. Though interestingly, after playing around with these websites, I realised all of my initial examples could only really be considered well-designed purely in terms of aesthetics.

For example, the landing page of Otta, a job searching platform for tech-related jobs, is beautifully designed and is immediately very eye-catching. The abstract donut-like shapes move up and down very seamlessly across the background as you scroll, then when users scroll down each section of the landing page, the background changes colour with each section, making this a fun and engaging welcome to the site.

Otta’s Landing Page

However, unlike most job searching websites, to use the website itself you must either log in with a Google account, or create an account with Otta to view job listings, despite being free to use. Straightaway, this deters users like myself away from using the site, as many users understandably will not want to submit personal details from the get-go. With this in mind, I decided to look at websites that offer a better overall user experience, as opposed to just clever graphic design or purely visually-pleasing user interfaces.

Treehouse

A website I’ve used for a few months now is Treehouse, an online platform for learning code and design skills. I’ve found Treehouse’s website to have an intuitive and simple design, along with well-thought-out information architecture. Its modern, clean-looking interface gives a nice welcoming feel to subjects many beginners may find intimidating.

Treehouse’s Landing Page

The landing page’s navigation bar allows users to browse their various courses, as well as have a free trial to get a feel for the full functionality of the platform. After scrolling down from the page above, users are greeted with an option to take a quiz to determine which course suits them best, a FAQ section, as well as a ‘Free Trial’ button.

Once signed up, users can see various ‘Tracks’, for example: ‘Front End Web Development’. Sometimes, the content of different tracks can overlap, for example: ‘CSS Basics’ appears in tracks: ‘Front End Web Development’ as well as ‘Web Design’. What I like most about this feature is that it updates other tracks, e.g. ‘Web Design’ when you have completed a lesson that appears in your current track, e.g. ‘Front End Web Development’, so you don’t have to repeat any lessons if you decide to change tracks later on, which is a great piece of design.

Example of some of Treehouse’s Tracks

Once you begin your chosen track, the site gives you a video lesson for each topic, along with an interactive ‘workspace’, so you don’t have to mess around with setting up a code editor yourself. Other nice additions to the workspace are the ‘Preview Workspace’ icon (eye icon in top right corner), which allows users to immediately view their code in a browser.

Treehouse’s Workspace

Small details like this allow users to focus on learning the basics of code itself, rather than getting lost in the various parts of learning code that can be off-putting to beginners. These points, alongside a nice clean-looking user interface, makes for an impressive user experience.

RSPB

Whilst not necessarily the most visually appealing website, I think the Royal Society for the Protection of Birds’ site excels in its functionality and intuitive layout. The clear navigation bar, as well as the search option gives users a quick way of finding information. It manages to organise a lot of information in a concise format and its dropdown menus give links to popular questions and other wildlife guides.

RSPB’s Landing Page, ‘Birds & Wildlife’ section

One of the site’s most useful features is the ‘Bird identifier’, which gives users a list of questions to narrow down a bird in question. Each answer has an icon to make it more engaging and appealing to younger audiences. After each question, it narrows down the results of what bird it may be based on your answers. It is also fully mobile responsive, as most users are likely to be outside when using this feature.

RSBP’s ‘Bird identifier’ (desktop view)

Another great feature of the site are its illustrations, which are true to life and exceptionally detailed. For its users, having detailed illustrations is crucial to helping identify different animals correctly. To complement this, each bird’s page has all the necessary information to learn more, including where and when to see them, videos to see the bird in different settings, and an audio of the bird’s call.

Avocet’s Information Page

These additions of audio and video really separates this website from a traditional bird spotting guide or book, making identifying a bird much easier and more interactive.

Clearspring

My last choice is the website of Japanese organic foods-seller, Clearspring. All of Clearspring’s products have a minimalist design and this aesthetic is also reflected in their site, creating a good sense of brand identity. Their landing page features high quality professional photos of their popular products, immediately giving a taste of company’s brand.

Clearspring’s Landing Page (desktop view)

The website uses familiar design patterns for ease of use such as an ‘Add to Cart’ feature, with the ‘Cart’ icon in the familiar top right corner of the page. Products are presented in a grid with four products per row, going down to two products per row on mobile to make it responsive to smaller screen sizes.

Clearspring’s Product Page (desktop view)

One very nice feature to the product page is when users hover over a product, the image changes to a photo of what the product looks like inside of the packaging along with a quick ‘Add to Cart’ button, which is very useful. This feature is not available on mobile, likely to keep loading time shorter and keep the smaller user interface as simple as possible.

Hover state of ‘Organic Japanese Tofu’

Another nice addition to the site is their ‘Recipes’ page, which offers lots of different recipes that can be made with Clearspring products. In the ingredients section, the ingredients all have links to the corresponding product page, which is a useful feature for users, as well as a clever piece of promotion and marketing.

Example of an Ingredients Page

In summary, I think all of the above examples offer excellent functionality for their intended purpose; in addition to clean and intuitive user interfaces, which overall provide a seamless user experience due to their well-thought-out design.

Any comments? Please let me know!

Leave a Comment