New Web Design and Development Resources

Animated Material Login/Registration Form

Hey guys! We’re back this month with this fresh resources round-up! This month you’ll be provided with plenty of resources like PSD freebies and Sketch templates, mockups, UI kits, typefaces, plugins, and more! Looking forward, this collection can be useful for you designers and developers in your daily work!

New For Designers and Developers

Free Vintage MacBook Pro Mockups

A cool pack of 5 MacBook pro mockups, they come in high resolution and include smart objects so you can add them to your web designs easily.

Free Vintage MacBook Pro Mockups

Uzers: Minimalist PSD UI Kit

A minimal and grey user interface with different elements for designs such as menus, buttons, blog widgets and a footer. It comes in PSD, weighs 542KB and has a personal and commercial license.


24 Free Photoshop Watercolor Brushes

An exclusive collection of 24 free watercolor brushes for Photoshop. Perfect for headers, flyers, wallpapers, backgrounds, presentations, and many more.

24 Free Photoshop Watercolor Brushes

Retro Outline Ribbon Vector Set

A beautiful set of outline ribbons. There are 14 in total, featuring subtle retro and classic style, made in AI and EPS formats. The files can be used personally and commercially.

Retro Outline Ribbon Vector

AquaWay: Free Hand Drawn Vector Pack

The AquaWay set is a hand drawn creation that has more than 30 elements, 2 watercolor elements, 3 insignias, and 2 watercolor splashes, fully editable and scalable.


Desktop Generator: 200 Editable Vector Elements

A pack with 200 editable vector elements for generating desktops. There are 11 categories, wood textures, 30 scenes and an ochre color palette.

Desktop Generator

Multi-Style AI, INDD and PSD Menu Templates

A set of menu templates in several formats for easy edition (PSD, AI and INDD). They can be used for restaurants, bars and other food-related businesses.

Multi-Style Menu Templates

Styleguides Creating and Managing Tool

A tool for generating and managing style guides easily. It is modular since the content is separated from the code, and it is split into different modules.

Styleguides Creating and Managing Tool

Ftscroller: a Cross-browser Javascript and CSS Scrolling Library

A JavaScript and CSS cross-browser library for easy scrolling within specified elements. It supports pagination, snapping and bouncing, as well as touch, mouse or scroll wheel capabilities.


Bare Auth: Ready-to-deploy Stateless Authentication Server

A stateless authentication server that supports all authentication strategies and allows enabling routes by supplying the specified environment variables.

Bare Auth

Enllax.js: Ultra-lightweight Parallax Scrolling Effect Plugin

A really lightweight plugin created with jQuery for achieving smooth parallax scrolling effects. Be sure not to use really heavy images so the website loads faster.


Tapatar: Lightweight and Extensible JQuery Avatar Picker

A lightweight and extensible jQuery that lets users select an avatar from any social network. It has Gravatar, Local and Facebook sources active by default.


Free Flat Icons Set for Landing Pages

A set of icons in a flat style made in PSD and illustrator, with a beautiful pale color palette. The pack includes 50 icons for multiple purposes, totally editable and scalable.

Free Flat Icons Set for Landing Pages

Hand Gestures Updated PSD Pack

A pack of 16 touch gestures, including fingers movement, hand, touch, grab, hold, press and more. They are editable, although you can also use them as they come.

Hand Gestures PSD Pack

Multipurpose Windows 8 Icons

A pack of more than 5k icons in Windows 8 style. The pack includes several categories for multiple purposes. The free pack can be used for personal projects.

Multipurpose Windows 8 Icons

Claudio Guglieri’s Portfolio Website

A beautiful site that works as the portfolio of Claudio Guglieri. Not only the site itself works as inspiration but his actual work. He has created products for Nickelodeon, CNN and USA Today.

Claudio Guglieri

DeployBot: A Simple Code Deploying and Testing App

