How convenient is it to create website layouts in illustrator?

Question

Adobe Illustrator

Good afternoon. I want to find out for myself how convenient and whether it is even possible for a web designer to work in illustrator when creating a site layout. I ask that only people who successfully work in this area, professionals, the opinions of amateurs, speak their minds, I have already heard a lot, in the end, only disappointment.
Actually, I decided to make the same layout in Illustrator and Photoshop in parallel. The first thing I encountered for myself. The site is adaptive, there are breakpoints, there is a grid, which means there is also a snap to pixels.
In illustrator:
Terribly hemorrhoids to arrange guides by pixels, it was annoying that the guides are shown in the layers window. It is not at all clear, if I draw at a scale of 1:1, then I encounter the problem that small elements (~ less than 10 pixels) drawn at the same scale then scale poorly to a large side, problems with the stroke thickness begin, for example, when the element scales, but the stroke does not. Draw initially on a larger scale, and then paste from another file, maybe this is how it should be done? But with this approach, convenience is lost. A raster background is a real disaster, it's good if the scale is 1:1 in terms of pixels, but if not? If a different scale was initially taken or was not tied to pixels at all, but only to proportions, then you need to insert a raster that does not scale up. How to build a workflow in illustrator???
In Photoshop
I'm tired of climbing behind wind objects into the chandelier, copying, pasting, positioning, etc. Again, scale. If you chose 1:1, the question arises, how then to cut the graphics for the retina? If more, how much? So that there is enough for that very retina? But then how to work with a raster, because often there are no good quality photographic materials and you have to use a background 1400 pixels wide on screens 1920 pixels wide, and if the scale is still increased, say x1.5, then this background in the layout will begin to blur when stretched.
I'm completely confused, none of the programs fit my needs well, and then all sorts of others are yelling - let's go to indesign, but here we are in a sketch, etc. I don’t have a Mac, it’s poor to work on a virtual machine, I tried indesign, I couldn’t figure out how to do the simplest things necessary for layout design, I also tried muse, I realized that it’s only suitable for limited layouts like landing pages, and when there is a serious ui, I’ll have to throw it out and be left without a tool.
Cry from the heart - help to understand. Ask questions, I will answer.
We need a universal soldier. From this point of view, illustrator seems to be ideal, and people say that they successfully create layouts in it, but I don’t understand how, how do they solve issues related to the need to work with raster graphics?
Taking this opportunity, I want to ask about how people draw layouts for a responsive site, separately for the layout for each resolution taken into account? It's terribly inconvenient, maybe there are easier ways? Here, of course, muse is beyond competition, but ... as I said earlier, the program is not suitable for complex layouts.

Answer 1

how convenient and whether it is even possible for a web designer to work in illustrator when creating a site layout.

It is possible and quite convenient to work. The problem is different - layout designers do not like it. there are plugins and utilities that facilitate layout under Fsh, but not under AI. This has been discussed more than once even here on the Toaster. Look.
Disagree. Personally, it’s not a bit difficult for me to put a new guide with reference to the pixel grid in AI. No more difficult than in Fsh. And if you don’t like that the guides are among the design elements, then put them on a separate layer and that’s it.
Another oddity, never had such problems. It's a vector, you can scale it to your heart's content. See what settings are set, perhaps "difficulties" because of this.
It is enough to check the box and the stroke will be scaled (Transform panel). And no "take on a larger scale, and then reduce" is not needed. So this "problem" is only due to ignorance of the program's functionality. I advise you to study AI more carefully, look at all the possible settings in the panels, watch the lessons, etc.
I don't see any problems with raster either. If there is too much of it in the layout, then what prevents you from making it (raster) in Flash? Tools must be selected based on the tasks and it is not at all necessary that it be strictly only Flash, only AI, or just some other program.
And if the raster is just a preview of pictures in the layout, then inserting them for presentation is as easy as in Flash. Moreover, it is already possible to give for layout without them. Those. it's not a problem to make an interface, for example, in AI, and put raster graphics (backgrounds, etc.) separately. Do not forget to just explain to the layout designer where and how all this should be located. Or vice versa, make layouts in Photoshop, and put all elements (icons, buttons, etc.) separately in svg (and you don’t have to worry about a bunch of sizes).
There is no program that will do the work for the designer :) Too lazy to switch between programs using Alt + Tab? Well, go to copywriters, one Word is enough there))
Flash has assets, there are also a bunch of third-party plugins - choose what is more convenient. Fortunately, there are enough instructions, articles and reviews. Regarding the sizes for Retina and others, there are also a lot of articles with instructions (not counting the guidelines), you can easily find them.
That's right, you need to take into account who and how this site will look and select images in accordance with the restrictions. If specific maximum dimensions are known, then it is necessary to prepare graphics for them. Not on the Internet - buy on microstock, draw it yourself, ask a friend, order from colleagues, etc. If you consult with the layout designer in parallel, then you will find the optimal solution and simplify the work for both.
If no program is perfect, then the logical choice is to use more than one program at work ;)
InDesign is not for the web, although it is sometimes convenient to make even such a layout in it (for example, make a skeleton, and then continue working in Flash; especially if the layout is based on text). All sorts of Muse and other semi-automatic or automatic tools can also be used - it all depends on the specific task. For people like you, we also made an Affinity designer, but if you don’t like it, then you won’t please it. Wait for the fully functional version of Adobe XD under Win.
If you limit yourself to one program, you will always whine that it is inconvenient somewhere.
People successfully work in AI, FSH, Sketches, etc. And each of them once did not know something, did not know how and did not understand something. Everything will come with experience, and instead of looking for a single universal tool, it would be better to study the possibilities of different ones and learn how to put it into practice. Now, many people are able to create an almost identical result, regardless of whether it is a raster or vector editor. The difference is only in the skills of the specialist.
Responsive layouts have also been discussed here more than once. Someone is used to doing only one way, someone comes from the situation. I belong to the latter and in practice there were different things:
a) layouts are made for each resolution (the list is discussed with the client / layout designer) - longer and more expensive, but some layout designers prefer this approach;
b) one main layout is made and a text description of the behavior of blocks and elements, some of the graphics can be prepared additionally - suitable for simple designs where the logic of the interface behavior can be described verbally and when you need to save a little;
Sometimes you can just show the behavior of an interface with flowcharts.
c) one layout is made and that's it - more often if the client saves money and / or there is no specific layout designer yet and the client does not know if additional layouts are needed; here, either the layout designer himself then suffers over the adaptive, or the client returns for additional layouts.
I can’t single out some of the most popular of the options. they are all in roughly equal proportions.
The budget is small - do it alone, the budget allows and / or the client is good - do it to the maximum if it is important for you that the site looks like you intended at different screen resolutions.

Answer 2

We need a universal soldier.

If only web design, try affinity designer
For me, it's simple and convenient.