All posts tagged “Resources”

10 useful resources for Facebook game creation

first image of the post
Today, here we have 10 useful resources for Facebook game creation. You can now build your own games and applications by going through the listed tutorials. Let’s have a look at them below. 1. Developing HTML5 Canvas Games for Facebook with JavaScript – Part 1 Create your own Facebook game with ease via this amazing […]

The post 10 useful resources for Facebook game creation appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!

Designer Daily: graphic and web design blog

Sci-Fi Art Essentials workshop files and resources

Read more about Sci-Fi Art Essentials workshop files and resources at

Click the links below to download your workshop assets from this special edition of ImagineFX, including layered files, brushes and step images. There are also textures and perspective grids, to aid you in your sci-fi art creation. Workshops Characters to populate your sci-fi worlds.

Creative Bloq

50 Free Resources for Web Designers from January 2015

The tremendous thing about the design community is that we all love to share. We really do. Whether we share our thoughts and ideas via an in-depth article, or by giving advice/feedback on a forum, or even by freely offering high-quality resources. The sharing is what makes our community truly great! Here are this months 50 best free resources for web designers from November 2014:

Free Resources for Web Designers January 2015

Free UI & Wireframe Kits

Android Lollipop UI Kit (Sketch)
Android Lollipop UI Kit

Winter UI Kit (PSD)
Winter UI Kit

Kita3 Wireframe & Mockup UI Kit (PSD)
Kita3 Wireframe & Mockup UI Kit

Hero Flat UI Kit (PSD)
Hero Flat UI Kit

Eventray UI Kit (PSD)
Eventray UI Kit

Sketch UI Kit (Sketch)
Sketch UI Kit

Space Ui Kit (PSD)
Space Ui Kit

Retina UI Kit (PSD)
Retina UI Kit

Apple Watch UI Kit (AI)
Apple Watch UI Kit


UX Wireframe Set (AI)
UX Wireframe Set

Wireframe Template for Apps (Vector AI)
Wireframe Template for Apps

Teracy Wireframe Kit (Sketch)
Teracy Wireframe Kit

Free Icon Sets

Hand Drawn Icon Set (69 Icons, PSD & PNG)
Hand Drawn Icon Set

CompassCons (300 Icons, Sketch)

Vector Business Icons for iOS 8, iOS 7 & Android (50 Icons)
Vector Business Icons for iOS 8, iOS 7 & Android

Material Design Icons with Bounds (250 Icons, Sketch)
Material Design Icons with Bounds

Coffee Shop Icon Set (24 Icons, SVG, AI, EPS & PNG)
Coffee Shop Icon Set

Tonicons Outline Icons (200 Icons, Web Font, EPS & Sketch)
Tonicons Outline Icons

Boldo Icon Set (70 Icons, PSD & AI)
Boldo Icon Set

Blockie Icon Set (48 Icons, PSD)
Blockie Icon Set

Home & Public Library Icons (50 Icons, AI)
Home & Public Library Icons

icono Pure CSS Icon Set (130 icons, CSS)
icono Pure CSS Icon Set

Evil Icons (60 Icons, SVG)
Evil Icons

Dashel Icon Set (45 Icons, SVG, PSD, PNG)
Dashel Icon Set

Free Templates & Themes

Minimaluu Portfolio Theme (WordPress)
Minimaluu Portfolio Theme

Beetle Responsive Template (HTML)
Beetle Responsive Template

Agency WordPress Theme (WordPress)
Agency WordPress Theme

Minimal Portfolio Template (PSD & HTML)
Minimal Portfolio Template

Gumba Single-Page Website Template (HTML5/CSS3)
Gumba Single-Page Website Template

Soundcloud Embed Player UI (Sketch)
Soundcloud Embed Player UI

Foliac Web Template (PSD)
Foliac Web Template

Mail App UI (PSD)
Mail App UI

iOS8 Keyboard UI (PSD)
iOS8 Keyboard UI

Google Inbox Material Design (Sketch)
Google Inbox Material Design

