Website Design 101: How to Design a Website

Website design may seem like a daunting task, but designing your own website doesn’t have to be difficult.

In fact, with the right tools and components, even users with little to no experience in website design can create a beautiful website of their own. 

In this article, we will cover the basics of website design, and introduce you to the tools and tips you can use to launch a good-looking, fully-functional website in no time. 

We will also walk you through the steps of taking a website from concept to creation, show you some of the top mistakes to avoid, and discuss why using a DIY website builder can be easier and more cost effective than hiring a professional to help.

In this article:

• What is Website Design?
• What is a Website Wireframe?
• What is a Website Fold?
• How to Design a Website for Beginners
• Tips On Building a Website That Works For Your Business
• 10 Ways to Promote Your New Website
• Website Mistakes That Might Be Causing You To Lose Visitors

What is Website Design?

Website design is the visual design of websites that live on the internet. It focuses on what users can actually see on their screen or device.

It should not be confused with web development, which involves designing and coding systems for data management and user interaction.

When you design a site with tools like WordPress, most of the development process has already been done for you — you simply need to arrange the pieces in an easy-to-navigate and aesthetically pleasing way.

What is a Website Wireframe?

The early stages of building a website will usually start with ideas and then move to interface and visual elements. The first part of the visual element process associated with web design is a wireframe.

An important part of web design, a wireframe is a way to easily layout a website without the need for a complex software. A website wireframe is simply a layout of text and boxes giving a general overview of the website. Some may compare wireframing a website to storyboarding a film. It is the process of drawing a rough sketch or overview of the website.

Why Wireframe?

The reason to wireframe is to provide a rough concept of a page without having to spend money on a design or development. A wireframe is a good way for someone to show stakeholders or developers the vision of how they want their website to appear. Many individuals will also give wireframes to a designer to help with the overall layout of a design.

How Do I Make a Website Wireframe?

Wireframes don’t have to be complex and you don’t need any specific software. You can even use paper and pencil to sketch a wireframe, or you can build a wireframe using something like Microsoft Word or Google Docs.

If you prefer to not hand sketch a wireframe or use Microsoft Office/Google Docs, there are many online tools which you can use to wireframe. Several are even free like the Figma Wireframing Tool.

If you want to practice wireframing a website, you can take a screenshot of any website and then print it out. Once printed, place another paper over the top of the print so that you can still see it faintly. Then, start to sketch around their design elements. This practice helps many developers gain a better understanding of all aspects involved with website wireframing.

A Final Note on Wireframing

A wireframe is a simple sketch with boxes and text that gives you the first visual representation of your website. When building a brand new website, it can be very helpful for a website developer or a stakeholder to see a wireframe to understand the overall concepts. 

However, it is important to keep in mind that while wireframes are a great way to draft a concept for a website, they are far from perfect. 

As a wireframe only provides a rough layout and not the full design, it can sometimes be hard for a designer to interpret the specifics of what each section is for. Sometimes even though the wireframe is laid out properly, the designer is not able to follow it due to the actual contents taking up more space than planned.

Use wireframes as a jumping off point but be sure to work closely with developers if not executing the design on your own. 

What is a Website Fold?

In the days when print media was king and newspapers dominated the market, the term “above the fold” was coined. This was the top half of the newspaper above where the paper would be folded. When placed on display for potential buyers, the part “above the fold” was meant to draw in the eye with bold, attention grabbing-headlines and shocking images.

The space was obviously reserved for the top stories of the day, but was also cleverly utilized in order to create in the customer an impulse to buy. Anything that was considered secondary news was usually relegated to the area below the fold or inside the paper. So what does this mean to website owners?

A website fold is the all the space that can be seen on a web page without scrolling. 

The Fold in Web Design

When it comes to your website, all of the information “above the fold” is what a person sees as soon as they open your website. Anything that they have to scroll down to see is considered to be “below the fold”. (To continue the newspaper analogy, anything on a page “inside” of the site would be considered inside of the paper.)

Whereas a newspaper has a clearly defined border with set dimensions that makes the fold equally defined, a website’s fold is a little more fluid. Screen resolution and screen size for the browsers can alter the size of the fold to show different portions of the site.

This is further complicated now with users having mobile devices all with different dimensions and browsing resolutions. 

What Should Go Above the Fold

In order to get the attention of your audience, you need a few important components to draw them in:

• The Headline: The first of these is a compelling headline. This should be something bold and attention-grabbing both in terms of content and in the colors and fonts that you use.
• The Hero Shot: The next thing you should consider is a hero shot, an eye-catching image of your product with an appeal to how this product will help the customer.
• The Call-To-Action: A call-to-action is another item that can pay-off here as can a video explaining something about your product, your service, or your site. You basically want to hook the person in so that they want to continue with the rest of your website.

