Organic variable-width strokes

[Alan O Neemas]

Hello,

How can I do this sort of stroke in Designer, please? (Desktop, Windows)

The Pressure profile doesn't do exactly that.

Thank you for any pointer

[v_kyr]

Not sure if you meant something else here, but I would for the yellow part ...

1. create a filled circle shape no stroke yet and convert it's shape to curves
2. ... then add some more node points on the outer circle curve and slightly replace these on the circle, thus giving it a wobbling view the way I like
3. ... now adding a black stroke which should then follow the main wobbling yellow curve
4. Also doing the same for the clock face.

[Old Bruce]

44 minutes ago, Alan O Neemas said:

How can I do this sort of stroke in Designer, please? (Desktop, Windows)

I would use the Pencil tool and draw it freehand.

[JimmyJack]

You could make a brush.
This one is set to stretch.

(caveat: stroke output will be raster)

[StuartRc]

That is a difficult one!.. There are no line distortion tools for this yet But there are a few things you could try. I tend to draw these by hand

1. Manually draw the shape (If you have fill and stroke when expanded you should get 2 objects to edit when expand stroke is applied!)
2. Create a complex pressure shape in the Pressure graph to create an irregular line.
3. You could try (Tablet) tuning on the Pressure on context toolbar, create a line and then save the recorded results in the pressure graph
4. Use a vector brush that has distorted edge.. This will work If you are happy with raster | vector brushes
5. Use on of the rounded shape tools to create a circular shape with a large number of nodes.. Bake it then edit
6. Quickly rough out the shape and add nodes. adjust position (Do this with the line | sharp edge nodes)...then convert to round (it is much quicker!)
7. I also use the pencil tool with sculpt selected to distort a shape (This is probably you best method!)...and use the appearance panel to create multiple shapes or the Contour tool to add strokes and distortion
8. Or you could simply use a raster bush!

[Alan O Neemas]

58 minutes ago, v_kyr said:

Not sure if you meant something else here, but I would for the yellow part ...

1. create a filled circle shape no stroke yet and convert it's shape to curves
2. ... then add some more node points on the outer circle curve and slightly replace these on the circle, thus giving it a wobbling view the way I like
3. ... now adding a black stroke which should then follow the main wobbling yellow curve
4. Also doing the same for the clock face.

This is a clever approach, thank you. But it would be SOOO tedious. I'll definitely keep it in mind for "important" graphics (vs. support icons and stuff)

[Alan O Neemas]

31 minutes ago, JimmyJack said:

You could make a brush.
This one is set to stretch.

(caveat: stroke output will be raster)

Another good idea, thank you 😊

[Alan O Neemas]

29 minutes ago, StuartRc said:

That is a difficult one!.. There are no line distortion tools for this yet But there are a few things you could try. I tend to draw these by hand

1. Manually draw the shape (If you have fill and stroke when expanded you should get 2 objects to edit when expand stroke is applied!)
2. Create a complex pressure shape in the Pressure graph to create an irregular line.
3. You could try (Tablet) tuning on the Pressure on context toolbar, create a line and then save the recorded results in the pressure graph
4. Use a vector brush that has distorted edge.. This will work If you are happy with raster | vector brushes
5. Use on of the rounded shape tools to create a circular shape with a large number of nodes.. Bake it then edit
6. Quickly rough out the shape and add nodes. adjust position (Do this with the line | sharp edge nodes)...then convert to round (it is much quicker!)
7. I also use the pencil tool with sculpt selected to distort a shape (This is probably you best method!)...and use the appearance panel to create multiple shapes or the Contour tool to add strokes and distortion
8. Or you could simply use a raster bush!

Thank you so much for the thorough breakdown, this is awesome.

Here's the source of the original icon: https://www.freeagent.com/features/accounting-software/

This UK company has one of the best SAAS website I've come across, and a lot of it comes from their single-style, organic support graphics. It's not the first time I've seen graphics like that (think Balsamiq), but they've done a great job.

From all of your expert answers, I'm guessing that this is a feature available in Illustrator (?) but not yet in Affinity. I'm saying this because I would be surprised if their designers went through so much trouble.

Either way, you've given me a few ways I can try to achieve a similar effect, so thank you once more to all of you

[Alan O Neemas]

PS - this is the sort of graphics I had in mind when I said "Balsamiq": https://balsamiq.com/learn/articles/what-are-wireframes/

[StuartRc]

You could also try some of these vector brushes (probably need to reduce the size though)

 

[Alan O Neemas]

23 minutes ago, StuartRc said:

You could also try some of these vector brushes (probably need to reduce the size though)

 

Thank you Stuart, I will try those. Fingers crossed, because the "brush" approach would be by far the easiest if I can pull it off 🔥

[StuartRc]

Yeah it will be if you are drawing wireframes...remember of can save the changes you make as a style

[Alan O Neemas]

Just now, StuartRc said:

remember of can save the changes you make as a style

Thanks for that tip, I would not have remembered or thought of doing it!

[v_kyr]

If you do draw your own UX/UI/Mockup based wireframes in AD, let's say via Stuart's brushes, also use some matching/fitting hand drawn looking font for titles, buttons ... and other components (since it's then easier to change & adapt). You can do all in a reusable manner as Assets and thus add them as your own Assets wireframe category to the Assets panel. - So you can build something reusable like this, though as your Wireframe Kit ...

See also:

• Affinity Designer for UI and Web Design

[Alan O Neemas]

22 hours ago, v_kyr said:

If you do draw your own UX/UI/Mockup based wireframes in AD, let's say via Stuart's brushes, also use some matching/fitting hand drawn looking font for titles, buttons ... and other components (since it's then easier to change & adapt). You can do all in a reusable manner as Assets and thus add them as your own Assets wireframe category to the Assets panel. - So you can build something reusable like this, though as your Wireframe Kit ...

See also:

• Affinity Designer for UI and Web Design

I only mentioned Balsamiq for their deliberate organic illustration style, but wow, thanks for these two resources. It seems like UX prototyping would be faster in Affinity Designer than in Balsamiq.