Have you ever found yourself staring at a web page and thought: “Wow, I actually hate this?”
The days of cringe-worthy websites are (mostly) past us. We lived through MSPaint graphics and amateur GeoCities sites, and now we have web builders like Wix and Squarespace making it easy to create decent pages. Templates and guides exist to keep amateur web devs from making anything too atrocious, and designers are always around the corner to lend a hand whenever needed… For a price.
Yes this is a real website.
Aside from a few outliers (like the one above), bad websites are usually not offensive to the senses anymore. A “bad website” nowadays is one that doesn’t convert customers, drive traffic, or otherwise serve its function.
Even if all of the other aspects of a company are firing on all cylinders, a bad website can hold the entire operation back. When prospective customers feel like a website doesn’t jive with them, they bounce.
“Alright buddy I’m out.”
Websites are more than just placeholders for your company’s quarterly updates. A good website will drive demand, generate leads, and provide shareable content for your audience, but you have to get it to that point first.
Before designing or redoing your website, make sure you fully understand your marketing funnel and the route that you’d like your prospects to take from beginning to end. This will help you get a sense of which functionalities your website needs, making the design process smoother.
The parts of a web page
All websites are made from the same few elements, regardless of how they were created. Your users don’t know if you used a template, made it in InDesign, or wrote the raw code yourself. What they do care about is whether or not your site speaks their language and lures them in for more.
Most websites feature the same basic parts across every page. While there are some industry-specific exceptions, like e-commerce or web applications, the most common and substantial types are used repeatedly and should be understood.
To someone unfamiliar with web design, typography might just mean “which font should I use here?” To a dictionary, typography is “the style and appearance of printed matter.” A better definition, especially for digital marketers, comes from our pals at CareerFoundry:
“In essence, typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages.”
Typography plays a strategic role in captivating audiences and building brand recognition. When a brand or entity consistently uses the same typeface, users will begin to associate the brand and typeface together, creating familiarity and quicker recognition.
Good typography serves to enhance the user experience. Typeface experts are able to select typefaces and typographical elements that subconsciously align with a company’s tone, style, and voice, while also remaining aesthetically pleasing and legible. Your fonts, and the style in which you use them, becomes your brand.
As an easy example, simple messages might be written with minimalistic fonts in shorter paragraphs, and official-sounding messaging might feature long explanatory paragraphs with a formal font.
Rose Law Firm uses an old-style heading and narrow paragraph font, with an accent color to match the company’s brand.
When choosing a typeface, shoot for something that
- Is unique and interesting
- Is clearly legible; none of the letters look confusing together
- Matches the company’s vibe
- Carries the tone of the company’s messaging
In web page design, a hero image is any large, banner-style image that occupies the top of the web page so that users see it first upon entry. A hero image should be high-quality and clear, as to not cause any strain or confusion for the users.
Hero images serve as a visually appealing landing feature to immediately create a good impression on your users. Because of their versatility, a hero image can be just an image, or can also feature text and buttons over top of it.
Video producer Drop Creative tastefully uses a video instead of a hero image.
Hero images can be anything from video content to technical graphics, as long as it does a good job of conveying the brand’s message. Some companies use hero images as an opportunity to showcase their products and display their benefits, whereas other companies use hero images to build trust or facilitate emotional reactions. It’s all about using graphics that match your brand.
Pro tip: Hero images with huge resolutions will slow down page loading speed. Be sure to re-size them to screen size.
In marketing, a value proposition is a concise statement that describes why your prospects should do business with you. A value proposition should also paint a clear picture of what your company offers its customers.
Value propositions are unlike mission statements in that a mission statement is a static piece of unchanging information, whereas value propositions change to fit each audience.
If you’ve done your market segmentation, you can alter your value proposition in each campaign to ensure that it speaks to each audience. Savvy spenders might react favorably to a message that boasts a low price tag, for instance.
Crazyegg’s value proposition is bold and awesome
Pro tip: To facilitate real trust with your audience, avoid diluting your value proposition with buzzwords and jargon.
Beautiful technical graphics and process images are a phenomenal way to creatively describe what you do without even having to use words. A good technical image will make a clear point without requiring much of an explanation.
Technical images differ from hero images in two key ways. Where hero images are meant to be a visually captivating way for users to land on a web page, technical images can be used anywhere on a web page and are meant to show the product and its benefits in a stylized way.
Image via TSheets
TSheets does a great job using tech photos on their site as a substitute for hero images and icons. The tech photo above clearly shows that TSheets users clock in and out on their phones, and then use timesheet management tools on their desktops. This technical image gets an A+ because this is exactly what users do with the software.
One of the more common types of iconography is trust icons of a brand’s clients and partners. Featuring your customers’ logos on your site is an easy way to inform your users of your trustworthiness. This phenomenon is called social proof, and is super effective in marketing.
To avoid an overly-psychological explanation, social proof is the “they tried it so I’m gonna try it too” phenomenon. This is the reason statements like “40,000 US-based tech companies use our software” are more impactful than “tech companies like our software.” If you’ve got a solid customer base, your future customers need to know.
Nuarx cybersecurity uses trust signals to appeal to the fast-food industry.
Icons are tiny little pictures that are used in web design to help your users understand content more quickly. Many companies use similarly-styled icons across their entire brand in order to facilitate more widespread recognition from their potential customers.
In web design, icons are generally used to:
- Accompany content on text-heavy pages
- Draw attention to specific features
- Enhance infographics
Jottful uses icons to signify its three-part sales process.
A call to action (CTA) is to marketers as a sales pitch is to salespeople. It’s the marketers’ chance to take their shot and ask something in return from their audience.
Calls to action aren’t as high-stakes as a sales pitch. A typical call to action might be something like “sign up for our newsletter” or “sign up for our free 14-day trial.” Worst case scenario, the user just ignores it. No harm, no foul.
Graphically, calls to action tend to exist in the form of buttons or other links that redirect the user to a new page, form, or download.
Neil Patel’s call to action is his free website analysis.
A call to action shouldn’t be a heavy lift for your users. Instead, it’s better to try to pitch relevant ways to keep them engaged without expecting them to make a huge commitment. For instance, don’t try to sell your product at the end of every piece of content; That’s just spammy.
When creating web pages, it’s important to keep the design exciting and engaging. Lots of words, walls of text, and lengthy paragraphs are a sure-fire way to bore your visitors to death and subtract from the quality of your content.
Try to find ways to say less with more. Remember, you don’t have to tell the entire story right on your landing page. If your visitors care enough, they’ll click around and get the full story.
Coupled with icons, a few quick blurbs and paragraphs can paint a clear enough picture for your visitors to decide whether or not they want to learn more. Keep them short and concise, and save the lengthy writing for lower in the marketing funnel.
Adobe describes their product Illustrator in one clear sentence.
Again, social proof is extremely valuable as a way of boosting your brand’s reputability. If your business has customers that are willing to be featured on your website, you are in luck.
Customer testimonials can come from either another business or a single person, depending on the type of products or services you offer. The format, however, can be whatever works best in your specific scenario.
Testimonials can be formatted as:
- Standard quote (with photo)
- Video testimonials
- Social media posts
- Yelp/Google reviews
- Case studies (written by you about your customer)
- Case study (written by your customer about you)
Useful resource: Free case study templates.
A testimonial given by a customer can be used in a variety of ways. Outside your site, the same content can be chopped up and posted on social media or used in advertisements, telling the story as far and wide as possible.
Long-form testimonials like case studies are also perfect content for prospects who are looking for a nudge in the right direction. Hearing a story about a buyer just like them might even bump them to the next pipeline stage. 💪
Want to generate more leads? (Of course you do.)
The B2B Marketer’s Toolkit collects 120+ of the best lead generation tips ever published on the Nutshell blog. Download it today!
How to design your own web pages
Every web page should have a purpose. Whether you’re building familiarity, providing content, or describing your product, every single page on your site needs to provide a specific value.
Consider the depth of your web page. Your home page and content are at the surface level, and the products and “about us” pages are a little deeper. Because of this, the content and layout of these pages should match the corresponding level in the marketing funnel.
Starting from scratch? Check out Digital.com’s Best Web Hosting Providers of 2021
Your homepage should effectively convey the “big picture” of what your company does, as well as why visitors should do business with you.
This is where your branding takes the front seat, as homepages are often the most visited web page on any website. A good homepage is a showcase for your brand’s identity and its high-level offerings. The specifics get addressed on the web pages later on.
Pro tip: A good homepage needs to be very aesthetically pleasing. If this isn’t your strong suit, it might be worth it to find a professional designer, even if just for this page.
Aesthetics make people feel something.
Be sure to keep the verbose explanations on your homepage to a minimum. A “what we do” statement is fine, and even some copy to explain how your products work. However, it’s easy to get carried away, which is why the full explanations should exist in the right places, like specific pages about the company itself, the products, the partners, etc.
Be sure to throw your icons in there to jazz up the content. Good iconography can even be used to break up your value statement, signify different products or services, and provide spacing and relief to your homepage’s overall design.
A good homepage is also optimized for easy navigation. Visitors should be able to follow whichever path appeals to them most, without being confused by tons of options and offers to greet them—save those for the lower (in the funnel) pages.
Last but not least, the homepage needs clear CTAs so that visitors don’t hit a dead end. The first CTAs should be placed after the value propositions, roughly in the center of the page. The second CTAs go at the bottom of the page, so that visitors don’t have to scroll back just to continue on the website. If your page is small, stick with one CTA at the end.
A landing page is a tactical page that is created as part of a marketing campaign. A landing page’s URL will be featured as a CTA in a newsletter, advertisement, other piece of content. When users click the URL, the click is tallied, and the campaign’s effectiveness can be measured.
Because of their strategic purpose, landing pages don’t have the same open-endedness that homepages do. As part of a marketing campaign, a landing page features one specific offer, and thus has only one CTA.
Image via Instapage
A landing page’s sole purpose is to get visitors to convert by clicking its CTA. Paragraphs, company descriptions, and other content can distract from the goal of the page. Keep your landing page’s content minimal and streamlined. It’s all about that CTA.
An all-star landing page is typically outlined something like this:
- A hero image to captivate users. The first impression is important, so even if your hero image is a simple blue wave design, it serves to set the aesthetic tone for the rest of the page.
- Title and subtext. Your page title reinforces why the users are on the page, and why they should be interested in your offer. The subtext serves to provide more information and reel the user in. Title and subtext can go right on top of the hero image.
- A value proposition to encourage users to opt in. The value proposition should be specific, targeted, and do a good job of explaining what’s in it for your users if they click your CTA. The benefits you list should be tailored to the viewers of this particular landing page. Usually the value proposition is featured just below the hero image.
- Social proof. It’s always a good idea to toss customer quotes in there, especially when accompanied by a customer photo. This combo package subtly reminds the user that other human beings, just like them, are fans of your product. As long as it doesn’t subtract from the design or aesthetic, social proof can smush right between the value statement and the CTA itself.
- The CTA. On a landing page, there’s usually only one CTA, and it’s either found after all the content, on the bottom of the page, or positioned on the hero image, just below the title.
Bonus: Check out this handy guide to landing page builders.
About Us pages
Practically every company has a page about themselves. Usually, an About Us page will describe things like what the company does, how they were founded, who works there, and what their mission is.
Blue Acorn reports that customers who visit an About Us page are five times more likely to make a purchase than those who don’t. Furthermore, customers who visited an About Us page spend a reported 22.5% more on their purchases. Why is this?
There are two leading theories, which both may be true in different cases. The first theory is that customers who are already about to purchase something tend to visit the About Us page to see exactly who they’re buying from, mainly just out of curiosity.
The other theory is that the About Us page is actually a compelling piece of content in and of itself, and people who visit it become likely to convert because of its content alone.
In terms of page design, the About Us page is a flexible one. Some companies take a graphical approach, featuring photos of their employees and workspace. Other companies take a verbal approach, and center around the company’s story, using photos as a secondary form of content.
Some Nutshellers, currently working from home.
Whichever approach you decide to take, try to design the page around the questions your prospective customers might be asking:
- How old is your company?
- Where are you located?
- How many employees are there?
- What are the people at your company like?
- Are you “the real deal,” and a genuine fit for me?
Designing web pages is all about building a brand that supports your messaging, and drives prospective customers down into the marketing funnel. From e-commerce to talent portfolios and B2B sites, the fundamentals vary but the marketing aspects remain the same.
You now understand several different types of website elements, as well as the differences between the main 3 types of web pages. You’re totally qualified to hop on WordPress and start making your own, but if you need to hire a designer, that’s okay too.