a guest post by Alexandra Nimmons for http://www.beckymollenkamp.com

GUEST POST from Allie Nimmons

Ready to build your own website? Although it’s not always easy, and definitely not suited for techphobic folks, it’s possible to DIY your site—in as little as one day. Today I’m going to share the basic elements you need for your site, and how to get everything organized.

First, no matter platform you’re using to build your site—Wix, WordPress, Squarespace, etc.—take a few minutes to familiarize yourself with how it’s set up. The main things you should know are the areas that allow you to edit the pages and upload images.

Also, make sure to find the customizer or appearances section. This allows you to change colors, fonts, headers, logos, etc. Find a few tutorials online or ask a friend who uses the same CMS to give you a walk through.

Make a List of Pages You Should Include

In technical terms, this is referred to as a wireframe. It’s a basic outline of the pages of your site and how they’re nested within each other. Here’s an example from the pages of my own site, allienimmonscreative.com.

  • Services
    • Web Design and Development
      • (link to all past projects)
    • Non-Profit Program
    • Website and SEO Audits
  • Free Resources
    • Free Downloads and Printables
      • (link to each downloadable)
  • About Me
    • Bio
      • (link to blog post category pages, audit page and contact page)
  • Contact
  • Blog
    • Web Design
    • Social Media
    • SEO
    • Business
    • Guest Blogging
      • Guest Blogger Application
      • Guest Posts

Do Some Design Research

Look at your competitors’ websites. Look at examples of web design on sites like Dribbble.com and Designinspiration.net. Make a list of things you like. These can include colors, images, fonts, the way the navigation menu is set up, certain animations, etc. There’s no guarantee that you’ll be able to replicate these things, but they’ll give you an idea of what to work for. List the site and the element(s) you admire.

Make a List of 4 Colors

If you already have branding materials, you should build off those colors. Color is extremely important for a website, but you don’t have to be an expert at color theory. Here’s the basic emotion communicated by each color:

  • Red: Passion, excitement, speed
  • Pink: Femininity, softness, fun
  • Orange: Life, brightness, vigor
  • Yellow: Youth, happiness, warmth
  • Green: Eco-friendliness, luck, accessibility
  • Blue: Calm, cleanliness, strength
  • Purple: Royalty, trust, maturity

For basic website design, you need four different colors: your main accent color, your secondary accent color, your text color, and your background color.

Your main accent color should be brightest and most indicative of your brand. Use this to signify something important on the page that you want the user to engage with. It should match or be similar to the main color used in your logo or other branding materials.

Your secondary accent color should be complementary to your main accent color. You can use this color for buttons, links, bold text, menu, items, etc. It complement, not clash with, the main accent color. However, it should stand apart from it as well. Blue and orange are a good example of a main and secondary accent color combo.

Your text color should be dark, preferably black, dark gray, or dark brown. If your main accent color is blue, you may want to use a very deep blue for the text color. However, to be safe, use black.

Your background color should be very, very pale. The rule is to always have dark text on light backgrounds unless it’s an accent area like a button or call to action. If you don’t want to use white, you can use an extremely pale, washed-out version of one of your accent colors.

Upload Your Images

Gather all the images you intend to use on your site, including maps and logos. Upload them all at once to your website editor. There’s usually a media library where you can bulk-upload your images. While those images are uploading, you can take a break or do something else.

Build Your Pages

Your wireframe provides the list of all the pages you need to create. Set them up them one by one, as a new page in your website editor. Don’t add the content just yet.

Name them appropriately, and make sure the page URL matches the title. For example, if your page name is Contact, the URL should look something like http://mywebsite.com/contact. Something like http://mywebsite.com/pageID=234 is poor form.

If any pages are nested, you should be able to indicate such when you build them. For example, my wireframe had these pages:

  • Services
    • Web Design and Development
      • (link to all past projects)
    • Non Profit Program
    • Website and SEO Audits

All the pages are listed underneath the Services page.

Build Your Menu

The way to do this varies with each editor. However, your navigation menu is probably the most important part of your site. It tells visitors what kind of content you have available and allows them to move through the site as they wish. Build your menu according to your wireframe and nest the right pages under the right things. Always have things like Services, Products, About, and Contact easily visible.

Add Content

The most time-consuming part of building a site is actually adding the copy to your pages. Keep in mind that for your pages to be search-engine optimized, every page should have a heading, subheadings, at least 300 words of text, and a bulleted or numbered list if possible.

Text is easiest to read and skim on a website when it appears in columns. Try to avoid having your text spread all the way from one side of the screen to another. Make sure all your text is the same size unless it’s a heading or something like a quote.

Add Images

You’ve uploaded your images to the library, but now you have to embed them into each page. There should be at least one image on every page of your site. Images shouldn’t overwhelm the text, but instead complement it. Avoid having the image be above the text.

 

There you have it! You’ve built your own basic website! There are always more amazing and fun things to add like forms, slideshows, and interactive elements. But as far as the bare bones of a functional website, most tech-literate folks can complete all of the above in a single day. Happy designing!


Allie Nimmons is a web designer who loves working with people who have one important thing in common—the desire to grow their business. She helps with quality web design that focuses on branding, usability, and conversions. She uses her knowledge of strong SEO strategy, social media marketing, email marketing, and content creation to help you make the most of your new website.