Free Mockup Templates

Logo Mockup Templates (PSD)
Logo Mockup Templates

Working Area Mockup (AI)
Working Area Mockup

5 Photorealistic iPhone 6 Plus (PSD)
5 Photorealistic iPhone 6 Plus

10 Photorealistic iPhone 6 Mockups (PSD)
10 Photorealistic iPhone 6 Mockups

4 Free Flat Hero Illustrations (AI)
4 Free Flat Hero Illustrations

Free Fonts

Vindence Handwritten Font
Vindence Handwritten Font

Oldways Font
Oldways Font

Paperweight Font
Paperweight Font

Pier Typeface
Pier Typeface

Slash Bad Ass Display Font
Slash Bad Ass Display Font

Againts Typeface
Againts Typeface

Abbie Script
Abbie Script

Fonesia Font
Fonesia Font

Cathedral Typeface
Cathedral Typeface

Miscellaneous Freebies

Emoji Brushes (Photoshop)
Emoji Brushes

Valentine's Day Vector Banner Kit (AI & EPS)
Valentine's Day Vector Banner Kit

The post 50 Free Resources for Web Designers from January 2015 appeared first on Speckyboy Web Design Magazine.

Speckyboy Web Design Magazine

Fresh Resources for Web Developers – February 2015

After doing this for more than a year, the hardest part about writing this monthly resource pile for designers and developers is the introduction. While we’re on the subject, here’s your February 2015 recap of the best and freshest of resources for web developers like you.

In this installment, we are looking at a special search engine to find code snippets, a very resourceful reference to address issues in the Flexbox module, and development tools for better management of color, typeface and gradients.

Gradient Animator

CSS3 Gradient allows us to create imageless gradients on our website without the need for loading any images. We can even combine it with CSS3 Animation to give a more compelling effect. But if the code is too much for you, use the simpler Gradient Animator route to generate one with a nice interface.

SVG Pocket Guide

SVG Pocket Guide is compiled by Joni Trythall. It is a handy reference that will walk you through the basics of SVG (such as creating shapes and text) all the way to more advanced features (like creating gradients, clipping paths and patterns). The book comes in Markdown format and is available in English and Portuguese.


Flexbox is a very promising new module in CSS3 that would totally change they way we build web layouts. However it also comes with cross-browser compatibility issues of its own. This repository, Flexbugs, is a collection of these bugs and the workarounds to address them. This is a very useful resource for anyone who lives on the bleeding edge of the Web.


It’s amazing what we can achieve with just CSS like create a fully presentable icon using just a single element. Icono is the library that does this. In this library, you will find a collection of familiar icons that are made only with a single element, and CSS. These icons will load faster and are more customizable than image-based icons.


Dillinger is an eye-pleasing Markdown editor. Here you can write in Markdown format, and instantly see the output on the right hand tab. For your convenience Dillinger allows you to export your work into HTML, PDF, or just in a Markdown file format once you have done. Alternatively, you can also connect it to a third-party service like Dropbox and Github where you can save your file.


HTML5Up is a collection of free HTML5-based templates. You can find a handful of layouts that cater to different types of websites: business, portfolio or just a simple blog. All templates are responsive as well ensuring that the content and the website layout are enjoyable in varying screen sizes.

CSS Colours

Ever wonder what a particular color is named? CSS Colours shows the color name as well as the Hex and RGBA format for a collection of basic colors. It’s a good source to find the perfect color combination for your websites.

Emmet Re-view

Re-view is a Chrome extension that parses your website @media queries and displays your website in each of the breakpoints specified in each @media query. If you are looking for a tool that could save you a little bit of time when testing responsive websites, then this is the tool you need.


If you take a look at the Google Font library, you will find a lot of fonts in varying faces, family, weight, and types. Hence choosing the right pair or combination of fonts could be a real overwhelming task. TypeGenius makes selecting font pairs simple and fast and possible for the general population.


