How To Design a Great Website Homepage

Summary of the video:

Keep in mind that your homepage is the window to your brand so it really needs to pop.

Oftentimes it’s one of, if not, the most trafficked webpage that you have on your website. It is the starting point for where people try and understand your brand, your company and what you do.

Your homepage should:

  • function as the table of contents of your website. When somebody goes to your website they can see that you’ve got on your website.
  • have some engagement media with call to action
  • have content silos
  • scrollable
  • connects to the main offer
  • define your role
  • footer (miscellaneous section)

Tips for improving designs:

  • Master and always practice design principles like golden ratio, rule of thirds and others.
  • Maintain a great collection of good typography combinations. Always take ample time on typography. Great designers took hours or time to perfect it, not just minutes or just do random typesettings
  • Follow and “See First” social media accounts of graphics designers that can motivate and inspire you.

Process in Designing a great website mock design

Add smooth scroll functionality in your website

Here’s how to create scroll to any element on the page in your website. If you’re using WordPress or a static HTML, you don’t need to use a plugin. It’s very simple:

Just create a custom.js file in your website and paste the code below, this code will check if the href attibute of the anchor start with a sharp sign(#) and scroll the page to the target element

<script>
jQuery(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

Additionally, if your website have a sticky header some of the content of the target element will go underneath the sticky header to avoid this we have to rewrite the code.

We have to get the height of the sticky header by adding this code

 var headerHeight = $(".stickyheader").height();

then we have to change this code

 scrollTop: target.offset().top

to this

 scrollTop: target.offset().top - headerHeight

this will subtract the sticky header height to the target offset

the final code should be like this

<script>
jQuery(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    var headerHeight = $(".stickyheader").height();
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 500);
        return false;
      }
    }
  });
});
</script>

If this steps are difficult I suggest to check wordpress plugin here https://wordpress.org/plugins/search/smooth+scroll/ that have the functionality you need. Goodluck 🙂

Basic Website QC

Below are the basic quality check to do before launching a website. We need to assure that:

  1. Site title and tagline is properly set
  2. Search engine visibility has been unchecked
  3. Blog posts’ Author should be properly set
  4. Custom favicon has been added
  5. Website search functionality is working
  6. All contact forms are working
  7. The 404 page has been created and customized
  8. All pages are mobile friendly
  9. All pages and elements are visually good
  10. All links are working – Use Screaming Frog tool for this