Tools to help your Web Designs using Sparkle!

[primo]

Hey guys!

As an UX Designer, i’ve came past an plethora of tools. Here are 6 tools that I think can help you design your websites and projects in Sparkle

1. Vangogh - https://www.thevangogh.in

Essentially, the Google Search for color palettes. Enter any search term and Vangogh will use millions of images to generate the perfect color palettes.
Try it with the word “love”!

2.Checklist.design - https://www.checklist.design

Quite literally a checklist for anything design-related. Are you creating a blog page and not sure that you’ve got everything in place? No problem - checklist.design is there to help.

3. SVG Artista - https://www.svgartista.net

This lets you create a loading animation using your logo (or any other SVG) in about 2 minutes. Customize the fill and stroke animation, grab it then paste in Sparkle!

4. Shape - https://shape.so

29.200 fully customizable illustrations and icons. Really customizables. Massive time-saver, and the interface is beautiful. An all-around win

5. Really Good Emails - https://www.reallygoodemails.com

I know that a lot of you have (or plan on having) an email list. Many of us are just getting started with email marketing and still finding our bearings, so I had to share this amazing inspiration resource.

6. Cleanmock - https://www.cleanmock.com

Share screenshots in style with this minimalistc mockup generator. Whether it’s web or mobile, Cleanmock has your back. And you can customize the background color as well.

— SUGGESTED BY YOU GUYS —

7. Typewolf - https://www.typewolf.com/

Help designers choose the perfect font combination for their next design project

Let me know if you used any of these!

[greenskin]

Thank you @primo for sharing!
I’ve come across a few of those, but the other ones are just as great and I’m sure it will be really appreciated!

[jazzbird]

Wow, thank you so much for this! I don’t have time like I used to so I don’t scour the web anymore so this is fantastic. Much appreciated @primo!

[FreewayFugitive]

Hi,

I would also add Typewolf, which I have found to be a useful resource, too.

What’s Trending in Type · Typewolf

[primo]

Great add, Freeway!

I’ll put it on the main topic

[mewl]

Wonderful…the SVG animation tool is just what I was looking for. Thanks

[bapfoto.de]

@primo Fantastic suggestions. I‘ll have a look at all of them.
!Ich

[bapfoto.de]

@primo just tried to get a picture analyzed by “the vangogh” but apart from an forever spinning wheel, nothing else happened :-(((

[mewl]

Do you have a workflow to integrate the SVG Artisa files into Sparkle?
Animated SVG’s from SVGgator seem to embed and run without issue but I’ve played around with the files SVG Artisa puts out and it never seems to render an animated image. My animation is working in SVG artisa
Have you got this one working in sparkle? Thanks

[duncan]

Hi @mewl, not familiar with those. Could you send one over to feedback@sparkleapp.com and we’ll check if it can be addressed.

[geneprofi]

Thanks a lot, really good stuff.

[Raaskot]

Very nice, thanks for submitting:)
Though I need a further hint please:

Artista files: I’m wondering about “grab it then paste it in Sparkle”: Do you mean the Sparkle embed-box? Cannot figure out exactly what you mean …

Tried to read the how-to-instruction which makes no sence to me as such: “In case of an intro animation, you can simply assign the active to the SVG on page load event.”

Kind regards, Mikael

[Swedutch]

I cannot open thevangogh site

[mewl]

I removed my reply to you backing up what you said and asking others for advice, I have it working now.

You make two “embed” boxes on your canvas;

• In either box you copy and paste the code from the “SVG Code” into the code window. Save/Refresh button on the widget screen.

• Copy and paste this into the code window of the other embed box, make a new line in between the two tags by hitting return after the first line ;

 <style>
</style>

• Go back and copy the “Animation Code” and paste it in-between the two tags above.
  Save/Refresh button on the widget screen. and that should be it working.

Linked is a sample sparkle file of a working animation from SVGartista

https://www.dropbox.com/s/hx5lq5rtjne4ggj/SVG%20Animation%20Example.sparkle?dl=0