As the name said, this is a search engine to look for codes or code snippets of many programming languages including JavaScript, C, PHP. This search engine will derive its result from many sources such as Github, Bitbucket, and Google Code. This is a definite must-have tool for heavy coders.

Ultimate 12-Month Guide To Learning WordPress (Plus Resources)

If you want to learn something new in 2015, why not make it WordPress? It powers a huge chunk of the web, you’ll understand your own website better, you’ll be able to communicate with developers better, and you can make some money helping out others. In addition, programming gives you insight into a certain way of thinking which can be helpful in other walks of life. The trick is to know what you need to learn and to go at it consistently – discipline is required.

learn wordpress 2015

This is a 12-month guide on what to focus on, one topic per month, one month at a time. Bookmark this guide and visit it regularly throughout the year, and by the end of the year, you might be able to hold your ground when it comes to WordPress.

Learn To Use WordPress Properly (Jan)

Whatever level you use WordPress on, I”m betting there are many things you don”t know. In January you should focus on the admin side of things, no coding just yet.

Make sure to inspect and try out all the functions you see. Try all the links, look at screen options, Help tabs, try to schedule a post, figure out what a sticky post is, create a sidebar and some widgets, assemble a menu, look at all the available settings and so on.

The idea is to become proficient at using WordPress so you can read and work through tutorials faster. Many people skip this step and it causes unnecessary confusion during the learning process. While programming you don”t want to be distracted by what the WordPress importer is, you’ll have plenty to do without that burden.

Resources That Can Help

The list below is by no means exhaustive but I recommend that you go through each section in the admin and try everything out. If you can”t figure out what something does, Google it and go from there.

Developer Tools & Basics (Feb)

To get started with development you’ll need some tools and some basic knowledge about working with files. The first thing you’ll want is a capable text editor. There are plenty of code editors previously reviewed here in Hongkiat, and most are.

I personally use Atom, and editor made by GitHub. While it is a hugely capable editor it doesn”t have easily accessible FTP capabilities (which I recommend you take into account when choosing an editor. you’ll see why in a moment).

Familiarize yourself with your editor. Whichever one you use I recommend reading about it via Google searches, looking through the settings and make sure you can use it to create and edit files on your computer with confidence.

Next, you’ll want to learn about FTP. File Transfer Protocol is a way to read and edit files on a remote computer. The idea here is that you’ll be able to modify your website without having to download files, and upload them once you”ve modified them with a separate application. Here”s a look at Coda 2 in action.

You should spend some time this month learning about how basic aspects of the Web work. Why web servers are used, what a browser is used for and so on. You don”t need to go into too much detail but you’ll need a basic understanding of a number of concepts.

Resources That Can Help

HTML & CSS (Mar)

It”s time to get our hands dirty with some HTML and CSS, the main languages of the Web. HTML is what gives pages their structure, CSS is what styles them to look the way they do. They are both easy languages but they require pratice to master.

I think it is important to mention that from here on out you will need lots and lots of practice. I believe that all languages used on the web are easy but there is a great deal of easy information to digest which is part of the difficulty of programming.

Don”t get discouraged if you don”t understand something or something isn”t working, we”ve all been there. Once you”ve gone through some resources and you feel ready for a challenge I recommend practicing by finding an element you like on a website and trying to recreate it. Another good method is to head over to 365 PSD or Dribbble and finding a web element you like.

For example, take a look at this Easy Notes shot on Dribbble. Click on the attachment and try and recreate the middle to-do type widget.

Once you can create individual elements you can tackle larger projects, like a full website. You can browse sites like Themeforest, Designmodo and Premium Pixels for further inspiration. You can even take ready-made WordPress/HTML themes and try to recreate them at home as a static HTML page.

Do make sure to be aware of licencing. Themes on Themeforest and many other places are licenced and may not be used without a licence even if you recreate them from scratch!

Resources That Can Help



Other Resources

PHP (Apr)

The time has come to learn some server side stuff. So far you have only learned clientside code. HTML and CSS is sent as is to a user”s browser and is processed there. PHP is processed on the server and is converted to HTML and CSS and sent to the browser. It introduces a huge number of useful features which you’ll learn about this month.