Other Design Considerations

There are actually numerous online tools that will help with the placement of your content above the fold. Since this can be hit or miss depending on the viewer’s dimensions and resolutions, this should not be taken as an absolute, but as more of a guideline.

There are also tools such as Website Creator that can help you get your website launched and with powerful hosting and web building tools.

Everything Old Is New Again

There’s an old saying that “everything old is new again.” That fits perfectly when it comes to the best way to design your website. By using the old school design ideas of newspapers (especially those from the early 20th Century when bold headlines ruled) you can help draw in your audience and hopefully keep them browsing on your website. 

In order to do this effectively, you will need to take advantage of design tools that are meant to specifically help you optimize your web page’s layout.

For more tips on web design and how to make the most of your space above the fold, check out What Is Whitespace And Why Is It Important?

How to Design a Website for Beginners

So, you’ve studied up on web design and decided to make your first website. Now what?

In this section, we’re going to walk you through building your first website, step-by-step, and we’ll also tell you how to choose the right platform for your business. 

Secure Web Hosting and a Domain Name

Before you can start the actual building of your website, you’re going to need two things: web hosting and a domain name.

• Web hosting: a service that connects your site to the internet and gives you a place to store all of your essential data and files
• Domain name: the name that people will type in when they go to your website – typically this is the name of your business (for instance, ours is www.inmotionhosting.com)

There are dozens of different companies that act as a web host or domain registrar, but, ideally, you should get them both from the same provider.

Choosing a Website Builder

You could create your website from scratch, but a website builder is a far easier solution for most beginners (and the end product is just as good). 

Not only is it an economical option, but it also gives you total creative control, allowing you to customize design and functionality however you see fit. 

Here’s why you might want to give DIY a try:

• No coding required: No technical skills? No problem! Website builders make everything as easy for you as possible. Most use an easy drag-and-drop format, allowing the user to simply choose the elements they’d like to include – from menus to images to text – and drop them onto the page with a simple click of the mouse.
• Easy access from anywhere: Because website builders are Internet-based, you can access them from any computer or device you’re working on – no need to log onto your home pc to make a change! Many builders today even offer a mobile app, so you can make all the changes you want on the go.
• No design experience needed: If you don’t have an art background or any experience in graphic design, you may be worried that you won’t be able to create the right “look” for your site. No worries! Professionally-designed templates make designing your site a breeze. All of the elements are already there, right down to the color palette, so you don’t have to think about a thing.
• Your site will be up and running in a flash: Waiting for a professionally-designed site can often take anywhere from a few weeks to a few months, depending on the professional’s workload. But with a website builder, you can quickly have your own site up and running within a matter of hours. If time is of the essence, this is the way to go!
• Maintenance is simple: In addition to making design simple, website builders also make the ongoing maintenance that comes with running a website easy to do. From design changes to routine updates, you can quickly hop on your computer and make it happen.

When it comes to selecting a website builder for beginners there are many options on the market today, it’s important to do your research and choose the right one for you and your business. Here are some key features to look for:

• Ease of use: Website builders are generally intended for people with little to no coding experience and therefore should be easy to learn and use.
• Flexibility: Does the platform offer a lot of templates, appropriate for different industries? Are they well-designed and aesthetically pleasing? How customizable are they?
• Features: Does the website builder make it easy to create a blog or e-commerce site? Does it have built-in SEO? What about back-ups and security? The more it can do (without you having to purchase pricey add-ons), the better.
• Support: If you have a problem with your website builder, you should be able to receive support – whether it’s 10 am or 10 pm. In addition, they should offer a variety of support options from telephone to live chat to email, so you can reach them in whatever way is most convenient for you.

Website Creator is the perfect bundled solution for beginners and business owners. It is built on the WordPress platform, with an easy website builder called BoldGrid pre-installed and web hosting included.

Sign Up for a Plan

Most website builders offer several plans, usually starting with a free option and moving all the way up to a “pro” version (or something similar). What you choose will depend entirely on your website’s needs, so it’s important to know what they are before signing a contract.

Rest assured that no matter what you need, there is a plan for everybody – and, yes, it is totally possible to build your site for absolutely zero dollars if that’s what you want to do.

Choose Your Template

Once you’ve followed the above steps, you can start doing the fun stuff. After choosing a website builder and signing up for a plan, you’ll be able to dive in and start creating. The first step is selecting a template for your website.

