New Web Design and Development Resources: #10 August Edition

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

Collection of Fresh Design Freebies – August Edition

Welcome to our August edition. We continue collecting stuff that is helpful and valuable for web developers and designers. Generators, online services and freebies that are aimed to streamline the process, save precious time and money and enrich the project with some extra twists and effects. As usual, we feature interesting and modern solutions and free packages of components and graphics. Today’s list is rich in sketch files and online tools for prettifying websites.


Waka Time

Waka Time has a free plan for individual developers who want to improve their programming and organize time more efficiently. The service collects and shows daily statistics of your working process.



Pannellum is a tiny solution that is built with the help of advanced WebGL. It aims to improve your website with a panorama view. The only drawback, as usual, lies in browser compatibility; only the latest versions of popular platforms provide full support for it.


jQuery UI Slider

jQuery UI Slider includes a whole bunch of dynamic and vibrant ranges that can make the interaction between the interface and users more pleasant. There are sliders with horizontal and vertical orientation, or with/without indicator or scale.

jQuery UI Slider

Randomized CSS3 Gradient Generator

Randomized CSS3 Gradient Generator comes up with an excellent and fancy background for your project within seconds. Just hit the ‘Roll’ button and the system offers you its variant. Use it as a main canvas or a subtle overlay screen.

Randomized CSS3 Gradient Generator

Page Scroll Effects

This small tutorial by CodyHouse reveals a series of various experimental effects that should enhance long-page websites. It is a mini library based on a Velocity.js that is supported by the majority of browsers. In a demo, you can choose the type of animation and switch on/off hijacking. The only drawback is that the solution does not work on tablets and cellphones.

Page Scroll Effects


Any API is a carefully collected list of more than 100 public APIs in one place. You can find codes for collaborating with YouTube, Gmail, Instagram, Google Drive and other popular services.



CodeMyUI is another collection of useful and viable stuff. It is a regularly updated blog where you can find small code snippets that can be easily integrated into your next project. From sticky navigation bar to a sterling contact form.


Background Image Generator

Based on such settings as color, pattern, blend modes, pattern intensity and noise you will be able to construct a desired backdrop. You can even download your pattern and manipulate with it.

Background Image Generator


WPide is a helpful tool for WordPress developers. This smart service offers code auto-completion, full integration with CMS, scaffolding, and some other features.


Ridiculously Responsive Social Sharing Buttons

Ridiculously Responsive Social Sharing Buttons is an easier way to populate a website with links to your social profiles. They will adapt to different browser screens and look stylish across various platforms and devices. Simple, vibrant and elegant – exactly what you are looking for.

Ridiculously Responsive Social Sharing Buttons


Cardio – one-page template is an HTML/CSS theme with a pleasant design and beautiful coloring. It is powered by Bootstrap and has a sports vibe. However, you can use it for other purposes as well.



W1 is a light version of the massive package crafted specifically for iWatch UI designers and developers. Tiny vibrant interfaces with a gorgeous coloring and pixel-perfect graphics will bring to life any concept within minutes. The freebie is available for Sketch users only.


eCommerce Elements

The collection comprises numerous blocks and widgets that are inherent to e-store interfaces. Each one has a neat, clean and refreshing appearance. The classy color scheme in tandem with plenty of white space gives the design a particular flair.

eCommerce Elements

Free Sketch Wireframe

Free Sketch Wireframe by The Gentlemans Mustache is an excellent instrument for quickly outlining your idea. There are basic widgets and sections that help to construct any layout right away.

Free Sketch Wireframe


Smashicons is a bunch of 200 neatly crafted and sleek line style icons that can come in handy in different sorts of control centers and navigation bars. They are intuitive, pixel-perfect and legible.


eCommerce UI Kit

eCommerce UI Kit by Five Agency and Ena Baćanović is a massive free product that includes almost 30 well-organized neatly formatted mobile layouts. They are executed in a warm brownish coloring and have lots of free space for comfortable navigation and working.

eCommerce UI Kit

Sketch Freebie

Sergey Voronov has prepared a special treat for those of you who are eager to get started with Material Design. This small yet fantastic GUI set includes all the essentials such as buttons or navigation bars for creating standard layouts.

Sketch Freebie

Lithium Mobile UI Kit

Lithium – Free Mobile UI Kit by Michael Novikov is a PSD file that comprises many professionally executed user interfaces for tiny cellphone screens. The freebie is dedicated to the social network, has 12 pages and 3 color options.


Free Animation Lesson

Free animation lesson by Issara Willenskomer is a small helpful tutorial that gives a significant boost in building animated walkthroughs. It shows the simple technique of creating such popular pieces.

Free Animation Lesson

The Killer WordPress Checklist

The Killer WordPress Checklist is intended to improve WordPress-powered websites and take them to the next level. There are hints and suggestions that help to make sure that everything is in order with a design, structure, SEO, launch, security and maintenance.

The Killer WordPress Checklist


As the community is delving more deeply into iWatch and mobile web, there are more and more free GUI kits crafted specifically for these spheres. Material design is another popular direction. It is also great that developers do not forget to push forward WordPress and web development by providing new solutions and interesting tricks.

Onextrapixel – Web Design and Development Online Magazine