One of the best ways to solidify your thinking about your own website is to examine critically the sites of other brands and individuals. Below, we’ve rounded up over 31 sites that we particularly appreciate from a design and organisation perspective. As criteria, we decided that sites should be:
We’ve also provided a little takeaway for each site—one specific choice you can implement on your own site for better design, function and user appeal.
What We Like: Easy navigation; clean layout; proper use of fonts; vivid photographic images
What to Use: Skip the boring old stock photography and look for interesting graphics and images that pull in your audience with an emotional kick.
Industry: Plumbing/Bathroom Supplies
What We Like: Audience-focused navigational elements; clean two-tone colour scheme
What to Use: Design your website’s information architecture with your end audience in mind. What do they want and need from your site? How can you help them get where they need to go?
What We Like: Clean page layout makes it easy to find information; simplified colour scheme; cool navigational icons that are easily interpreted
What to Use: Choose your colour scheme carefully. Picking two main colours with one optional accent shade and using them throughout the page helps improve and solidify your branding across the website.
What We Like: Nice use of colour psychology; clean typography; great use of block-based layout
What to Use: Colour psychology is a fascinating field. Different shades of the same colour can have quite different effects on viewers. Bright green conveys financial success, a good choice for anything finance or fintech related. Experiment with the impact of your own colours and shades to pick the right one.
What We Like: Strong use of accent colour for impact; user-focused navigational tools
What to Use: This may not be the most streamlined or minimalist site around but the use of the bright orange accent colour makes a huge, positive impact. While there’s nothing wrong with a cool-toned shade, or two-colour base scheme for minimalist appeal, a proper punch of colour can make a huge impact on your user’s field of vision.
Industry: Professional Services/Consulting
What We Like: Clean typography and proper spacing; vivid colour scheme; contact form on front page
What to Use: While we wouldn’t always recommend contact forms on the front page, in a B2B consulting home page it’s not a bad choice. This site’s target audience comprises busy entrepreneurs and C-Suite officers; saving them time will earn you their goodwill.
What We Like: Interesting adaptation of the grid block-based layout; warm and evocative use of imagery; explanatory content their users will appreciate
What to Use: Sometimes just a little bit of difference can pack a huge visual wallop on the page. Instead of chopping up content into even rows of three-block columns, why not experiment by creating image and text blocks that skew off-center, like this page’s two-thirds/one-third section.
What We Like: Good labeling system, coupled with icons in eye-catching colour; streamlined layout; plenty of white space
What to Use: Readability on the web isn’t only about vocabulary and text formatting. It’s also about what you don’t do—that is, the empty space you leave surrounding major design and page elements. This is called white space, and it’s essential to create a clean, readable website.
What We Like: Dividing content between two major user groups (individuals and employers); complementary accent colours for different sets of icons; fun, family-oriented images
What to Use: Keep your targeted audience in mind when selecting images. Look not only for complementary colours and emotional response but also the content and composition of each image, especially if you’re creating a B2C or consumer-oriented website. Ideally, you want your users to be able to relate to the individuals or scenes in each image.
What We Like: Bold use of colour to differentiate product lines; typography that evokes slightly old-fashioned, homemade feel (suitable to brand)
What to Use: When it comes to conjuring up emotional responses in users, most websites focus on colour and imagery. Yet typography can also trigger a sense of “rightness” or alignment with a brand’s personality. Look for font families that fit your site style and use them judiciously (so as not to dilute their effect).
Industry: Business Directory/Database
What We Like: Elegant incorporation of red accent into logo and red-to-pale-orange gradient in header; puts function front and center
What to Use: Form follows function—or should, anyway. But it’s also nice to see function and form meld together so nicely. Plenty of white space makes the search form pop. Also note how easy it is to tell what the site’s about.
What We Like: Sensible and easy-to-distinguish navigational buttons based on topics, ideal for knowledge-based professions and fields such as law; excellent use of colour as background and accent
What to Use: Don’t be afraid to use unusual colours! This site’s accent may come across more red to some, or coral to others, but it’s far enough away from true red that it will make an impression on users. Explore adjacent shades using a web-based colour picker tool and see how they change your design.
Industry: Paint/interior design
What We Like: Clean sans-serif typography; great use of white space; nice mix of inspirational and educational content
What to Use: Generally speaking, sans-serif font faces will lend themselves well to cleaner, more streamlined websites with pale backgrounds and plenty of white space. Serif fonts can look a bit cluttered, depending on how many other elements there are on the page and how closely they surround the text.
What We Like: Simple, clear navigation; strong task-based organizational scheme; short and clear calls to action
What to Use: It’s easy to forget that you have to tell your users where to go and what to do next, even on your home page. Providing clear calls to action is a helpful way to assist your audience of users in finding their way around your site.
What We Like: Eye-catching on-hover colours for major navigational elements; evocative, communicative logo; helpful breadcrumbs at top of child pages
What to Use: Think carefully about how to help your users find their way via navigational elements, such as clickable buttons and boxes for major landing pages as well as pull-down nav menus. Sometimes even small tweaks, such as a different background colour when the user hovers over an element can provide major visual differentiation cues, helping users navigate your site more easily.
What We Like: Great use of multiple colours; strong search function
What to Use: While typically we advocate two main colours in a website design scheme, this is a great example of when it’s OK to use more, and how to do it without overwhelming the page or the user. Plus, putting search front and center with simple drop-down tools to narrow or expand results is a great consumer-oriented approach to managing content.
Industry: Utilities/Public Service
What We Like: Fun use of video on home page; clear labeling system; good use of white space
What to Use: Video can be a hit-or-miss affair on a home page, but here it’s a hit. If you want to play with video, make sure it’s a short piece that doesn’t blast the user with auto-playing sound. Use humor and story to create an entertaining piece that helps elucidate your brand for your users.
Industry: Financial security services
What We Like: Bold typography; streamlined page layout and content
What to Use: If you want to overwhelm your users, give them too much to see and do right out of the gate. If you’d prefer keeping them around, on the other hand, try limiting how much information and content you throw at them on the home page. Declutter the home page and keep it to just a few major entry points and links to the most significant pages and content on your site.
Industry: Cause advocacy/organisation
What We Like: Strong footer; good division and presentation of content through slider effect; interesting colour effects
What to Use: Don’t forget the footer space! Put it to good use with a strong collection of contact information and helpful, categorized links.
Industry: Government/public services
What We Like: Language choices; simple icons that are easy to interpret; good use of white space
What to Use: Translations of website content can exponentially increase your user base, but are only helpful if they’re competent. Fortunately, translations aren’t necessarily cost-prohibitive even for small brands.
Industry: Government/public and business-related services
What We Like: Strong use of white space; front-and-center search function; eye-catching colour effects for hovering help aid navigation
What to Use: Keep white space going not just around the edges of your page, but also in the buffer areas between elements and between lines of text. This helps keep all your content easily digestible and readable.
Industry: Delivery/mail services
What We Like: Great use of focus-based imagery; well-designed accent colour icons
What to Use: Watch where the elements in your images’ composition are directing the visual focus. If there are human beings in your images, consider where they’re pointing or gazing off the image. A user’s gaze will naturally follow that imaginary line. Place key elements on the page within that line for extra emphasis.
Industry: Employment/public services organisation
What We Like: Home page kept short, simple and crystal clear; audience-based navigation and labels with a light-hearted use of colour
What to Use: If you’re building a site with two or more targeted audiences, consider divvying up your main pages and content and creating pathways through that major content for each individual group. Then create unique identifiers, icons, labels and text to help shepherd each group through your site.
Industry: Food delivery and restaurant/pizza
What We Like: Clean use of key imagery on plain backgrounds to highlight brand differentiation (i.e., fresh ingredients); contact info kept positioned at the top of the page
What to Use: Don’t forget to tell your audience how to find you. That’s especially important with a business like a pizza delivery place. Provide alternate means of communication so people can use the medium that makes them comfortable.
Industry: Language learning/educational services and products
What We Like: Strong use of statistics on the home page; prominent and hard-to-miss call to action; good use of social proof with Google reviews
What to Use: Don’t be afraid to show the world how much customers love your brand. If you have any kind of useful social proof to show (reviews are best), then highlight a few on your home page. Just don’t let the reviews overshadow the key purpose of the page. Keep that front and center with a prominent call to action.
Industry: Public services/organisation
What We Like: Cheerful colour scheme matches the organisation’s mission and topic; good placement of navigational shortcuts to most popular content (beach cams)
What to Use: There’s so much more to picking colours than what “goes” together. Good site design incorporates the use of colours that not only complement each other but also reinforce the brand’s “personality.” Bright, cheerful colors like true red and sunny yellow evoke happy days at the beach.
Industry: Automobile club/member services organisation
What We Like: Images replicate colour scheme choices; creative image placement to balance page elements; good use of white space around navigational elements/links
What to Use: Look for image files that are not only emotionally evocative but also reflect the main colours used in your site design. It’s a subtle but effective way to create a sleek, streamlined look that also reinforces your branding.
What We Like: Strong repetition of main colour for emphasis; excellent white space; solid use of footer space
What to Use: It’s easy to overthink colour and get bogged down in a sea of similar shades. However, you can create a lot of visual interest in your page with just one main colour against a white background.
Industry: Medical/healthcare services
What We Like: Excellent use of white space; puts search and function at the top of the page; good use of complementary colours
What to Use: White space isn’t just about setting one line of text off from another. Use white space between visual and graphic elements as well as in form elements to help your user find what they’re looking for more easily.
Industry: Disability/public assistance services
What We Like: Puts the people they serve front and center; cheerful colour scheme; bold typography choices
What to Use: Your site isn’t just some showcase behind glass. It should reflect the authentic mission and personality that differentiate your brand from others. Explore ways that colour and font choices can help you communicate those factors to your audience.
What We Like: Visual interest created with off-center/off-page image placement; sedate colour scheme offset by brighter shades in images
What to Use: With more traditional fields such as law and banking, you can afford to keep your design colour scheme a bit more conservative. Include more visual interest in the page through the use of images.
Industry: Educational institutions
What We Like: Excellent use of photography; audience-based navigational links; simple but clear calls to action
What to Use: Calls to action don’t need to be ornately styled and fanciful. In fact, it’s usually better to keep them simple and straightforward.
What We Like: Great task-based navigational icons; strong use of accent colour to draw attention to navigational elements
What to Use: For utilities and other service-based organisations, it’s especially helpful to organise your major content around the tasks your users need to perform using your site, then prioritize navigational aids based on a “here’s what I need to do” approach, as this site does.
Industry: Disability/public assistance services
What We Like: Unusual colour combination communicates a warm yet trustworthy vibe; great images; accessibility options
What to Use: Don’t forget that not all your users are equally abled. Some may use assistive devices. Others need help increasing font size. Accessibility is crucial for inclusiveness.
You can find great examples of website design—as well as workable ideas for your own site—all around you. Examine sites for companies in your industry and others, remembering that a skilled designer can usually help you achieve a certain effect in a way that’s special and tailored to your own brand, instead of simply copying someone else’s.
By Pjay Pokhrel
Designer – Keen to Design
Disclaimer: This post has been completed for educational purpose using publicly available websites on the Internet . We have no association with any of the organisations whose website have been mentioned above.