Sep 17 2009

7 Steps for Systematizing The Design & Build Process

Advertisement

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 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 CSShttp://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 Layouthttp://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 CSShttp://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 Frameworkhttp://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 workflow.

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.

Author: Ben Gribbin

Ben Gribbin is the Editor at Apple Reviews, and is a freelance web & icon designer from the UK. Ben also loves to blog, and it goes without saying he is an apple nut through and through. You can find out more about Ben at bengribbin.com

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Ivan Miši?, 17 September 2009

    Nice article, very useful :-)

  • W3planting, 17 September 2009

    cool article, this will simply make a designer/developer more productive & they can focus more on their work instead of accounting & billing etc processes.

  • Nico, 17 September 2009

    great article, I’ll keep that in mind :)

  • Damien, 17 September 2009

    And Ruby on Rails ?
    And Django ?
    There’s not only PHP.

    The idea is interesting. But the article is quite too concise.

    • tim, 17 September 2009

      You can take the principles and apply it to any framework / language. I’m an ASP.NET developer and the principles are the same. You can’t really expect him to go through all 5 million frameworks?!

  • TypeSett, 17 September 2009

    Basecamp is amazing.

  • Tom, 17 September 2009

    This has brought to light my biggest problem witch is organization of code, good read btw.

    • z.Yleo77, 18 September 2009

      yeah , and i think your idea really true`

  • derschreckliche, 18 September 2009

    Thx for this nice article – found many useful resources and links here.
    You know good tutarial/screencast ressources for some of the stuff above?

  • Jared Crossley, 18 September 2009

    You’ve highlighted some very valuable tips on process in this article. I do have a concern about your CSS ID/class naming recommendations. You mention that if a layout element was located on the top left-hand side of the page, for instance, that you could name the element “#topleftad”

    This is not semantically helpful, as the very purpose of CSS is to separate presentation from content. Naming a CSS element based on its current position is risky. In your example, a more generic ID such as “#ad” would be more semantically correct. This way, if the layout changes because you want the ad to appear on the right-hand side of the page, the ID is still meaningful.

    Again, very good article.

    ~Jared at Descant Studio

  • Clay S, 18 September 2009

    Great article, couldn’t agree more! We employ a lot of these practices at our firm as well, and that allows us to launch over 100 sites every year.

    Another PHP framework you may want to check out (full disclosure: we’re a sponsor of it) is http://www.recessframework.org/. It helps build and scale apps really quickly.

    Thanks for the article!

  • webmasterdubai, 18 September 2009

    really nice article really help out freelancer and developer to solve their most of problems using frameworks .

  • Ahmed, 18 September 2009

    Nice tuts thanks for sharing it

  • Sean, 18 September 2009

    What about Yii? It’s one of the amazing up-and-coming PHP frameworks I’ve been working with after looking into Zend and CodeIgniter.

  • Kalikratis, 18 September 2009

    You can also save snippet within TextMate… An other indispensable one is TextExpander which has free set for html and css, even tinyurl with few key strokes.

  • Ben W, 18 September 2009

    Hey did you see Snipplr? It’s pretty cool:

    “Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers.”

    http://snipplr.com/

  • Alex, 19 September 2009

    Nice article. I completely agree with Accounting, Project Management and Client Management. Those task are really time consuming for freelancers so any help it’s good. Probably the tools you recommend are quite expensive for little teams, but worth for medium and big ones.

  • Pritam, 19 September 2009

    I like your new blog design very much. It’s fantastic.

  • Kasper Lau, 19 September 2009

    Nice stuff right there…! As usual. :)

  • Chetan Sachdev, 19 September 2009

    I found this post extremely useful. Thank you for sharing.

  • Marcel Müller, 20 September 2009

    Thanks for the tips. Really appreciated!

    For snippet repository I’m currently using Snippely (http://code.google.com/p/snippely/). It’s a free and simple Adobe Air application. Not advanced as Code Collector, but very helpful. :)

  • Bruno, 21 September 2009

    You forgot symfony http://www.symfony-project.org/

  • Ken, 21 September 2009

    Just my quick tip. With the CSS, I’ve now gotten into the habbit of just writing it in alphabetical order.

    {
    background: …
    border: …
    color: …
    font-family: …
    margin: …
    padding: …
    …etc.
    }

    Easy to use, easy to remember.

    Good article. Thanks.

    • Ebi Atawodi, 22 September 2009

      I’m definitely stealing that! It’s great!

  • Noel Wiggins, 21 September 2009

    My biggest concern now, is what I am going to do with all my free time that this list of resources is going to save me on development time

    Thanks and Regards

    Noel for Nopun.com
    a professional graphic design studio

  • Redstage Magento, 22 September 2009

    Thank you for the informational article. Great read!

  • Prowl, 24 September 2009

    Great read! Thanks

  • Plans for Sheds, 07 October 2009

    great stuff! will re read

  • Barn Shed Plans, 07 October 2009

    Lovely article, thank you!

    Dave

  • barat, 13 October 2009

    Well … most thing written here are realy helpfull but for Code Framework I prefeer Kohana. Why? Because for example Symfony is to heavy, CakePHP and CodeIgniter are just PHP4, and Zend is more class/script collection :)

  • Xscratch, 13 October 2009

    Great article, however a thing that I think is also important is the deployment process of the app/website

  • Imokon, 20 October 2009

    Mootools should be up there under Javascript frameworks. It comes in very handy.

  • Brad, 20 October 2009

    Good article Joel. I love looking at the different parts of my business and trying to figure out how they can be systemized and made more efficient. You’ve hit the nail on the head with these suggestions!

  • Wolf88, 22 October 2009

    I went through the same experiences, unfortunately. ,

  • Webjohn01, 03 November 2009

    Hello Joel!

    It was a great article that full of practical tips on how to make your development time a lot easier.

    Keep up the good work.

    More thanks!

  • denbagus, 27 November 2009

    very complete information of design process . thank you

  • Mimi Vroman, 18 January 2011

    Youre so cool! I dont suppose Ive read anything like this before. So nice to find somebody with some original thoughts on this subject. realy thank you for starting this up. this website is something that is needed on the web, someone with a little originality. useful job for bringing something new to the internet!

  • LIONJIMI, 07 March 2011

    I like this site for xcellent collection of all things, this collection is one of the most impressive colorful full of inspiring design for designers how worked same this

  • indu, 22 June 2011

    wow. this site is very useful like me. Thanks for sharing! thumbs up guys.

  • Orlando, 11 October 2011

    Wow, Very helpful here!

search form
 
image description image description