Shards Pro




Learn More

43+ Best new web design resources for June 2018

Discover some of the best new web design resources including tools, libraries, plugins, freebies, fonts, UI Kits, icons and many other goodies that we curated during June 2018.

43+ Best new web design resources for June 2018

Discover some of the best new web design resources including tools, libraries, plugins, freebies, fonts, UI Kits, icons and many other goodies that we curated during June 2018.

1. Tools & Utilities

Animista - A great tool for creating CSS animations.


Animista is a tool that allows you to customize, tweak and download CSS animations. It also provides a collection of ready-made animations that you can choose from.

Check it Out

Shotsnapp - A tool for quickly creating app and website mockups.


Shotsnapp lets you quickly create beautiful mockup presentations for your websites or mobile apps, which you can download as an image.

Check it Out

Brush Ninja - A great tool for creating animations in any browser.

Brush Ninja

Brush Ninja is a web-based tool that allows you to draw each individual frame and create and export animated gifs. The tool is also available as a Mac OS app.

Check it Out

Sketch.systems - A tool for sketching out states and prototypes.


Sketch.systems is a powerful tool for “sketching” complex product behavior in code. Using Sketch.systems you can define states, add prototypes, and clarify questions quickly.

Check it Out

Sqreen – HTML & CSS Security Checklist.


Sqreen is a HTML & CSS Security Checklist tool that helps developers and designers learn security best practices and avoid vulnerabilities.

Check it Out

Avocode – A cross-platform design tool for collaboration.

Avocode 3

Avocode is a cross-platform tool that helps designers and developers share, inspect and collaborate on designs from Photoshop, Sketch, Figma, and Adobe XD.

Check it Out

Gradient Joy - A great source for gradient placeholder images.

Gradient Joy

Gradient Joy is a small tool that allows you to use gradients as placeholder images.

Check it Out

Winds 2.1 – An Open Source Podcast & RSS Reader.

Winds 2.1

Winds 2.1 is a cross-platform open-source tool for streaming RSS feeds and Podcasts. It is built using React, Redux and Node.

Check it Out

Beagle - A tool for scanning and securing your website.


Beagle is a Windows tool for scanning and identifying website vulnerabilities that provides an interface for security testing.

Download Now

Wallpaper Generator – A CSS & JavaScript tool for generating wallpapers.

Wallpaper Generator

Wallpaper Generator lets you generate beautiful wallpapers using CSS and JavaScript. You can access it as a Pen on Codepen so you can also learn how it works from its source code.

Check it Out

Goat - A great tool for shortening URLs.


Goat is another cool URL shortlinking tool.

Check it Out

Roast.io - A quick way of hosting HTML or JS single-page app.


Roast.io is a static website hosting service with ultra-fast page loading speeds, server-side rendering, SEO reports and many other features.

Check it Out

Devpen - A markdown editor with GitHub Style.


Devpen is an online markdown editor that follows GitHub’s styleguide.

Check it Out

2. Libraries

Vuido – A Vue.js framework for creating native desktop applications.


Vuido is a library based on Vue.js and Libui that allows you to create cross-platform native desktop applications.

Check it Out

WickedCSS - A CSS library for creating animation effects.


WickedCSS is a lightweight CSS library tool.

Download Now

MDX - A great library for parsing MDX.


MDX is a JSX in Markdown loader, parser, and renderer for ambitious projects.

Check it Out

Vivid.js - A JS library for customizing SVG icons.


Vivid.js is a lightweight JavaScript library that makes it easier to customize and use SVG icons.

Check it Out

Cuttlebelle – A static site generator that separates editing & code concerns.


Cuttlebelle is a static site generator powered by React.

Check it Out

Proton - A JS particles engine.


Proton is a JavaScript particle and physics engine that’s easy to use and supports multiple renderers.

Check it Out

Hiper - A tool for testing the performance of a website.


Hiper is a library that allows you to analyze your website’s performance.

Check it Out

Hybrids - A great UI tool for creating web components.


Hybrids is a UI tool for creating custom and reusable web components.

Check it Out

Libmoji - A great library for creating fun avatars.


Libmoji is a library uses the Bitmoji API to create fun and unique avatars.

Check it Out

Ni - A better npm installation tool.


Ni is an improved npm install tool.

