5 Tips to Help Create a Website Design

image

Many web designers out there are thinking about how to create a killer web design, one that will knock everyone else over and cause each and every visitor to bow their heads in awe of your awesomeness. Of course, most of the time, that isn’t exactly quite the case.

Maybe this isn’t a Photoshop tutorial that will detail each and every step. Maybe I’m not Jakob Nielsen (the king of usability), but I can help give you a few tips that will help you make a design that is sure to please. It all starts with a layout and a desire to create.

Without further ado, here are five tips to help make your design better.

1) Mimic it well, or don’t mimic at all.

Remember, what you are making isn’t an computer application. If you’re making a webapp, please don’t mimic a GUI from a favorite application unless you can mimic it well. I’m a hater of web designs that have draggable modules in an attempt to look like windows.

The problem doesn’t lie in the fact that there are modules itself, which is perfectly fine with me, but that most of the time implementation isn’t done well. Dragging the title around ends up… selecting the title? But I wanted to move the module! Oh, I see, you have to click a “Edit Position” button.

It’s already too late. If dragging the module caused the user to buy something, well, you’ve just failed. I’d be annoyed at this point. A good design needs to consider every single part of it.

2) Please test your website with real people.

Are your users all Ruby on Rails programmers? Are they all PHP gurus? How about a 100% MySQL expert userbase? I didn’t think so. The next time you make a web design, remember who your users are, because you aren’t designing for your client. You’re designing for the users.

It’s the users who see things. I know that every single time I make a website design and show my dad, he’s always going to get confused somewhere. That’s the part I’ll mentally remember to fix. Why doesn’t clicking this do anything? Why can’t I type here?

Watching someone navigate and use your site is very important. Extremely important. Incredibly important. I can’t even stress how very important it is. It’s easy, too: just find ten people and ask them to buy something on your website, etc.

Watch as they move across the pages. Pay attention to where their cursor moves, where they try to type, etc. It will be vital for your website’s success. Better yet, hire a usability expert or company, ask other developers and designers, and if all else fails, leave the project for a week, then come back to it. What jumps out at you?

3) The user should know if they’ve done something.

OK, I’ve clicked here on this link, but absolutely nothing is happening, a user says. You explain that the module is loading. Then why isn’t the loading bar moving, the user asks. Well, you explain painfully, it’s in an iframe. Maybe it’s an AJAX transfer. But whatever it is, it’s also a failure.

When your user interacts with something on your website, Jakob Nielsen (usability expert) states that a follow-up action should happen within half of a second. So let something happen, let it be a loading bar, a graphic, the screen darkening in preparation.

4) Why do I need to wait this long?

It’s a news article. It’s a blog post. It’s a news column. So why am I waiting this long for the website to load? Your users will be turned away if load time takes too long. So instead of having them wait, spend some time optimizing your files and images.

5) Can I please read what you are writing?

If your font size is too small, bump it up! People hate having to squint when they read. As a general standard, I use 13px (because odd-numbered font sizes are sharper than even numbered ones) font size with Arial.

Try using a line height of 175% to 200%. Just try it. I tried it almost two years ago. Now I’ve never looked back. The increase of legibility is simply amazing.

For more information on typography read the 100% Easy-2-Read Standard article. Here’s a few tips to round up that article: don’t expect users to change their font sizes, always start with a large font, and make sure your line isn’t too short or too long.

6) Bonus: Be original. Please.

These days, with websites all over the world, and so many on the Internet, it’s important to stand out from the crowd. Try something new. Try something dashing! Show off to the world that you will create a better design.

Just remember while you are trying to make this layout: don’t re-invent the wheel. Web design looks like web design for a reason: it is the result of years and years of work, and hundreds of years of typography on printed paper.

And please don’t use Comic Sans MS.