Templates provide the framework for your website – they dictate how your site looks, where your menus will be, what color scheme is used, what the sidebars and headers look like, and more. What you choose will set the tone for your entire site, but don’t worry if you don’t get it right the first time: most website builders will allow you to switch your theme as often as you like.

Customize

After your template is installed, you can customize your site. Website builders make it easy to create a completely unique site with options like:

• Adding custom menus and forms
• Changing fonts and colors of text
• Creating image galleries
• Choosing a different color palette
• Adding widgets

Tips On Building a Website That Works For Your Business

We’ve seen countless business owners who just want to get something up there – regardless of quality. Unfortunately, as much as you really do need to be online, just any old website won’t cut it. 

If your prospects log on and find a poorly designed, difficult-to-use site, it’s almost as bad as not having one at all. Luckily, building a great website doesn’t have to be difficult – it just takes some planning. The key is to know your business and understand your audience’s needs. 

Here are some points you should keep in mind when building your website:

• Have a goal: If you want your website to work for you, first you need to know what you hope to accomplish. Do you want to establish yourself as a thought leader? Share your creative work? Convert leads? Fill your pipeline? Each of those goals would require a different overall design, so it’s better to go in prepared.
• Use content writing best practices: Writing for the web isn’t the same as whipping up a masterpiece for high school English class, or even the same as writing a piece for the local newspaper. Web visitors have a VERY short attention span – they don’t arrive on your page expecting to read a novel. Be sure to use content writing best practices, such as keeping everything short and concise and remembering to break longer bits up with subheads, bullet points, or images.
• Use quality images: What’s the first thing you notice as soon as you land on a new webpage? It’s probably the images. When your visitors arrive on your page, you don’t want them to be greeted with blurry, pixelated photos or poor-quality video. Always choose the highest quality stock photos you can find or, even better, use original shots!
• Focus on benefits, not features: So, you created the world’s most durable, long-lasting umbrella. Awesome! Unfortunately, just plastering that all over your website isn’t going to sell very much. When your visitors arrive, you want them to immediately see how you can help them – not your product features. What should you say instead? Something like, “Never buy another umbrella again!” Or maybe, “Our umbrella will keep you dry, even in the harshest of conditions.” No matter what your product or service is, you want your audience to think about how it might improve their lives.
• Use a clear CTA: Calls to action are essential when it comes to turning visitors into leads or leads to sales. Why? Because people need you to tell them what to do. Want them to buy that umbrella? Show them where to do it. Want them to sign up for an email newsletter? Add a button that prompts them to do so. When you create a website, CTAs are appropriate almost anywhere on your website and should be utilized throughout.
• Create a user-friendly site: If you want your audience to stick around, you need to make your website easy for them to use. That means clearly labeling each page, creating intuitive navigation, including easy-to-use menus, and making it easy to contact you. Most importantly? Your website should look (and work) great no matter what device your visitor is logging on from, whether it’s a computer, smartphone, or tablet.
• Choose a reliable web hosting service: What good is a fantastic website if it’s down all the time or none of your features work? Choosing a reliable hosting service can help ensure the ongoing performance, reliability, and safety of your website. This is one place you definitely don’t want to skimp!

Making the Process Simple

Bottom line: creating a website that works for your business is vital to your success. As you can see, though, it doesn’t have to be difficult, but it does take time and effort to build a solid website. 

If you’re not sure you want to create a website by yourself, reach out to our talented design team to find out how they can help you create a quality, business-driven website in just a matter of days. 

10 Ways to Promote Your New Website

So, you just finished building your brand-new website and you aren’t seeing any traffic yet. 

Luckily, it’s probably not your site that’s the problem. 

It can take Google anywhere from four days to four weeks to index your new pages.  This means that you’re not showing up in search results and no one actually knows that you’re there. 

So how do you get the word out? 

Here are our top 10 tips for promoting your website and bringing in traffic:

Share Quality Content

Whether it’s an original blog or whitepaper, or you’re passing on an interesting article, it doesn’t matter as long as it keeps your target audience intrigued. Content is a great way to draw an audience into your website. Simply curate it, and then get it out there. There are several ways you can share:

• Post links for your blog on social media and ask the audience to click through
• Ask business owners in a similar or complementary market to share your content with their own audiences
• Ask friends and family if you can add them to your email list, and then request that they pass on your content to their contacts

Become A Guest Blogger

This is similar to asking other business owners to share your content, but it takes it a step further. When you guest blog, you create original content just for that other entrepreneur’s website, and they own the exclusive rights. It gets published to their page, just like their own blogs would, and you gain access to their entire captive audience. 

If you can link up with someone who already has a great reputation or a large following, it’s a wonderful way to gain an audience of your own.

Utilize Social Media

