Designing Your Website

Above The Fold

In the early days of publishing, ‘above the fold’ was a term used for content that appeared on the top half of the front page of a newspaper. When newspapers were displayed on a newsstand, the headlines and lead stories that appeared above the fold were the most visible, and catchy headlines and vivid imagery were commonly used to attract readers’ attention, convincing them to buy the paper.

As publishers moved their businesses online and web design evolved in the 1990s, the term continued to stick. Today, the fold no longer refers to an actual fold in a newspaper, but the bottom of a browser window, or approximately 600 pixels from the top of the page.

  1. Put the most important information “above the fold” on your website. Make sure your visitor’s eyes are directed to exactly what you want them to see – without the clutter.
  2. Put your most popular products or services into a single category and highlight that category above the fold.
  3. Any element on the homepage that must immediately attract the attention of users should be placed ‘above the fold’.
  4. Keep conversion elements above the fold.
  5. Opt-in boxes and other conversion elements should be above the fold for optimal results.

Call To Action (CTA)

A call to action (CTA) is a prompt on a website that tells the user to take some specified action. A call to action is typically written as a command or action phrase, such as ‘Sign Up’ or ‘Buy Now’ and generally takes the form of a button or hyperlink. In digital marketing, this can take the form of the text on a button (a CTA button) or a web link and in email campaigns, CTAs often link to a web page where the user can take further action.

  1. Place your call to action up front – ideally above the fold and so that it stands out among any other buttons on your page.
  2. If you’re using a long copy, add multiple calls to action throughout the copy. One above the fold, one at the end, and others in logical places throughout the body text.
  3. What happens after your user clicks the Call to Action button? Make sure the entire process flows smoothly and they know exactly what to expect.
  4. Use CTA buttons rather than links. Buttons are more obvious and more clickable, particularly when viewed on mobile devices.
  5. Include a headshot. Don’t be afraid to include a personal photo in your sidebar or near your CTAs. It can reduce the sense of risk by showing that there’s a real person behind the brand.
  6. Make your call to action bigger. In most of my testing, I’ve found that the bigger the CTA, the better the conversion rates. Many companies I’ve worked with have simply made their call to action button a bit bigger and watched their conversion rates grow by 10 percent to 25 percent. That’s significant. According to Fitt’s law, the bigger and closer your CTA button, the easier and more likely people are to click on it.
  7. Test your Call to Action text. Try “Order Now” instead of “Buy Now” or “Checkout”.
  8. Test the shape, color, size, and wording of your Call to Action Button.
  9. Draw attention to important information with hand-drawn arrows, underlines, and asterisks. Don’t overuse this effect to the point where it’s distracting though!

Design Thinking

Design Thinking is an iterative process in which we seek to understand the user, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that might not be instantly apparent with our initial level of understanding. At the same time, Design Thinking provides a solution-based approach to solving problems. It is a way of thinking and working as well as a collection of hands-on methods.

Design Thinking revolves around a deep interest in developing an understanding of the people for whom we’re designing the products or services. It helps us observe and develop empathy with the target user. Design Thinking is extremely useful in tackling problems that are ill-defined or unknown, by re-framing the problem in human-centric ways, creating many ideas in brainstorming sessions, and adopting a hands-on approach in prototyping and testing.

  1. Here are some rules of thumb to follow for accent colors:
  2. It needs to be bright enough to draw attention to whatever you’re attempting to draw attention to.
  3. It needs to be complementary with the other colors on your website so that it doesn’t crash.
  4. It needs to stand out from whatever background it’s on. This means that a blue button on a blue background probably isn’t a good idea.
    It needs to be reserved for key calls to action so it doesn’t blend in by getting overused on the site.
  5. Don’t be afraid of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen.
  6. Don’t put all your testimonials on one page. Put them alongside the product to help increase credibility and trust.
  7. Use alternate colors for your call to action buttons, otherwise, they can be lost in the overall color scheme of your site.
  8. Check your error pages. Use them as an opportunity to direct people to more recent/relevant content. Don’t just give them the 404!
  9. Do not have unsolicited windows or graphics ‘pop-up’ to users. Users have commented that unsolicited windows or graphics that ‘pop up’ are annoying and distracting when they are focusing on completing their original activity.
  10. Let users know if a page is programmed to ‘time out’, and warn users before time expires so they can request additional time.
  11. Provide a link to printable and downloadable document versions. Many users prefer to read text from a paper copy of a document. Paper allows users to take notes, highlight ideas, follow presentations, and save information that may be difficult to find at a later time.
  12. Don’t Ignore the Importance of Your Site’s URL Structure. You should ideally end up with something that looks like a pyramid, with an increasing number of pages the further down you go. This top-down approach can be seen on a number of very successful websites.
  13. Split test a holiday theme for your website. Target it to visitors who come from areas where that holiday is celebrated.
  14. Use whitespace effectively in your design so that it draws the eye in toward the call to action. Empty space doesn’t have to be filled.
  15. Put the most important information you want visitors to read at the top and bottom of your page. People read those first, and typically only skim the middle.
  16. Can the visitor get to where they want to go on your site in 3 clicks or less? If not, make it happen. Don’t make them guess how to navigate your site.
  17. Consider giving users the ability to increase font size on your site for easier readability (particularly on smartphones).
  18. The homepage is not the only important page. Consider landing and product pages equally important.
  19. White space is not wasted space. Not only is white space responsible for readability and content prioritization, it also plays an important role in the visual layout and brand positioning.
  20. Provide users with appropriate feedback while they are waiting. If processing will take less than 10 seconds, use an hourglass to indicate status. If processing will take up to sixty seconds or longer, use a process indicator that shows progress toward completion. If computer processing will take over one minute, indicate this to the user and provide an auditory signal when the processing is complete.
  21. Users frequently become involved in other activities when they know they must wait for long periods of time for the computer to process information. Under these circumstances, completion of processing should be indicated by a non-disruptive sound (beep).