PHP is what allows WordPress to display thousands of articles using a single file. PHP is how a website can display the logged in user”s name, how Facebook can display your friends, and so on. The same page on Facebook will look very different for you than it does for me due to the magic of server side code.

Again, PHP is not difficult but there is a lot to know. The difficulty is further increased by not being able to create something useful for quite some time. I recommend looking at WordPress themes as soon as possible to see some practical applications.

Keep in mind that you don”t need to know everything in PHP to get started with WordPress. Object Oriented PHP is not something you’ll need to worry about in the short term and you don”t have to memorize all the functions available.

Having a good working knowledge of variables, loops, if statements and functions is a good start. From there, the more you know the better, and you’ll pick up a lot of things from WordPress itself.

Resources That Can Help

Modifying A WordPress Theme (May)

Finally, we can get started with WordPress! WordPress uses HTML, CSS, PHP and Javascript to display content. You haven”t learned about Javascript just yet but that”s ok, we can do that in a later month.

The first thing you should do is modify a theme. Using FTP go into the folder that holds your active theme and play around with it. Find where the title is and move it below the content, add some text, add some CSS and so on.

Note that this will actually change your live site so only do this if you’re sure it”s ok. Also, themes should never be modified by touching their code directly. It”s fine for practice but in reality you’ll need to either create your own theme or use a child theme to modify an existing one (see the resource section for this month for more info).

The goal for this month is to get comfortable with how a theme works and the code that it uses. You should start learning about template tags, special WordPress functions that can be used to display post data, and the files that a theme requires.

The theme I recommend modifying first is Twenty Fifteen. This should come installed with WordPress 4.1+ as it is the new default theme. This theme follows all current standards and sets the bar for development; you can be sure that whatever coding you see in Twenty Fifteen is correct.

At the end of the month you should feel comfortable making minor changes to a theme and you should have a rough idea of how to start your own theme from scratch. Don”t forget, this month is about experimentation, don”t be afraid to do things that are advised against on some sites. you’re learning, not creating a product!

Resources That Can Help

Creating A Theme (Jun)

Creating a theme is not too different from modifying an existing one but you’ll need to create a lot of your own files. Don”t be afraid to copy-paste from other themes like Twenty Fifteen. Files like comments.php which governs the discussions is roughly the same on most sites. You can use CSS to make it look different, and just rearrange some HTML perhaps.

Creating a theme is a good exercise because it takes you through so much functionality it deepens your knowledge of WordPress in general. you’ll need to create a header and footer, you’ll need to think about sidebars, menus, comments, single posts, pages, home pages and more.

You should be focusing on questions that come up during development. Your website will show the latest 10 posts on the front page, but "what do I do if I want something completely different?" These are the type of questions that may only arise while building something.

you’ll need to have a good understanding of the template hierarchy which governs the files responsible for displaying specific content. Make sure to take a look at page templates (see resources). These allow you to build pages with custom functionality.

Once you”ve gone through everything, I recommend taking a look at Advanced Custom Fields. This plugin allows you to create extremely useful option groups for posts which you can use in your themes.

I”ll list plenty of resources here but if in doubt, refer to the Twenty Fifteen code base for help, it should have everything you need!

Resources That Can Help

The Basics About Hooks & Plugins (Jul)

The hooks system provides the foundation for plugins. They allow you to add new functionality to WordPress or modify existing core functionality without the need to modify the core code.

They work kind of like triggers. Instead of going to the code in the WordPress files which publishes a post, and adding your own code to send the author an email, you can say: “When WordPress publishes a post, send an email to the author”. This can be done in a completely separate file which means the core code is never modified.

You”ve actually been using them in your theme as well when you used the wp_head() and wp_footer() functions. WordPress uses these internally to output a bunch of code, like the admin bar for example. This is how plugins can modify themes without actually touching the theme.