DeployBot is an app for deploying code anywhere without needing complicated configuration. You can access one repository for free, including tools for building and testing.


STF: Devices Testing Browser Tool

STF is a browser tool that helps controlling and managing devices directly from your browser. With it you can control it remotely and manage the inventory, checking the conected devices.


Blade: Concise and Elegant Java Web Framework

Blade is a concise and elegant Java framework for web development, really lightweight and licensed under the Apache2 license. Documentation is in Chinese.


Mobile Websites Online Checker

A mobile checker made by the WC3 for testing several parts of your website, related mainly to the mobile web area. It is a free online tool.

Mobile Websites Online Checker

AuraJS: A Scalable, Event-driven JavaScript App Framework

AuraJS is an event-driven tool made in JavaScript for building component-based applications. Components can communicate between each other at a global or local level.


34 Completely Free Bootstrap Themes

A bundle with 34 curated themes for Bootstrap. They can be used in WordPress and non-WordPress environments, totally free. They all adapt to the latest design trends.

34 Completely Free Bootstrap Themes

UX Handy: Handpicked UX Design Articles

A website with a handful of complete and entertaining articles to learn about user experience, UI design and general website usability.

UX Handy

Tota11y: an Accessibility Visualization JavaScript Toolkit

Tota11y is an accesibility tool that allows visualizing and testing how your site performs with assistive technologies. It consists of a simple JavaScript file to work.


Animated Material Login/Registration Form

An animated login form made in material design which integrates a registration animated section in itself by clicking the top-corner edit icon. It was made by Andy Tran.

Animated Material Login/Registration Form

CSS Hover Expanding Vcard

A fully customizable CSS animated VCard which features a main photo, name, social icons, description, and blurred background. on hover the rest of the information appears.

CSS Hover Expanding Vcard

Arial-based HTML & CSS Typography Style Guide

A style guide in both HTML and CSS which gives you a graphic idea about how different types of Arial Monochrome fonts look and what they should be used for.

Arial-based HTML & CSS Typography Style Guide

HTML and JavaScript Responsive Grid

A Pinterest-style grid made in JavaScript and HTML that adapts to the screen you view it from. You can alter the padding to make the boxes a bit bigger.

HTML and JavaScript Responsive Grid

Bernier: Vintage-style Free Typefamily

A grunge style font for printed and web design. With 3 different styles, this uppercase-only typeface can be adapted to logos and badges. Created by Ryan Pyae.

Bernier Font

Beyno: Free Futuristic Typeface

A font with square edges, perfect for futuristic posters and advertising design. It has special characters and uppercase glyphs. Created by Fabian Korn.

Beyno Font

Birth Center: PSD Web Template

Birth Center is a web template for child care and families with little children. The template has several areas for showing products and services and its licensed CC BY.

Birth Center

LogicPen: Portfolio PSD Template

A multipurpose portfolio theme with an 1170 grid system made in PSD format. Includes areas for contact, clients, team, about and featured slider. Made by Robiul Islam Robi.


How I Became an Artist (Article)

A medium article written by Noah Bradley showing the process of becoming an artist going through several stages, from noobie to student to professional.

How I Became an Artist

Efficient Image Resizing (Article)

An article that guides us through the process of adapting images to the web. It covers the use of big images, resizing, and further implementation.

Efficient Image Resizing

Stop Gratuitous UI Animation (Article)

An article that explores the excessive use of animation in UI design, showing comparisons with early visual design and suggestions for effective GUI motion design.

Stop Gratuitous UI Animation

Design Machines: How to Survive the Digital Apocalypse (Article)

A complete article on how design has become identical across the web, how it came to be and what can we do to improve the way we design.

Design Machines: How to Survive the Digital Apocalypse


Our usual thanks go out to the designers and developers that offer their hard work as freebies for our benefit. Hopefully you will have found some of these resources worth downloading, reading or sharing.

The post New Web Design and Development Resources: #9 July Edition appeared first on