hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

New Web Design and Development Resources: #3 January Edition

What’s up, people! Today, we bring you a complete package with some of the best resources for web designers and developers we’ve come across recently. All fresh and ready to boost your site, for nothing. Only freebies on this one! Let’s take a look right away.

New for Designers and Developers

Material Design Icons Expanded (Color Version)

A fancy re-work of the Material icons released by Google some time ago. They’re colored following the official color palette and include over 600 original pieces.

Material Design Icons Expanded

Apple Watch GUI for Illustrator

The release of the Apple Watch is imminent, make sure you’re ready for it with this complete GUI pack. It includes everything you need to create bold new apps for the gadget, following its edgy guidelines.

Apple Watch GUI

Falling Business Cards Mockup

An unusual mockup for business cards, with many of them falling from the sky. This design adds a lot of movement and dynamism to your display.

Falling Business Cards Mockup

SVG Loaders Pack

An awesome collection of colorful and fun loading animations, perfectly crafted in SVG format. Grab this set to make users wait in style and give them something to look at for a vital few seconds.

SVG Loaders Pack

Infographics Vector Pack

A giant bundle of infographics for visual data representation. It comes with charts, icons and flat characters, all in a well-organized AI file.

Infographics Vector Pack

Stacked Letterpress Business Cards Mockup

Show entire stacks of your new business cards before they are printed. This mockup serves as an alternative to the single-card mockup we all know and love.

Stacked Letterpress Business Cards Mockup

Ultra Realistic Magazine Mockup

A surprisingly lifelike mockup to test how your next design will look once it is printed on shiny new paper.

Ultra Realistic Magazine Mockup

FlattyShadow: Flat Shadow Generator

A neat tool for adding flat shadows to your icon designs. There’s a whole collection to choose from right in the site, too!



Adobe have made available this simple but effective drop caps utility. It will allow you to control their size, how many paragraphs they occupy, font and more, all through CSS.


Table of Contents Generator

If you’re looking forward to giving a brief overview of the content you’re about to provide users with, this generator could be a great help. This is particularly useful for very long text, as it lets users jump from section to section with ease.

Table of Contents Generator

Hamburgler.js: Responsive Menus

Hamburgler will help you integrate beautiful responsive menus into your web projects. This is a great way to ensure the content of your site remains viewable on any device users access from.


3D Engine Using HTML and CSS

Here’s a very interesting project that applies HTML and CSS 3D transforms in order to create a 3D engine. The results are truly impressive, showing how far these technologies can go for online gaming and animation.

3D Engine Using HTML and CSS

Blip: Better Audio for the Web

Blip is a state-of-the-art tool for handling audio in the modern web. It makes full use of the Web Audio API and allows the creation of loops and sampling for both effects and musical results.


A Set of 50 eCommerce Icons

A polished collection of over fifty line icons (with more details than usual) featuring the eCommerce industry. You’ll find money, deliveries, payments, shopping carts and other related topics.

50 eCommerce Icons

Dental Icon Set for Photoshop and Illustrator

A set of icons with a very particular topic in mind: Dentistry. There’s 20 to be used, and they could be a great help if you ever face a project related to this profession.

Dental Icon Set

Web Showcase: Howlt

An absolutely gorgeous website for the japanese studio Howlt. Click on the screen before hitting ‘enter’ to see charming animations come into place.


Web Showcase: Julien Simhauser

Julien Simshauser is a designer who has worked with some of the top brands and artists in the planet. His website shows why he’s been chosen for so many high-quality works.

Julien Simhauser

Kouto Swiss: A Complete CSS Framework for Stylus

Stylus is a great tool, but can lack a few useful features. Kouto Swiss is a CSS framework that aims to provide the best complement to Stylus, working as a multi-functional companion to complete your projects faster and make them more robust.

Kouto Swiss

Packer: Creating Identical Machine Images for Multiple Platforms

If you’re creating virtual images for multiple platforms such as Amazon EC2, DigitalOcean, VirtualBox and many others, this tool will simplify things for you quite a bit, letting you work on a single project for all of them.



CodeHive is a community where people from all around the world gather to share their knowledge on developing matters. The site could save you some time and a few headaches with useful tips on a variety of topics.


Material UI

A CSS framework React components combo that will make the implementation of Google’s Material design a lot easier, particularly if you’re unsure about the guidelines or just want to save time.

Material UI