Learning about hooks will be your entry point into plugin development. Understanding them is key to working with WordPress and perhaps offering professional services in the future. Take your time to master this one, you will be relying on hooks heavily for all your projects.

This month you shouldn”t delve too deep into plugins but learning the required files and some basics will probably fit inside our timeframe. Plugins are very easy to create, they actually just require a single file with a comment on top.

From there you can do whatever you”d like but you do need to use the correct hooks – which is why hooks are so important.

Resources That Can Help

Plugin Proficiency (Aug)

August is the time to put some practice into creating plugins. Find something you would want a plugin for and do it yourself. Would you like all instances of good transformed into “awesome” any time a post is published? Go ahead and do it.

If you find a great idea feel free to submit it to the plugin repository but the name of the game is practice makes perfect. You can start to worry about following coding standards and making sure your code is commented and nicely formatted.

You should have enough knowledge now to be distracted by such things. After a while commenting and standard code will be second nature, even if it seems a little unweildy at first.

Create at least 2-3 plugins this month. Make them varied, if one modifies post content, perhaps the other should do something when a post is published. Perhaps you should create some custom post types and custom taxonomies, these are frequently needed for more complex projects, see the links in the resources section.

This is the stage where you should gradually be learning outlying areas of WordPress like creating new roles, custom post types and more. You can hunt all of this down and study them but it may be better to tackle them as they come up as a requirement for a project.

Coding efficiently and confidently with the things you know is more important than the amount of things in your brain. I”ve been coding for a long time now and I sometimes need to look up the simplest of things. Knowing that something is available is enough, being able to code with ease is more important,

Resources That Can Help

Javascript (Sept)

The (almost) last piece of the puzzle is Javascript. Javascript allows you to add interactivity and other advanced features to your website. By utilizing Javascript you can an pop-up modals, load comments in place, implement endless scrolling and much more.

Javascript is fundamentally a client side language but can be coupled with server side code using AJAX. This is what allows you to vote on an article for example. When you click the vote button the button changes to a thank you note and the vote count is incremented by one. All this happens without the page reloading. This is Javascript coupled with some PHP using AJAX.

Most of the Javascript you’ll be using will be jQuery. jQuery is a Javascript framework which implements special functions and gives you easy access to commonly used patterns. It”s important to understand that jQuery is not special Javascript, just as there is nothing special about the PHP used in WordPress. It”s simply a frame in which you can work.

Javascript can be the most complex since it spans multiple disciplines and can be found in many aspects of a website. From tracking codes to loading resources, managing images, intercepting user actions and simple animations, it is truly everywhere.

The good news is that you know you have all the knowledge you need to add Javascript to your theme or plugin right away. You should be “over the hump” – anything you learn right now should be easy to implement once you”ve learned it.

Resources That Can Help




Practice Practice Practice (Oct)

To underline how important practice is I would recommend devoting an entire month to it at this point. I”ve been programming for quite some time now and compared to a newcomer I can understand new concepts faster but I”m still completely lost without practice.

Luckily, the more your practice, the faster you will learn things later. In fact, by getting used to always working with code, you will need less and less practice to get the same result.

In a WordPress environment the best way to practice is to create themes and plugins. One method you can try is to recreate a simple, already existing, plugin from scratch. If you get stuck somewhere you can look at the source code of the actual product.

Focus on deepening your understanding of concepts you already know. Get into the practice of reading design and developer magazines, and developer blogs of your favourite apps. Here are some of the biggest places to read about web development apart from right here on Hongkiat of course.

Your Reading List

Advanced Concepts (Nov)

This is the month where all the knowledge you have should come together and you can start becoming a programmer. You should be able to start seeing the big picture and have a working knowledge of the four main languages that WordPress uses: HTML, CSS, JS and PHP.

I would advise starting to learn object oriented PHP. You are already using it in your themes and plugins in the loop and other constructs. OOP (object oriented PHP) will enable you to write better code and to understand the core code of WordPress better. In addition, it is the gateway to programming with C type languages and thus creating apps for iOS for example.