Images On Your Website

  1. Use real photos instead of corny stock pictures. Nobody believes for a minute that you’ve got a multi-ethnic, always-smiling, drop-dead-gorgeous staff.
    Instead of an ordinary image of your product, test an image of your product actually being used by a customer.
  2. Instead of a plain product image, consider adding an image of what the successful outcome or finished product looks like.
  3. Use high-quality images.
  4. Using generic, tacky stock photos can send the wrong message about your brand. Use professional-quality photos where possible.

Studies show that people remember 80% of what they see and only 20% of what they read. In fact, there’s research that suggests that 65% of people are visual learners. MIT also found that the human brain can process images in as little as 13 milliseconds. These and many other statistics favor the idea that images are powerful means of communication. Perhaps, their most important function is that they remove language barriers, as they are easily understood by everyone in the world. On the Internet, images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone “a picture is worth a thousand words” meaning-rich tools, and sure, on social media.

When it comes to websites, images matter because their role is to capture the attention of the visitor. They can convey complex messages in the blink of an eye. Looking at the image of a hotel room, the site visitor can see the décor of the room and some of its amenities without the need of reading lengthy descriptions immediately. Relevant images – instead of “filler” images that only have the purpose to look pretty – enhance the user experience. They deliver a contextual message, which answers the need for information. Naturally, when guests visit the website of a hotel, they are looking for information and images to deliver it quickly and explicitly. An image gallery optimized for stress-free browsing is another UX plus.

Landing Pages

In digital marketing, a landing page is a standalone web page, created specifically for a marketing or advertising campaign. It’s where a visitor “lands” after they click on a link in an email, or ads from Google, Bing, YouTube, Facebook, Instagram, Twitter, or similar places on the web.

Unlike web pages, which typically have many goals and encourage exploration, landing pages are designed with a single focus or goal, known as a call to action (or CTA, for short).

It’s this focus that makes landing pages the best option for increasing the conversion rates of your marketing campaigns and lowering your cost of acquiring a lead or sale.

  1. Eliminate links that don’t serve a specific purpose from your landing pages. Make the objective clear and obvious to avoid distracting the customer.
    Does your headline include some reference as to where the visitor clicked from previously? Tie in your landing page with your ad or the user’s search for seamless engagement.
  2. Give your customer an incentive to fill out additional form information by placing it on the “Thank You” page and offering a freebie for their participation.
  3. Use a P.S. to throw in an enticing bonus or a reward for taking action within the specified timeframe. People often read headlines first, then read P.S.’s second.
    It should go without saying, but don’t direct your PPC or ad traffic directly to your homepage. Create landing pages based on actual searches.
  4. Have a link to your coupon or current promotion right on the landing page. Better yet, automatically fill in the “coupon code” at checkout if possible.
  5. Keep the look and feel of your landing pages consistent with your ads and main website. No one wants a mental disconnect from clicking an ad to visiting the actual site.
  6. Don’t ask too many questions on your landing page. Instead, let the visitor click the call-to-action first. Even then, limit how much you ask for upfront.


smartlybuilt-facebook-blog smartlybuilt-linkedin-blog smartlybuilt-twitter-blog

Similar Posts