Web Design Development
"Simplicity in complexity"

Over the next three days I will be writing up three blog entries for people interested in the thought process of web design development; I will provide a few fundamental tips that should give you a head start over others who usually don't keep these in mind, and then fail to perform as a freelancer or contract designer.

This is part 2 of 3 : Simplicity in complexity

A basic rule that has been discussed on the web a lot and in professional books over decades of time is the KISS principle. Keep It Simple, Stupid. I therefore rather forward you to the WikiPedia entry for the details then repeat it once more. http://en.wikipedia.org/wiki/KISS_principle

What I want to talk about is not getting overwhelmed in the source code, the files, the design, and everything that is part of the site you're working on. A single web page could have all the javascript in it, all the stylesheet code in it, and all the PHP and XHTML code in it. A web site could also have many directories with functions, classes, include files, pictures, etc. Finding the right balance and thinking ahead of time while staying flexible for change is key here, and very important to master. I recommend to consider how you're going to build the pages, without forgetting that the site will grow in the future with perhaps more content, sections and traffic.

In order to achieve that design you're developing, keep it as simple as possible on the back-end of things. Name the filenames to something short and obvious, put them in their obvious directory. While you're coding don't forget to comment what you're doing so others on the team can learn and understand how you've done it. But don't overdo it. There's no need to have an includes/ directory and then prefix the filenames with inc_ so you know they're an include file. This is already obvious since they're inside the includes/ directory. I hope you get my drift.

For the front-end it is even more important perhaps to apply the KISS principle. Don't end up with a design that's build out of graphics that take up over 40% of the web page, so there's only space for smallfont text as content. Because the content is the most important thing for the visitor. That's what they come for. Not the big shiny gradient around it. Play with different layouts, remove what is not important and not really needed. Keep it clean and use the real-estate of a page smart. Use bigger fonts if there's space for it, don't hide your content. A real life example is perhaps Google. Even with advertisements on their page you see at first glance what the content is you're looking for. And they're still filling the page with ads, a top menu, a logo, your account info and additional option. An appealing design doesn't start with making and finding images to fill the page with. It's the subtle way you can add finesse to your layout so the content is displayed properly.

I recommend you train yourself. Go to the top 250 web sites you know, and write down the first thing that comes to mind for what you don't like, and do like. You will soon realize as a visitor and a designer what you think works and doesn't work. And then figure out what is the magic for a good layout and design, and what you should avoid at all times.

Developing a design for a client is a tough job. It's not easy, and it shouldn't be. Mastering XHTML/CSS is almost an art; It's very complex, but don't get overwhelmed and think ahead, play with alternative design options and find the simplicity in the complexity. Then the design will be appealing, easy to use, and your client will be happy.

If you missed yesterday's part 1 of 3 you can find it here : http://www.vbulletin.com/forum/blog.php?b=1248 And check back tomorrow for part 3 of 3, I will be talking about dealing with the issues of incompatibilities between browsers.