Posts Tagged ‘web design’

Sitemaps are not just the page you create for search engines so that they can see all the pages you have on your site, a site map is also simply a map of the way your site is laid out.

A sitemap is the backbone to your site, and should always be created prior to starting any design. These are the details that tell you what pages you need, how the navigation will work and how people get from page A to page B. If you were to avoid building a sitemap, and jump right into design, there is a high posibility that you would not only forget about pages, but that the design would feel disjointed and unorganized.

To create your sitemap, you don’t need expensive programs or tools, you just need a little time and a little patience. When I am working on one, I use either a whiteboard (for small sites or blogs). I like it because it is easy to erase and re-order and I can physically touch it (I’m a big proponent of ‘real’ tools). If I am working on a larger site (15+ pages), I use Word and map it out, this is helpful as you can make it as big as you want, but unless you print it out, it can be difficult to follow.

Once you have decided the best tool for mapping it out, you are ready to get started on the sitemap itself. My website is small, so I am going to use its sitemap for the demonstration. Here is the sitemap that I used when mapping out my most recent design:

There are a few things to notice about this map:

1. It is color coded to help me separate the levels. One is blue, two is pink, three is green. All of the level three pages exist on the site, but the only way to get to them (unless someone has the exact url for that page) is through the level two pages. The level two links work a little differently because those are my “navigation”. Every page on the site has those links, but I only place them under the homepage. Why? Because the place I want people to start, and the place where the level two links originate is from the homepage.
2. I don’t include the “links to sites” as subpages. In this case, when someone clicks on a link to a page (or a picture of the page on my portfolio) it takes the user to that site. Since they are leaving my site, I can leave it out of the navigation.
3. It is not perfect. Your sitemap is never going to be exact, sites change and grow over time, but if you have a solid idea of where you want to start and end, you will have an easier time with the design itself. For example, I know I need 4 buttons on my blog, because there are 4 places I want people to be able to go from there. This aides in the layout, and knowing how much space I need for the content.

Finally, if you already have a site designed, it doesn’t mean that you can’t still create a sitemap. In fact, I recommend that you create one without looking at your site, and then compare what you want to see happening to what you actually see. If there is a big difference, you may want to contemplate making some design tweaks.

Did you build a sitemap for your website? Why/Why not? If you didn’t have one, and you created one after the fact, what did you learn?

Yesterday, my new site design went live. *cue excited dancing music and me jumping up and down like a crazy woman!!*

If you follow me on twitter, you probably saw my tweets about trying to redesign my site. I was frustrated because I was having trouble pulling myself out of my own head to work on my site. When I design a clients site, I don’t have preconceived thoughts, I can be free to develop something that fits what they need. For myself, I kept coming back to a design too close to my own, or too safe. Finally, I asked my twitter followers for help and help they did! They treated me like a client, asking what I wanted my site to do, etc.. it allowed me to separate myself from, well, myself (hint #1: Asking for help doesn’t mean you are incompetent, it means you are realistic). Finally, after tons of help from followers, lots of hours in photoshop, hunting for a great coder to help me, and a few late nights, my new site is here!

First, I want to send a HUGE thank you to Brett Terpstra, the amazing coder who turned my design into a working wordpress template. While I could have spent hours and hours coding it myself, driving myself crazy when little things weren’t working, I decided it wasn’t worth the headache, so I hired Brett (hint #2: Just because you can do something, doesn’t mean you should). He not only turned it around very quickly, but he kept me in the loop the entire time he was working on it, and let me see it as it developed. He was so easy to work with and I am so glad that I chose to work with him. He also did such a great job that he is my new go-to coder for big projects (and should be for you too!) .

Second, I want to talk about the usability of your site. When I first started this design, I thought I wanted one thing, but everyone I showed it to said it was hard to follow. So I scrapped the idea, and started with efficiency – an easy to navigate layout and then worried about design. Your website needs to be, above all else, easy to use for the visitor. Yes, it should look good and represent your brand, but if people can’t use it, they won’t care what it looks like (hint #3: Functionality is the key to any successful site, design is just the icing on the cake). If you are considering doing a redesign of your own site, I recommend starting with an outline of what you want people to do first, before you get into colors and layout.

Third, let’s talk about who you are. For example, I don’t do flash designs, I don’t think they are beneficial for most people. So, my site doesn’t have flash on it. I also don’t write dry, technical copy. So my site is written and designed colorfully (hint #4: Your site should represent who you really are, not what people think you should be). I love my clients because they know who I am the minute they visit my site, and aren’t surprised by me as a person because my brand is all connected.

Finally, a lot of you are reading this via rss, so if you haven’t: Visit my site NOW to see the new design…you’ll want to click through a few pages to see all the differences. The portfolio page is one of my favorites! (hint #5: A lot of people will only ever read your rss feeds, so give them lots of reason to visit the actual site, like leaving a comment, so they can see your design!) Also, if you have added my button to your sidebar, I have updated it to match the new site: So please replace the current code with this code:
<a href="http://www.wrightcreativity.com/blog" target="_blank"><img src="http://wrightcreativity.com/wp-content/uploads/2009/12/wrightcreativitysitebutton.jpg" border="0" alt="Wright Creativity" /></a>

What hints of your own can you add for web design?

Quick story first: my parents have a poodle (Bella), who fell in love with a tortoise (Douglas) that friends of theirs had as a pet. So my parents friend gave Douglas to Bella as a pet. (yes, the poodle has a pet tortoise). Anyway, my parents left in their RV last week to go to Arizona for 2 weeks of relaxation, site-seeing and golfing. While Bella could go with them, Douglas couldn’t, so I offered to “tortoise sit”. I learned 2 things about tortoises really quickly: they are scared of absolutely every moment, and they like to hide in stuff.

Onto the point of this post: natural motivation.

I had a bit of a crazy day today, working on a couple client projects. I was tired, a little crabby and I needed a little brain break. So, I wandered outside to see where Douglas had disappeared to. When I found him, he was wandering along our patio. I sat down near him, and for the first time since I got him last week, I really looked at him. When he walks, is head bobs in an interesting fashion …I could almost hear him whistling a little tune and see his smile as he meandered along. His legs and arms (or limbs?) are covered in little spikes, but they aren’t sharp, it is more to pull him along. He kind of drags them, rather than lifting them, because lifting them would be heavy with the shell. Then there was his shell. It is beautiful, smooth, colorful and really unique. After staring at him for what seemed like 20 minutes, I felt really relaxed, my thoughts had slowed and I was smiling. Douglas was my natural motivation today. Just watching him participate in life in his own way was what I needed for that extra boost of energy and refocus to finish out my day.

Just before I came back inside, I snapped a picture of him. Not thinking much of it, I opened the picture in photoshop and played with a few different filters – and was pleasantly surprised when the image above came out.

Where can you find a little natural motivation?