Here we are again with another collection of fresh resources to juice up your site! Take a few minutes to browse this selection that will no doubt include some freebies, tools and articles that you have missed during the past month.

New For Designers and Developers

Webvillee: Single-page 12-Column Grid Web Template

Webvillee is a single page web template crafted in an 1170px, 12-column grid that features very soft schemed colors and includes home, portfolio, process, why us, contact and blog sections.


Cerpow: Minimal & Clean Mobile UI Kit

Cerpow is a very clean and fresh-looking UI kit designed in minimal style featuring several card types with smooth rounded edges and outlined icons.


Builder: Clean Single Column Website PSD Template

Builder is a single column website template crafted in a clean style that features a full-width header background enclosing a title image, as well as full-width sections with neatly laid out content.


Infographic Brochure Illustrator Template

An Infographic Brochure Template that features several elements to make stunning infographics. You’ll find elements relating to world statistics, people, several types of carts other useful categories.

Infographic Brochure Illustrator Template

Free Clean Resume Two-column Template

A resume template that features a dark header containing title-like name and contact information, and a two column body containing about me, skills, work experience, education and more relevant information.

Clean Resume Template

Geometric Style Business Card

A business card template that features geometric shapes in the background in a gold-orange color scheme that gives a professional sensation.

Geometric Style Business Card

200 Vector Elements Desktop Generator

A Desktop Scenario Generator that contains 200 vector elements related to office or workspace, featuring wooden texture and an ochre scheme palette to customize your elements in your own way.

200 Vector Elements Desktop Generator

Octicons: Github’s Open Source Projects Icons

Octicons is a collection of web fonts crafted and released by Github specially designed for open source projects featuring the most relevant things and actions of this type of projects.


Single Trace Line Icons Set

A set of 20 icons crafted in a single trace line that have a handwritten appearance. The icons are delivered in Illustrator format.

Single Trace Line Icons

Socialoha: A Collection of 756 Crisp & Fresh Social Media Icons

Socialoha Icons is a set of 756 social media icons in 6 different styles, clean, flat, material, black, filled and outline. All of them were pixel-perfect crafted and they come in SVG, AI, GIR, and PNG formats.


Multi-style PSD & Sketch Colorful Icons Set

A set of 6 pixel-perfect crafted icons that come in 10 different styles such as flat, outline, filled, and more. All of the icons in this set come in PSD format.

Multi Style Colorful Icons

BoomSVGLoader: An SVG Sprite AJAX Solution

A plugin coded in AJAX as a solution for SVG sprites. It basically loads your compiled SVG sprite into the page immediately after the opening body tag. It uses a technique that wraps the SVG sprite in a visually hidden.


Angular Toasty: An Editable Growl-style Notification Plugin

Angular Toasty plugin allows you adding customizable toast popup notifications to add to web apps. It features 3 different themes (default, material design and Bootstrap 3), Global/Individual timeouts, shaking toasts, pop-up sound, positioning and more.

Angular Toasty

Sassy: Highly Customizable Sass BEM Framework

Sassy is a highly customizable Sass framework that was built with Block Element Modifier technique naming conventions. It comes with diverse general functions such as is-bool, is-color, is-null, is-number, among others.


GlideJS: Responsive & Lightweight JQuery Slider

GlideJS is a plugin that helps you generating jQuery carousel sliders by adding a 3D tilting effect that highlights the content of the current and adjacent slides.


P5.js: Non-developer Focused JavaScript Library

p5.js is a JavaScript library that aims to to make coding more accessible for artists, designers, educators, and beginners by featuring a full set of drawing functionality and addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.


Ritzy: Rich Cross-browser Online Text Editor

Ritzy is a rich text editor online that features custom editor surface, a layout engine similar to Google Docs and collaborative editing support built-in.


Servers for Hackers: A Web Development Video Compilation

Servers for Hackers is a website that provides video tutorials for advanced web development and management. Topics such as process monitoring, security, discourse, SSL certificates, among others are covered in there.

Servers for Hackers

CakePHP: A Developing Booster PHP Framework

CakePHP is a PHP framework that works in versions 5.4 that helps building web applications in a simpler and faster way requiring less code. It features database access, caching, validation, authentication and more.


