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.
- 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.