Are you just now starting a new business? Or has your business been around for a while? Whatever the age or size of your company, you need a website. But not just any website. You will want to use basic website design to capture leads, entice customers and make those sales! There are so many different styles, themes, fonts and colors to choose from, it can be overwhelming.

Building a website all starts with deciding which website builder is right for your business.

Choosing A Platform

First you will need to decide which platform you want to use in order to design your website. You have probably heard of sites like Wix and WordPress but what are the differences and which site is right for your business?

Sites like Wix, Weebly, Shopify and Squarespace are great for basic website design especially if you are just starting out and want to build something on your own. Typically these sites target individuals and smaller businesses. These platforms are simple drag and drop sites and give you the ability to choose a theme. They are pretty easy to use, but there are some down sides.

Although most of them do produce sites that are optimized for mobile, sometimes it can be difficult to get your site to look just right on the mobile end. You have the ability to customize your theme, but the structure of these sites are pretty set in stone. There is not much room for additional customization or adding in cool features to set your site apart from the competition.

WordPress is more powerful than your average drag and drop platform and is used by tons of business like Quartz, Mercedes Benz, and Variety. These three sites are clearly very different and customized to fit the style of their respective brands.

WordPress can accomplish the most basic website design but it can also provide you with expert tools. The best part about WordPress is that there are over 50,000 plugins to choose from. Plugins can enhance your site and make it even more powerful. The majority of them are free or have a free version that you can download to try before you decide to buy. If you want people to fill out a contact form on your site there are a bunch of plugins to choose from. They all have different features – some free and some you will have to pay for if you want all the features.

If you have an ecommerce business you can integrate WooCommerce for your online store. This is a plugin that you can easily add to your WordPress site. It is built for any size business and is fully customizable. You can add as many products as you want and even upload a product catalog complete with product descriptions for your products.

The website we created for this ecommerce store client was able to maintain a conversion rate of almost 20% over the course of 4 months!

If you want to stand out against the crowd and have a professionally designed website, reach out to our web specialists.

Now that you know a little bit about choosing the platform you want to work with, let’s jump in to some basic website design elements.

Navigation Bar

Your nav bar or menu bar helps your users move around on your site. The design of this element should be pretty simple. Try not to have so many options that your user is lost or frustrated. When designing your navigation bar it’s also important to remember that it shouldn’t take up too much space. Every business is different, so expect every navigation bar to be different as well.

Is Target’s mega drop down menu excessive? Yes but it works for their site and helps customers find exactly what they are looking for. If you have a small ecommerce store and are selling 30+ products and decide to put every product in your menu bar, don’t. This is unnecessary and will only clutter your site.

You can even utilize your footer if you have additional menu options that you don’t necessarily want to add to your header. Marvel is a platform used to design prototypes. They have a basic website design but did want to make sure that their users and customers were able to find every element of their website. Instead of making their navigation bar long and cluttered, they organized their additional menu options in their footer so that they are easily accessible.

When designing your menu bar start small. If you think you have too many options, go through and decide what is most important for customers. You can even test this or ask a professional for help!

Header Image vs Slider

A big header image is probably what your user will see when they first land on your site. This sets the stage for what users can expect from the rest of your website. You will need to decide between having a nice header image or including a slider on your site. A header image needs to be a high quality image that looks good on any screen. If it is too busy it can distract from the main content or the call to action. You can use header images to grab the attention of your site visitors and encourage them to take action or to keep scrolling down.

The Rosa is a restaurant that has an inviting header image that blends right in to their site. It’s inviting and works well with the rest of their site. They use the same darker images throughout and it creates a nice harmony when users scroll. They also chose an image that would allow them to incorporate text in the middle and not create a cluttered look on the edges. You’ll find a similar aesthetic with the service pages on our site as you explore the services we offer.

 

In basic website design you will want to avoid too much movement. Sliders can be simple but they can also present some problems that many people do not foresee. If you have text over each image, you will need to make sure the timing is right and that users have enough time to read and process the information. Sometimes sliders don’t convert well to mobile. It can be difficult to get everything looking right on your desktop not to mention on mobile.

If you already have a slider on your site or have images that you think you want use for a slider ask yourself these questions first.

• Do these images speak to my brand? Every image on your slider needs to 100% make sense and reflect your branding. If it doesn’t, get rid of it.
• Are they all strong images? High quality images create trust. Low quality images look unprofessional.
• Do you really need all five of those images on a carousel? Your website visitors may not even stick around long enough to see all five images. They want to get to the important part of your site (the content).

Sliders can cause confusion if they are executed poorly. If you want your site visitors to have a great experience on your site, consider a high quality hero image. If you must have a slider, talk it over with an expert. They can get you set up and help you troubleshoot the headaches that come with rotating images.

Typeface

If you are deep into the design world you probably have a favorite font and one or several that you loathe. Fonts can create hierarchy, texture, and enhance the design of your site.

Serif vs Sans Serif

A serif font is one that has strokes to the end of each letter called serifs. A sans serif font is just the opposite. Typically serif fonts are used in headlines and sans-serif fonts are used for body text. If serif fonts are too small they can be difficult to read.

When you are designing your site, keep the number of fonts limited to two or three. This is a basic website design principle that our designers will tell you is one of the most important. Too many fonts can cause your site to become cluttered and hinder your other design elements. You will also want to make sure your fonts work well together. Don’t just use all sans-serif fonts – try to have some variety. Fonts can make a lackluster website come to life. It’s a simple way to add flare without adding too many widgets.

