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.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_animista.jpg)
Animista
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.
![Shotsnapp - A tool for quickly creating app and website mockups.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_shotsnapp.jpg)
Shotsnapp
Shotsnapp lets you quickly create beautiful mockup presentations for your websites or mobile apps, which you can download as an image.
![Brush Ninja - A great tool for creating animations in any browser.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_brush_ninja.jpg)
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.
![Sketch.systems - A tool for sketching out states and prototypes.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_sketch_systems.jpg)
Sketch.systems
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.
![Sqreen – HTML & CSS Security Checklist.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_sqreen.png)
Sqreen
Sqreen is a HTML & CSS Security Checklist tool that helps developers and designers learn security best practices and avoid vulnerabilities.
![Avocode – A cross-platform design tool for collaboration.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_avocode.jpg)
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.
![Gradient Joy - A great source for gradient placeholder images.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_gradient_joy.png)
Gradient Joy
Gradient Joy is a small tool that allows you to use gradients as placeholder images.
![Winds 2.1 – An Open Source Podcast & RSS Reader.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_winds.jpg)
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.
![Beagle - A tool for scanning and securing your website.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_beagle.png)
Beagle
Beagle is a Windows tool for scanning and identifying website vulnerabilities that provides an interface for security testing.
![Wallpaper Generator – A CSS & JavaScript tool for generating wallpapers.]( https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_wallpaper_generator.png)
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.
![Goat - A great tool for shortening URLs.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_goat.png)
Goat
Goat is another cool URL shortlinking tool.
![Roast.io - A quick way of hosting HTML or JS single-page app.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_roast.jpg)
Roast.io
Roast.io is a static website hosting service with ultra-fast page loading speeds, server-side rendering, SEO reports and many other features.
![Devpen - A markdown editor with GitHub Style.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_devpen.jpg)
Devpen
Devpen is an online markdown editor that follows GitHub’s styleguide.
2. Libraries
![Vuido – A Vue.js framework for creating native desktop applications.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_vuido.jpg)
Vuido
Vuido is a library based on Vue.js and Libui that allows you to create cross-platform native desktop applications.
![WickedCSS - A CSS library for creating animation effects.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_wickedcss.jpg)
WickedCSS
WickedCSS is a lightweight CSS library tool.
![MDX - A great library for parsing MDX.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_mdx.jpg)
MDX
MDX is a JSX in Markdown loader, parser, and renderer for ambitious projects.
![Vivid.js - A JS library for customizing SVG icons.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_vividjs.png)
Vivid.js
Vivid.js is a lightweight JavaScript library that makes it easier to customize and use SVG icons.
![Cuttlebelle – A static site generator that separates editing & code concerns.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_cuttlebelle.jpg)
Cuttlebelle
Cuttlebelle is a static site generator powered by React.
![Proton - A JS particles engine.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_proton.jpg)
Proton
Proton is a JavaScript particle and physics engine that’s easy to use and supports multiple renderers.
![Hiper - A tool for testing the performance of a website.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_hiper.jpg)
Hiper
Hiper is a library that allows you to analyze your website’s performance.
![Hybrids - A great UI tool for creating web components.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_hybrids.jpg)
Hybrids
Hybrids is a UI tool for creating custom and reusable web components.
![Libmoji - A great library for creating fun avatars.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_libmoji.jpg)
Libmoji
Libmoji is a library uses the Bitmoji API to create fun and unique avatars.
![Ni - A better npm installation tool.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_ni.jpg)
Ni
Ni is an improved npm install
tool.
![Dump - A great tool to create a dump of a React App.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_dump.jpg)
Dump
Dump is a library that helps you debug your React apps.
![CSS Micro Reset - A great tool for resetting CSS elements.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_cssmicroreset.png)
CSS Micro Reset
CSS Micro Reset is a minimal CSS reset boilerplate.
3. Plugins
![Roller – A Sketch plugin for fixing design inconsistencies.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_roller.jpg)
Roller
Roller helps you identify design inconsistencies and suggest edits while you work on your Sketch files.
4. Freebies
![Triple Panel Reveal Slideshow - A slideshow design with a three-panel layout.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_triple_panel_reveal_slideshow.jpg)
Triple Panel Reveal Slideshow
A fullscreen image slideshow freebie with lateral image previews and a reveal animation using TweenMax.
![Full Image Reveal Effect - A tool for creating a full screen image reveal effect.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_full_image_reveal_effect.jpg)
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.
![Collapsing Logo Effect - A great tool for creating a collapsing logo effect.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_collapsing_logo_effect.jpg)
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.
![Arrow Head: Pattern Brushes & Vector Arrows - A vector set with pattern brushes & vector arrows.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_arrow_head_pattern_brushes.jpg)
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.
5. Fonts
![Kotori Rose - Free Sans-serif typeface.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_kotori_rose.jpg)
Kotori Rose
Kotori Rose is a free geometric, sans-serif typeface designed by Brian Jacob and made to represent beauty, boldness and determination.
![Bertha Font Family – Composed of 5 typefaces.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_bertha_font_family.jpg)
Bertha Font Family
The Bertha font family is composed of 5 typefaces that embrace vintage and modern vibes.
![POGO Display – Free geometric display Font.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_pogo_display.jpg)
POGO Display
POGO Display font is a stylish geometric display font designed by Erlend Storake that contains uppercase letters and numerals.
![Morganite - A free typeface with 18 styles.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_morganite.jpg)
Morganite
Morganite is a free typeface designed by Rajesh Rajput with 18 styles from Thin to Black.
![Renner - A great font for the digital age.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_renner.jpg)
Renner
Renner is great font designed to be in line with today’s digital typefaces. It was designed by Paul Renner.
6. UI Kits
![Capi Restaurant iOS UI Kit - A great Sketch & PSD food app template.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_capi_restaurant_ios_ui_kit.jpg)
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.
7. Icons
![BoxIcons – High quality web friendly icons.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_box_icons.png)
BoxIcons
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.
![150 Vector Icons - A complete set of for various platforms and different topics.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_150_vector_icons.jpg)
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.
![Open Logos - A great source for free logos.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_open_logos.jpg)
Open Logos
Open Logos is a great resource center offering free logos for active open source projects on GitHub.
![Free Icon Set #9 – Bold travel theme icons.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_free_icon_set9.jpg)
Free Icon Set #9
Free Icon Set 9 is a collection of 12 bold travel icons in vector format. Designed by Abhimanyu Rana.
![Twemoji – Twitter’s own emoji resource center.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_twemoji.png)
Twemoji
Twemoji is Twitter’s own free emoji collection.
![Free Tropical Icon Set - A tropical themed icon pack.](https://dgc2qnsehk7ta.cloudfront.net/uploads/rfwdd_tropical_icon_set.jpg)
Free Tropical Icon Set
A free icon set consisting of 50 tropical themed icons.
8. Great Reads
- 📄[Imaginary Cloud] Why Google’s Material Design is a political choice
- 📄[Dan Mall] Distinct Design Systems
- 📄[CSS Tricks] 1 Element CSS Rainbow Gradient Infinity
- 📄[Medium.com – 9Elements] Building A Responsive Image
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
🤔 What do you think?