Do you post top-rate content and still get low traffic? Do you use keywords properly but have a high bounce rate?

People may be missing your great website because of your web design choices.

Today, we’ll show you the top, up-to-date ways to get and keep traffic with website design. Read on to see the most successful elements of modern website design.

Make Your Website Responsive

Today, there are more mobile internet users than desktop users. And more users browse the internet on multiple devices than on a single device. It is imperative that your site be responsive to adapt to all platforms.

This is your top priority for modern website design.

Your website must be easily viewable on desktop computers, smartphones, and tablets or you’ll lose site visitors fast. Also, Google will greatly lower the ranking of non-responsive sites.

Make sure your pictures, page layout, and font size adjust automatically for easy viewing on all types of devices. Also make sure the look and feel of your site stays consistent on each device. This will maintain your specific style of branding so that your customer knows they’re still in the right place.

If you are marketing internationally, make sure your site is available in all applicable languages. You want to ensure all users get the same experience.

Use Unique Typography

A unique typography is one of the first things that will make you stand out from your competitors in the eyes of your site visitors.

A generic font style makes you look generic. Visitors won’t see you as an authority and they’ll leave.

Take some time to scroll through the hundreds of font options available and find the one that matches your unique voice. This will help visitors get to know what you’re like before they even read a word. Just be careful to choose a font that is supported on all browsers or your page may not look right on certain devices.

Your typography also has to do with how you place and format the text on your site. Make sure featured categories have clearly segregated sections on your homepage. You can also use different fonts and sizes to mean different things.

For an excellent example, check out how The New Yorker uses a unique font for headlines, a more standard font for content, and another font for author names. And content is clearly separated into categories, each with its own typography.

Some sections are only headlines, others are headlines with descriptions. And each section uses different font sizes and attention-grabbing hover effects.

modern website design font
  • Fac
  • Google+
  • Pinterest
  • Gmail
  • Print Friendly

Flat or Semi-Flat Design

A flat design is a design style that doesn’t use artwork or fancy effects to appear 3-dimensional. A website with a flat design looks like it may be printed on paper, like the New Yorker example or the Uber website.

Complicated, 3-dimensional designs take longer to load than flat designs. And 3-dimensional edges fill up most of the empty space on your site, making your site look cluttered. More empty space makes it easier for your audience to focus on what you want them to focus on: your content and links.

A semi-flat design is a flat design that adds slight, simple 3-D elements like shadows and other hover effects. Hover effects are great because they don’t crowd the space around every item on your homepage; they only provide extra emphasis where the visitor is already looking.

These are attention-grabbing ways to add a little depth and life to the website without cluttering it up.

Always Use Pictures With Page Links

On your homepage, a picture is at least as important as a headline. Every link on your homepage should be accompanied by a picture, like in the New Yorker example above.

Visual information is processed faster by our brains. A picture says more than the headline or description alone. And pictures give your visitors’ minds something real to latch onto for each link instead of a lifeless wall of words.

One modern website design style that does this well is the card design format, seen on Pinterest and Amazon. The format looks as if a bunch of greeting cards lined up on the screen. This is a great way for visitors to compare their navigating options side-by-side.

Card design style is especially popular on B2B and B2C websites.

Large Hero Images

Hero images are a large banner image with little or no text at the top of the page. It’s like a movie poster for your page. It sets the stage for your content and persuades the reader to keep reading.

Plus, it forces them to take the first step by scrolling down. That’s good because people are more likely to complete a task once they’ve started.

Some good examples of the hero image are this addiction recovery blog. This page on Sail Ningaloo (designed by us) has a scrolling hero image slideshow.

As with all other aspects of modern website design, don’t forget to make your hero images responsive.

Giant Product Images

You write the most comprehensive product reviews ever written, but all your customers see is, “Blah, blah, blah…”

Customers don’t want, and won’t read, too much text. Let pictures do the talking, especially when showcasing products.

With giant product images, you won’t need as much text. Your customers can see the benefits of the products for themselves. You can also label the features in the images.

The best example is this Apple TV page on The extra-large images clearly display all the benefits with very little text. If customers want more explanation, they can click the “Learn More” buttons.


  • Fac
  • Google+
  • Pinterest
  • Gmail
  • Print Friendly

Replace Text with Video

The same is true of using videos to cut down excessive text. If there’s an easier, faster way you can make the same point in a video, then do it!

Just like giant product images, videos are an easy way for the viewer to see the best features of a product. To that end, they should be short, about 2 minutes tops.

You can even set videos to autoplay when users arrive on the page. They can be just a few seconds long with a link to “See More” for the full video.

You can even use these autoplay videos in place of giant product images or even hero images. Here’s an example of a video used as a hero image on the Pulse 220 website.

Also, videos make visitors more likely to buy. 43% of B2B customers use online video to research desired products and services. Put the videos up yourself and keep that 43% on your website!

Final Modern Website Design Tips

No matter what design you choose for your site, the main point is always the same: make things easier for your visitors or they’ll go somewhere else.

You want your website layout simple, with plenty of empty space. You want to draw attention with your content–your images, videos and text–not your design elements.

Use drop-down “hamburger” menus for easy navigation. Build every page toward your most important call-to-action and state the call-to-action clearly.

And above all else, your website must be responsive to all platforms.

For more advice about modern website design, check out Top 5 Common Website Mistakes. Or let our experts design your website for you.

Are you looking for an effective website design for your small business?

We can help you create a website that delivers the information you need to your potential clients and is mobile friendly, search-friendly and you can manage and edit yourself.