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 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 lets you quickly create beautiful mockup presentations for your websites or mobile apps, which you can download as an image.
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 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 is a HTML & CSS Security Checklist tool that helps developers and designers learn security best practices and avoid vulnerabilities.
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 is a small tool that allows you to use gradients as placeholder images.
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 is a Windows tool for scanning and identifying website vulnerabilities that provides an interface for security testing.
Goat is another cool URL shortlinking tool.
Roast.io is a static website hosting service with ultra-fast page loading speeds, server-side rendering, SEO reports and many other features.
Devpen is an online markdown editor that follows GitHub’s styleguide.
Vuido is a library based on Vue.js and Libui that allows you to create cross-platform native desktop applications.
WickedCSS is a lightweight CSS library tool.
MDX is a JSX in Markdown loader, parser, and renderer for ambitious projects.
Cuttlebelle is a static site generator powered by React.
Hiper is a library that allows you to analyze your website’s performance.
Hybrids is a UI tool for creating custom and reusable web components.
Libmoji is a library uses the Bitmoji API to create fun and unique avatars.
Ni is an improved
npm install tool.
Dump is a library that helps you debug your React apps.
CSS Micro Reset
CSS Micro Reset is a minimal CSS reset boilerplate.
Roller helps you identify design inconsistencies and suggest edits while you work on your Sketch files.
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.
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 font is a stylish geometric display font designed by Erlend Storake that contains uppercase letters and numerals.
Morganite is a free typeface designed by Rajesh Rajput with 18 styles from Thin to Black.
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.
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 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 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! 😁