Hosting Report Card

Click Here !

Hosting Report Card

for Comparison Chart of Best Hosting Providers

More About Web Design — a Sample Site

By Joanna Benz

———————————-

UPDATE — The site mentioned in the following article, www.freebie-trading.com, has now been redesigned and the three graphic boxes on the front page have been removed.

I am leaving the article here, in case you might still find it useful.

If you do visit www.freebie-trading.com — there is an opportunity there to earn some quick cash for performing a simple product trial, so check out the details!

———————————-

Want to see a sample of my web design skills?  My latest website is:

.

It is based on the free Atahualpa WordPress theme, which I use for all of my websites.  Here is the basic design process that I used.

.

HEADER

First, I went to a free graphics website to find a pleasing graphic.  I wasn’t quite sure what I was searching for, but I knew it had to be an image that I liked, that I felt was uplifting, and something with calming colors.  In this case, I wanted to convey a very peaceful feeling, combined with grace and simplicity.

.

……..……..

I not only found something that I liked,
but I also managed to create several
small graphic elements that appear similar.

.

There’s nothing mysterious about this.  It’s just three pictures pasted into a post.  I separated them by inserting some periods and then coloring those periods white.  Then I linked each picture to another page on my website where I wanted the reader to go.

.

Here are some free and low cost sources for free graphics:

Stock Exchange
iStockPhoto.com
BigStockPhoto.com
20 Free Photo Resources

My graphics search took quite awhile!  But I found something that seemed to portray just the right mood, and it happened to be purple.  It wasn’t too hard to locate a couple more images to tack onto my header.  I used Irfanview to crop each photo that I found, and then I assembled the entire header using XHeader.  I had to upload it using my webhost’s control panel.  (XHeader was also used to place titles over my front page graphics.)

.

COLOR SCHEME

Deciding on colors is always the most difficult part of web design, in my opinion.  I tried a number of options using ColorDesigner and Pixie.  Finally, I settled on something that is mostly monochromatic.  It might seem boring to some, but this represented my most soothing solution, and that was my goal!

Normally, I would have set the sidebar colors to something very dark, and used light colored panels or light colored text on top of them.  This creates a nice contrast to the center panel, which is usually black text on a white background.

However, in this case, I wanted the sidebars to fade away into the background.  The whole object is to entice people to click on the three boxes in the center of my front page, leading to further action.

.

ORGANIZING YOUR MENUS

In addition to graphics and colors — the other tricky part of web design is organizing your menus. How you approach this will largely depend on whether your WordPress site is based on posts or pages.

Luckily, there are a couple of WordPress plugins that can help immensely:

.

My Category Order will set the order of your categories (which help organize posts or articles).  It will let you use a widget showing only the category or categories desired.

My Page Order can order the titles of your pages. If you don’t specify which pages to include or exclude, then all of your pages will automatically be listed in this widget.  That can be very useful if you want to create an attractive Site Index for your visitors.

.

You can use these widgets repeatedly in your sidebars.  For example, one widget might list only the items in Category A or Category B.  If you prefer to work with Pages, they can also be categorized under Subject headings.  Those headings can contain blank pages, or they can provide content to summarize the topic area.

My entire site at Freebie-Trading.com is composed of all pages, except for one post on my home page.  And that one post simply contains the three graphics that link to my three main sections.

.

I would love to hear your feedback on Freebie-Trading.com.

Can you instantly tell what this site is about?

Does it seem easy to navigate?

.

I am hoping that many new people will discover the site soon!

Thanks for reading!

Joanna

7 comments to More About Web Design — a Sample Site

  • You are a good example to us all. Good job.

  • Hi are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own.
    Do you need any html coding knowledge to make your own blog?
    Any help would be really appreciated!

    • admin

      Yes, and this site uses all pages instead of posts.

      You don’t need to know HTML — but occasionally you might want to do something special where it’s needed on one particular page. For example, if you’re setting up a comparison chart of some kind.

  • I couldn’t resist commenting. Peerfectly written!

  • Heya this is kind of of off topic but I was wondering
    if blogs use WYSIWYG editors or if you have
    to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get
    advice from someone with experience. Any help would be greatly appreciated!

    • admin

      You can run a WordPress blog with little or no HTML knowledge. It does have a WYSIWYG editor. So go ahead, jump in and practice running your first blog! 🙂

Leave a Reply