Start a project

How to Make Your Website Look Professional

Written by George Ilidis

While there’s no denying that content is king and is capable of winning over your visitors’ attention, if your website’s design doesn’t complement the user experience and support your site’s functionality, compelling content on its own just won’t do it.

And by that, I don’t just mean that your website needs to be aesthetically pleasing – we’ve all come across plenty of those; instead, it’s all about the first impression your potential prospects make about your site. In 2015, the average individual’s attention span was 8 seconds. Can you imagine where we are now?

With that said, I’m about to walk you through some tricks to empower you to make the best use of those few seconds to grab the attention of your prospects just by making your website look professional.

Professionally Designed B2B WordPress Website - George Ilidis - Web Designer
Image from SMARTcare Software case study.

1. Define These Identity Values: Color Palette, Typography, Container Width

Before we get into the details, let’s agree on one point: people make a first impression in just one-tenth of a second, so that’s super quick. But what’s more important here is that it’s our unconscious mind that handles first impressions, which means that your prospects don’t really control their impression of your site – it happens automatically. 

A lot of factors come into play to form that first impression, which can complicate things, but there’s one factor that’s sure to create a positive impression, and that’s consistency. To position yourself as a credible, professional brand, you need to be consistent. That’s where your brand identity comes in, in the form of color palette, typography, and container width.

Color Palette

With websites, there’s no one-size-fits-all, given that every business, industry, and website is different from the other. Despite that, what seems to be common across all the companies and individuals I’ve worked with across the globe is the power of colors. In fact, a case study revealed that adjusting color can increase conversions by up to 24%.

Simply put, colors have the power to trigger emotional responses, define the mood, and impact actions. If I were to offer you a piece of advice, it’d be to pick just two colors (other than black and white) and stick to them. One of them should be a primary color, while the other should be your secondary color. Generally, the secondary color should be of a lighter shade.

Pro Tip: Save the color codes of your colors and only use those, mixing them with white or light grey. If you’re hesitant about the colors to choose, a great tool to help you pick a color palette is https://coolors.co/. Simply hit “start the generator!” and remove columns by pressing “x” above the colors until you end up with two.  Also, you can hit the spacebar to change the color schemes.

Coolors.co - Color Palette Generator Example
Coolors.co – Color Palette Generator

Color Psychology

Yes, you read that right; there’s an entire science dedicated to how color affects human behavior. Since there are so many branches to it, I’ll just give you the bottom line on what you need to keep in mind as you choose your color preference, based on studies of color and gender:

  • Women’s favorite colors are blue, purple, and green (respectively). Colors you should steer clear of are orange, brown, and gray (respectively). 
  • More broadly, females prefer primary colors with tints and strongly dislike earthy tones. 
  • Men’s favorite colors are blue, green, and black (respectively), while colors to avoid include purple, orange, and brown (yes, brown, despite how surprising it may be!)
  • Yellow is associated with warnings.
  • Green is perfect for environmental awareness and green products. 
  • Orange is a fun color, leading to a sense of impulse. 
  • Black and luxury are commonly used together. The darker the color, the more luxurious the brand and its offerings, but they also have very low conversion rates.
  • Bright primary colors are the best for CTAs (red, green, yellow, orange).
  • White space is essential to convey spaciousness and freedom.

As reflected in the data above, blue is a standard color across both genders, making it safe to use! According to psychology, blue conveys trust, loyalty, order, and peace (think Facebook!) With that said, though, blue shouldn’t be used in the food industry since that’s the only case where it’s associated with poison.

Color Psychology in Web Design
Source: Usertesting.com

Typography 

When it comes to typography, I’d highly suggest using Google Fonts, as much as you’d like to use that font you’ve been eyeing or prefer to use at all times. Typography is somewhat subjective, and it isn’t easy to do right, so the safest bet is to use font combinations that Google presents to you when you go to a front page. Also, you can sort them by trending or popular.

What you want to do is find the primary font you like and then search for “Google font combinations” for it – then, when you’re presented with the other font, use one for the headlines (H1, H2, H3, H4, and so on) and one for the main body. 

Remember, you don’t need a “wow” font to look like a pro in the industry; you just need one font that’ll be used correctly. Plus, choose fonts that match or complement your business culture and style.

Tip: It’s crucial to remember to use the same sizes across the whole site – otherwise, it just comes off as inconsistent.

Google Fonts Interface
Google Fonts Interface

Container Width

