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 RepositoryAbsolutely 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.
Code of conductIf 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:
Pre-made templatesIf 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 scriptsAlthough 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 FrameworksUsing 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 DesignersDesigners 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 FrameworksUsing 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
Nice article, very useful :-)
And Ruby on Rails ?
And Django ?
There’s not only PHP.
The idea is interesting. But the article is quite too concise.
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?!
cool article, this will simply make a designer/developer more productive & they can focus more on their work instead of accounting & billing etc processes.
great article, I’ll keep that in mind :)
Basecamp is amazing.
This has brought to light my biggest problem witch is organization of code, good read btw.
yeah , and i think your idea really true`
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!
really nice article really help out freelancer and developer to solve their most of problems using frameworks .
Nice tuts thanks for sharing it
Thx for this nice article – found many useful resources and links here.
You know good tutarial/screencast ressources for some of the stuff above?
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
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.
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.
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.”
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.
I like your new blog design very much. It’s fantastic.
Nice stuff right there…! As usual. :)
I found this post extremely useful. Thank you for sharing.
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. :)
You forgot symfony http://www.symfony-project.org/
Just my quick tip. With the CSS, I’ve now gotten into the habbit of just writing it in alphabetical order.
Easy to use, easy to remember.
Good article. Thanks.
I’m definitely stealing that! It’s great!
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
Thank you for the informational article. Great read!
Great read! Thanks
great stuff! will re read
Lovely article, thank you!
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 :)
Great article, however a thing that I think is also important is the deployment process of the app/website
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!
I went through the same experiences, unfortunately. ,
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.
very complete information of design process . thank you
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!
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
wow. this site is very useful like me. Thanks for sharing! thumbs up guys.
Wow, Very helpful here!