21 ways to make your site look professional and super attractive

Pierre Bastille

Pierre Bastille

The design of your website is crucial to your online success.

That may sound a bit dramatic, but it’s true!

No matter what you are trying to achieve with your website, its design will either:

  • Lift up your business by helping you stand out from your competitors and make you look like a trustworthy professional.
  • Penalize you by undermining your authority and making you look like an amateur.

Here is an undeniable fact: we are visual creatures. Like it or not, people will react instantly to your website based on how it looks. In fact, a study revealed that it takes people just 0.05 seconds to decide whether they like your site.

It means that even with the best content in the world, people won’t read your work if the design of your website sucks. You could have the most amazing product/service – something that would help your target audience enormously – and nobody will buy it if your site doesn’t look good.

It’s that simple.

Good web design has become more important than ever. Thousands of new websites are created every day, and the amount of content available on the Internet could crush us! Web design is one of the most effective ways to stand out from the crowd and get noticed.

Here is what Neil Patel recently wrote in an article discussing the future trends of online content:

“You won’t be able to get away with poor design. When a reader has only one option to learn about a specific topic they are interested in, and that option happens to be an ugly site, they have no choice but to suffer through their experience. However, when there are multiple pieces of content about even very specific topics, readers will start choosing their options based on other factors such as design.” – Neil Patel

Like other artistic disciplines, there is no single answer to what makes a good website design. You may love the design of a particular site, but if you were to ask a friend, he might tell you that he doesn’t like it at all.

There are, however, a few rules you must follow if you want your website to look professional. The challenge is to adopt these rules while adding your personal touch and maintaining an artistic feel.

If you find the right balance between these elements, you will be on your way to building a great website – that is, a professional-looking website that represents you and your business accurately.

Let’s delve into the good stuff and see how can we upgrade the design of our website.

01. Make it simple

This rule is dear to my heart.

Every day I close website tabs, right after landing on them, because they are too cluttered.

With the ever-increasing amount of information available on the Internet, people’s patience has dropped. When bombarded with contradictory prompts (share this, follow me, read this, opt in here, etc.), people have become less likely to try and understand. They will leave pages they don’t like immediately.

Therefore, it’s important to keep our websites simple, with clear objectives for each page.

Simplicity is difficult, though. It means you have to make choices. Eliminating the unnecessary can be tricky at times. In fact, removing parts of your pages requires lots of thought.

“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.” – Steve Jobs

IFTTT’s Homepage is an excellent example of simple and effective design:

IFTTT Homepage example

Simple and clean design

So how to make your website simple?

My technique consists in identifying 2 goals for each page of my website. Once I’ve determined these goals, I remove everything on the page that won’t help me achieve them.

EXAMPLE:

Let’s take an example from my experience with this very website. As you can see, I don’t use a sidebar for my posts. Here is my reasoning behind this:

I have 2 goals for people who read my content:

  • Main goal: I want them to enjoy the content of my articles as much as possible, without any distractions. I want to create a “clean” experience, not unlike the experience users have on Medium.
  • Secondary goal: I want to increase my number of subscribers.

You may think that a sidebar is a great way for people to discover your content. And it can be. But I also believe that my visitors can click on “Blog” in the menu to look at my other posts. Since I have a fixed menu, “Blog” is always visible on the screen, no matter where you are on my website.

Why don’t I add an opt-in form to the sidebar and add subscribers to my list that way? Well, I think that offering content upgrades at the beginning and the end of my posts is a better way to get subscribers. If visitors read through the post and like the content, they’re more likely to opt in for bonuses. If they aren’t interested in what I’ve written, then they won’t opt in with my content upgrades. But in this case, they wouldn’t have opted in through the sidebar, either.

You can see that in my case, a sidebar was not vital to reach my two goals. So I don’t use it.

By the way, Bryan Harris from Videofruit wrote a great article in which he explains how he increased his conversion rate when he removed the sidebar from his site. Ramsay at Blog Tyrant also recently ditched the sidebar when redesigning his website.

