5 Ways To Take the Pain Out of Web Design

Web design and web development is, by nature, a very complicated beast. There are so many things to consider at every stage of the process, it can sometimes become somewhat confusing, especially to those who don’t have their workflows sorted. I’m not looking to suck the fun out of web design, its an enjoyable process is many cases, I’m just trying to make the bad bits a bit less pain full.

Read on.

  1. Design before you develop – I see this particularly with people new to the game and those who are “self taught“. It’s funny, but people Class Diagramgenerally find the quickest way to make a buck, in web development this usually involves learning a bit of HTML and fashioning it into a webpage. If our intrepid developer makes a job out of it and goes freelancing, its quite unlikely that there will be much time to invest in learning, especially when it’s the somewhat unfashionable subject of design. And not design in the visual sense, but design in the sense of the software development lifecycle. i.e. the stage that comes before development. It may not seem like a big deal if you can already crank out a site or two but as soon as you move on to bigger projects, it will save your back. Specifically, plan out your sites navigation, list the features (and, if relevant, map them to your customers requirements. If theres ever any dispute over what you’ve delivered, this will absolutely be your saviour) and if your going for a persistent data storage layer, model the data and its structure. it sounds boring I know but it’s what separates the really successful developers from the ones that don’t get paid.
  2. Embrace software patterns – Yes, patterns are big in the software development world. I know, I live in that world. The point is, they aren’t quite so big in the web development world. The principal behind patters is that, if a problem exists, chances are someones already solved it. There are a couple of different ways to approach this, you can either go hunting for the ways in which other people have solved these problems (open source classes, templates or software etc.) or you can simply document the ways in which you solve these problems. For web development, you will probably be looking things like layouts, snippets of styles and Javascripts and classes/functions in your favourite language (php, cgi, asp etc.). The one thing this will help you do is prototype quickly, and then customise those prototypes for the project. HINT: its fast!
  3. Get good with your tools – I’m not going to dictate to you the tools you should TextMate Logobe using, I can tell you what I use but thats not really the point of this article. The point is, no matter what tools you use, get comfortable with them, their going to be your best friends. I think you also need to bear in mind how you intend on using your tools. You could go for an all in one package like Dreamweaver, or take a more distributed approach by using highly tailored separate tools. Personally, I find Dreamweaver more of a hindrance than anything else. I find TextMate far more adaptable and therefore effective. I think its important to try different tools and stick with what works for you.
  4. Learn how to test – Oh how I hate testing. We all have to do it and testers can earn a fair amount of money. That’s risk money though, if you’re a tester you run the very real risk of becoming the worlds most boring person. Still, this isn’t really an excuse for putting it off. If your developing for the web you need to find out a few things. Firstly, what’s the success criteria for you and your customer. To ger a site to look and behave exactly the same on all browsers on all platforms is nigh on impossible and would require an insane amount of work. So don’t bother. Also, don’t lie to your client, be up front about it and agree the the minimum they will accept. May I suggest that as a minimum you go for a standards compliant design that works in all modern Web Kit, Opera and Gecko based browsers and then get it to work with IE 5.5, 6 and 7. Make sure you have a system set up so you can easily test on all variants (may I suggest Parallels on OSX with a Windows Virtual Machine). If your building an application, some automated testing is essential. Not just to guarantee the quality of your application but to save your sanity. If you can learn how to test efficiently, get this, it will take less time.
  5. Nail your processes – So what’s the first thing you do when you start a new project? I’m sure this varies from project to project for most of you but there is no real reason. For the vast majority of projects you need to complete a distinct set of steps for completion to take place. One of the best things you can do is document these steps. If you do this you will find that 1) You can provide better estimates and costs 2) You can plan better and 3) You’ll be more organised. The reasoning is simple, is easier to assess small pieces of work. If you asked me how long it takes to build a house I couldn’t tell you, ask me how long it takes to build a bed and I could give you a much better guess. A great benefit of this is that you, the developer/designer will know exactly whats left to be done.  Also, once you’ve documented what you do its a whole lot easier to see areas where you can improve.  Seriously, I cannot emphasise how important this is when your trying to run a business.

So did I take all the fun out of web design and development? I really hope not. My intention is to allow you to find an easier way to get the boring stuff out of the way so you can concentrate on, and make a good living from, the things that you enjoy. You’ll also notice that the tips above aren’t really limited to web design, they can be applied to almost every type of work.