Tutset: A Web Design & Development Tutorial Compilation

Tutset is an online compilation of web design and development tutorials, categorized in five main sections which are web fundamentals, front-end development, back-end development, mobile development and design.


Apostrophe: NodeJS & MongoDB-built Content Management System

Apostrophe is a design-driven and in-context Content Management System built on Node.js and MongoDB that provides the ease to develop both simple and complex content-driven websites with its tools.

Apostrophe An Online Image Re-sizing Tool helps you resizing your images, for example, for responsivity. It features a single URL line to resize images that would only hold the width and height you want the photo to have and it resizes and delivers it.

FontCDN: A Google Web Fonts Search Tool

A Google web fonts search tool which allows you classifying your search by category, suggestions, subsets, popularity, and more.You can modify the size of the fonts as a live preview and pick to see them in a grid or a list.


Bulletproof Contracts, Simple ESigning, Integrated Escrow for Freelancers

An online tool that helps freelancers avoiding issues like scope creep or late payments. It features different types of contracts, eSigning and integrated escrows.

Bulletproof Contracts Simple ESigning Integrated Escrow For Freelancers

UIPalette: UI Colors, Tools & Trends Online Collection

UI Palette is a website that holds sets of user interfaces, company/brand logos, and trendy colors for inspiration. It also features a few external tools such as Adobe Color CC or Color


3D Liquid Progress Bars

A code snippet that provides you with 3D glowing liquid progress bars coded and animated in CSS. It was released with a few default colors and and progress status demonstrations.

Liquid Progress Bars

Atomic Hamburger: A CSS Animated Menu Icon

Atomic Hamburger is a CSS animated menu icon that has three states depending on the mouse event. Its first state is a normal menu icon, once you hover over it transitionally becomes a running atom and if click on it, it becomes an X icon.

Atomic Hamburger

Parallax Mouse Follow Avatar

An application of the CSS effect parallax that gives a flat styled avatar the illusion of 3D head movement that follows your cursor.

Parallax Mouse Follow Avatar

Cansiparane: Modern Bold Square-ends Typeface

Cansiparane is a typeface with a rather futuristic feel and style that features wide curves contrasting square ends. It features uppercase, numeral and special characters as well as carved in accentuations.


Quirko: A Rounded Edges & Protrusions Font

Quirko is a font that has rounded edges as well as triangular protrusions on most of its characters and comes in three styles; Oblique, light and light oblique. It features uppercase, numeral and special characters as well as accentuations on both consonants and vowels.


How to Fix a Bad User Interface (Article)

In this article, Scott Hurff explains how to fix a bad user interface based on the rules of the UI stack, which denote the 5 personalities a digital product has in each screen the user interacts with; these are the blank, loading, partial, error, ideal states.

How to Fix a Bad User Interface

Three Qualities That Make an Outstanding UX Designer (Article)

Creativity, Analytical thinking and Empathy. These are the aspects this article suggests you to focus on when looking for an outstanding designer, as well as how to look beyond the usual suspects and what you should and shouldn’t do when hiring a designer.

Three Qualities That Make an Outstanding UX Designer

Photoshop Extensions for Front-end Developers (Compilation)

An individually described compilation of Photoshop extensions for front-end developers gathered by Ronalds Vilcins in order to help them boost their workflow.

Photoshop Extensions for Front End Developers

The Great Icon Debate: Fonts Vs SVG (Article)

An article that compares and explains the usage of both icon fonts and SVG icons and highlights the advantages of each of them on the web. This article was written by Massimo Cassandro who eventually reveals his preference.

The Great Icon Debate

Everyone is a Designer (Article)

Andy Jiang in this article talks about the approach designers take to solve problems in order to make analogies with your daily life and make you see you have the tools that you need to be a designer, concluding with the benefit you get for your life by thinking designer-like.

Everyone is a Designer


As usual, we extend our thanks to the designers and developers who put in so much effort and offer their creations for free.

Don’t forget, if you have designed or developed any tools or resources, or you come across any new ones during your net surfing, please leave us a link in the comments section below.

Onextrapixel – Web Design and Development Online Magazine

See more related website development posts here

New Web Design and Development Resources: #10 August Edition