cropped-Website-Background-1.jpg

How to Build a Website for Beginners Part 3 – Design

blog, website, building, design

The last two parts have covered the basic lingo of website building and the basic features every website needs and some that might be wanted. While these two topics contain elements of subjectivity, depending upon what site you’re creating, this post covers a more objective topic: Design. Design is crucial for making your site look legitimate. Now if you’re basing your website off of another site that is well-designed, chances are your site will also be well-designed. But what makes a well-designed site?

Design can be tricky to maneuver for someone unfamiliar with the terms and function of details. Some important terms to keep in mind are fonts, headings, ad placement, and sidebars. These terms refer to specific details tied to your website and how it looks. These are necessary parts of a website, and if they aren’t used correctly, can make a website look unappealing. Each element impacts a website differently but still holds the same weight. There’s a lot to cover, so bear with me.

1: Fonts

Fonts are the backbone of the site’s content. Fonts refer to the style the text is written in on the site. There are many different types you can use, but they generally fall into two categories: Serif and Sans Serif. Serif fonts are often used in books and as titles, and are characterized by extra details in the letters. Times New Roman, Georgia, and Garamond fall under this category. Sans Serif fonts are popular online fonts that are characterized by minimal and simple details. Arial, Helvetica, and Calibri belong to this category.

Of these, it’s generally best to use Sans Serif fonts, especially Helvetica if you can get access to it. Serif fonts are best for headers and heading text, though it can be used for blogs depending on its style. Using extremely fancy script fonts should be kept to a minimum unless it serves the purpose of a super header, like the title on my website. Even then, script fonts don’t belong on every site, especially if you’re making a site for an industrial company.

One rule stands for sure: Never. Use. Comic Sans. That font had it’s time, and that time has long past. The font is universally seen as unprofessional and childish and has no place on a website.

2: Headings

Headings as a feature is a little more forgiving. You can use more elaborate fonts for them, especially as titles for pages or the homepage. For post headings, you want something in a similar font to the main body text that is larger and slightly flourished. Title headings can be a little more elaborate, sometimes in script depending on the website. Normally, an elaborate or strong serif font works best, like Times New Roman or Perpetua or Garamond. For more industrial-type websites, a Sans Serif font like Helvetica or Arial works for headers.

In terms of content, headings should short and sweet. Using long and drawn out headers can bore readers and and contributes to poor performance on the website. Instead, use short and straight-to-the-point phrases, but don’t be deceptive. If a heading needs to be a little long, than that’s okay. Just don’t make a habit of it. Headings are sign posts after all. No one wants to read sign posts as long as a dictionary entry.

3: Sidebars

Sidebars are the parts of a web page on either both or one side of the page. Usually these contain ads, recent blog posts, blog categories, blog tags, page links, short bits of information about the website or website author, or links to specific pages. The exact content depends on the type of website you’re creating, blog or business or informational. However, there are a few things necessary for sidebars.

While most website themes and builders, especially if you use WordPress, will allow you to choose which side the sidebar is on, many website creators choose to have the sidebar on the right side of the page. I have it like that, and most of the websites I’ve visited (besides maybe some academic websites) have sidebars only on the right side. Some academic and business sites will have sidebars on both sides, but the typical choice is the right side.

Another thing to realize is that if you don’t include a sidebar on a page, you’ll need to find a way to turn sidebars off for that page. Most WordPress themes have an option to switch sidebars on and off. For Wix and Weebly, you can simply opt out of adding sidebars. If you’re using WordPress, and leave the sidebars empty, the website will have empty space where the sidebar is supposed to be. This can look unappealing to visitors, so you need to either use the sidebar or turn if off/don’t add it where it’s not needed.

4: Color

Color is usually dependent on the color scheme of the company you’re working for, but in general there are several colors you want to avoid. Neon and bright colors especially don’t show up well on computer screens, unless they’re either part of a gradient color or placed against a black background. Also, colors of similar hues can be used, but not side-side-by-side. If one color is placed against another that looks very similar, it’s hard to distinguish between them, especially is one is text and one is background.

It’s preferable to use either a light background and dark text or a dark background and light text for websites. Adding gray tones to colors can also make them easy on visitors’ eyes and looks better in general. It’s also preferable to only have two or three, maybe four, main colors for the website. Having more than four can clutter a website’s screen, and the colors will often clash with one another. The extra colors will also take people’s attention away from where it should be on the page.

5: Advertisments

The last one might be one of the most important parts of website design. If you’ve created a website as a means of revenue, then you’d most likely use ads as one way to earn money. This an incredibly popular way of earning money online, usually on blogs, news sites, and pretty much any type of website made to earn money. There are two things to note with this section: ad types and ad placement.

Ads can be created for all sorts of organizations and businesses from banks to groceries to video games to technology to appliances to hardware stores. You name it, there’s most likely an ad out there for it. When choosing ads, you want to make sure they match the audience your blog attracts. So if your website is for an industrial company or a blog on food and recipes, video game and technology ads might not be the best choice. You also want to make sure the advertisements are coming from legitimate sources. Many fraudulent people will create fake ads to scam people or download viruses.

Ad placement is also crucial, especially if a fake ad makes it onto your site through the ad source. Poor ad placement is detrimental to a website’s design. Poor ad placement intrudes on in-page content and makes ads huge. This makes it hard for visitors to read content and makes it easy to click on ads with a finger slip on mouse or touchscreen.  Instead, put ads on the sidebars, where they don’t disrupt visitors’ view of the page, and don’t make them pop-ups. For mobile, you can place small ones at the top and bottom of the page content. Above all, make sure ads take up no more than about a sixth of the width of the page.