Still not convinced about design simplicity? Here is what Brian Dean from Backlinko has to say on the subject:

You can have the best design elements in the world. But if they’re squished and cluttered, the overall design is going to look terrible. The best-looking (and most popular) sites online usually have a super-simple design. Just look at Google and Wikipedia for 2 examples.” – Brian Dean

Now it’s your turn. Write down the 2 most important goals for each of your web pages. What can you remove? What can you simplify?

02. Be consistent

What does consistency mean? In web design, consistency involves using the same graphic language and interface elements across all the pages of your website. It allows you to create cohesion and harmony.

Concretely, it means using the same font sizes and font styles for all your headings of the same level. It also means using the same color palette, the same style for your icons, the same graphic patterns (i.e., links are always green, CTA buttons are always red), etc.

It’s recommended to use the same interface elements across your website, from your top menu to your sidebar to your opt-ins.

Consistency is one of the essential characteristics of a professional-looking website. It shows that the design of your site is thoughtful and thorough.

It creates a sense of logic and clarity. If your website is not consistent, it will confuse your visitors. They will have trouble navigating it, and they will have trouble locating the information they’re looking for in a timely fashion.

It’s indispensable to develop a loyal audience for any website. In fact, consistency makes returning visitors feel like they’re at home. They’ll feel very comfortable with your brand once they’re able to navigate your site in a way that allows them to find information quickly.

Ultimately, consistency can make things easier because it means you don’t need to make the same decisions over and over again. To facilitate the process, I have created several files with reliable information that I use when I create new pages on my site.

Here is an example of a template where I store the fonts and styles I use on pierrebastille.com:

Template with fonts info

My template with my fonts details

Note: You can access the templates I use inside the Get Online! free course.

You should also be consistent with general external practices.

If you’re a doctor, and you choose to treat your patients in your swimsuit, you’re going to confuse them. And they will probably find another healthcare provider. After all, they expected to see you in a white coat, and breaking convention can be dangerous. The same goes for web design.

If you decide to display a vertical menu on the right side of your webpages, you’re taking a risk. People expect to find a horizontal menu near the top of your page. If you don’t follow general conventions like this one, you may frustrate your visitors. Remember that confused visitors will leave your website quickly!

Check out this study: Google found that people like simple and familiar (prototypical) websites.

If your website is consistent both internally and externally, people will use it without thinking. It should be your ultimate goal.

Now your job is to analyze your website see if it is as consistent as possible.

Here are the kind of questions you should ask yourself:

  • Am I using the same fonts and sizes on all my pages?
  • Am I using the same colors on each page?
  • Are my page layouts similar?
  • Am I using the same line heights across the site?
  • Am I following the general conventions?
  • Do I have my legal pages available in the footer?

TipI always advise people to create files to store graphic information. You can then exploit them to harmonize your website (especially when you create new pages.)

Note: To make sure that they aren’t significant issues with your site and get feedback on it, you can test your site with several services that provide real user feedback (such as userinput.io).

03. Use an attractive color palette

We all know that colors convey emotion: Red means passion, blue represents calm, etc. So, before you decide on a color scheme for your website, consider the emotions you want to communicate. How do you want your visitors to feel when they land on your website? What colors represent your brand the best?

Check out this great article to learn what emotions each color conveys.

Now, there are no universal rules when it comes to choosing great colors. It’s important that you like them and that they pair well together – and that’s about it.

That said, I have found that it’s best to use no more than 3 colors. It is easy to maintain a consistent color palette with 3 colors across your website. When you juggle with more colors, it’s easy to end up with a messy design.

Here is my framework to pick these 3 colors:

  • Select 1 primary color: This will be your main color, the one you will use the most often. This color is typically associated with your brand.
  • Select 1 secondary color: This color should be darker, and you will use it for your headlines and text. This color should:

01. Pair perfectly with your primary color.

