October 16, 2009 at 16:347 steps to systematize the design and development process
- Transfer
Systematization means the creation of processes or a predefined set of measures that are designed to accelerate the implementation of laborious and repetitive tasks.
So, how can we systematize the process of creating a design and websites in general? Below are 7 steps that you will need to follow to create a system, to perform repetitive and boring tasks, thereby saving time for creative work.
Everyone should have a repository of code / designs. You can use it as dedicated programs, such as Code Collector PRO, or simply create a separate folder for storing text information, html and Photoshop files with program code and design elements.
The following are some ideas about what you can save to save time on rewriting code and creating the same design elements several times for different sites and projects:
CodeCollectorPro
If you work in a team of any size, you will be familiar with the situation when everything gets confused when transferring code or any script from one developer to another. Everyone has their own style and everyone will implement it in the program code. Because of this, it will be quite difficult for you to understand the code if it is passed back to you after several other developers have worked on it. To do this, create templates or guides on how everyone in the team should work.
It can be as easy as saying that CSS properties should be defined in the following order:
You can also demand that everyone use class and function names that explain their purpose. For example, if an element should contain an advertisement and should be displayed in the upper left corner, then its name should be "#topleftad".
When you have a couple of free hours, you can create several designs and create templates on them, so that you can simply use these ready-made templates if necessary. This can save time compared to building a site from scratch. Just create a general design or for a specific industry.
You can also create site skeletons into which you can integrate the features that you typically use in your sites. It can be a WordPress installation with a news plugin, feedback form and SEO plugin. Organizing these processes can save several hours.
Despite the fact that this is not a technical part of the systematization of the process of creating designs and sites in general, you can also optimize the process of communication with clients. It will be convenient to identify the questions that customers can ask at the first communication and also write the answers to these questions.
The next time you are asked a question like “I need a site, how much will it cost?”, Instead of writing a complex and long answer, use the answer that you already have for this case. This can save 5 to 20 minutes.
To save more time, write frequently asked questions and answers to them in the FAQ section of your site to avoid such emails altogether.
Using programming frameworks will save a lot of time. After installation, you will have libraries of ready-made and work items.
There are many frameworks for designers and developers.
Designers will find it useful to familiarize themselves with CSS frameworks and Grid and Typography systems.
Some of these noteworthy frameworks are:
Blueprint CSS
Blueprint is a CSS framework whose goal is to reduce development time by providing a grid system and typographic guides. Plugins for buttons, tabs and sprites are also available.
YAML - Yet Another Multicolumn Layout
Another HTML / CSS framework that is very lightweight and built to all Web standards. Of the functions, a modular design can be mentioned.
Eric Meyer CSS reset
Reset the default CSS properties of browsers to always start from scratch. Stop strange errors caused by CSS conflict with browser.
YUI Grids CSS
Yahoo is another big player in the framework industry. YUI offers 4 predefined page width settings, predefined templates and weighs only 4kb.
960 Grid
CSS grid system for the development of professional and solid layout designs.
Using a development framework can also be useful for you and your team. You can integrate MVC architecture (Model, View, Controller) into your code. Basically, this means that the data (model) is separated from the controller (which takes data from the model) and combines this data with the template (what the user sees). Very often you will see embedded tools and components that will help you create applications faster.
Using frameworks you can also reduce costs and developers will need to write less code.
CodeIgniter
CodeIgniter is an open source web application framework. Only a few configuration changes will need to be made during application creation. You do not even need to use the command line and you will not have to adhere to restrictive rules for writing code.
You will save time, because the framework provides a rich set of libraries for frequently required functions.
CakePHP
CakePHP aims to create a “fast development framework” such as CodeIgniter. CakePHP has a large community, which means you can get help quickly if necessary.
Zend framework
Extending the spirit and art of PHP, the Zend Framework is based on simplicity, the best principles of object-oriented programming, and carefully tested source code. Zend Framework is focused on creating more secure, reliable and modern Web 2.0 applications and uses APIs from leading vendors such as Google, Amazon, Yahoo !, Flickr, as well as APIs from providers and catalogs such as StrikeIron and ProgrammableWeb.
Zend supports:
What if you could add animations, dynamic page reloads without having to write large JavaScript code from scratch? Well, that’s possible. Perhaps using JavaScript frameworks. Typically, free and high-quality open source frameworks provide ready-made and tested features that you can use in your projects.
jQuery
jQuery simplifies HTML page navigation, event handling, animation, and AJAX development. jQuery is free, lightweight, cross-browser compatible and CSS3 compatible. Probably jQuery is the most widely used JavaScript framework and thousands of plugins and training materials can be found on the web.
Of course, if you have the time, you can create your own design framework, CSS, or program code. It can be a combination of elements, functions or properties that you often use, which will save you time. You can also create Photoshop frameworks. Since you will be creating your own framework, it will be easier for you to implement it in your workflow.
These 3 jobs are usually performed by three different full-time skilled workers. Then why should you, as a freelancer designer or developer, work with accounts, manage projects and communicate with clients alone? It's time to get help. Using ready-made applications such as Basecamp , Highrise and LessAccounting, you can quickly and safely conduct your business. This will save at least a few hours a week for the jobs you like to do.
Customer support is very important, since usually everything will ever break and this will cause customer dissatisfaction.
Based on this, create a user support site with documentation on how to set up e-mail accounts, how to use your CMS and thereby reduce the number of calls from angry customers and emails. Using the video guide will ensure that even those customers who know very little about computers can at least somehow manage your product. You can use specialized support applications such as Helpserve , which works with user requests for help in a very organized way.
So, a few of these ideas for organizing your work will save 5, 10, or even 15 hours a week and will allow you not to do the same job several times. The creation of such systems can take several hours, but the time saved with their help will be more than a hundred times.
So, how can we systematize the process of creating a design and websites in general? Below are 7 steps that you will need to follow to create a system, to perform repetitive and boring tasks, thereby saving time for creative work.
Fragment storage
Everyone should have a repository of code / designs. You can use it as dedicated programs, such as Code Collector PRO, or simply create a separate folder for storing text information, html and Photoshop files with program code and design elements.
The following are some ideas about what you can save to save time on rewriting code and creating the same design elements several times for different sites and projects:
- Feedback forms (create one form with the possibility of quick alteration for use in different projects),
- User Management - authorization scripts, etc. (create one system that will not be too integrated into your design with a lot of code in the template files, to save time)
- Payment systems and scripts of online stores (if you have already created something like this, why not use these ready-made scripts again?),
- Commonly used design elements (buttons, caps, layouts, footers, etc.),
- Anything else that you created to order and that can be used in another project,
- It will be very convenient for designers to save ready-made HTML templates with an already inserted tag for doctype and a link to style lists. All this will save time when starting work on a new project instead of starting from scratch.
CodeCollectorPro
Code of Conduct
If you work in a team of any size, you will be familiar with the situation when everything gets confused when transferring code or any script from one developer to another. Everyone has their own style and everyone will implement it in the program code. Because of this, it will be quite difficult for you to understand the code if it is passed back to you after several other developers have worked on it. To do this, create templates or guides on how everyone in the team should work.
It can be as easy as saying that CSS properties should be defined in the following order:
- width
- height
- color
- position
- misc
You can also demand that everyone use class and function names that explain their purpose. For example, if an element should contain an advertisement and should be displayed in the upper left corner, then its name should be "#topleftad".
Ready-made templates
When you have a couple of free hours, you can create several designs and create templates on them, so that you can simply use these ready-made templates if necessary. This can save time compared to building a site from scratch. Just create a general design or for a specific industry.
You can also create site skeletons into which you can integrate the features that you typically use in your sites. It can be a WordPress installation with a news plugin, feedback form and SEO plugin. Organizing these processes can save several hours.
Ready-made answers to letters and ready-made scripts
Despite the fact that this is not a technical part of the systematization of the process of creating designs and sites in general, you can also optimize the process of communication with clients. It will be convenient to identify the questions that customers can ask at the first communication and also write the answers to these questions.
The next time you are asked a question like “I need a site, how much will it cost?”, Instead of writing a complex and long answer, use the answer that you already have for this case. This can save 5 to 20 minutes.
To save more time, write frequently asked questions and answers to them in the FAQ section of your site to avoid such emails altogether.
Programming frameworks
Using programming frameworks will save a lot of time. After installation, you will have libraries of ready-made and work items.
There are many frameworks for designers and developers.
Design frameworks
Designers will find it useful to familiarize themselves with CSS frameworks and Grid and Typography systems.
Some of these noteworthy frameworks are:
Blueprint CSS
Blueprint is a CSS framework whose goal is to reduce development time by providing a grid system and typographic guides. Plugins for buttons, tabs and sprites are also available.
YAML - Yet Another Multicolumn Layout
Another HTML / CSS framework that is very lightweight and built to all Web standards. Of the functions, a modular design can be mentioned.
Eric Meyer CSS reset
Reset the default CSS properties of browsers to always start from scratch. Stop strange errors caused by CSS conflict with browser.
YUI Grids CSS
Yahoo is another big player in the framework industry. YUI offers 4 predefined page width settings, predefined templates and weighs only 4kb.
960 Grid
CSS grid system for the development of professional and solid layout designs.
Programmer frameworks
Using a development framework can also be useful for you and your team. You can integrate MVC architecture (Model, View, Controller) into your code. Basically, this means that the data (model) is separated from the controller (which takes data from the model) and combines this data with the template (what the user sees). Very often you will see embedded tools and components that will help you create applications faster.
Using frameworks you can also reduce costs and developers will need to write less code.
CodeIgniter
CodeIgniter is an open source web application framework. Only a few configuration changes will need to be made during application creation. You do not even need to use the command line and you will not have to adhere to restrictive rules for writing code.
You will save time, because the framework provides a rich set of libraries for frequently required functions.
CakePHP
CakePHP aims to create a “fast development framework” such as CodeIgniter. CakePHP has a large community, which means you can get help quickly if necessary.
Zend framework
Extending the spirit and art of PHP, the Zend Framework is based on simplicity, the best principles of object-oriented programming, and carefully tested source code. Zend Framework is focused on creating more secure, reliable and modern Web 2.0 applications and uses APIs from leading vendors such as Google, Amazon, Yahoo !, Flickr, as well as APIs from providers and catalogs such as StrikeIron and ProgrammableWeb.
Zend supports:
- AJAX support through JSON - create easy-to-use applications that your users expect to see,
- Search is the standard PHP version of Lucene’s leading search engine,
- Syndication - data formats and easy access to them for your Web 2.0 applications,
- Web Services - The Zend Framework aims to be a leading place for consuming and publishing web services,
- A library of high-quality object-oriented PHP5 classes.
JavaScript frameworks
What if you could add animations, dynamic page reloads without having to write large JavaScript code from scratch? Well, that’s possible. Perhaps using JavaScript frameworks. Typically, free and high-quality open source frameworks provide ready-made and tested features that you can use in your projects.
jQuery
jQuery simplifies HTML page navigation, event handling, animation, and AJAX development. jQuery is free, lightweight, cross-browser compatible and CSS3 compatible. Probably jQuery is the most widely used JavaScript framework and thousands of plugins and training materials can be found on the web.
Create your own framework
Of course, if you have the time, you can create your own design framework, CSS, or program code. It can be a combination of elements, functions or properties that you often use, which will save you time. You can also create Photoshop frameworks. Since you will be creating your own framework, it will be easier for you to implement it in your workflow.
Accounting, project management and customer care
These 3 jobs are usually performed by three different full-time skilled workers. Then why should you, as a freelancer designer or developer, work with accounts, manage projects and communicate with clients alone? It's time to get help. Using ready-made applications such as Basecamp , Highrise and LessAccounting, you can quickly and safely conduct your business. This will save at least a few hours a week for the jobs you like to do.
User support sites
Customer support is very important, since usually everything will ever break and this will cause customer dissatisfaction.
Based on this, create a user support site with documentation on how to set up e-mail accounts, how to use your CMS and thereby reduce the number of calls from angry customers and emails. Using the video guide will ensure that even those customers who know very little about computers can at least somehow manage your product. You can use specialized support applications such as Helpserve , which works with user requests for help in a very organized way.
So, a few of these ideas for organizing your work will save 5, 10, or even 15 hours a week and will allow you not to do the same job several times. The creation of such systems can take several hours, but the time saved with their help will be more than a hundred times.