As you read this, approximately 571 websites are being created. That is a lot of online stores, blogs, resumés, news websites and cat pictures.

Not all of those 571 people actually know how to build websites. Fortunately, there are tools for that. But even the most amazing tools can be used to create a pretty bad website. Apply these design principles to make your site look sleek and professional.

But Wait!

Before you begin, think about your users. Do they want to be informed, entertained or to interact in some way? What do you want them to do on each page, and how are your going to be fulfilling their specific needs?

Use these answers to draw a map for your site on paper. Make an outline of all the pages you’d like to include and how they fit together.

Okay, on to the design stuff.

Follow the Grid System

The grid system is a design approach that splits your page up into a certain number of columns. Each thing on the page can be any number of columns wide, and start at the edge of any column. This gives your site a unified look, and improves readability and usability.

Unless you’re building a site from scratch, you won’t need to worry about actually setting up the grid. It’s already built into most site themes. What you need to do is look out for website layouts with different sections, columns and boxes.

Space Things Out

Example of good website spacing from AppleStart by using the rule of thirds or Golden Ratio to balance content and draw your users’ eyes to specific areas.

  • Adjust line spacing. Make sure there’s enough space in between your lines of text.
  • Use white space. It doesn’t have to actually be white. White space is empty space on your page. It helps draw users’ eyes to the important stuff, and will keep your page from looking too cluttered. Think of it as breathing room.

Use High-Quality Graphics

Choose images that will connect with your users and help with your brand positioning. A lot of websites don’t really think about the overall look of their images. So you can really stand out by using professional-looking pictures or stunning free stock images. More image tips:

  • Consider spicing things up with videos, GIFs, infographics, and other types of visual content.
  • Don’t forget to optimize your images in size—this keeps them from loading slowly and using a ton of data for mobile users.
  • Include alt tags to describe the image. This makes Google happy, and also makes your site more accessible for the visually impaired.

Create a Visual Hierarchy

Example of visual hierarchy in web designYou know how one of the first things you see on most sites is their logo? It’s often larger than other elements close to it, and located on the top left side. Why does that help? Because 69% of people spend more time looking at the left side of the page on websites.

Use the hierarchy you drew earlier to decide on the position of your design elements as well as their color and size. This will guide users through a sequence of steps. More important elements should be bigger, bolder, and have more contrast with the surrounding area.

Make Navigation Intuitive

Users expect to find navigation menus across the top side of websites, and are used to generic labels like Home, About Us, and Contact. Don’t over-complicate things by putting your navigation somewhere unexpected or using unconventional labels.

Use Clean, Readable Typography

Example of good website typographyThe easiest typefaces to read online are Sans Serif fonts like Arial and Helvetica. The ideal font size for body text is 16px, and you should stick to a maximum 3 different typefaces to keep your design streamlined. Avoid typefaces that are very ornate or fussy—simple will look best, we promise. Create visual hierarchies with headings to make it more readable (it’s good for your SEO, too).

Website design can seem intimidating, but if you keep a few key principles in mind, you’ll have a kick-ass site in no time. So get designing. You’ve got this!

Rebel makes designing your website easy – you don’t need any technical skills. We have a package and price to fit every need, so find your domain + website right now.

Photos: SFIO CRACHO /, Apple, Rockaway, Rodesk