7 steps to systematize the design and development process
Systematization means the creation of processes or a predefined set of measures that are designed to speed up the execution of time-consuming and repetitive tasks.
So, how can you systematize the process of creating 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 code / design storage. You can use as a dedicated program, 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.
')
Below are some ideas about what you can store 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 some script from one developer to another. Each has its own style and each will embed it in the program code. Because of this, it will be quite difficult for you to understand the code if it is transferred 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 request that everyone use such class names and functions 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 if you need to just use these ready-made templates. This can save time compared to creating a site from scratch. Simply create a design with a general focus or for a specific industry.
You can also create skeleton sites into which you can integrate the functions that you normally use in your sites. This could be a WordPress installation with a news plugin, a feedback form and an SEO plugin. Systematization of 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 websites in general, you can also optimize the process of communication with customers. It will be convenient to identify questions that customers can ask during the first communication and also write answers to these questions.
The next time when you are asked a question like “Do I need a website, how much will it stand?”, Instead of writing a complex and lengthy answer, use the answer that you have already prepared for this case. It can save from 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 letters.
Using programming frameworks will save a lot of time. After installation you will have libraries of finished and work items.
There are many frameworks for designers and developers.
Designers will benefit from familiarizing themselves with CSS frameworks and Grid and Typography systems.
Some of these frameworks worth seeing:
Blueprint css
Blueprint is a CSS framework whose goal is to reduce development time by providing a grid system and typographic guides. Plug-ins for buttons, tabs and sprites are also available.
YAML - Yet Another Multicolumn Layout
Another HTML / CSS framework that is very light and created by all standards of the Web. Of the features we can mention the modular design.
Eric Meyer CSS reset
Zero the standard CSS properties of browsers to always start from scratch. Stop strange errors caused by a CSS conflict with the browser.
YUI Grids CSS
Yahoo is another big player in the framework industry. YUI offers 4 preset page width settings, preset templates and weighs only 4kb.
960 Grid
Grid system CSS for the development of professional and solid design layouts.
Using a development framework can also be useful for you and your team. You can integrate MVC (Model, View, Controller) architecture 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 build 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. During the creation of the application you will need to make only a few configuration changes. You don’t even need to use the command line and don’t have to follow the restrictive rules of writing code.
You will save time, as the framework provides a rich set of libraries for frequently required functions.
Cakephp
CakePHP aims to create a “rapid development framework”, such as CodeIgniter. CakePHP has a large community, which means that if you need it, you can quickly get help.
Zend Framework
Extending the spirit and art of PHP, Zend Framework is based on simplicity, the best principles of object-oriented programming and thoroughly tested source code. Zend Framework focuses on creating more secure, reliable, and modern Web 2.0 applications and uses APIs from leading vendors like Google, Amazon, Yahoo !, Flickr, and APIs from providers and directories 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, it is 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 makes it easy to navigate HTML pages, handle events, animate, and develop AJAX. jQuery is free, lightweight, cross-browser and compatible with CSS3. Probably jQuery is the most widely used JavaScript framework and you can find thousands of plug-ins and training materials on the web.
Of course, if you have time, you can create your own design framework, CSS or programming code. It can be a combination of elements, functions, or properties that you frequently use that will save you time. You can also create Photoshop frameworks. Since you will create your own framework, it will be easier for you to embed it in your workflow.
These 3 jobs are usually performed by three different qualified specialists on a full-time basis. Then why do you, as a freelance designer or developer, have to work with accounts, manage projects and communicate with customers alone? It's time to get help. Using off-the-shelf applications like Basecamp , Highrise and LessAccounting you can quickly and safely conduct your business. This will save at least several hours a week for the jobs you love to do.
User support is very important, because usually everything ever breaks down 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 will be able to 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, several such ideas on systematization of your work will help to save 5, 10 or even 15 hours a week and will allow you not to do the same work several times. Creating such systems may take several hours, but the time saved with their help will be a hundred times more.
So, how can you systematize the process of creating 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 Store
Everyone should have code / design storage. You can use as a dedicated program, 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.
')
Below are some ideas about what you can store 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 rework 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 once created something like this, why not use these ready-made scripts again?),
- Frequently used design elements (buttons, caps, layouts, footers, etc.),
- Anything else that you created to order and that can be used in another project,
- For designers, it will be very convenient to save ready-made HTML templates with an already inserted tag for doctype and a link to style sheets. 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 some script from one developer to another. Each has its own style and each will embed it in the program code. Because of this, it will be quite difficult for you to understand the code if it is transferred 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 request that everyone use such class names and functions 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 templates
When you have a couple of free hours, you can create several designs and create templates on them, so that if you need to just use these ready-made templates. This can save time compared to creating a site from scratch. Simply create a design with a general focus or for a specific industry.
You can also create skeleton sites into which you can integrate the functions that you normally use in your sites. This could be a WordPress installation with a news plugin, a feedback form and an SEO plugin. Systematization of these processes can save several hours.
Ready answers to letters and ready scripts
Despite the fact that this is not a technical part of the systematization of the process of creating designs and websites in general, you can also optimize the process of communication with customers. It will be convenient to identify questions that customers can ask during the first communication and also write answers to these questions.
The next time when you are asked a question like “Do I need a website, how much will it stand?”, Instead of writing a complex and lengthy answer, use the answer that you have already prepared for this case. It can save from 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 letters.
Programming frameworks
Using programming frameworks will save a lot of time. After installation you will have libraries of finished and work items.
There are many frameworks for designers and developers.
Framework for Designers
Designers will benefit from familiarizing themselves with CSS frameworks and Grid and Typography systems.
Some of these frameworks worth seeing:
Blueprint css
Blueprint is a CSS framework whose goal is to reduce development time by providing a grid system and typographic guides. Plug-ins for buttons, tabs and sprites are also available.
YAML - Yet Another Multicolumn Layout
Another HTML / CSS framework that is very light and created by all standards of the Web. Of the features we can mention the modular design.
Eric Meyer CSS reset
Zero the standard CSS properties of browsers to always start from scratch. Stop strange errors caused by a CSS conflict with the browser.
YUI Grids CSS
Yahoo is another big player in the framework industry. YUI offers 4 preset page width settings, preset templates and weighs only 4kb.
960 Grid
Grid system CSS for the development of professional and solid design layouts.
Programming frameworks
Using a development framework can also be useful for you and your team. You can integrate MVC (Model, View, Controller) architecture 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 build 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. During the creation of the application you will need to make only a few configuration changes. You don’t even need to use the command line and don’t have to follow the restrictive rules of writing code.
You will save time, as the framework provides a rich set of libraries for frequently required functions.
Cakephp
CakePHP aims to create a “rapid development framework”, such as CodeIgniter. CakePHP has a large community, which means that if you need it, you can quickly get help.
Zend Framework
Extending the spirit and art of PHP, Zend Framework is based on simplicity, the best principles of object-oriented programming and thoroughly tested source code. Zend Framework focuses on creating more secure, reliable, and modern Web 2.0 applications and uses APIs from leading vendors like Google, Amazon, Yahoo !, Flickr, and APIs from providers and directories such as StrikeIron and ProgrammableWeb.
Zend supports:
- AJAX support via JSON - create easy-to-use applications that your users expect to see,
- Search - standard PHP version of the leading search engine Lucene,
- Syndication - data formats and easy access to them for your Web 2.0 applications,
- Web Services - Zend Framework aims to be the leading place for consuming and publishing web services,
- A library of high quality object oriented classes PHP5.
JavaScript frameworks
What if you could add animations, dynamic page reloads without having to write large JavaScript code from scratch? Well, it is 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 makes it easy to navigate HTML pages, handle events, animate, and develop AJAX. jQuery is free, lightweight, cross-browser and compatible with CSS3. Probably jQuery is the most widely used JavaScript framework and you can find thousands of plug-ins and training materials on the web.
Create your own framework
Of course, if you have time, you can create your own design framework, CSS or programming code. It can be a combination of elements, functions, or properties that you frequently use that will save you time. You can also create Photoshop frameworks. Since you will create your own framework, it will be easier for you to embed it in your workflow.
Accounting, project management and customer care
These 3 jobs are usually performed by three different qualified specialists on a full-time basis. Then why do you, as a freelance designer or developer, have to work with accounts, manage projects and communicate with customers alone? It's time to get help. Using off-the-shelf applications like Basecamp , Highrise and LessAccounting you can quickly and safely conduct your business. This will save at least several hours a week for the jobs you love to do.
User support sites
User support is very important, because usually everything ever breaks down 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 will be able to 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, several such ideas on systematization of your work will help to save 5, 10 or even 15 hours a week and will allow you not to do the same work several times. Creating such systems may take several hours, but the time saved with their help will be a hundred times more.
Source: https://habr.com/ru/post/72530/
All Articles