The Dragon Princess - Chapter Two

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!