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: #2 December Edition

Hello, fellow designers and developers! Today, we share with you a new collection of design and development resources for your projects. You will find templates, mock-ups, vectors and code snippets for all your creative needs. You can also check out our November web design and development resources edition.

New For Designers and Developers

Free Flyer PSD Template

A nice minimal flyer template with squared areas and light colors; on top it has a logo area with a big header image. Right below it has three areas, with icons and short descriptions. It also includes a widget for services, ‘about us’ and ‘why choose us’.

Free Flyer PSD Template

Free Stationery Mockup

This is a set of stationery designs with dark and light sides. Among the elements, you’ll find business cards, a letterhead and an envelope. Its dimensions are 1800 x 1800px. However, it weighs 125MB since it includes a good deal of patterns and shapes. You can edit it to adapt it to your needs at anytime.

Free Stationary Mockup

Gold Letterpress Logo Mockup

A cool effect makes this logo design look like it’s engraved on a leather cloth and put over a golden plate. The result is an elegant design that only weighs 7.6 MB, and you can edit it easily thanks to its smart object. Be sure to add a PNG image for better results.

Gold Letterpress Logo Mockup

The Essentials Mockups Pack

This is an essential free set of mockups. It is composed of genius images like a t-shirt, license, business card, iPhone with case and buttons, perfect for events or politics. You can include your own design thanks to the smart objects inside. It weighs about 51.3 Mb.

The Essentials Mockup Pack

Hover Effect Ideas

These are several hover effects for widgets and thumbs. They are quite subtle and can be used as inspiration to create your own, or as a base for new and beautiful creations. They are divided in two sets, and even include other elements like icons, logos and additional effects.

Hover Effect Ideas

2015 Calendar Vector Template

A flat interface for a 2015 calendar. It includes vector files in EPS, AI and JPG to easily edit them or use right away. Its design is flat, although some shadows are added to provide depth.

2015 Calendar Vector Template

Branding-Stationery Mockup

A stationery mockup, perfect for branding purposes. It is a flat approach to business imagery, including envelopes, letters, folded manuscript, CD / DVD design, folders, business cards, pencils, pens, and more. It uses simple colors such aswhite and blue tones. Fully free to download!

Branding Stationary Mockup

Huge Infographic Vector Pack

A very complete set of infographics in a cleverly organized AI file, letting you modify and rearrange the elements with ease. Additionally, the pack includes a set of icons and friendly, customizable characters.

Huge Infographic Vector Pack

12000 Free Outline Icons

A massive collection with literally thousands of icons coming in two styles. They feature all sorts of topics for pretty much any occasion, resulting into a great asset for web or app design and development.

12000 Free Outline Icons

Sails.js: Realtime MVC Framework for Node.js

Sails is a framework that makes it easy to build enterprise-grade Node.js apps. It emulates the familiar MVC pattern of frameworks like Ruby, but supports the requirements of the newest apps like data-driven APIs with scalable and service-oriented architectures. With it, you can build chat apps, dashboards and multiplayer games, as well as any web app.

Sail.js Realtime MVC Framework

Android Week View Calendar Android Library

A useful calendar library that allows you to create beautiful calendars to add events. You can see the calendars by day, three days or week, and customize them to fit any project’s guidelines. It features horizontal (infinite) and vertical scrolling, as well as live previews.

Android Week View Calendar

JQuery and Bootstrap-ready Plugin to Validate Form Fields

A great jQuery plugin to validate form fields designed to be used with Bootstrap 3. It was written from scratch and tested with Jasmine, supports declarative settings and HTML5 attributes or input types. Among all of its features, we can find 49 different validators, icons, error tooltips, messages, dynamic messages and many others!

JQuery and Bootstrap-ready Plugin to Validate Form Fields

AniJS, UI Interaction Library for Web Designers

AniJS is a UI interaction library for web designers meant to be used in plain english. It is a library that allows designers create simple animations, handle and trigger events over designs and build components. With it, you can achieve better integration between code and design, and spend less time thinking how your design will look when it’s animated.

AniJS UI Interaction Library for Web Designers

Highland.js: Stream Control Node.js Library

Highland.js is a high-level library for Node.js with the purpose of controlling streams. It manages synchronous and asynchronous code equally and really easy. It allows you convert to / from Highland Stream, read files in parallel, handling errors and events, among other functions.


100 Simple and Free Line Icons

A pack of 100 outlined icons made in different formats such as PSD, PDF, PNG, SKETCH, SVG and EPS. These icons follow a fascinating trend that goes really well with photography and blurred backgrounds, and there are so many categories to chose from that you would like to create things all day long.

100 Simple and Free Line Icons

Helium Icon Set in Several Formats (AI, EPS, SVG, Icon Font)

The Helium icon set is a nice creation with 112 different icons in lots of categories that you can use in any project. They have a unique style that has to do with its name: the authors named it Helium since the icons resemble balloons filled with it. They can be downloaded for free.

Helium Icon Set

Hunger Crunch (Inspiration Website)

This is a beautifully designed website (and a quite awesome if you see it as a whole) that shows a parallax animation of a monster that you need to defeat. This website is not only important visually, guiding us through a clear and playful path, but it also appeals to our human side, since the earnings of the game they promote go to feed children in poor countries.

Hunger Crunch

UNION: Marketing Agency (Inspiration Website)

This website works as an inspirational creation. It is a one-page site that uses smooth transitions among its areas, good-looking images and mockups, blurred backgrounds matching the bold fonts used for subtitles, an off-canvas, as well as many other great features.


HOCHBURG (Inpiration Website)

