I had the privilege of being a  website design judge at the Capital Area Career Council web design showcase today.  The students were Junior and Senior high school students who are taking classes at the career center to supplement their normal high school education.  They are learning things like: Photoshop, Game design, Programming and web design.  It is a great program and gives the students a taste for lots of different areas in the creative side of IT. 

What was really odd to me is how much these websites looked like the websites from 1995.  Did they have my HTML for dummies book?

With how much the internet and web design principles have evolved in the last 10 years you would think that these websites would look a bit more like sites from the 21^st century - but no, they were all dark backgrounds, repeating pattern backgrounds, text on top of multiple colored backgrounds, hokey rollover menus all sprinkled with some animated gifs.

It was like a flashback to my freshman year of high school when I was building websites for the first time.  Why couldn’t they teach these kids better!

But after thinking about it more it became perfectly acceptable to me, and I think it is the natural progression of a web developer.

The evolution in my mind goes something like this

First you learn HTML/CSS, which initially gives you understanding of how to position text and images on page.  You learn things like text alignment, making columns, and doing backgrounds.  You learn some from books, but also from finding other sites and mimicking what they do.

You can now find backgrounds online that you think ‘look cool’ – and since you are just starting out your backgrounds have to be creative and different.  You don’t go with solid colors or a nice subtle fade, it’s just not creative enough at this point in your education.  You try to leverage the background image as a major area because, well, that’s a CSS property you know so you feel you should use it.

Now you start to learn some Photoshop, you get pictures of your friends throw up some solar flares, some fire effects, bevel, embossing, drop shadows and you can make stand alone banners and images for your site.

This gives you a crazy background, with a header showcasing your mad Photoshop skillz.  It’s looking great in your eyes, scary in a veterans eyes.

From here you start to find animated gifs, or make your own.  At this point you can only look at your website as areas you can stick things.  So you can stick a text thing here, an image you made here, and that awesome animated fireball over there.

But then it all changes, it eventually starts to click.  Or, perhaps you have a good mentor who can help you along and you start to:

·         Building your sitemap and figuring out the actual audience you are targeting first

·         Build your entire homepage and an inner page in Photoshop before ever touching HTML / CSS

·         Learn about margins and paddings to create needed space around text and elements

·         Choose the right fonts and learn about typography principles

·         Take the simpler route, and make everything look nice rather than murdering elements with Photoshop filters

·         Thinking about what goals you actually want this page to achieve and designing pages to achieve them

You start to see your website as not just a place to stick text and images but you can see it as one connected mass, each element dependent on another.  You learn how to take your entire Photoshop document, cut out each image needed and turn that into clean website.