Many let this one slip, but trust me when I tell you that solid foundations go a long way. By container width, I’m referring to your content’s wrapper, which should always be standard. To be precise, anywhere between 1200-1400px is okay, and for centered, one-column text, I suggest no more than 860px.

Tip: Only let your background images and colors go across the viewport’s full width, but never the main text.

2. Maintain Consistency 

Imagine visiting a website and finding that each page looks entirely different from the previous one. Would you like that? By the very same token, you need to maintain consistency across your brand’s visual elements to establish an identity.

The worst thing you can do is throw in different colors, fonts, and container widths – the different elements need to blend well together, and most importantly, be consistent all across your different pages. So, use one color palette, use cohesive fonts, and stick to one container width.

What I’m saying is: your identity should be consistent and clear from the get-go! Avoid changing any of these elements unless the design really demands it.

3. Using a WordPress Template/Theme?

If you’re using a WP template or theme, you need to be extra cautious since these templates come ready-made. In other words, the professional designer’s priority is to get the theme sold, not get your business making revenues. 

With that being the case, before making the template purchase, you need to make sure that you like its demo, stick to its plan, and build a website similar to the overall demo. That way, you’re reaping the most benefits out of the template or theme. 

Also, I’ve had numerous clients tell me their horror stories about the features they discover once they purchase a theme or template. Of course, those aren’t usually present in the demo, and you’re tempted to use them, but that’s the biggest mistake. Start using these features, and the game is over because the end result will never look as professional as the demo.

So, in a nutshell, don’t change the demo’s layout, and that includes the sizes and fonts. The only aspect that should be changed is the colors, and you choose those right from the first step!

4. Keep It Minimal; Let Your Identity Speak; Less Is More

It can be intriguing to add flashy elements to your site under the impression that they’ll contribute to a professional-looking website, but that’s far from true. If you notice, nearly all high-end website designs are simple, like Google, Apple, and more. Remember Leonardo da Vinci’s quote, “simplicity is the ultimate sophistication.”

Don’t go overboard with colors, drop shadows, fonts, and more, leading to visual overkill. Today, minimalism is what works – never clutter. The more fancy elements you add, the more you lose your professional image, while in contrast, white space = money.

To do so, keep removing elements until you feel like your design is empty. Then, start adding only the most important aspects that your website wouldn’t be complete without. That’ll help you direct your prospects to the right pages, using clear CTAs that stand out on a minimal design. In the end, that’s the only goal of a successful design, isn’t it?

Apple iPhone - White space in website design
This is a trillion-dollar website design – Source

5. Use High Resolution and Large Images

This is one you’d want to pay attention to. Let’s be clear – you either have a budget for a professional photoshoot, or you don’t. While stock photos are always here to the rescue, that’s also a double-edged sword because you’re not the only one who has access to those photos, which is precisely why a professional photoshoot is super important.

Well, what if the budget just isn’t available? That’s completely fine, but there’s a golden rule for stock images, and that’s use Adobe Stock. Why, you ask? Well, 

  • It’s the most expensive, guaranteeing that you won’t come across websites with the exact same images you’re using as you would with, say, Unsplash, for instance.
  • It offers top-notch quality images along with a huge diversity of photos that most won’t pay for, again making you stand out from the crowd.

Choosing the Right Images

Before moving on from this point, I’d like to share with you two vital tips to keep in mind as you choose your images:

  • Try to avoid showing peoples faces, because it’s usually clear that they’re models, and that takes away from the credibility of your business.
  • Go for “zoomed in” images that focus on just one item. For example, if you’re a factory building engines, don’t use a photo showing a person working on the engine. Use one that zooms on his hands and tools on the engine.

6. Use Icons 

People love visuals – that’s a given! They absolutely become hooked to anything that helps them comprehend the message you’re trying to convey without having to read chunks of text, and that’s where icons step in. When people can get a visual comprehension of your content without actually having to read, they won’t stop passing by your website.

For that to work, you need to ensure that your icons fit your website’s looks, even in their shapes. So, say you’re using rectangular and square buttons; you won’t use circular or curvy icons because they’ll take the attention (negatively).

Nonetheless, you do need your icons to stand out – the trick is to strike that balance! They should slightly stand out but still overall go with your overall website design. You also need to ensure that your icons are of the same style (colors, line thickness, and curvature).

Website design - Use of icons
Consistent use of icons – Source

7. Add High-Quality Personal Photos to Provide Authenticity

