Thursday, August 20, 2009

Webdesign stuff I've learned

In the last year and a half, I've been learning a lot about webdesign. I took some classes on how to build websites, and a few on what looks good.

I've learned some stuff, and I feel like writing it all down, so here it is (well some of it at least).

  1. Positioning should be done with CSS and not with tables. Designers used to use tables to lay out websites, but you're not supposed to do that according to the w3c (the governing body of the web, who determines what html and css are meant to look like, and how web browsers display those rules). In reality, css enables you to do way more than tables do. I find it frustrating to work with tables. Don't get me wrong, sometimes css is frustrating too, but in the long run, it opens up a lot more doors, and your web pages load faster, because they are obeying the rules.

  2. Web 2.0 stuff is attractive to the average person. Even though Web 2.0 has been around for a few years (e.g. when YouTube and MySpace came out), the design principles haven't changed. Here are the key principles that make a website look a lot more clean and professional than a lot of other sites (which people are still making):

    • Top Menu Bars--side menu bars are old school. You want to see what you're looking far at the top of the page.

    • Rounded edges--these are a pain to make compared to how easy straight edges are, but they're well worth it. It's the clean web 2.0 look that everyone expects these days.

    • "3D" and perspective--again, it is more time-consuming to add drop shadows and reflections, and it's really easy to screw up your reflections, but they are so ubiquitous in professional media (iPod ads started it, but now everybody uses them) that to not use these techniques leaves you with a very flat webpage.

    • "Above the fold" homepages--Make everything (or 90% at least) of your homepage show up in a window so that the viewer never needs to scroll on the homepage. This also makes it so that your homepage is set up landscape instead of portrait, which is more natural to the screen and the human eye.

    • Images instead of just text--I learned this in an Erwin McManus book, actually--it wasn't really web-specific. He observes that culture moved from words to pictures, and now to images. A number of successful websites use graphics in their menus.

    • Shiny images--a lot of the icons for web 2.0 not only are rounded-corner buttons with drop shadows, but they look like they have a shine on them. I guess this kind of goes with the "3D and perspective" one

    • Actually using web 2.0--this is true for any organization, and especially true for churches, which I've been doing the most web research on. If someone is part of an organization, they're probably not going to go check out the website nearly as often as they will go on facebook, twitter, flickr or youtube. So, placing links to social networks in very prominent places is key as well.

  3. Other simple design principles:

    • Color contrast--colors should be evenly spread around the RGB color wheel, and a mix of darks and lights. Text needs to be different enough that it's legible

    • Light colors (non grays) seem to be in for large areas.

    • Too many links to the homepage are a good thing. That speaks for itself. If you can't find the homepage quickly, you'll probably leave the site

And that's probably a sufficient list for now. I've decided that making a website that is fad-free is a dumb idea. A website should need to be replaced every 2 or 3 years max. The web changes so fast that if you are actually going to do a good job staying up to date with things, then you're also going to be out of style pretty quickly. That means redesigns and redos are so important. That is yet another reason to use CSS instead of Tables. It saves hours on the redesign.

No comments: