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
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
Shotsnapp lets you quickly create beautiful mockup presentations for your websites or mobile apps, which you can download as an image.
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
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
Sqreen is a HTML & CSS Security Checklist tool that helps developers and designers learn security best practices and avoid vulnerabilities.
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
Gradient Joy is a small tool that allows you to use gradients as placeholder images.
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
Beagle is a Windows tool for scanning and identifying website vulnerabilities that provides an interface for security testing.
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
Goat is another cool URL shortlinking tool.
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
Devpen is an online markdown editor that follows GitHub’s styleguide.
2. Libraries
Vuido
Vuido is a library based on Vue.js and Libui that allows you to create cross-platform native desktop applications.
WickedCSS
WickedCSS is a lightweight CSS library tool.
MDX
MDX is a JSX in Markdown loader, parser, and renderer for ambitious projects.
Vivid.js
Vivid.js is a lightweight JavaScript library that makes it easier to customize and use SVG icons.
Cuttlebelle
Cuttlebelle is a static site generator powered by React.
Proton
Proton is a JavaScript particle and physics engine that’s easy to use and supports multiple renderers.
Hiper
Hiper is a library that allows you to analyze your website’s performance.
Hybrids
Hybrids is a UI tool for creating custom and reusable web components.
Libmoji
Libmoji is a library uses the Bitmoji API to create fun and unique avatars.
Ni
Ni is an improved npm install tool.
Dump
Dump is a library that helps you debug your React apps.
CSS Micro Reset
CSS Micro Reset is a minimal CSS reset boilerplate.
3. Plugins
Roller
Roller helps you identify design inconsistencies and suggest edits while you work on your Sketch files.
4. Freebies
Triple Panel Reveal Slideshow
A fullscreen image slideshow freebie with lateral image previews and a reveal animation using TweenMax.
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
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
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
Kotori Rose is a free geometric, sans-serif typeface designed by Brian Jacob and made to represent beauty, boldness and determination.
Bertha Font Family
The Bertha font family is composed of 5 typefaces that embrace vintage and modern vibes.
POGO Display
POGO Display font is a stylish geometric display font designed by Erlend Storake that contains uppercase letters and numerals.
Morganite
Morganite is a free typeface designed by Rajesh Rajput with 18 styles from Thin to Black.
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
Capi Restaurant iOS UI Kit is an easily customizable, clean and modern Sketch and PSD template for a restaurant/food app.
7. Icons
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
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
Open Logos is a great resource center offering free logos for active open source projects on GitHub.
Free Icon Set #9
Free Icon Set 9 is a collection of 12 bold travel icons in vector format. Designed by Abhimanyu Rana.
Twemoji
Twemoji is Twitter’s own free emoji collection.
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
Check out the other monthly roundups for 2018:
🤔 What do you think?