The best way to learn design is to copy other works and watch tutorials. It’s not enough to know the how to design, we need to know how our tools are working. That’s why at the main beginning you should look for articles or tutorials about the tools. Today I’m talking about my new favourite design tool – Sketch 3.
If you’re beginner or even never tried Sketch 3 check these two articles The A to Z of Sketch & Sketch for Beginners for the explanation about the tool and best tips. When you will know what every function do, and how to rule your tool you are to design so stuff!
Today I’m sharing tutorials to faster learn design with Sketch 3. Almost all tutorials are article type, but at the end of the article there is short list of websites with video tutorials.
Instagram has brought retro effects back and made vintage look cool again. Photoshop is an amazing tool letting you go back in time and recreate the nostalgic looking design artworks.
Today I have collected 20 beautiful Photoshop tutorials showing you the techniques and tricks creating retro graphics and vintage effects. Starting with beautiful typography tutorials and finishing with appealing photo effects you will definitely learn new Photoshop skills and have much fun.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. I’ve been using Sass for quite sometime and found out that mixins are something any front-end developer would enjoy and take advantage of saving time and being more efficient.
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
It save quite a lot of time and helps developers ensuring that the code is not redundant and organized nicely.
I recommend using Compass as they have many built in mixins that simplify developers work.
Some designers advocate skipping the Photoshop process and moving from wireframes directly into HTML/CSS. This is possible for smaller projects but not always advisable. Adobe Photoshop offers the best tools for testing color schemes, gradients, icons, and detailed page elements before moving the layout into your browser.
If you’re a little rusty in Photoshop then these tutorials should get you back into the groove. I’ve collected 28 web design tutorials centered around Photoshop techniques for designing typical page elements. Most are simple enough that you can follow along without much prior experience in the software. But even the more advanced tutorials can offer insights and help newcomers understand the digital design process.
Scalable images have become a lot more popular in recent years. As modern browsers slowly accept the notion of SVG images we can see many techniques being released out on the web. These range from scalable responsive logos to animated line drawings – all through the use of dynamically-generated images.
This collection of tutorials should be more than enough to get you all caught up to speed with the latest trends. Even if you know absolutely nothing about SVG images or how they’re created, these articles should provide insight along with a few industry tips & tricks. SVG resources appear to be a growing solution amongst web designers. Take a look over this showcase to understand what all the fuss is about.
Today I wanted to share with you a quick and easy way to building a countdown landing page with a simple email sign up form.
To complete this demo I will be using a jQuery plugin called FlipClock.js to power the countdown clock and MailChimp to power the email sign up form.
View The Demo or Download Source Code.
Web development tutorials often cater towards beginner starting topics. However there are plenty of intermediate-to-advanced level tutorials focused on complex development techniques. Even people with years of practice may one day look towards an online tutorial to educate themselves on an unfamiliar topic.
In this gallery I’ve put together a handful of brilliant tutorials related to designing and coding a personal portfolio. You can find help on HTML/CSS, jQuery, and Photoshop design mockups. Some articles will be pretty simple while others get into the more nitty-gritty details. Take a look over these headlines and see if there’s anything you may want to learn about.
Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself.
For this tutorial I want to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.