Anatomy of a Professional Website [Infographic]

Tue13Jan2015

design · 2015 · 2015-01 · tips

For many of us, the new year brings an opportunity for a new enterprise—be it a business, non-profit, or personal project. And most likely, you’ve realized that a website is an essential part of that vision.

But somewhere between the vision and the final result, there can be a few false starts. Personally, the sheer number of templates to choose from was enough to trip me up when I built my own site.
Start throwing in photos, widgets, and text...and before you know it, your homepage feels like a jumble of different elements.

As an editor, I always recommend that people create an outline before they start to write, and the same is true for your website. Just like a good essay has a thesis, an introduction, and a conclusion, a good website has certain
elements.

Jimdo website Marks & Hemment, based in Spain, provides a great example for us to walk through. Using the template Zurich, the website clearly lays out what the company is, what they do, and where you as a customer should go next to
explore their site. See how they do it in the infographic below:

Of course, there’s no one way to do things—in fact, part of the fun of building a website is the ability to be creative. But if you’re feeling stuck, I really encourage you to try out this
model and see if it works for you and your users.

1. Header

Not to overstate its importance or anything, but your header is going to be the first thing that visitors see, and also appear on every single page of your site. Fortunately, simple headers are often
the most effective. Choose an eye-catching image (here are a few resources for finding good ones) and pair it with a logo, if you have one, and your site title (most likely your brand/company name) in the font
and color of your choice.

Note: If you don’t have a logo, there are some low-cost options available. We recommend using 99designs, where you can sponsor a logo competition and get entries from many different designers. If you need something right away, you can also purchase a pre-made logo from their logo shop and have it customized within 24 hours.

2. Navigation

A lot of people get tripped up with what to put in their navigation bar, often taking a “kitchen sink” approach and just listing every page they have. But navigation menus work best when they
are clear, straightforward, and only take up one line. Not only do clean, simple navigation bars look better, they also help with your search engine
optimization (SEO).

Some templates,
like Rio, are perfect for showcasing a large background image, logo, and simple, clean navigation. For more examples, check out our post on the Hottest Website Trends.

3. Products & Services

Every website is different, but if you offer a few main products or services, you should describe them clearly and succinctly in the top part of your content area where they are the most visible. If
you have an online store, you likely won’t be able to display every product right on the homepage. By choosing your most
popular items or your most important categories, you can highlight your main strengths and make your customers want to learn more. For another good example of how to do this, check
out our breakdown of the Warby Parker
website.

Let’s say you’re not an online store, but rather a professional or freelancer. You won’t display products here, but you can talk about your main services offered, or your main strengths. Just like
with an elevator pitch, you only have a few seconds to describe your value proposition. So if you have one chance to impress or interest visitors, this is where you would do that.
With only a few seconds, what would you choose to feature?

4. Call To Action

Most people leave a website within 10-20 seconds. Your goal is to get them to stay longer and
explore. That’s where a good "call to action" can help. Once you’ve piqued someone’s interest with your header, products, and services, you want them to click in to your website and keep learning
more about you. A link or button here with an engaging, active direction ("learn more” or “I want one”) will make it clear to people exactly where they should go to reach the next step. Here are some
other good tips on creating effective calls-to-action.

5. Additional Information

As much as you want to focus on the most essential information, there’s always going to be a little bit more you want to say. So, if necessary, you can put more details further down on your homepage.
You can also use this space to include photos that help set the tone for your site.

6. Testimonials

Just as social networks thrive on personal recommendations, so too do businesses. Customer testimonials lend legitimacy to your website, and can also help by letting other people
talk about your strengths so that you don’t have to.

Extra credit if you can include photos—either of the people saying nice things about you, or of your product in action. According to B2B marketing company Pardot, “one of the most persuasive pieces of content that a consumer will view is a testimonial
or a review by a another product user.” If you're new to customer testimonials, check out Jimdo U.S. CEO Stephen Belomy's tips for getting started.

7. Social Media

It was once common for social media information to be hidden on an About or Contact page, but no more. Now it's standard to give it a prominent place on your homepage. There are many ways to do so,
and even some widgets you can use if you're looking for different
styles. Whatever you choose, just make sure they are visible so that people can easily connect with you. This is an area where it doesn't pay to be too original—people are clued in to the
"standard" social media buttons that you see on most websites, so it's wise not to stray too far from those.

8. Footer

Last but not least, the footer helps tie everything together. Often considered the "table of contents" for your website, this is a good place to put your contact information, privacy or refund policy, or any other
information that is important, but maybe not as compelling as what you've placed further up on your homepage.

Don't forget! When you're ready to take the plunge, your business should really have its own custom domain name and email address. Set these up quickly and easily with a JimdoPro or JimdoBusiness upgrade.

And there you have it, a breakdown of the essential elements of a successful business website. Again, there are many ways to put a site together, but this is a good model to start with. Anything
missing from this list that you would add? We always love to hear from you in the comments.

Maggie

Content Editor at Jimdo

Maggie joined the team to craft the voice of Jimdo for all products and marketing channels. In her previous work, she edited for organizations covering the environment, cities, and sustainable
business. When she's not adding serial commas, you can find her camping with her husband, cooking, and reading New Scientist.