02. Contrast with the primary color. Try to write some text in your primary color with the secondary color as your background and make sure it’s readable.

03. Be less “active” than your primary color.

  • Select 1 accent color: This will be the color you will use to make certain elements stand out. (Example: a single word in the title of a post, your call-to-action buttons, etc.). It should complement your primary and secondary colors while still capturing the attention of your visitors. This color should really stand out!

Note: I like to create a lighter version of my secondary color for my text.

Tip: Always jot down the HEX codes of your colors to keep them consistent across your website.

Here is a kind of test you can quickly do in Google Drawing to make sure your colors work together well:

My Color Board

Looks good to me 🙂

You can use the following websites to seek inspiration:

04. Select good-looking fonts and proper font sizes

Websites mainly consist of text, don’t they?

Fonts have an enormous impact on how your website will look. Similar to colors, they convey emotion. So, when you choose your fonts, consider the feelings you want to express.

Ask yourself whether yours are powerful or delicate? Are they modern or classic? Sophisticated or simple?

What are the font-related characteristics of a professional website?

01. Good font sizes. Choose your font sizes for different heading levels with the goal of establishing a clear hierarchy (particularly useful for a long copy). The sad truth is that most readers don’t read every word on your page. To cater to those who merely scan your pages, establish a well-defined hierarchy. It will help your visitors get the information they’re looking for quickly.

02. Different colors for your body and your headings. To make your hierarchy even clearer, you can choose a slightly lighter color for your text than the one you chose for your headings.

03. Fonts that pair nicely together. The common practice is to choose different fonts for your headings and your body. There are no magical rules to selecting them correctly (serif or sans serif) other than testing them and making sure they pair together well.

Google fonts are usually easy to use. Here are two articles to help you select the perfect Google fonts: Typewolf and Awwwards.

04. Your copy should be readable. Do not use fancy fonts, and make sure that there’s enough contrast between your text and your background. Finally, make sure to test your fonts at small sizes. With more and more traffic coming from mobile devices, it’s important to choose fonts that are easy to read at small sizes.

05. Use a responsive theme

More people are surfing the Internet from mobile devices than desktops. And mobile traffic is still on the rise! Make sure that your website is responsive – otherwise, you will make a poor impression on your mobile users. And these people probably represent a substantial amount of your visitors….

The easiest way to make your website look sharp on mobile devices is to use a responsive theme.

With a responsive theme, your website will automatically adapt to fit and look good on different-sized screens.

I use the premium theme Divi (affiliate link) for my website, and as you can see below, my pages readjust naturally to mobile devices:

On desktop:

About | desktop

One mobile:

About | mobile2

06. Have a clear and clean navigation

A professional looking website should have clear, clean navigation. Of course, the top menu should be easily identifiable and guide visitors to what they’re looking for in an efficient manner.

The footer should also help users access the information they’re looking for. Also, it should contain some of the elements people expect to find there: legal pages, links to social networks, etc.

Finally, you can create custom 404 error pages to guide users who got lost:

404airbnb

Airbnb’s 404 page. Pretty nice. All the links encourage you to stay on the website.

07. Use beautiful and relevant images

As I mentioned at the beginning of this article, human beings are visual creatures. Images transcend language, and they are primordial when it comes to making a good first impression.

We saw that visitors take 0.05 seconds to form an opinion of a website. Images are the best way to ensure this first impression is amazing – and to ingrain that first impression in your visitors’ minds.

They are also the perfect way to grab your visitors’ attention and evoke instant emotions.

I cannot stress enough how important images are for the general look and feel of your website.

A single low-grade image is sufficient to make you seem like an amateur and ruin your visitors’ opinion of your website.

To make your website professional, and to make sure it grabs your users’ attention, you can use a full background photo.

Check out Taylor Stitch’s example:

TS Full background

Beautiful hero shot!

It makes a huge impression!

Images are always a good investment. In fact, I would suggest that you hire a professional photographer to take awesome pictures of you and your products.

