Website Design and Creation – Class 1

Primary goal

Before you can create an effective website, you need to determine your primary goal for having the website. Be sure to write it down. Your goal can be as broad as a life goal or perhaps a business goal. Writing down your goal and referencing it will serve to steer you in the right direction at every step along the way. Why do you want to establish an online presence? What will your website DO for you? Once you know what you want it to do for you, it will become easier to create the structure of content as well as the look and feel of your site.

A note on business and personal goals: Once you establish your primary goal, visualize the sub-goals that will help get you to your primary goal. If anything seems “too big”, break it down further until the steps become doable.

Write it all down on paper

Start with a notebook and begin by writing down your primary goal. We’re also going to start creating your website pages on paper. Crazy, I know! I initially thought this was silly (and a waste of precious paper), but every website I’ve created is better if it starts out this way.

If you begin your website on the computer within a CMS (Content Management System) such as WordPress, you may get wrapped up with what technology can offer you. This will end up fracturing your ideas and limiting you to “what you know how to do”.

Instead, writing and drawing your site pages on paper allows you to focus on what is important to you and also doesn’t limit you. We will figure out how to actually do what you write and draw on paper. Don't worry too much about how it will be done at this point.

We want to dictate what technology will do for us, not allow it to dictate what we can do.

Begin by making each website page a physical page. Write down the title of the page and draw out what you want the page to look like. Keep in mind that each page’s UI (User Interface) will generally want to be the same/similar so visitors feel comfortable finding the information they need without getting confused along the way. For example, keeping your menu items in the same place on each page will help visitors navigate your site more easily than if you move them around.

For design, layout and color palette inspiration, look through websites, printed material and objects around you. Inspiration can even be found in nature! (OF COURSE, we're looking for inspiration, not direct copying, when it comes to other people's work.) Be sure to look at websites in your industry as well as outside your industry. You never know what little thing you find that just may be what you were looking for to inspire your own site design. Save screen captures and URLs as a reference of inspiration for your own design. Here's a handy site to save and share your color palette. It has a free color generator:

If you already have printed material such as business cards, pamphlets or flyers, consider their design as you create your website presence. Having a consistent design presence is valuable for a strong brand. It's OK to grow and update your brand along the way, but try to be consistent with your customer-facing materials to avoid confusing your audience. We want people to be able to instantly recognize what you are sharing is all coming from the same person/business.

Look at what businesses in your industry are doing well on their websites and what they could improve on. Use this information to inform you as you create your own website.

Homework: Take your time and create each website page in your notebook. The more fully you can visualize what you want on paper, the easier your job will be when you create it digitally.

(If you have pages with longer text content, feel free to type that text in a Word or Google Doc to save from having to type it from your written notes later on.)

Stay tuned for Class 2!

3 thoughts on “Website Design and Creation – Class 1

  1. I really like the idea of creating the site on paper first. It just makes sense!
    Thanks for the information. I look forward to the next class.

Leave a Comment