Web development is about many things: concept, design, development, testing and much more. In this article we’re going to look at a variety of tips to help you throughout the design process.
- Organization. As with any other workflow, it’s really important to know what you want to achieve before you even get started. In other words, you need to know what you want as an end result. For this, planning is crucial. It’s important to create a storyboard, because with this process, you can see what you want your design to look like before you even build it. Another way of achieving this goal is to create mockups of your web pages using a design program such as Photoshop, Illustrator or CorelDRAW. In this way, you can experiment with the overall look of your layout.
- Standardization. Following up on the tip above, it’s really important to standardize the overall appearance of your web site. Nothing is worse than a site where the color scheme jumps all over the place and the web pages have different designs. At the very least, you’ll confuse the user. At worst, you could lose them completely.
- Navigation. It critical to design your site navigation in advance of building it. Few things are worse than having a site where there’s no logical flow to the navigation, or a site map that’s incomplete. Also, it’s really important to have clearly marked tabs on your interface. Don’t make the user hunt for them. It will ruin their experience and they will be likely to leave your site in frustration.
- Stepping Back. When working on the computer, people have a tendency to lean forward, hunching the shoulders and staring at the screen. In this position, the screen fills most of your field of vision. When you do this it can interfere with the way you see your design. Step back. Get out of your chair if necessary and look at your monitor from a distance. Sometimes, design elements that don’t seem to work suddenly “come together” when viewed from a distance.
- Presentation. It’s a great temptation to add all sorts of bells and whistles to your site, such as Flash, sound, and other special effects. The question to ask is: Do these effects add to or detract from the user experience? In other words, if you need to demonstrate a process, then video or an animation would be appropriate. In contrast, if a simple image will do, use that. Having a site that clearly conveys your message is really important. Another thing to consider is if you have too many effects on your site, that will affect the loading time and on the web, time is of the essence. If your pages take too long to load, there’s an excellent chance that you’ll lose your audience.
- Coding. When coding your site, make sure you test and verify your code afterwards to make sure it’s standards compliant.
- Use Templates. Do yourself a favor, don’t reinvent the wheel. Whenever possible, use templates. In my case, I tend to use WordPress quite a bit. It has many applications and it’s easy to configure the program to build a web site.
- Test Your Design with Different Web Browsers. This can be a really time-consuming chore. One way to mitigate this is to use Dreamweaver CS5 with the Adobe Browser Lab. To get an idea of how this works, have a look at my review of Adobe Dreamweaver CS5. You’ll find some great time-saving tips there.
- Obtaining Color Codes for Images. Do you have trouble understanding color codes? Check out this great tutorial (and color tool) on WebReference by Stephen Philbin.
- Don’t Scale Images Using HTML. Sometimes, when working on a layout, you have an image that’s too large for the page. One way of dealing with this is to scale the image using the height and width attributes. That’s a bad idea for one major reason. It takes longer to load the image at that size. Instead, reduce the size of the image in an image editing program. Likewise, don’t use the height and width attributes to increase the size of an image. That will tend to degrade the image quality and it’s especially noticeable when you’re using text.
Conclusion
So there you have it, ten design tips. Considering what you want to do before you begin will make your life easier, save time in construction the site and result in a better experience for the user.
