How To Make Usable Web Sites When You’re Not A Web Designer

March 23, 2008 • Filed in: Uncategorized

Do you know what a wireframe is? In web design, once you’ve got the the content for your website, you typically make a quickly mocked up design of how your site will look like. The best way to do this is to lay out blocks of content in a piece of paper or in any visual grid. The result will be a wire frame.

Wireframes and Usability

Wireframes are great for UX and usability. You typically start with a content inventory check, the navigation categorization, and tasks analysis. When you’ve done that you’ll make a low-level prototype - viola, the wireframe. The idea is to lay it all out before working on actual code and HTML. Show this to some UX experts to get their preliminary view of your website.

It saves your designers a whole lot of time.

Example: The Blog Design I’m Looking For

You can now use wireframes to quickly explain what you want.

For instance, I’ve been looking for very different blog design look. I have the content and I know my initial navigation structure. My website visitors would just really be reading my website content. I want their visual experience to be easy yet informative.

How would my blog design look like? Here’s my initial blog home page wireframe:

I made this wireframe using Microsoft paint - a programs that loads quickly on computers.

The Basic Usable Tests

At this level, you can immediately determine important usability elements like.

1. The title - this is your website/blog’s branding.
2. The description/tagline - in one glance, give your visitor and idea what your website is all about
3. The search form - gives your visitors a chance to search for content on your site
4. The Navigation links - gives your visitors ideas on where to go next
(There are more, but let’s stick with this for now.)

You can find all the elements above in the wireframe I’ve made.

Not A Designer But You Want Your Own Web Design?

Here’s how you do it.

Step 1 - Usability Analysis. Find out what the primary tasks your users will be doing on your site. Design your site so it will be easy to accomplish those tasks.

Step 2- Identify your usability elements. Organize your navigation structure. Make your website informative (like a billboard) with just one look.

Step 3 - Make your wireframe.

What to do next

Now that I have a wireframe, I can now bully someone like Rico, Gail, Liz, or Mae to make the design for me (Hehe).

Or I’ll try to make the html of the site myself.