7 Steps for Systematizing The Design & Build Process

Systemization is basically what it says on the tin, i.e creating a series of processes or a pre-defined set of steps to speed up and quicken a laborious and or repetitive task. So how can you systemize the design & build of websites? The day to day nuts and bolts of your business? Below are 7 steps you will need to create systems to fulfill repetitive and dull tasks so you can automate your busywork and save time for creativity to flow.

Snippet Repository

Absolutely everybody should have a code / design repository. You can use a dedicated program, like code collector pro: http://www.mcubedsw.com/software/codecollectorpro or just build a folder filled with text / html & photoshop files containing your code or design elements. Here's a few ideas as to what you could store to save you countless hours in re-writing, re-designing and wasting time:

• Contact forms (create one which allows you to quickly customize for different projects
• User Management / login scripts e.t.c (create one that is not heavily integrated into your design with loads of inline code for even more time saving)
• Payment handlers and online store scripts (if you've built one before, why not re-use it?)
• Commonly used design elements (buttons, headers, layout's, footers e.t.c)
• Anything else you've built bespoke before that could be of use, store a stripped down, non specific version for a later date
• Designers will find it handy storing away a ready to roll HTML template, complete with doctype and link to stylesheet already inserted. This will save time when starting new projects as opposed to starting from the ground up.

CodeCollectorPro: http://www.mcubedsw.com/software/codecollectorpro

Code of conduct

If you work in a team of any size, you'll know that once a piece of code or script is passed around, things can start to get messy. Everyone has different styles, and will implement their own unique quirks into code. Because of that, if you come along afterwards, it can be quite hard to get to grips with the way something's built or why that div was floated to the left - so develop a template or guideline as to how everyone in the team should work. It might be as simple as saying that CSS properties should be defined in order of:

• width
• height
• color
• position
• misc

You may also wish to request everyone uses self explanatory function and class names, for example if an element is to contain an advert, and is located top left, it should be named "#topleftad".

Pre-made templates

If you find yourself with a spare hour or so, you might decide to create some designs that you can code, and have ready to ship when needed. This will reduce time spent creating sites from scratch. Simply design the template, either with a generic style or target it at a specific industry, such as a landscaping company- whatever suits your business. You might also build out skeleton sites, that is a site with features you commonly integrate into a site. That might be a wordpress install with a newsletter plugin, contact form & SEO plugin. Systemizing this process can save hours in unneeded extra work!

Canned Email Responses & pre written scripts

Although not technically part of the systemization of developing and building sites, you may as well optimize the way you communicate with clients while your at it. It would be wise to consider frequently asked questions by first time clients, and then write out an answer ahead of time. Then the next time they ask "I want a website, how much will it cost" - instead of writing out a complex long answer, its pre-written. That can save anywhere between 5 and 20 minutes per emails sometimes. To save even more time, pop these FAQ's on your site, and you'll cut down on these emails in the first place!

Coding Frameworks

Using a coding framework will save you masses of time. Once installed, you have a library of pre-written, validated elements to use. The great thing is, there are loads of frameworks, to suit developers & designers.

Frameworks for Designers

Designers will benefit from checking out CSS frameworks and Grid / Typography systems. In short, design frameworks will save you time, give you cleaner more structure code and achieve an optimal browser compatability. Here's a few worthy of note: Blueprint CSS - http://www.blueprintcss.org/ Blueprint is a CSS Framework which aims to cut down your development time by giving you a grid system, typographical guidance and even a print stylesheet. Plugins are available for buttons, tabs and sprites. YAML - Yet Another Multicolumn Layout - http://www.yaml.de/en/home.html Another HTML / CSS framework designed to be lightweight and based on web standards. Features include modular construction and design for accessibility. Eric Meyer CSS reset - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Reset browser default CSS properties so you start with a clean slate every-time. Stops bizarre bugs and quirks where your CSS conflicts with the browsers. YUI Grids CSS - http://developer.yahoo.com/yui/grids/ Yahoo is another major player in the framework sector. YUI offers four preset page widths, preset templates, ability to stack regions and is only 4KB. 960 Grid - http://960.gs/ A css grid system for developing professional, solidly laid out designs.

Coding Frameworks

Using a framework for development work will also great benefit you and your team. You can integrate MVC (Model, View, Controller) architecture into your coding. Basically, that means that the data (model) is separate from the Controller (which grabs data from the model) and combines that with the view (what the user sees.) Quite often, you'll see components and tools included to help you build complex applications faster. Using a framework will also mean you can scale your app, lower costs and developers need to write less code. CodeIgniter - http://codeigniter.com/ CodeIgniter is an open source web application framework. There's very little configuration required when implementing, you don't need to use the command line and you don't need to stick to restrictive coding rules. You save time, because the framework provides you a rich set of libraries for commonly needed features. CakePHP - http://cakephp.org/ CakePHP aims to achieve a similar "rapid development framework" to CodeIgnitor. It has an active community meaning there's lot of opportunity to get support if you need it. Zend Framework - http://framework.zend.com Extending the art & spirit of PHP, Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase. Zend Framework is focused on building more secure, reliable, and modern Web 2.0 applications & web services, and consuming widely available APIs from leading vendors like Google, Amazon, Yahoo!, Flickr, as well as API providers and cataloguers like StrikeIron and ProgrammableWeb. Zend supports -

• AJAX support through JSON – meet the ease-of-use requirements your users have come to expect
• Search – a native PHP edition of the industry-standard Lucene search engine
• Syndication – the data formats & easy access to them your Web 2.0 applications need
• Web Services – Zend Framework aims to be the premier place to consume & publish web services
• High-quality, object-oriented PHP 5 class library – attention to best practices like design patterns, unit testing, & loose coupling

Javascript Frameworks

What if you could add animation, dynamic page reloads and better user integration, without writing raw javascript from scratch? Well you can. Using a javascript framework. You get pre-made and tested functions to utilise typically for free from the many high quality open source frameworks out there. Jquery - http://jquery.com/ jQuery simplifies HTML document traversing, event handling, animating and ajax development. Its free, lightweight, cross browser and CSS3 compliant. Its probably the most widely used jQuery framework, and there are 1000's of tutorials and plugins available around the web.

Build your own

Of course, if you have the time, then you could build your very own design, css or coding framework. This would be a combination of elements, functions or properties you use frequently, and having them stored away will save you countless hours. You can basically re-purpose most of these elements from past projects, ready for future ones. You might even create Photoshop frameworks. Because you build your own, you'll be able to tailor it perfectly to your process flow.

Accounting, Project Management and Client Management

The 3 fields above are essentially full time jobs for 3 qualified people. So why should you as a freelance designer or developer be struggling to balance the accounts, keep projects running smoothly and actually working on the projects yourself? Its time to get some help. Using readily available web apps, such as Basecamp, Highrise & LessAccounting you can securely and quickly keep your business running smoothly. This will free up several hours per week for you to focus on what you love doing.

Customer Support sites

Support is very important, because things break, customers get confused and all havoc generally lets loose. So, set-up a support site, with documentation on how to set-up emails or how to use your CMS and cut down angry phone calls and countless emails. Including screencast videos will ensure that even those who know very little about computers can follow along. You could use a specialized support application like helpserve http://www.kayako.com/solutions/supportsuite/ which handles support tickets to keep everything super-organized. So, with just a few ideas on how to systemize your business, you'll be freeing up 5, 10 or maybe even 15 hours a week, and cutting down on boring, repetitive tasks. Systems can take a few hours to set-up, but they will return 100-fold the time you invest in initially setting them up.