Hamlet: Simple and Powerful Reactive Templating

A neat templating tool that will simplify things for you in many different ways using CoffeeScript, keeping a small footprint and reducing the complexity of your code.


Lorem F*cking Ipsum: The Filler Text You Always Wanted

Are you the filthy-mouthed kind? If so, here’s the perfect site for adding all that lovely profanity into your content tests. Come on, you gotta say it’s a little funny, and certainly out of the ordinary.

Lorem F*cking Ipsum

ZorroSVG: Amazing PNG Compression Tool

ZorroSVG can take your PNG files and reduce their size dramatically while keeping transparencies at a very similar quality. Useful for improving loading times on your websites, particularly on mobile devices where speeds can be much slower.

ZorroSVG A Couple of Tools for Your Next Web Project

This site provides two tools that, although not very related to each other, do provide help when making designs for the web. The first is a tool to import different profile pictures into a project while the second is a customizable lorem ipsum generator.

Distill: Free HD Stock Video Footage

A service for gathering royalty-free videos, usable in both personal and commercial projects. Just enter your email and 10 new videos will arrive to your inbox every 10 days.


Material UI Colors

Material design is starting to grab some serious grip throughout the design community, here you have a full collection of colors to go along with it.

Material UI Colors

Pull Menu Interaction Concept

A nice code snippet for mobile interfaces that will allow users to show different windows by pulling them from the top. A simple animation will indicate the content is loading.

Pull Menu Interaction Concept

CSS Astral Loader

A neat loader created with only CSS, it shows the figure of a thermometer filling up as the content comes up. The bar also changes color along the way through smooth gradients.

CSS Astral Loader

Flat Menu

A code snippet featuring a menu with simple flat icons and colorful hover effects. You can give each button a different color to mix things up a bit.

Flat Menu

Paneuropa Neue Typeface

This redesign of the Polish iteration of the Paneuropa font brings a versatile set of characters, ready for most western languages. Its effortless legibility and moderate look make it ideal for body texts and medium-sized content.

Paneuropa Neue

A Big Package of Cartoon-styled Fonts

Over 20 different selections to give your next project a very friendly look with these cartoon-styled icons. Download them all for free!

Cartoon-styled Fonts

Lovelo Inline Font

A very interesting typeface featuring completely open ends, always two or more lines and a neat mixture of rounded edges and tight 90-degree angles.

Lovelo Inline

Google’s Best Practices for Web Development

Here’s a must for all mobile developers out there. This collection of principles from the experienced Google team provides great advice in all areas, going from user interfaces to multimedia and monetization, covering everything in between.

Google's Best Practices for Web Development

Image-Focused Design: Is Bigger Better?

This article talks about the impact of image-centered designs and how they deliver messages to the audience. We are taken through various examples of well-known companies and websites in order to see how images affect the user experience.

Image-Focused Design: Is Bigger Better?

Interesting Article: The Unspoken D Word That Eats You from the Inside

Here’s the story of James, a British designer who, as we all do, faces existential problems in his life and does his best to try and solve them. The interesting part is how he relates it deeply to his profession and fellow designers. If you’re in the business and things don’t feel well on the inside, you’re not the only one.

The Unspoken D Word That Eats You from the Inside

Photoshop Vs Sketch

A slightly biased but more than valid overview of the advantages of Photoshop over Sketch and vice versa. Both have features the competition envy, but it’s up to you to see what piece of software fits your workflow and creations best.

Photoshop Vs Sketch

Google Apps Scripts Collection

This set of Google Apps scripts will extend the possibilities of your Google products and add alternatives you hadn’t even thought of. You’ll find tools for Gmail, RSS feeds, Google Maps, Drive and more.

Google Apps Scripts Collection

Sage: Free PSD Template

A neat portfolio template for displaying you work on any device, always keeping a classy look. The use of images is heavily encouraged in this design.


Momentio: Single Page PSD Template

A minimal theme created ideally for portfolios, agencies or similar sites. It will allow you to display your products through a classy portfolio section. Free Google font included to simplify things.


Enjoy these Web Design and Development Resources

As designers and developers, we realize you have extremely busy lives and little spare time – that is why we have spent the time sourcing these free resources for you that will hopefully help you save time and increase income – as they say: every little helps!

If you use any of these resources and find them to be great time-savers, please share your experience with us in the comments section below.

Article source:


Submit a Review

If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.