Conclusion

Website performance depends a lot on the design and presentation of the front page. Many visitors come through the shiny gates of the front page, so making sure it’s presentable a good way to make sure they stay to visit for a while. That doesn’t mean the rest of the website can be left in disrepair. Make sure colors and fonts are consistent through out the entire site. Make sure sidebars perform properly or don’t existent. Make sure headings don’t take up too much of the page and are clear so readers know where they are. And make sure ads won’t sneak up on anyone through pop-ups or from within the page content.

Design is incredibly important for a website’s performance. Without it, a website can be brushed off as cheap and behind the times or simply ugly. Keeping an eye on the above sections and  following the above guidelines can help your website look appealing and well-designed. And that’s it for Part 3 of “How to Build a Website for Beginners”. Next post in this series will cover the final step: marketing your website. Until next time, readers!

cropped-Website-Background-1.jpg

How to Build a Website for Beginners Part 2 – Features

website, features, marketing,

Now that you’ve chosen your domain name and your hosting site, it’s time to build your website! This is dependent on what type of website you’re creating. If you’re creating a business website, you’ll need to consider your brand’s logo, the font for your brand, your tagline, your marketing strategy, and the commerce area for others to buy your product. If you’re building your own personal site, however, you’ll need to consider you logo, the font, the tagline, and what you’re marketing.

How you build your website will also differ depending on which type of website you want and which industry you are in. I’ll be going over the basic differences between business and personal websites, and mentioning the main features of each.  There is a lot to cover, though, so I can only go over the major areas. I recommend searching for your specific industry or find a website of a well-known brand within your industry to see what they did with their website.

Business vs. Personal: Choosing the Basics

First thing’s first though. You have to choose which type of website you want to make. This is pretty straightforward. If you’ve created a company and want to promote it or if you’re a part of a company that needs promoting, you’ll need to create a business website for the appropriate industry (music, commerce, food, technology, etc.). If you’re an individual looking such as a blogger, a singer, an author, a photographer, any type of entertainer or personal brand, you can set up a personal website to promote yourself.

Where it gets tricky is the specifics of what is featured in each type.

Business vs. Personal: Features

With each type of website comes different features. Business websites usually have a home page, a commerce section, an about page, a contact page, an events page, and maybe a blog depending on the type of business. Most often a phone number, an address, and an email will be placed multiple spots on the site, above the header or in the footer especially. This allows customers to easily reach the business when they can. Some websites, especially for services and eCommerce, will have a chat box where a customer can speak with a representative. The basic features a business website needs, however, are the about, contact, events, commerce, and home pages with a phone number, address and/or email somewhere easy to spot.

Personal websites have some of these same features, particularly the home, about, contact, and blog pages. Some personal website (eg. an artist’s or a musician’s page) may include an events and/or commerce page. Phone number, address, and email aren’t included unless it’s for an individual business like a photographer or an event planner. Personal websites can include other pages relating to the owner’s creations, like books, videos, or panels on specific topics.

From there, it’s time to build the website!

Subjectivity

Building the website itself has a lot to do with subjective content. What your site is about and whether it’s personal or business changes the features and basic layout of your site. But this is also highly dependent on what you want your website to do. Maybe you’re a musician, and you want samples of your songs to be played on your webpages. Maybe you’re an artist and want to place former pieces you’ve created on your site as samples. Or maybe your business that specializes in specific services and want a page for client reviews. All of these points require custom pages that not all other websites have.

Pages and features on a website can be different depending on the website. As mentioned above, the content of a website is dependent on what your purpose is in building the website. Whether it’s to promote yourself or your business, the content itself depends on what specifically you’re promoting yourself or your business as. Thus, it’s up to you to determine what’s on your site and how you want to design it. I would highly recommend looking up websites of rival businesses or other people in your industry to see what they have done with their websites.

To Conclude…

It’s all up to you, the creator, to decide the features you need and want. Not all of them are necessary, but most are nice additions to create a more well-rounded website. Here are few feature pages I have seen that are invaluable:

  • Home Page: if you’re creating a blog, this might be a list of blog posts, or maybe a recent post section with a photo album below or above it. If you’re creating any other website, this can include products, photos, other posts, or a preview of customer reviews. Again, be sure to look at websites for other companies and people in your industry.
  • About Page: No matter what type of website you’re creating, you need to have a page explaining your business or yourself to your customers/audience.
  • Contact Page: Similar to the about page, you want your customers/audience to be able to reach you easily, even if it’s just a list of social media they can contact you through.
  • Blog/New Page: Even if you’re not a blogger, a blog is important connecting easily with your audience and vice versa. If your company is B2B (business-to-business), this can become a news/events page so you’re communicating with your audience while remaining professional.

If there are any features your website needs to have, it’s these ones. So make sure when you’re building your website you have the features listed above, and then add on other features appropriate for your website.

And again, check out either rival companies’ or fellow individuals in your chosen industry to see what they did with their websites. Use it as inspiration in creating your own page, but don’t forget to add your own spin. What makes your website stand out among the others? Use that in creating the site, whether it be general design or colors. Make the site unique to your image while still being easy to navigate. I’ll be covering what these entail in the next post.

In the end, check what others in your industry have done and make sure you have the above-listed features and pages in your website. And that’s it for Part 2 of “How to Build a Website for Beginners”. Next time, I’ll be getting into the more specific side of website building: design and layout of links, photos, and font styles and sizes. Until next time, readers!