You can also use Free Stock collections like Unsplash.

The images you use should be relevant to your copy (and to each page). When I browse the photos on Unsplash, I want to put them all on my website.

I know how tempting it is to do so. However, it will damage your credibility if your selection of images confuses your visitors.

Warning! Do not use obvious stock photos like this one:

stockphotoexample

NO, NO and NO!

It looks awful. It’s 2016, and we’re all equipped with stock photo detectors to spot these fake photos. Do. Not. Use. Them.

Attention to Detail

The devil is in the details they say.

If you pay close attention to several details easily overlooked, you can stand out from the crowd.

08. Add an SSL certificate

Using SSL certificates boosts the professionalism of your website, mostly thanks to the visual clue in the URL bar. When you use SSL certificates, the browser will usually display a small lock icon:

SSL pb.com

Yes, you’re safe here 🙂

Your visitors feel safer on websites that show this little lock icon. In fact, these websites are more secure!

SSL certificates secure the data that you exchange with your users. Historically, online shops have used SSL certificates on pages where users fill out their credit card information. But even if you aren’t selling anything, it’s an added value to protect your visitors.

SSL certificates are also useful for SEO: Google has used them as ranking signals since 2014.

There is no reason not to use SSL certificates, especially since you have the option to get them for free. Let’s Encrypt, for example, provides free SSL certificates. They have partnerships with many hosts, and as a result, their certificates will probably be very easy to implement on your website.

For example, with my host SiteGround (affiliate link), all I need to do is press a button to apply the SSL certificate on my website:

SLL certificates play a significant role in making the Internet safer. WordPress recently pushed SSL certificates for all wordpress.com websites.

09. Use your own domain name

It’s preferable to use your own domain name. A domain like mydomain.wordpress.com is acceptable only if you have created a small blog and do not plan to attract a big audience and grow an email list.

If possible, use the .com domain name, as it is the most recognized and most popular among big brands.

Choose a professional domain name: avoid numbers and hyphens, and try to keep it short and sweet.

10. Add animations

Adding animations to your website will ensure you catch the eyes of your visitors. Animations are like waistcoats in that they may not be necessary, but they will take your look to the next level.

You have several possibilities:

01. Your theme. With most themes, you can add animations easily. For example, with Divi, you can add animations for several elements (images, button, icons, etc.).

Here is an example with a call-to-Action Button:

Button

02. CSS. If you know a bit of CSS, you can add your own animations to the elements of your choice:

downicons

If you don’t know CSS coding, you can ask a developer to help you.

11. Write a customized tagline

Make sure to customize the tagline of your website and remove the generic “Just another WordPress site”:

tagline Vice

Vice’s clear tagline.

12. Include an author bio inside your blog posts

Including an author bio inside your posts is always a good idea. If a visitor lands on one of your posts and finds the article interesting, then a bio is a great way of giving him or her information without needing to go to your About Page.

Every big website with many articles (Forbes, Huffington Post, etc.) adds short author bios inside every article they publish.

Finally, adding a bio at the end of your articles will be useful if you plan on publishing guest posts – when your audience doesn’t know the author.

bioexample

Example from Forbes.com

13. Add a favicon

I am always surprised by how many people don’t do this! Adding your favicon takes no time at all, and it will add an extra touch of professionalism to your website:

faviconewordpress

WordPress’ favicon

14. Have a clear permalink structure

The default permalink structure in WordPress is not very user-friendly.

Would you rather read https://pierrebastille.com/how-to-speed-up-your-wordpress-website/ or https://pierrebastille.com/?p=654?

According to Google, it’s best practice to employ user-friendly URLs that convey content-related information. It’s important because URLs are displayed in the search results.

The most popular permalink structure is to generate URLs with the post’s title. It creates easy-to-remember links with several keywords in the URL. This is the one I use:

Permalink Settings ‹ Pierre Bastille — WordPress 2016-05-27 18-43-09

