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.
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:
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.
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 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.
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.
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.
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.
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.
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.
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.
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!
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.
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!
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!
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.
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,
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.
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.
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.
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.
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!
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 […]
Inky 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
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 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.
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.
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.
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.
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.
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.
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.
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.
There are a wealth of resources available to help you take your Sass skills to the next level. The official Sass website itself, sass-lang.com, is very thorough and has tons of examples. Beyond that, here are eight top sites and books to explore:
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 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.
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.
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.
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!
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.
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.
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!