So I've decided to get back into the personal website thingy again and am resurrecting MonkeySloth, this time as a shorter name and a .net instead of .com, and figured I'd go over the steps I make in doing a website. Since I'm going to have a blog at Monkeysloth I'll probably cover Brandon’s site redesign as well as the actual making there, but I'm a few days off of actually having anything at that URL so I'm going to post here for now.
One of the nice things about going over the process I take when designing/developing a website with something like MonkeySloth is that since the site itself is so simple and not very deep it can be used as an introductory example. There are only currently 3 main sections and aside from the blog the other 2 are rather simple in design.
Steps Spriggan follows:
1) Examine the website- What currently works, what doesn’t and why?
2) Get reader feed back on the website – ask what they want or like
3) Use the results from steps 1 and 2 to create a revision list that adds new features and things that should be fixed
4) Create user profiles –help in making sure that the needs of the readers get addressed
5) Create a style guide—what labels are you going to use, make sure all the words on the site are consistent. This doesn’t deal with the look of the site, just the words use on it like categories, menus, ect.
6) Develop a sitemap to show the basic structure and flow of a website – What page leads where and why
7) Test the sitemap with the User Profiles to make sure the organization works for the test cases involved. And if needed go back to step 5 or 6 and repeat.
Create a Flowchart of all the function/features of the site, this is detailed chart that shows all the steps and processes needed to complete a task.
9) Create a wireframe of each page using all the information generated from steps 5-8. This is the first time you deal with what goes where on a page
10) Test the wireframe with the test cases developed in step 4 and if needed real people, make sure things are easy to find, labels are clear and tasks are intuitive. Repeat until satisfied.
11) Create a site for testing – Like using the wireframe to test have people test this site for usability, not heavy on graphics something simple that can be changed easily. Repeat until satisfied.
12) Build the final site or finish fleshing out the site built in step 11.
Sine this is a new site from scratch I don’t have to do the first few steps which are related to redesign more then anything, though having user profiles never hurt but they’re harder to create if you haven’t done research and I’m not going to bother with them with this site.
So I’m starting with step 3, create a revision list that adds new features and things that should be fixed, but only listing out what I want to have on the site since again there isn’t an original site. So my list is quite simple:
1) Blog
2) Links to sites I’ve worked on or currently do
3) Links to other sites
4) About MonkeySloth
5) Contact
6) Sitemap
Nothing too fancy, so since I’m skipping step 4 I’m moving on to step 5 which is the style guide which is more or less categorizing things, how are these things going to be labeled and organized? I’m going to keep Blog as blog, no real reason to change that, if you don’t have a good reason to (which there rarely are) it’s best not to use funky/cute/creative names for things that confuse your reader. The links section I’m thinking of taking both and combining it into one page and just calling it “sites” since I hate the word/term “links” though I might have to change this if that label isn’t clear/effective enough. About will be labeled the same I think, I’m going to have information about the Monkey Sloth—fake of course—and info about me probably. Lastly contact and sitemap are staying the same, something at the bottom of the page in the footer that needs to be there.
I'll post the next steps once I've done them if there's intrest.