As a creative agency, we are always coming across new apps or online tools that help us be more productive, feel inspired, or even just plain ‘ol waste our time. This year has brought it’s fair share of new shiny tools and while most don’t make it into the daily routine, a few shining examples have set themselves apart from the pack.
We’ve compiled a list of the top 10 resources we’ve come across in the past few months, that we feel really make an impact in our creative process. From fonts to grids, there’s a little something for everyone:
This is one of our absolute favorites to play around with css animations during the concept phase. A really fun one to play around with. Definitely go check out the “Shadow Drop” animation and tell us what you think!
Go Here: http://animista.net/play
Okay, so this one isn’t necessarily earth shattering stuff. However it’s a good little library of icons that represents the development and design world. If you need to grab a quick bitbucket or Python icon, this is where you should go…
Go Here: http://konpa.github.io/devicon/
Graaf CSS Grid
Graaf is a super simple css grid overlay you can easily implement for design/layout purposes. Simply link the stylesheet and bam, your good to go…
Go Here: http://graaf.space/
Archetype is a great tool for finding those perfect font pairings. What’s unique about this particular tool is that it lets you easily create beautiful and consistent typography styling live, in the browser.
After your finished getting everything just right you can download your design as CSS for easy implementation.
Go Here: https://archetypeapp.com
We’ve all been there, sometimes you starting a design and just completely stuck on a color palette to work from. That’s where this nifty little tool really shines! Simply click the little refresh icon in the lower left hand corner and you can cycle through endless possibilities of fantastic color palettes.
Caution: one can waste more time than one wants to admit here…
This online tool is pretty bad ass. It’s a device mock-up generator that is absolutely perfect for your screenshots. The best thing about this tool is that it is super, super easy to use.
Simply pick a device, choose your style (normal or flat), choose your color, and choose the main background, click download and Boom! You have a sweet device mock-up in .png format.
A beautiful online gradient generating tool that is very pleasing to look at. There are numerous pre-made gradients laid out in a grid style. Each gradient listing has controls for direction, colors, stop edits, and more.
If you are needing inspiration for a gradient, this is the perfect place for you.
Go Here: https://www.grabient.com/
This tool is very similar to Archetype listed above in that it allows you to test font pairings. That’s about where the similarity ends though. Archetype is more robust and focused on overall design.
Font generator is geared for (as the tagline states) quick font ideas. If you just want to throw some fonts together real fast and see how they work together, this’ll do the job (as long as it’s Google fonts you’re looking for)
Go Here: http://brandmark.io/font-generator/
I included Figma in this list because, it does have a free price tier. Also, I’m not so sure it’s all that “unknown” but I just wanted to show some love to a great Sketch alternative for all my PC people out there!
Now there’s nowhere near the same amount of info out there on Figma as there is Sketch (or plug-ins / add ons).
However, if you are sick of watching your apple buddies have all the prototyping fun with Sketch, give Figma a whirl.
Go Here: https://www.figma.com/
Markdown To Medium
Okay, so the final tool isn’t so much about design but it’s still super handy. Well, at least I think it’s super handy… Basically this tool allows you to create Medium posts with syntax highlighting for your code blocks.
I know, I know, it’s not a mind blowing item you “must have” in your tool kit, but it’s cool nevertheless.
Go Here: http://markdowntomedium.com/
That was a fun list to put together! We hope you enjoy using some of these tools as much as we do. Tell us about some of your favorite tools or maybe some best kept secrets in the comments below!
Have a great day…