The human element of websites never fails – your prospects want to feel that your website is talking to them. The best way to add that human interaction aspect is to include high-quality personal photos, be those of yourself, your team, client photos accompanying reviews, or more. The importance of pages with real images is highly underrated.

When a website isn’t cold and impersonal, it’s sure to establish credibility and authenticity. After all, no one wants to feel like they’re dealing with a robot, so that human touch ensures interaction, emotion, connection, and trust during your users’ experiences.

8. Boost Engagement and Conversions With Great Video 

Remember what we were just talking about regarding stock photos? It’s pretty much the same here with video. Today, video is the real king for many people, and video marketing will only continue to skyrocket. Videos perform impressively well and boost ROIs in unimaginable ways, so absolutely, videos should be part of your website design’s look and feel.

Not just that, videos are meant to be highly engaging, and for them to be that on a professional website, you’ll need a videographer.

9. Get First-Rate Website Copy

Believe it or not, website copy is an element of the website design. Did you ever think a business was unprofessional just because of its copy? I bet you did! Because that’s precisely the power of letters and words. 

The quality of content on your website speaks volumes about your professionalism. Therefore, you must be very careful with what’s written on your site’s pages – grammatical errors, lengthy sentences, hard-to-understand sentences, and similar issues are all deal-breakers. People will make judgments about your business and professionalism based on words and sentences.

So, your website copy must be beyond good, which is why it’s best to consider hiring a professional writer if you aren’t one yourself.

Global Desktop vs Mobile traffic for 2020

10. Optimize Your Site For Every Device, Especially Mobiles

You can spend hours working on the looks of your website, its copy, the CTAs, and visuals, but what’s the point if it can’t be adequately viewed from every device? Even Google now ranks websites based on their responsiveness on mobile devices.

Previously, it was an option to create a mobile version of your site or an added feature, but now, it’s an absolute must. And that’s not only for the sake of ranking on search engines but also because more than half of the global website traffic comes from mobile accounts. Ever since 2017, that has been the ongoing trend, and it’s most likely here to stay.

So, no matter how impressive and professional your site looks, if it doesn’t look the same way on a mobile device or just isn’t responsive, that professionalism will undoubtedly suffer, and so will your business and positioning.

Your site needs to have a mobile-responsive design accessible across all devices to provide your prospects with a consistent experience regardless of where they’re visiting you from, be that a laptop or mobile device, and regardless of the size of their screens. When your website is easily accessible on all platforms, that’s true professionalism that your users will appreciate!

Mobile Responsive Design - WordPress Website - George Ilidis
Image from The Villa Italy case study.

11. Have a Plan for Every Page

Many businesses fall into the trap of creating so many pages that are essentially about the same thing, and that’s no good. There’s no rule about how many pages your website should have, but the rule is to have targeted pages. In other words, every page on your website should have a goal!

During this phase, always remember the attention span issue I discussed at the beginning, and remember that your visitors won’t look at all your pages – they probably won’t look at more than 3. So, avoid the clutter and establish a goal for every page. Then, plan your way towards that goal before starting moving pixels or adding sections to a WordPress theme.

12. Craft a Well-Written About Page

Your about page is one of the most important pages for your website. Why? Because it’s one of the most powerful tools that serve as an ice-breaker between you and your prospects. If you get it done right, you’ll position yourself as an authority figure and a go-expert in your field. Not to mention, you’ll have a lot of loyal fans by your side, just based on your success story.

Tip: Distinguish between your contact us page and about page – the about page is meant to establish a connection with your visitors by telling them more about yourself and what you do. If you do that properly, get ready to welcome a lot of organic traffic to your site!

13. Work With a Professional Web Designer

While tools like WordPress certainly make life easier, it’s still best to work with a professional web designer instead of opting for a template. If your budget allows it, don’t think twice about seeking a pro.

No budget for a custom website? At least seek a consultation. You will be impressed when you see how easily an experienced web designer can guide you even when you’re using a WordPress theme.

What’s Your Say?

You heard all that I had to say, so what do you think of the list? Let me know by commenting below and share your thoughts on what you think makes a website look unprofessional. Also, if you’ve tried implementing some of these tips, share the impact!

About George Ilidis

About George Ilidis

I'm a freelance Web Designer & WordPress Developer building custom WordPress websites that provide excellent User Experience. I have a solid background in the SEO industry and I know how to deliver websites that attract traffic and convert visitors into buyers.
View my work

Reader Interactions

Speak your mind

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