There are currently more than 3.8 billion social media users, which means if you aren’t using social media to promote your website you are missing out on a huge opportunity.

Social is a great way to get your name out there and drive traffic to your website, but it’s not enough to simply create a profile. You have to be active, engaged, and involved with your online community.

Create A YouTube Account

Let’s face it: video is HUGE. And with over 1 billion monthly users, YouTube is where it’s at. Using the platform to promote your business seems like a natural option. You can share tutorials, product demos, or even behind-the-scenes footage – just be sure to include a call-to-action.

Pay For A Facebook Ad

The platform couldn’t be easier to use, and it’s cheap to boot. With a minimum daily budget of $5, Facebook ads can easily fit into most budgets – and the customization options ensure that you’ll reach your target audience.

Use PPC (Pay-Per-Click) Ads

Some people are opposed to paying for ads, but when you’re just starting out, it can really help bring in an audience. Plus, it’s simple. All you do is create your ad in GoogleAds, and (as the name implies) you pay based on the number of clicks your ad receives.

Engage In Email Marketing

Even if people aren’t coming to your website yet, you can still get them to sign up for your email marketing list. If you attend community events or industry conferences, always keep a sign-up list with you. Ask everyone you meet if they’d like to join your mailing list. In addition, you can create a simple landing page and share it to social media.

Include Internal Linking In Your Articles

This tip is an oldy but a goody – people have been using internal links forever, but it still works. If you’re not in the know, an internal link is a link on your website that leads back to your own content.

For example, if a customer is reading a blog about pet care, you might want to link back to another article that you wrote about running with your dog. The same idea works for pages that aren’t blog posts. You can link a transaction page to a blog post.

Do Keyword Research

The faster you can get Google to index your site, the faster you’ll start showing up in search results, and the sooner people will start finding your site organically. Using appropriate keywords is a great way to get Google to notice you, and it’s easy to do.

Hire A PR Agent

If you can afford it, there is no shame in bringing in outside help. Bottom line is: PR agents get paid to find an audience. It’s what they do for a living. They know your industry and your target market.

When it comes down to it, site promotion is all about getting and keeping people interested.

Website Mistakes That Might Be Causing You To Lose Visitors

Having a beautiful website doesn’t mean that it operates properly. Some websites can look amazing, but when visitors come, they leave after a few seconds because it’s either not working or confusing. In this section, we want to share with you mistakes that you might have made that are causing you to lose visitors.

What’s Your Message?

One of the most common mistakes in web design is not having a clear message. When a visitor comes to your website, can they tell what you do within 5-10 seconds? If it takes longer than that to find out, you don’t have a clear message. 

Make your products and services the ultimate focus, allowing your visitors to know instantly what you will provide them. Another way to clarify your message is to limit the number of call-to-actions on your home page. Instead of each section calling for your visitor to do something different, combine and remove unnecessary sections that may lead your customers away from your ultimate goal, completing a sale or giving you their information.  

Mobile-Friendly

Almost everyone you meet today has a mobile device. If your website is not mobile-friendly and optimized for mobile SEO, you are losing out on lots of traffic. Outside of not having a clear message, this is one of the top web design mistakes.

 Work with a web developer to launch a mobile-friendly website so mobile visitors can easily learn more about your services and products.

E-Commerce Menu Design

Bad menu design can scare away visitors. Make sure all drop-down menus aren’t covering important aspects of your website and that they are visible. 

Instead of just placing all of the categories on a menu bar, think through how you as a user would navigate your website. Is there a reason for every link on the menu? Could certain links be made drop-downs? Once you figure out a placement, ask others for their opinion and make menu design a priority.

Create An Account

Another area which can cause visitors to leave your website is forcing all e-commerce customers to create an account at checkout. Sometimes, customers will add a product to their cart and go as far as they can in the checkout process to see the total. 

If your first step right after adding a product to the cart is creating an account, you may find that you have a lot of abandoned shopping carts. 

Allowing customers to complete a transaction without having to create an account brings a great simplicity to your checkout process, making it easier for customers to shop and spend more money. 

With some services and products, customers have to have an account for their purchase to work. In this case, make your account creation process as fluid as possible. Remove any unneeded steps.

From the basics of web design to the mistakes to avoid when creating your website, we have covered a lot in this article. 

It can seem overwhelming at first, but designing a website is something even those with little to no technical experience can do with a little time and effort. The internet is full of helpful tools and services that can get your site up and running in no time. 

If you’re not sure where to start or what your next step should be, reach out to our support team who can steer you in the right direction and set you up with a custom solution that fits your individual needs. 

For more tips on how to improve your website and drive traffic, check out 10 Ways to Drive Traffic to Your Website.