This is a beautiful website inspiration design, perfect if you plan to create something amazing from scratch but you find yourself stuck without any new ideas. It makes use of powerful images over handwritten backgrounds, displaying the logo and the company info right below all the visuals. Some featured projects are also shown with this bold approach.


SapientNitro: Showcase Agency (Inpirsation Website)

SapientNitro is a flat and image-based website that can provide some good inspiration to agencies all around the globe. Among its features, we can find a lateral menu with logo on top, additional lateral sub-menu when you click on one tab, sliding and hover effects, and more.


Logstash: Open Source Log Management

This tool manages the events and logs on your server. Collect and parse logs, and then store them for revision and search. Its friendly user interface helps you retrieve the information from the database for you to use. This is a free and open source tool, with an apache 2.0 license.


Takana: Live SCSS CSS Editor

Takana lets you see your SCSS and CSS style changes live in the browser as you type them. It is a simple yet powerful code editor with an easy installation. Start Tanaka, add the JavaScript and start coding. It can be used and downloaded for free.


Gleez CMS: Flexible Content Management System

Gleez is an open source content management system built on the Kohana framework. It gathers some of the greatest parts of the most important CMS systems like Drupal, Joomla and WordPress. It is easy to install and works perfectly on mobile devices like iPhones Android phones, as well as desktop browsers.

Gleez CMS

Pure CSS Off-canvas Menu with Flexbox

This off-canvas menu was created with flexbox, which allows a more intelligent resizing instead of overflowing the viewport and cutting it off. It doesn’t use any JavaScript, but performs the toggle effect by using a simple checkbox hack. It can be used in different web projects and still be a good fit for them.

Pure CSS Off-canvas Menu with Flexbox

Apple Zoom Out Background Effect

This is a nice effect that turns a regular background into an iMac mockup, making clever use of a zoom effect. The design is complemented with a little description at the end, and it can be used to make a showcase of a website, product or to present a service in a more compelling way than ever. It was created with CSS and JavaScript.

Apple Zoom Out Background Effect

My CSS Polyhedra: Pure CSS Code Snippet

This is a beautiful set of Polyhedra coming in multiple shapes and styles. The set has pyramids, cubes, dodecahedron, octahedron, and many more. They are displayed with neat animations and some of them even include additional component on the background.

My CSS Polyhedra

Material Design Scaling Between Elements

This code snippet shows the implementation of Google’s Material Design. It was created with SCSS and JavaScript, and it shows the interaction among graphic elements on a screen. You can modify the code to make it even better.

Material Design Scaling Between Elements

Single 3D Form Input Made with CSS and JavaScript

The Single 3D Form Input is a beautiful code snippet made in CSS and JavaScript, useful for subscriptions and other forms on a website or mobile app. It has 4 states: regular, input, sending and confirmed. Colors can be easily changed.

Single 3D Form Input

POLYA: Free Low Poly Style Font

Polya is a free font with only uppercase characters and numbers. The font has a mashed design, which makes it perfect for poster design and other printed initiatives. You can use it commercially or personally.


Ahamono: a Free Monospaced Font

Ahamono is a legible monospaced typeface (meaning all of its characters take up the same amount of space). It’s a sans serif design, including upper and lower cases, useful for websites, mobile apps or even printed designs in need of an elegant and modern touch. Special characters and numbers are also available.


Using Gestalt Principles for Natural Interactions Tutorial

This article helps us understand design from a universal perspective, instead of looking at individual elements and mechanic components of web design. It teaches us how to use similarity, enclosure, making us perceive elements as a group as well as individual components with specific purposes, continuation, closure, proximity and other keys to improve user experience.

Using Gestalt Principles

iOS 8 and iPhone 6 for Web Developers and Designers: Next Evolution for Safari and Native Web Apps

An article that helps us know iOS 8 and the iPhone 6 a little better. Among the topics you can find, there are the use of Safari in iOS 8, the characteristics of iPhone 6 and iPhone 6 Plus, their viewport size and device pixel ratio and their icon sizes, among many many more features.

iOS8 and iPhone 6 for Web Developers and Designers

Creating a Product Experience Tutorial

This entry in Codeship will help you understand the process of creating the correct experience for any product. It shows how we need to translate the experience to make it compatible and integrate it into the design. It also teaches how simplicity is the best way to reach this purpose and not focusing only in the visual aspect.

Creating a Product Experience Tutorial

How to Use Logs to Get an Overview on Technical and Business Metrics

An effective article that talks about how to use logs and take advantage of technical and business metrics. You will see some system issues like exception monitoring, error tracking, error history, threshold breaches, shifting, heartbeat checks and correlations.

How to Use Logs to Get an Overview on Technical and Business Metrics

Typekit Practice: Using Shades for Eye-catching Emphasis

Take a look at this simple tutorial will help you become an expert in shades by adapting the style smoothly, choosing the correct type of shade, its intensity, direction and more. You can edit the examples in Codepen one by one, grab the code and implement them in your site.

Typekit Practice

Creative Agency Web Design Free PSD

The creative agency is a friendly web template made in PSD format with a flat design. This design has a big image at the top, which includes the log, a little description and a menu. Below, there are other areas for “about”, “services” (including icons and captions), a grid with the works and projects, as well as the contact form. It is a completely free template.

Creative Agency Web Design Free PSD

MyWay: Free PSD Template

This is a really cool PSD template that creates a big impact just with its background. It has a logo area, menu at the top, a short but powerful description next to a big image, and that’s just the header! Down below there are some thumbnails and icons, features area, and at last, all the contact information. Really easy and good looking.

My Way Free PSD Template

Enjoy these web design and development resources

We hope you will find something useful for your next web project. If you come across any other useful resources, do share them in the comments.

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.