You can further your WordPress knowledge by learning about some of the classes, how to interact with the database directly, how transients work.

You should be able to undertake small, paid projects now with confidence. Don”t forget that doing actual commissioned work is where you learn most. It”s not only about coding, it”s about learning to communicate about code to people who don”t know anything abut the internet.

Practice is important at every stage but you should now have enough knowledge to learn a concept without too much work. Transients (options with an expiration date) should be clear for example, even if you”ve never had the need for them. You should be able to gauge when they will be useful, and look them up as needed.

As the final language to learn for WordPress you will want to look at MySQL which is used to query the database directly. Much of this functionality can be used via functions but sometimes you’ll need to query the db directly.

I would like to stress the importance of getting into an object oriented mindset. It will seem very alien at first and the usage of them will seem unclear. Remember how the use of PHP was unclear when you first studied it? How does a variable and an if statement get me a webpage?

Object oriented PHP is similar. It is used for complex cases, the more convoluted things in it are only needed for large-scale applications. This is why concepts sometimes seem redundant or over-complex.

I really recommend high-quality video tutorials for this one. My favorites can be found on Laracasts (see resources). Laracasts was primarily made for Laravel but contains a lot of OOP and other high-level concepts.

Advanced Development Tools (Dec)

Now that you know a lot more it”s time to make your life easier by learning to use some advanced tools. This includes things like using SSH to access a server, WP-CLI to manage WordPress installations, Vagrant to create a local WordPress installation, and more.

The first thing you should learn is how to set up WordPress locally using XAMPP, MAMP, WAMP or Vagrant. I personally use Vagrant, but the rest are just fine too. This removes the need to use FTP all the time, considerably speeding up development time.

Next you should look into SSH. This involves using the terminal and issuing commands. This sounds scary but really isn”t. It will open up a whole new world. WP-CLI will be a great introduction to this. It allows you to install WordPress in a few seconds, download a theme, update it, and create test users with a simple command.

I also recommend learning all about CSS preprocessors. Languages like LESS and SASS allow you to use variables, functions and other advanced concepts in your CSS.

As a part of your preprocessor studies you should learn how to use advanced compiler tools like Prepros or Codekit. These tools can reload the website whenever a file is saved, automatically compile CSS, minify Javascript and so on.

This will give you insight into the world of coding for production. In development you want to use as many separate files as you can to make your code more logical. In production you only want as small a footprint as possible so all Javascript and CSS files should be minified and concatenated. The mentioned tools give you all you need to get comfortable with this.

You should also start working more efficiently with your text editor. Are you using snippets? Are you checking your syntax automatically? Do you know all the keyboard shortcuts that would make your life easier?

This is an area where you can continuously change and grow. I went from using XAMPP to MAMP to, finally, Vagrant. It was a natural learning curve and I am still in the process of learning all there is to know about Vagrant.

I went from using Notepad++ to Sublime to Coda to Atom. There”s nothing wrong with any of these tools but as I grew I naturally progressed from one to the other.

Finally, you will want to look into version control, specifically SVN and Git. The basics are much the same, you’ll need to learn some separate commands, but once you understand one, the other will be easy to grasp.

The reason you’ll want both is that WordPress uses SVN at the moment so when you release plugins and themes you’ll need to use SVN. Most projects use Git as it is a bit better for working in teams, so that is what you’ll want to use for other projects.

Resources That Can Help

Final Words

I hope this article gave you a good overview into what is required to get from nothing to being a pro developer. In reality if you can commit full time it probably won”t take a whole year.

There are two big things to keep in mind. The main one is that while no single bit of this is difficult, it is a LOT to know, which makes it hard when put together. Don”t be discouraged if you get stuck or you work slower than others. Everyone works in their own pace, if you keep at it, you will become a good developer.

Also, one of the main characteristics of good developers is that they never stop learning. They continuously look for better solutions, learn new languages and new methods. They keep in mind that the world of coding is not black and white, many times there is no single good answer to a problem.

Good luck with your coding studies in 2015, let us know how you’re doing in the comments below!

