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.
What We Like: Easy navigation; beautiful color scheme; engaging animated effects; plenty of whitespace
What to Use: Making it easy for people to get in touch should always be a priority. That’s why having an intuitive contact form, complete with a Google Map for those that want to visit in person, is such a great way to connect with those looking to get involved.
What We Like: Consistent font; pops of color; vivid images; intuitive menu in header; large featured image
What to Use: When you run a non-profit that relies on people’s generosity, the key is to make donating a cinch. Use a brightly colored ‘Donate’ button that gives people lots of choice when it comes to donation amounts, and you’ll earn more than ever.
Industry: Interior Design
What We Like: sticky navigation; custom icons; lazy load images for speed; hover effects on CTA buttons
What to Use: Include a simple FAQ section somewhere on your site that has answers that dropdown as readers explore. This will not only save on retail space, but also give potential customers all the answer they need to make the best purchasing decision.
Industry: Automobile services
What We Like: Grid blog layout; social share icons; clear CTA buttons; call button for mobile users
What to Use: If you run an online business that offers a bunch of services, it’s a good idea to give site visitors an easy way to narrow down their search time while on your site. Take it from this site and create a fill in the field form that leads people down the right sales funnel from the start.
Industry: Real estate
What We Like: Sticky CTA button; search bar; top of page button; simple optin form
What to Use: Building a bigger email list is one of the best ways to build your business too. If you have an optin form on your site, segment your subscribers from the start by getting a little extra information about what they’re interested in.
Industry: Law advocate
What We Like: Stunning flat design and color scheme; vertical navigation menu; clear CTA buttons
What to Use: Reaching a global audience is a great way to make sure your business or following grows. By offering multiple translations of your site content, all with a few clicks of a button, you ensure that your content reaches everyone.
Industry: Family services
What We Like: Translation buttons; sticky sidebar; plenty of whitespace; clear ‘Donate’ button
What to Use: Accessibility is something not all website owners think about. The fact that this website includes a text enlarger that applies globally is wonderful. Don’t alienate a portion of your audience due to accessibility issues.
Industry: Family services
What We Like: Sticky header; bold color choice; easy subscribe button; family-centered images
What to Use: If your company or organization hosts events, it’s a great idea to create a dedicated events page or even add a calendar of events to your site that people can reference.
What We Like: Large, cheerful header image; intuitive registration; embedded video content
What to Use: If you want to grab the attention of your target audience, consider using a popup optin form, complete with a lead magnet you know people interested in your brand will want. Just make sure the popup isn’t intrusive and distracting from your site’s content.
Industry: Community services
What We Like: High resolution images; scrolling slider; sticky search button; video header above the fold
What to Use: If your website is centered around all things happening in your community, including an interactive map that’s easy to use is a great touch. Better yet, information, images, and even directions to the location will make it easier for site visitors to get where they want to go.
What We Like: Lazy load of beautiful images; keyword search bar in blog; easy pagination; dedicated services section
What to Use: For companies that have multiple locations, make it easier on people seeking the nearest one by offering a location finder. Placing it above the fold ensures people see it and use it, meaning you get more business in the long run.
Industry: Sports and auto events
What We Like: Sticky navigation with icons; embedded video content; pre-order forms; built-in online shop
What to Use: It’s easy to overrun your website with too many images, however, with the right kind of fullscreen header image, you can leave a lasting first impression and convince people to continue exploring your site.
Industry: Government agency
What We Like: Hover effects on links; built-in event finder; easy link to portal sign in; translation button
What to Use: People theses days are consuming more video content than ever. Take it from us, adding in video content to your blog to get your message across is a great way to boost engagement, inform readers, and encourage people to take action.
What We Like: Stunning flat design and color scheme; custom icons; minimal styling; social proof above the fold
What to Use: People want to be able to get in touch with someone as soon as possible. By incorporating an easy to access contact form, complete with the ability to upload files, your team can better serve people with questions and concerns – quickly.
Industry: Architectural design and services
What We Like: Navigation menu with icons; ‘Read More’ buttons; social share buttons; product finder
What to Use: If the goal is to get people to convert, consider a banner call to action. Entice people with what they want, include a clear call to action button or link, and take them to the exact place they can subscribe, buy, or request more information.
Industry: Family services
What We Like: Event button; clear CTA buttons; fullscreen navigation menu on small screen; large featured images
What to Use: Tagging blog posts is a nice way to let readers know ahead off time what they’re about to read. Grouping your site’s content into main categories helps with navigation and the user experience, and ultimately leads to more time spent on your site.
What We Like: Image animation effects; quick links within navigation menu; language switcher; search bar
What to Use: Your color scheme sets the tone for people once they land on your site. Though government websites tend to have a more cold and professional feel, adding in a nice pastel color palette can go a long way to show people you’re there to help.
What We Like: integration of whitespace; clear CTA buttons; interactive location finder; dedicated offers section.
What to Use: For a company that is exciting and full of energy, a large header slider that automatically plays for site visitors is a great way to get people excited to discover more. Just make sure to use high resolution images and guide people elsewhere throughout your site, all within the slider images.
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 we 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.