Typography should be unique to your brand. It should match the tone of your site. If it’s playful, choose a font that mirrors that. Explore fonts that are different from your standard web fonts. Try navigating away from standard fonts like Times New Roman and see how a handwritten or script font can elevate your basic website design and express more about your business.

White space

Resist the need to fill every space on your site. White space allows your elements to breathe and stand out. This is a basic website design technique that so many brands utilize. It increases readability in your copy. Those big paragraphs can be broken up with white space and make your content easier to digest. Use this negative space to your advantage. It can make your site look elegant and professional. You can also use it to let your images be the stars especially if you have an ecommerce business.

Does the amount of white space here scare you? Pocket Penguins creates a unique design with all that space and makes the user want to scroll down to learn more.

It’s also important to note that white space doesn’t always have to be white. It can be any color negative space that allows other elements to stand out on the page. But be careful when designing with white space, it can often be tricky to strike the right balance between beautifully designed and the feeling that something is missing. If you are a novice, consider getting some professional help before designing your own site.

Call To Action

Your call to action is one of the most important elements on your site. It tells your visitors what you want them to do. This needs to be bold and stand out from the rest of the content on your site.

Colors

Choosing colors for your site can be challenging. Just like fonts, you should stick to two or three colors on your site. What if you already have a logo with multiple colors? Take MSNBC for example. They have a multi colored logo but their site is mostly white, blue and gray. Imagine if they had tried to use every color in their logo. Users would be so distracted by colors that the content would be lost.

If you have buttons on your site it is important to make sure the text colors your choose are legible. Colors like cyan and green don’t mix.

This is an obvious color combination that won’t work in web design. Colors like this make text incredibly difficult and somewhat painful to read. If you have a light colored button use a darker text and vice versa. If you do want a color on your site that may be difficult to read over, use it sparsely or as an accent color.

Try using a color that is different from the rest of your site. Typically colors like red draw attention and get people to click. If this button was green it would become difficult to find. This red stands out from the green tones on the rest of the page.

Using A Grid

Grid based website designs are extremely popular. They keep content organized and add structure to your website. This basic website design is simple yet strong. It builds trust and gives users that familiar design feeling because you will find a grid pattern on almost every website out there.

A grid is simply a skeleton for you to create your design. Grids can be organized in many different column combinations. Etsy uses a grid pattern along with some white space to make their content pop. There are two grid columns that are filled with various image sizes.

Don’t be afraid to spice up a grid with different sized images or text boxes! This type of design can make your site feel balanced and you can even build a hierarchy with larger columns having more importance. If you want to highlight a call to action or another piece of content, you can break out of your grid pattern. This can be a great way to draw attention to an element, but be careful! If done incorrectly you risk it looking out of place. With a grid design the options are endless.

If you aren’t ready to tackle the grid design, or have your own design that you want brought to life, let us help!

Hierarchy

Design your website so that there is a hierarchy. The most important content goes at the top above the fold or before the user scrolls. But you can also create a hierarchy with design elements like font, images, and colors. Use a larger, bold font for titles above copy to let users know what your content is about. Just like news sites like the New York Times use headlines to offer snippets of their stories, you should be doing the exact same thing with your copy.

This is especially important if your website is content heavy. Creating a hierarchy for your site all starts with what is the number one element that needs to be seen by potential customers. Want something to stand out? Make it bigger, use color or make it pop with added white space. When users are scanning your website, they’ll see the bigger elements first and then decide if the smaller elements are worth their time.

Progressive has one goal in mind. Get a potential customer to buy their insurance. This all starts with getting a free quote which is the first thing that people see when they land on their website. Their call to action is simply to select a product and get a quote. They create hierarchy with different font sizes, images and buttons.

The first thing that users read is probably the headline “Select a product to get a quote.” Next their eyes move to the smaller headline if their interested is piqued. Then they will move to choosing what they want to insure. The buttons are smaller because they are not as important and do not aid in accomplishing their goal which is to get people to click on a product. The pictures of products are also placed right in the middle of the page so that the users eye goes there first. The white space helps create a basic website design that is clear from distractions.

Basic Website Design for Contact Forms

Every website needs a contact page. Your company may not necessarily require a contact form but you may choose to include another type of form like for a free quote or to book a trip. When creating forms there are a few design guidelines that you should follow.

Design your form with simple colors and fonts. Make sure it is easy to follow and make your fields relatively short. If you have a bunch of areas that customers are required to fill out, they may not take the time to contact you. You will also want to put the most important fields on your form first. If you want to collect additional information but you feel it might hinder the user experience, make those fields optional.

Expedia has a form that is short and fits above the fold so the user does not have to scroll to continuing filling it out. If a user has to scroll or click next a bunch of times, they’re probably not going to want to fill out your form.

Optimize Your Site for Mobile

When designing your website, make sure to keep in mind that you are going to have a huge number of people who view your site on their mobile devices or tablets. Sometimes not all of the elements you have on your desktop need to appear on the mobile version of your site or they need to be rearranged to better fit the format of a cell phone.

Minimalism is best when designing for mobile. You do not want your mobile site to be cluttered or overwhelming. Remember Target’s mega menu? It’s still the same menu but has been slightly redesigned so that it is easy to navigate on mobile.

Make sure that your call to action buttons are big enough. If users are on their smartphones trying to tap a small button they may become frustrated when they have trouble. Larger buttons on mobile will improve user experience and allow you to capture those conversions.

Double and even triple check your mobile layout against your desktop layout. Are there any elements that aren’t aligning properly? Do all of your links work the same on each version of your site? Should you change your mobile menu design or should it be the same as your desktop version? If you don’t check your mobile site, you risk losing those mobile users.