Thursday, March 28, 2013

Creating Your Website Blueprint

Website Design for Writers on a Budget, part 3

In the last installment of this series, I said that you need to know what you want your website to accomplish — that you should make a list of what information you want it to convey — before you even think of working on the site's actual design. And that you should use that list to create a "blueprint" for your website. How do you do that, you ask? Well, today I'm going to show you an example blueprint using the list I created for my own website.

First, a definition of a (very) slightly technical nature (don't panic, there won't be a test later). What is this "blueprint," exactly? The blueprint is the website's Information Architecture (IA) diagram. It shows how the content of a website is organized hierarchically — i.e. the logical relationship of the information. This diagram is related to your site's navigation. In other words, you need to know how each piece of information relates to the other, otherwise your site will be difficult to navigate (and many, if not most, visitors will leave in frustration).

Ready? Then, let's get started.

My List

  • Info on my works-in-progress
  • A Short Bio with a "headshot"
  • My Writing Blog
  • Twitter feed
  • A page where I can "give back" in some way to other writers (especially pre-published writers) (For Writers)
  • A way to contact me
  • A way to search the site
  • Links to other authors / sites of interest (what I think is interesting!)
  • Some way to display "social media" badges/links (including goodreads)
  • Links to other sites where I blog (about writing)

This is the information I want my site to convey (at least at this point in my writing career). You'll notice that my list isn't in any order, and that in many cases I just generally describe what I think I want a "page" of the website to do. Your list may or may not look similar to mine. If you're a published author, your list should also have a "books" entry of some sort, probably with links to buy your books, as well as a complete bibliography.

The next step is to convert the list into a hierarchical diagram. This is the hard part and may take a few tries to get right. The first thing I decided for my site was to put my writing blog on the home page. I wanted to make sure that the first page a visitor sees has content that changes over time, rather than a "static" (that is, unchanging) welcome message. If I was a published writer, I would probably choose to have my books on the home page in some way — especially "news" about upcoming releases and book signings.

Here are a few examples I tried, using my list, that didn't work (click to enlarge).

Finally, I realized that some of the items on my list are things that don't belong on a separate page. They're things I want visible on every page: twitter feed, social media links, site search, favorite links. This is information I need to keep track of, but that doesn't belong in the hierarchical diagram (and doesn't have to be dealt with when you create your site navigation).

Here's my final diagram. Note that I made changes to some of the names in the boxes — "Bio" became "About" and "Works-In-Progress" became "Books." These changes reflect the names I decided to use for site navigation. Using "Books" was important to me, because I won't have to make changes to my site layout once I'm published (thinking positively here!).

It looks simple, doesn't it? It should — there's only so much information my site needs to convey, and I wanted to make it simple to navigate. There may come a time when I have multiple books/series published (still thinking positively!), and when that time comes, my site architecture might look like this...

Play around with your list and create IA diagrams until you're satisfied with what you have. Remember, at this point you haven't committed to anything, so it's okay to change things around! Next time we'll take your diagram and start thinking about your site layout — still on paper.


Head First Web Design: A solid, if quirky, take on web design that's worth checking out.

Deborah Wright
Twitter: @DeborahBWright
Facebook: Deborah.Wright.Author



Genene Valleau, writing as Genie Gabriel said...

Hey, Debbie! I appreciate the information. I'll be updating my Web site this weekend and using the checklists you've offered in this and other posts. I know I'm missing some things. Thank you!

Meggan McQuaid said...

Debbie, thank you. Once again, you are providing wonderful help!

Meggan McQuaid said...

I was just checking out the web hosting sites you recommend. When you first sign up, do you actually pay whichever rate once a month, you do you pay for a year or more in advance at the beginning? I couldn't find that info, thought you might remember. Thanks :)

Deborah Wright said...

Hi Genene! It's difficult to judge what to include in this series, so it's good to hear this info is useful. Good luck with your update!

Deborah Wright said...

Meggan -- you're welcome! :-)

Regarding web hosting, I've always paid my hosting yearly. I find it gives me the best price, while still being fairly flexible if I later decide that I need to change host providers (I'm only locked into one year -- which I can live with). I think the key is to choose the payment option that works the best for you.

One thing to watch out for, though, is if you do choose yearly payments, you'll either need to sign up for automatic renewal -- or make yourself some kind of reminder to pay your renewal before your plan expires. Some host providers aren't very good at sending payment reminder notices.