Hero image website design ideas

Website design ideas to optimise your website

Website design ideas to optimise your website

Well done, you’ve chosen an unforgettable domain name and a brilliant no-stress WP theme. Now it’s time to flesh out how your website design ideas will look and, just as importantly, how your site will function.

This is where you ask yourself; do I want a gorgeous slider on the front page or a simple Hero image? Do I want a one page design or multiple pages? What about the layout; full width, boxed, one sidebar (left or right)? How will visitors find their way around the site? Should I have a menu in the top bar? And oh my God, do I need a sticky header and are they any better than those raspberry sticky buns we used to get from the corner store?

But why is website design inspiration so important? Well according to OneDay Labs, 75% of your site visitors will judge your company or brand based on your website. And 94% of those first impressions are based on design factors. 

First impressions count for website design ideas

Building your own website, even with all the advantages and options WordPress themes offer you, can be a little overwhelming. That’s why I’m writing this blog series. My goal is to help you put your own website together with less stress and maybe save you a bundle of time and money in the process.

Draw on your inner genius and use a pencil

Using a good old fashioned pencil or pen (or stylus) and paper is a great way to start generating website design ideas. Do some rough sketches of the elements you want to include in your website. You can also build a more formal wireframe using free online tools such as the Pencil Project (a Firefox add-on) if that’s your preference. Keep it simple at this stage. Don’t worry about colours or fonts–they can come later. Starting with your home page build a picture of your ideal website.

This way you can actually get an idea of how those sidebars will look, or how big you want your slider to be. Play around with the site navigation. Maybe you only want a few menu choices in the header or top bar or you’ll opt for a one page design where people scroll down a single page to see all the sections. So, let’s look at a few key website design elements.

Full width or boxed?

Not all free WP themes give you this option and it may not matter much to you anyway but this is one decision you’ll want to make early on. With full-width web pages all the elements such as images will expand to fill the entire screen. Boxed width ensures all the page content is viewed in a central section framed by a pillar at either side of the screen. Not sure which one to go with? Well it’s mostly down to personal preference.

Full width gives you the option of the entire screen to play with and it can look less cluttered. The potential downside is that some devices or browsers may not render your website the way you intended with stretched photos or even some missing elements. With modern coding and responsive design these risks are minimised but it’s worth thinking about out how your users usually visit your site (mobile, tablet or desktop).

Boxed, on the other hand, can look…well, boxed in and your site might have a lot of white space on certain devices. But the boxed layout usually gives you confidence that your site will be highly responsive. Some free WordPress themes allow you to customise the boxed frame and add background images or change the colour.

It’s worth noting that Google is moving towards ranking sites primarily on how well they display on mobiles. So, whether you go for full-width or boxed just make sure your site works well on mobiles.

Hero image or slider?

A glorious hero image can make a powerful first impression. Earlier we learned how important those first impressions are. We always knew attention spans were becoming minuscule. But research now tells us people will form an impression of your website in 0.05 seconds (50 milliseconds). That’s scary.

Hero image website design ideas

A hero image for a larger than life message

It also means your website design ideas for your home page are super critical. When you’re playing around with your website sketches think about: 

  • What do you want the top part of your homepage to do?
  • How much of the page will it occupy?
  • Will a large image or slider hamper visitor navigation around the site?

Most recent research suggests sliders and carousels are not a good idea because they distract your reader away from the most important messages on your page. They also tend to slow down your page loading speed and frequently don’t perform well on mobile. Check out this article on 6 reasons why sliders are bad for conversions.

But you really badly want a big glorious image on your home page and you can have one. A hero image–that large in your face image at the top of many websites can be a great place to highlight your heroic product or service. That above the fold real estate is priceless so choose an image that reinforces your brand message and showcases your page title or core message in  some way. But don’t get carried away with lots of text or conflicting CTAs and banners.

Give your website the KISS of life

It’s the Keep It Simple, Stupid principle. Avoid trying to cram too many messages or too much information onto your front page. Use white space to highlight focus points and to give your readers a break. Very few people enjoy reading a massive wall of text on a web page. And keeping enough space between buttons and interactive elements is critical for mobile functionality too.

Hotspot and eye-tracking studies demonstrate that people tend to read websites in an F pattern. They scan the top from left to right, the vertically down the left side before  glancing at the middle of the page. So, make sure you concentrate your most important information in those areas.

Do you want sidebars or a side salad with that?

Sidebars are like salads in many ways–some people love ’em and some hate ’em. Whether sidebars are good for your site will depend essentially on what you put in them and your users’ preferences. If you just clutter them up with all the stuff that you can’t find space for elsewhere then it’ll just be a distraction for your visitors. Bryan Harris at VideoFruit did an experiment to see how sidebars or no sidebars affected conversions. The result: their website version without sidebars produced 26% more conversions.

However, plenty of other websites have great success with placing highly visible CTAs and promotions in sidebars. Neil Patel is a great believer in sidebars and part of that value is in increased SEO opportunities through links to his other blogs.

You might also want to think about how your sidebars will display on mobiles. That alone might be enough to make you opt for a minimalist design. Remember, mobile friendliness should be an important consideration behind all your website design ideas.

Menus

When you’re designing your website navigation you want to think about two things: what each page is designed to do and why you want your visitor to leave that page. Remember, the KISS strategy? Avoid cluttering your pages with too many or too complex navigation options. You want to aim for menus that are:

  • Clear and simple to understandMenus website design inspiration
  • Logical–have a good reason for taking people away from the current page
  • Mobile-friendly with sufficient space and padding for easy touch control
  • Where the visitor expects them–menus in odd positions get missed

You might also want to play around with vertical menus or even a mobile type menu icon that only opens when you click on it. This is a great way to really focus your visitors’ attention on the hero message. And rather than having too many drop-down menu options you might think about adding those sections to your front page. You can be creative about encouraging visitors to scroll down to them.

Footers

Footers are not just an afterthought. A surprising number of people do scroll to the bottom of the page and most of them will have certain expectations about what they’ll find there. They will expect to find your social media links and contact details or a contact form (easier than your email address) so don’t disappoint them. They may also want to view your privacy policy and a site map. Copyright info is another important addition to your footer area.

So there you have a quick run down of some website design ideas to explore as you plan your new website. Have fun, be creative, and be daring.

If you missed the first two articles in this series check them out here: No stress WordPress themesUnforgettable website names.

Keep an eye open for the next blog on choosing the right fonts and colours.

Disclaimer

I am not affiliated with any of the sites or products mentioned or linked to in this article. I receive no compensation whatsoever for any recommendations I make. And I cannot be held liable for any problems or issues that may arise from your following my advice.

 

 

 

 

Posted in WordPress websites and tagged , , .