Check it Out

Dump - A great tool to create a dump of a React App.


Dump is a library that helps you debug your React apps.

Check it Out

CSS Micro Reset - A great tool for resetting CSS elements.

CSS Micro Reset

CSS Micro Reset is a minimal CSS reset boilerplate.

Check it Out

3. Plugins

Roller – A Sketch plugin for fixing design inconsistencies.


Roller helps you identify design inconsistencies and suggest edits while you work on your Sketch files.

Download Now

4. Freebies

Triple Panel Reveal Slideshow - A slideshow design with a three-panel layout.

Triple Panel Reveal Slideshow

A fullscreen image slideshow freebie with lateral image previews and a reveal animation using TweenMax.

Download Now

Full Image Reveal Effect - A tool for creating a full screen image reveal effect.

Full Image Reveal Effect

Another freebie from the Codrops blog that features a full image reveal effect where thumbnails slide out of the viewport to reveal a larger image and also uses TweenMax for the animations.

Download Now

Collapsing Logo Effect - A great tool for creating a collapsing logo effect.

Collapsing Logo Effect

Collapsing Logo Effect helps in creating an initial view that scales down to a logo in the left corner of your website. Clicking the logo again expands it to the initial view.

Download Now

Arrow Head: Pattern Brushes & Vector Arrows - A vector set with pattern brushes & vector arrows.

Arrow Head: Pattern Brushes & Vector Arrows

Arrow Head: Pattern Brushes & Vector Arrows contains 20 pattern brushes for Adobe Illustrator and more than 10 hand drawn vector arrows.

Download Now

5. Fonts

Kotori Rose - Free Sans-serif typeface.

Kotori Rose

Kotori Rose is a free geometric, sans-serif typeface designed by Brian Jacob and made to represent beauty, boldness and determination.

Check it Out

Bertha Font Family – Composed of 5 typefaces.

Bertha Font Family

The Bertha font family is composed of 5 typefaces that embrace vintage and modern vibes.

Check it Out

POGO Display – Free geometric display Font.

POGO Display

POGO Display font is a stylish geometric display font designed by Erlend Storake that contains uppercase letters and numerals.

Check it Out

Morganite - A free typeface with 18 styles.


Morganite is a free typeface designed by Rajesh Rajput with 18 styles from Thin to Black.

Check it Out

Renner - A great font for the digital age.


Renner is great font designed to be in line with today’s digital typefaces. It was designed by Paul Renner.

Check it Out

6. UI Kits

Capi Restaurant iOS UI Kit - A great Sketch & PSD food app template.

Capi Restaurant iOS UI Kit

Capi Restaurant iOS UI Kit is an easily customizable, clean and modern Sketch and PSD template for a restaurant/food app.

Check it Out

7. Icons

BoxIcons – High quality web friendly icons.


BoxIcons is a free set of 750 carefully crafted vector icons. It can be used as a web component, font, or a downloadable SVG file.

Check it Out

150 Vector Icons - A complete set of for various platforms and different topics.

150 Vector Icons

150 Vector Icons includes free easily customizable icons in 15 different categories for websites and mobile platforms. Icons are delivered in AI, EPS, and PNG file formats.

Check it Out

Open Logos - A great source for free logos.

Open Logos

Open Logos is a great resource center offering free logos for active open source projects on GitHub.

Check it Out

Free Icon Set #9 – Bold travel theme icons.

Free Icon Set #9

Free Icon Set 9 is a collection of 12 bold travel icons in vector format. Designed by Abhimanyu Rana.

Check it Out

Twemoji – Twitter’s own emoji resource center.


Twemoji is Twitter’s own free emoji collection.

Check it Out

Free Tropical Icon Set - A tropical themed icon pack.

Free Tropical Icon Set

A free icon set consisting of 50 tropical themed icons.

Check it Out

8. Great Reads

What are your favorite tools or resources? Did we miss anything? If you liked this roundup make sure you share it! 😁

🔥📦 Check the best tools and resources for web developers and designers from June 2018 Click To Tweet

Check out the other monthly roundups for 2018:

Catalin Vasile

Catalin Vasile

Catalin is a design focused engineer and founder of DesignRevision. When he’s not working on a project, he likes to read, watch movies and take long hikes.

🤔 What do you think?