You need to go to Settings>Permalinks

15. Add some styling details

Adding extra styling details is the perfect way to make your copy more readable.

For example, my quotes are styled as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

It allows me to break big blocks of text and “lighten” my copy. It looks better this way.

16. Use proper line heights & paragraphs

Another way to lighten your copy is to pick a comfortable line height. It makes your text less intimidating, and people will be more inclined to read it.

In the same spirit, break your copy down into multiples paragraphs.

Check the example below. Which text would you rather read?

lineheight

I don’t know about you, but a prefer to read the text on the right!

17. Customize the snippets of each page and post

If you want people to find you on Google and click on your link, you should write great post/page snippets. The snippet is what people will see as a description of your page when they conduct a Google search on your topic.

google result

Explicative description with less than 160 characters

All in One SEO or Yoast SEO are great plugins for writing and optimizing these snippets:

All in one SEo snippet

The setup in All In One SEO

18. Spellcheck your copy

Attention, professionalism killer! It’s important to avoid spelling errors, especially in your headings. You can hire an editor to proofread your copy.

19. Have consistent icons

I love icons. They visually convey a lot of information and allow you to space big block text. They’re also very light in size, which keeps your website fast. Having consistent icons across your website reinforces the professionalism of your design.

20. Don’t put ads on your site

I’m going to be honest here: I don’t like websites with ads. I hate ads. I automatically associate websites with flashy and irrelevant banner ads with spammy content.

Aside from ruining the look of your website, it’s hard to make money off of ads on your site. You need a HUGE amount of traffic to make it worth your while.

If you do have ads, consider whether these ways of monetizing your website are better options for you:

  • Courses
  • Ebooks
  • Donations
  • Etc.

21. Don’t be too intrusive

Of course, one of your primary goals is probably to grow your email list.

With the most popular opt-in plugins, you have the possibility to add many types of opt-ins to your site within a few seconds.

The problem is that you can quickly end up being too intrusive. Being asked for your email address every 10 seconds is… annoying.

It’s important to find the right balance between trying to get your visitors’ email addresses and maintaining an enjoyable user experience on your site.

To make sure users have a good experience your site you can:

01. List every opt-ins you have on your site and make sure you don’t ask too many times people’s email addresses.

02. Favor non-intrusive types of forms (flying opt-ins in the corners of the screen, opt-ins inside the content, etc.)

03. Remove duplicates. Example: it may not be necessary to have your content upgrades offered through opt-ins inside the copy, through pop-up opt-ins and with sticky ribbon opt-ins, at the same time.

Wrapping up

When it comes to creating a professional website, there are a lot of elements to consider. Hopefully, this article gave you some ideas on how to take your site to the next level.

Research is crucial. When you surf and find a website you like, take a few seconds to analyze the winning features of it. What makes you like this website more than others? Do you enjoy the colors used? The fonts? Do you like the styles of the icons? Are you drawn to the beautiful photos? Or perhaps the clear menu?

DO NOT copy your competitors, though. If you try to copy them, you will end up with something inauthentic. Also, remember that copied work always looks cheaper than the original.

So… how do you plan on improving your website?

Pierre Bastille

I help entrepreneurs build stunning websites with all the necessary features to grow their businesses. I like to write about online business, marketing, productivity, and travel

Did you like this article?

Enter your name and email and I'll send you next ones!

Comments

2 Comments

  1. Yev Marusenko

    I agree with most of these. No favicon, so easy to implement and visually nice.

    However, your Research point at the end is important enough to have some numbered points about it. For example, use various sites to test your logo’s and headlines with audiences before, during, and after your content/website goes live.

    Thanks

    Reply
    • Pierre

      Hi Yev,

      I agree with you; all the pre-launch work is VERY important.

      Performing tests and getting user feedbacks before the launch are great ways to make your site efficient right from the start.

      I plan to dedicate an article to this subject alone 🙂

      Cheers,
      Pierre

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This