N
N
Neron2017-02-14 17:31:36
Design
Neron, 2017-02-14 17:31:36

Organization of the web design workflow in Adobe Illustrator - what is the best way?

Need advice on how to organize all parts of the interface layout design:
- External structure: files, folders, their order and names
- Internal structure: styles, colors, artboards inside *.ai
There is a good guide
https://guides.area17.com/design- techniques
Everything is chewed up, down to the grid. But it does not fit for at least one simple reason - it is recommended to organize the entire internal structure inside one *.ai layout. That is, the design of the site is done, all pages and their mobile versions are drawn inside one * .ai.
This approach has an important drawback. The chandelier has a limited working area and does not allow you to create more than 100 artboards in it. As a result, layouts and their parts are shoved into layers (in the reference manual there is a screenshot of the layers panel with a list of 146 layers - and in each layer there are still God knows how many vector and raster objects). Switching layers in the chandelier is much more troublesome than choosing the right files in the explorer. This is, firstly, and secondly, the chandelier really does not like files stuffed to the eyeballs - it starts to slow down.
Accordingly, the layout must be cut into parts, each part in a separate file. Here comes a new problem - maintaining a single library of colors and font styles. If you rivet all in one *.ai - adding or changing one of the global colors / font styles does not cause problems, all changes will immediately spread to all objects in the file. What if you need to add/update color/style to several *.ai at once?
It is clear that colors and font styles can be saved as separate *.ai files and loaded into the layout palette. The problem with this solution is that the palettes are not updated automatically, as is the case with updating linked files. You need to reload them if there have been changes. That is, if there are a lot of page layouts, you will have to do quite a long and tedious job: open each file, re-load colors and font styles there, save, close, open the next file ... And it’s okay if this process affects only one person, but after all, several people work on the files (at least a designer and a developer).
Perhaps there are some plugins / scripts / life hacks / tricks to automate such nuances? Tell.
UPD
On the Edoubi forums, I was advised to use Creative Cloud Libraries. According to the official and user descriptions, it seems to be what you need, omg!11 (all you're assets will be linked ) But even here I broke off. Yes, you can create, for example, a text style, add it to the CC library, and then it is convenient to apply it in any document. The only catch is that in the CC library you can't change the style in any way. It can be duplicated. Rename. Delete. But don't change. And when you apply a style from the CC library, it is not linked to it - it is added to the styles of the document itself. Accordingly, this is some kind of enchanting star and nothing more. The principle of the link is not respected here.
We think further.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel Designer, 2017-02-14
Lordov @Nekto_Habr

For the reasons described, the guys do everything in one file :) Here you can choose what is more convenient for yourself - separate files and manually recolor each if necessary, or be afraid of program brakes, but change any styles everywhere at once. Here you can still recommend writing your own script / action for such purposes, I have not met ready-made ones (although questions are periodically asked both here and on foreign resources).
And I will write briefly about file storage.
If the project is large, with tasks of various kinds, then the big-project-name folder is made. Inside it are folders for tasks: banners, icons, site, etc. Each folder has a specific task. If the project is simple and there is nowhere to get confused, then you can not divide it into subfolders. I always write all the names of folders and files with a small letter and in English, it's more convenient.
Inside the company-site folder (let's take a site as an example) there are source folders (with all the materials provided by the customer), img (with different source graphics that are used in the project), preview (or images or something like that, I put layouts in such a folder for approval and sharing for client access - so as not to send a bunch of files, but to have one folder with actual layouts) and any other service folders that may be needed in the course of work.
At the root of this folder, work is underway and there are sources of the form name_xxxx_yyy_zzz, where name is the name of the client or project (I always specify that it be found through the search), xxxx is the designation of the task type (site, app, icons, etc.), yyy is a clarification what is in this file (if the site / application, then main, contacts, news, etc., if the icons, then their size, for example), zzz - file version - it can be just digital (001, 002, 024), or maybe the date of saving, sometimes something like this was required (16-11-23 - year-month-day, convenient to follow). Thus, the file names are sber_icons_128px_001, sber_insurance_lk_012 or ph_cafe_menu_16-10-05. When a curved version is required, -curved can be added at the end.
I prefer to separate semantic parts with an underscore "_", and instead of a space in words, use a minus "-" (sber-bank_site_one-two_004).
If many files of one task are collected, then they are collected in a subfolder as described at the very beginning.
When several versions of the same layout are assembled, I create the old folder (or revisions, whichever is more convenient for you) and drop all the old versions there, and only the current ones remain in the root of the task. This helps not to get confused in a bunch of versions and, at the same time, keep them side by side. If it is important to keep the dates of such "slices", then a subfolder with the desired date is made in the old folder.
Considering that I am a freelancer, I don’t need to have a bunch of folders like the guys at the link and think that someone might not understand it there :) And in each office they are used to different things and you just either adapt to them, or By default, you share the folder with layouts. In my last office, out of a mess on my personal computer, I made the above structure on a network server and everyone worked with files without jerking each other.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question