8 great icon design resources

first image of the post
Welcoming the New Year 2015, doesn’t mean you forget the creative design resources from the past year. That is why today we have the collection of 8 great icon design resources from 2014 that can be your inspiration anytime while you start designing icons for your clients or for your own business. Have a look […]

The post 8 great icon design resources appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!

Designer Daily: graphic and web design blog

Design bundle: $4,035 Worth of Super Premium Vintage Resources – From $34

Vintage ResourcesFeatureInky Deals have put together this premium vintage resource bundle worth $ 4,035 and are currently selling it from $ 34 (That's a huge 98% off the total worth!). The basic vintage kit is currently on sale for $ 34 and the extended vintage kit for $ 49. The whole kit is compatible with both windows and mac, you are also […]
Inspiration Hut – Everything Art and Design

Fresh Resources for Web Developers – January 2015

It’s here! We’ve finally left the tumultous year of 2014 and as we usher in a new beginning with the new year, we have new hope, wishes, and certainly new tools to try out. In this post, we have put together a handful of perfect tools and plugins to get this rolling.

From a handy online test tool to something for easy access to mobile design patterns, there are quite a few choices to get your 2015 on the right track.

Seti UI

Seti UI is a Sublime Text theme, not to be confused with Sublime Text Color Scheme. The theme in Sublime Text affects the app interface such as the tab and the sidebar. Seti UI is a ported theme. Its flat look is really nice to look at. A perfect choice of theme if you are using Sublime Text in Windows 8 or OS X Yosemite.

Seti UI

IXD Check List

Having a checklist can help you keep track on what has been done and what is to come. If you are a UI designer, you should probably add IXD Check List in your bookmark.

IXD Check List contains a collection of common to-do lists to check. Each item is supported with link references, so you can also learn why it’s on the list. If you prefer, there is a little button on the left where you can print the page and check the list offline.

IXD Check List


Well, we have a handful of tools for picking out a color scheme already. But none is as easy as this tool, called Coolors. Simply hit the Space key and it brings up a new color scheme. It will generate new color scheme infinitely, derived from its algorithm and outsourced from its users contributors, as you repeat hitting the Space key.



Nibbler is an online test tool that evaluates and scores your website for various factors including Code Quality, Mobile Compatibility, and Accessibility. It’s handy if you want to run a final check for your website before launch.



Velositey is a Photoshop plugin to make the process of creating a website prototype in Photoshop easyil and quickly. This plugin allows you to quickly create a new document with a preset grid, adding preset web components, and generating icons or favicons. An indispensable Photohop plugin for every web designer.


Vagrant Manager

If you are using Vagrant in OS X, install Vagrant Manager. This app lets you manage multiple environments in a more convenient way. Once it is installed, it adds a new icon in the OS X task bar where you can monitor and control your virtual machines with only a few clicks. No more messing with command lines.

Vagrant Manager

CSS Specificity

CSS Specifity is one notorious topic of CSS which is not easy to digest. This tool is created to illustrate how this specificity concept works in an interactive manner. Draw several selectors and it will tell you which selector to apply.

CSS Specificity


CSS Dig is a Chrome extension. And as the name implies, it will dig into your website and parse its CSS. It will show you a report which you can evaluate to perform required optimizations.


Material Up

For those of you who might not aware of it, Google has just introduced Material, a new philosophy of its product design. Material Up is a collection of apps and websites that has already adopted this new philosophy. A good source of inspiration for web designers.

Material Up


Tindddle helps you enjoy Dribbble in a more streamlined manner. It will feed you with a selection of the best “Shots” from Dribbble. If you don’t like the particular Shot, hit the left arrow key of your keyboard, and if you like it hit the right arrow key. All the Shots that you have liked will appear in your Dribbble account — here’s a sample.


Mobile Design Pattern

The Mobile Design Pattern book is a collection of selected common mobile design pattern applied in mobile in 2014. Not only does it provide inspiration, the book also covers the decision and reasoning behind such design. A good book that should be on the digital book shelf of any web and app designer.

Mobile Design Pattern

FontAwesome Photoshop

FontAwesome is… awesome. To make it even more… awesome, install this plugin in Photoshop so that you can quickly add it in your design.

FontAwesome Photoshop

8 essential Sass resources to sharpen your skills

Read more about 8 essential Sass resources to sharpen your skills at

There are a wealth of resources available to help you take your Sass skills to the next level. The official Sass website itself,, is very thorough and has tons of examples. Beyond that, here are eight top sites and books to explore:

Creative Bloq

Fantastic Collection Of Free Tools & Resources For Designers

Tools are the best friends be it for web designer or for any other professional. The world of web is also full of different kinds of tools and resources that the community keeps on delivering. Tools help designers complete their job more efficiently and in a professional manner. These tools include coding tools, icon sets, fonts, vector design set, patterns, PSD files, UI kits to name a few.

Below, you will discover a fantastic and very useful free tools that every designer must have. So what do you think? What did we miss? Which tools do you like the most and why? Leave us a comment and let us know what you think about this compilation.

Font Combiner

Font Combiner is a versatile web font creator and font improvement tool exposing advanced font features to the end user – kerning, subsetting, various hinting options and custom font glyph combinations.


A dark theme for Sublime Text, Alfred, Chrome, TextMate, Vim and xcode.

Animated Opening Type

An amazing animated 3D opening type effect with pseudo-elements, CSS transforms and transitions.


YAMB is a small set of tools and best practices that allow web designers to build responsive websites faster.


Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience.


Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

Metro UI CSS

Metro UI CSS a set of styles to create a site with an interface similar to Windows 8. This set of styles was developed as a self-contained solution.


A jQuery Masonry alternative with CSS-driven configuration.


A simple plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts. Scroll down to see it in action.


A simple CSS tooltip made with Sass


Slippry is a responsive content slider by booncon ROCKETS. Slippry is truly responsive, built on modern web standards and is packed with options, so it can be as simple or complex as you want, so give it a go!


Offers bookmark synchronization, search enhancement and web discovery based on sites bookmarked by users.

Remember the Milk

Remember The Milk: Online to-do list and task management.


Design, collaborate user interface concepts for your software and websites.


Social Mention is a social media search engine that searches user-generated content such as blogs, comments, bookmarks, events, news, videos, and microblogging services.

HTML5 Please

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

HTML KickStart

HTML KickStart is a ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project.


What is CheckMyColours?

It is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.

CSS3 Click Chart

Allows you to change how the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.


A bookmarklet for testing your graceful degradation.


CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.


It’s easy to understand why thou­sands of developers use SimpLESS for their web projects. SimpLESS is your easy-to-use LESS CSS compiler.

HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications.

CSS font stack

A complete collection of web safe CSS font stacks and web font CSS.


No one likes bloated CSS. Simply drag and drop your CSS files onto this page, and watch as they’re compressed on the fly.

The CSS3 Test

This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.


Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.


Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Less+ Framework

Less+ empowers designers and developers to build websites that can adapt their content depending on screen resolution.


Wonderflux allows you to rapidly develop highly sophisticated, custom WordPress themes with just a handful of files (minimum is just 1 – style.css) using the principle of a Child theme.


Zoey is a lightweight framework for developing mobile apps. It is small, customisable and features a range of UI components.



A Responsive Web Design tool for creating grids by Erskine Design.


Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.


Padrino is a ruby framework built upon the Sinatra web library. Sinatra is a DSL for creating simple web applications in Ruby. Padrino was created to make it fun and easy to code more advanced web applications while still adhering to the spirit that makes Sinatra great!

Fluid Baseline Grid

Fluid Baseline Grid is a web development kit created by Josh Hopkins and 40 Horse, LLC. It’s made for rapid prototyping website layout design with CSS3 and HTML5.


An image with a transparent background is like a painting on a window: you can see all sorts of exciting things behind it, but you can’t reach through to touch them. changes that!