How to build a design development of a very large and long project
When a project is large, designers work on it a lot, at the same time and very far from each other - problems constantly arise.
Imagine the situation. There is not a very experienced project manager. It hangs a big project and three designers who are ready to work on this project. Let me introduce them - Vasya, Lena and Peter (from left to right in the picture). We will slightly increase the level of complexity to our children. Let all of them be located in different cities, that is, they do not sit at the adjacent tables, do not go to lunch onFriday's booze parties, and they cannot contact us via messengers and mail. The project is large and scheduled for more than one month. The customer likes to change his decisions frequently or invent new features.
')
Let's see how they get out?
Of course, the work of designers on any project begins with a detailed study of the TK, the creation of a prototype and its coordination. We will omit this step because on it the project manager (in most cases) would be enough for one designer.
So, the thumbnails of the pages are ready and agreed, so let's go immediately to draw. The project manager distributes page sketches to designers and they get to work. Let Vasya draws the main page, Lena draws the registration form, and Peter the product page. “So we will immediately kill three birds with one stone and save a lot of time,” the project manager says to the children and they start working. As if not so. After a couple of days we get this:
It's time for the manager to think about the obvious things, because each designer has his own unique style. Even the most detailed sketches or prototypes are sometimes not enough for three independent experts to get pages in the same style (if the design is not for bootstrap, of course :-). The solution to this situation comes unexpectedly and is striking in its simplicity: let Vasya, as the most experienced designer, draw the main page, and Lena and Peter draw theirs in her image and likeness.
The manager tears his hair out, because it means 16 or even 32 man-hours of downtime! But there is no other way out. Lena and Peter rest, while Vasya is working on the main page. Finally, the layout is ready, agreed with the customer and given as an instruction on the style of Lena and Pete. The heart of the project manager stopped for a couple of days, but ... the miracle did not happen:
The fact is that in spite of the sustained style and conformity with the sketches, on two pages, drawn by Lena and Petya, a large number of inconsistencies. For example, different headings and indents for paragraphs, buttons with different styles and input fields. You can continue this list indefinitely. Maybe separately two layouts and look great, but together the picture is deplorable.
And again, the project manager tears his hair out, considers how to make up for lost time. Perhaps he will even make an announcement about finding a designer with photoshop and telepathy skills. However, the decision again does not take long to wait. Let Vasya draw a UI kit with all possible elements of the site. Building on it, we will draw all the internal pages!
So, spent another Vasin day. Lena and Petya take the UI kit, the main one, the thumbnails of their pages and get down to business. The output is two smart and smooth layouts:
Manager and Vasya applaud. The customer is satisfied, like a cat who has eaten sour cream. Now everything will go on as usual. Work has finally begun. Pages match one by one. Timing tightened. But it was not there! The customer has not uploaded several pages.
It's time to turn on the thought again. After all, if any of the designers makes changes to some elements of their page - whether it is a button or bread crumbs - it will not fit the rest of the pages and the UI kit will no longer be relevant. Some elements of course can be taken from the source code of various designers. However, the number of layouts — in which the actual — button will grow in proportion to the number of inconsistent pages. Track them will not be so easy. I missed a day or two, did not receive a message in Skype - there are already about 10 elements accumulated. I don’t remember everything, like Bob Peter sent ... In the end, the designers will get confused and confuse the customer. Multi-page site will turn into a hell for web designers and programmers.
The project manager has a great idea: after making changes to the layout and final approval, Vasya makes the appropriate changes to the UI kit. Then we inform all designers about current changes and they make changes each in their layouts. Here and the ready approach looms:
Vasya drew a cool promo page, the buttons and images from which the customer really liked, and now he wants to see them all over the site. We apply the same scheme. Vasya prepares the UI kit, gives it to Lena and Petya and they “comb” their layouts. OK
A lot of water has flowed from the time of the first long-suffering pages. Now the total number of layouts is in the tens. And here Vasya, Lena, Petya and the gallant project manager face a serious test. The customer changed his mind. That is not the case - he changed his mind about changing his mind . Remember that promo page, beautiful buttons and illustrations that went all over the site? So, guys, bring everything back.
Designers and the manager cover their faces with hands like Patrick Stewart, because nothing from the old layouts has been preserved. New pages drawn after this revision would still have to be corrected, but if the old ones were preserved - the time for correction could be safely reduced, say, by half.
The manager became thoughtful. What if the customer throws out such a trick again? Of course, now you need to be smarter and keep old copies of the layouts. But for each designer, they will accumulate in different tricky daddies. Plus, transferred from one to another layouts and several pieces of UI kit, which is already incomprehensible to which pages are suitable. And while the guys make edits, the decision comes to him:
Let designers use SVN and store the latest versions of layouts in it. In which case we can always return to the old design. It will be easier to transfer the source code between designers and monitor their relevance.
There is a timeline designer SVN client from PixelNovel . It helps to visualize the flow of changes in the layouts. There are also disadvantages to this solution. For example the price. For me personally, $ 100 is quite a significant amount. Well and a minus that the repository all the same should be configured and from conflicts with source codes Timeline is not insured too.
Another solution - Pixelapse which was a small overview on Habré. The guys tried their best, SVN does not smell here. This is a cloud service where you can return to old versions of files. Through the web interface to view and comment on them. You can also share the source code with the whole story for other users or publish your work for the pixelapse community. The disadvantage - not enough space in the free version, only 1 GB. And then 20 bucks a month for 50 GB.
Personally, I, as a designer, are most sympathetic to the usual approach - without problems with SVN and clouds, but with the actualization of UI + step-by-step planning for the development of design. SVN does not always justify itself. In such cases, it takes more time than it saves in the end. But you should not forget about the “shield of happens” either.
If you had any experience in organizing and synchronizing the work of several designers on a single project, I beg you to share.
PS The story is based on the real experience I gained in several months of working on a large project as an ordinary designer. I do not pretend to be a guru in management and administration, so kick. I will be corrected.
PPS To be honest, did not expect such attention to the article. Thank you all for the comments, they threw the study material for a couple of weeks so accurately.
UPD: Thanks to the guys who shared versioning systems and plug-ins for working with a common UI. I will quote some not to go far:
layervault.com is a designer versioning system. By the way, there is a 30 day trial.
www.adobe.com/ru/products/adobedrive/features.html - Adobe Drive, proper publishing and not only a first-hand system. Sharpened under Creative Suite.
www.teamwox.com - cloud document management system with versioning support. There is a trial period of 2 months.
www.canlinkit.com is a plugin that allows you to connect a third-party PSD with a UI kit, and update it directly inside the layout by pressing the tricky button.
Perezalil pictures on habrostorage, sorry guys, hands did not reach
Imagine the situation. There is not a very experienced project manager. It hangs a big project and three designers who are ready to work on this project. Let me introduce them - Vasya, Lena and Peter (from left to right in the picture). We will slightly increase the level of complexity to our children. Let all of them be located in different cities, that is, they do not sit at the adjacent tables, do not go to lunch on
')
Let's see how they get out?
Of course, the work of designers on any project begins with a detailed study of the TK, the creation of a prototype and its coordination. We will omit this step because on it the project manager (in most cases) would be enough for one designer.
So, the thumbnails of the pages are ready and agreed, so let's go immediately to draw. The project manager distributes page sketches to designers and they get to work. Let Vasya draws the main page, Lena draws the registration form, and Peter the product page. “So we will immediately kill three birds with one stone and save a lot of time,” the project manager says to the children and they start working. As if not so. After a couple of days we get this:
It's time for the manager to think about the obvious things, because each designer has his own unique style. Even the most detailed sketches or prototypes are sometimes not enough for three independent experts to get pages in the same style (if the design is not for bootstrap, of course :-). The solution to this situation comes unexpectedly and is striking in its simplicity: let Vasya, as the most experienced designer, draw the main page, and Lena and Peter draw theirs in her image and likeness.
The manager tears his hair out, because it means 16 or even 32 man-hours of downtime! But there is no other way out. Lena and Peter rest, while Vasya is working on the main page. Finally, the layout is ready, agreed with the customer and given as an instruction on the style of Lena and Pete. The heart of the project manager stopped for a couple of days, but ... the miracle did not happen:
The fact is that in spite of the sustained style and conformity with the sketches, on two pages, drawn by Lena and Petya, a large number of inconsistencies. For example, different headings and indents for paragraphs, buttons with different styles and input fields. You can continue this list indefinitely. Maybe separately two layouts and look great, but together the picture is deplorable.
And again, the project manager tears his hair out, considers how to make up for lost time. Perhaps he will even make an announcement about finding a designer with photoshop and telepathy skills. However, the decision again does not take long to wait. Let Vasya draw a UI kit with all possible elements of the site. Building on it, we will draw all the internal pages!
So, spent another Vasin day. Lena and Petya take the UI kit, the main one, the thumbnails of their pages and get down to business. The output is two smart and smooth layouts:
Manager and Vasya applaud. The customer is satisfied, like a cat who has eaten sour cream. Now everything will go on as usual. Work has finally begun. Pages match one by one. Timing tightened. But it was not there! The customer has not uploaded several pages.
It's time to turn on the thought again. After all, if any of the designers makes changes to some elements of their page - whether it is a button or bread crumbs - it will not fit the rest of the pages and the UI kit will no longer be relevant. Some elements of course can be taken from the source code of various designers. However, the number of layouts — in which the actual — button will grow in proportion to the number of inconsistent pages. Track them will not be so easy. I missed a day or two, did not receive a message in Skype - there are already about 10 elements accumulated. I don’t remember everything, like Bob Peter sent ... In the end, the designers will get confused and confuse the customer. Multi-page site will turn into a hell for web designers and programmers.
The project manager has a great idea: after making changes to the layout and final approval, Vasya makes the appropriate changes to the UI kit. Then we inform all designers about current changes and they make changes each in their layouts. Here and the ready approach looms:
Vasya drew a cool promo page, the buttons and images from which the customer really liked, and now he wants to see them all over the site. We apply the same scheme. Vasya prepares the UI kit, gives it to Lena and Petya and they “comb” their layouts. OK
And now briefly about the problems of this approach and how they can be solved.
- A big burden on the lead designer of the group at the initial stage of development and in the process of making corrections, because He acts as a "moderator" UI kit. In principle, each designer can make changes from his layouts in the UI, but then there is a chance to lose the style. Someone has to follow this anyway.
- Filing pages. It is necessary to filter pages with the same elements and coordinate them together. Otherwise, changes in the elements can fly from designer to designer and significantly slow down the work.
- Particularly complex planning. Planning a large design project for several people at once, and even taking into account all possible elements and their combinations on different pages, it can be quite difficult. However, they say that a well-planned project is three times longer, and a poorly planned one is eight times. Therefore, do not regret the time in the initial stages.
- Amateur. Many designers think that with such an approach they turn into “photoshop operators”, because they don’t need to invent anything - all elements are drawn, sketches are made. The manager will be worth much effort to fight free-thinking.
Well, back to our heroes.
A lot of water has flowed from the time of the first long-suffering pages. Now the total number of layouts is in the tens. And here Vasya, Lena, Petya and the gallant project manager face a serious test. The customer changed his mind. That is not the case - he changed his mind about changing his mind . Remember that promo page, beautiful buttons and illustrations that went all over the site? So, guys, bring everything back.
Designers and the manager cover their faces with hands like Patrick Stewart, because nothing from the old layouts has been preserved. New pages drawn after this revision would still have to be corrected, but if the old ones were preserved - the time for correction could be safely reduced, say, by half.
The manager became thoughtful. What if the customer throws out such a trick again? Of course, now you need to be smarter and keep old copies of the layouts. But for each designer, they will accumulate in different tricky daddies. Plus, transferred from one to another layouts and several pieces of UI kit, which is already incomprehensible to which pages are suitable. And while the guys make edits, the decision comes to him:
Let designers use SVN and store the latest versions of layouts in it. In which case we can always return to the old design. It will be easier to transfer the source code between designers and monitor their relevance.
This "programmer" approach also has its drawbacks:
- SVN and PSD conflicts. From my personal experience, I can say that commits of mockups that are currently being worked on can cause conflicts. Perhaps this is due to the fact that my hands do not grow from there, and perhaps with the RLE-structure of PSD files. You can solve it with the help of SVN lock for those files that are being worked on or for those that are waiting for approval.
- Difficulty in mastering for the designer. Even many experienced designers have never used SVN-clients, and for those who use, you can see all the same daddy with the names jpg, psd and 2012-10-25. And also missed commits and updates. Exit - tight control by the manager for the relevance of versions.
- Lack of visibility and ability to quickly review the history of edits and changes. In order to return to the old version of a single source, a number of manipulations will have to be done, which for a designer can be equated to a ballet for a tractor driver. The solution would be the admin who monitors the correct execution of commits and rolls back the layouts to the old versions in case of force majeure.
- SVN is not the fastest thing, and layouts are not the easiest files. Missing a few days and a dozen of new versions of files can turn into a rather long update for the designer and the working time spent waiting.
Which exit?
There is a timeline designer SVN client from PixelNovel . It helps to visualize the flow of changes in the layouts. There are also disadvantages to this solution. For example the price. For me personally, $ 100 is quite a significant amount. Well and a minus that the repository all the same should be configured and from conflicts with source codes Timeline is not insured too.
Another solution - Pixelapse which was a small overview on Habré. The guys tried their best, SVN does not smell here. This is a cloud service where you can return to old versions of files. Through the web interface to view and comment on them. You can also share the source code with the whole story for other users or publish your work for the pixelapse community. The disadvantage - not enough space in the free version, only 1 GB. And then 20 bucks a month for 50 GB.
Personally, I, as a designer, are most sympathetic to the usual approach - without problems with SVN and clouds, but with the actualization of UI + step-by-step planning for the development of design. SVN does not always justify itself. In such cases, it takes more time than it saves in the end. But you should not forget about the “shield of happens” either.
If you had any experience in organizing and synchronizing the work of several designers on a single project, I beg you to share.
PS The story is based on the real experience I gained in several months of working on a large project as an ordinary designer. I do not pretend to be a guru in management and administration, so kick. I will be corrected.
PPS To be honest, did not expect such attention to the article. Thank you all for the comments, they threw the study material for a couple of weeks so accurately.
UPD: Thanks to the guys who shared versioning systems and plug-ins for working with a common UI. I will quote some not to go far:
layervault.com is a designer versioning system. By the way, there is a 30 day trial.
www.adobe.com/ru/products/adobedrive/features.html - Adobe Drive, proper publishing and not only a first-hand system. Sharpened under Creative Suite.
www.teamwox.com - cloud document management system with versioning support. There is a trial period of 2 months.
www.canlinkit.com is a plugin that allows you to connect a third-party PSD with a UI kit, and update it directly inside the layout by pressing the tricky button.
Perezalil pictures on habrostorage, sorry guys, hands did not reach
Source: https://habr.com/ru/post/165761/
All Articles