Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.
Sometimes the toughest part of a new project is actually getting started. In fact, just this small step can be a process in itself.
As designers, we all have different processes and habits, but there are a few common things that everyone can do to make getting started that much easier (and hopefully result in more efficient use of time, and a better end result).
You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?
The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.
Animated GIF images are popular on the Internet because they can be easily shared and consumed rather quickly. Using basic HTML you can embed images into a page which feature animation, without relying on any other technologies. Granted – there are plugins for animating sprites or backgrounds – but GIFs are a totally different concept.
In this tutorial I want to demonstrate how we can build an image gallery which optimizes the display of animated images. You can see a very similar feature on Giphy which is also where I downloaded the images for my demo. I am coding my own method which doesn’t exactly follow the same process as Giphy – but the end result is practically identical and works great for all modern browsers.
Thanks to mobile image editing apps like Instagram, the faux tilt shift fad seems to be at its height. But why should we let iPhones have all the fun? Let’s bust out a tilt shift effect using pure CSS.
In this tutorial, we’ll learn all about the new CSS filters in Webkit and how to implement an image mask in CSS. We’ll then use these techniques for our final tilt shift effect. We’re going to hit on all kinds of crazy stuff so read on and we’ll have some fun.
Signup forms are all too common when building new web applications or social networks. Traction from user signups can really boost your own self-confidence about a project when it comes to launching a new website. But what can you do to help improve the signup experience and hopefully gain more interested users?
In this tutorial I want to demonstrate how we can build a guided registration form, offering tips to users as they fill out each field. I have included some of my own custom jQuery along with a plugin called Progression.js. This is a powerful tool which offers a step-by-step tooltip using hints to direct users along the way. Feel free to download a copy of my source code and check out the live sample demo below.
E-commerce design is one of the most common – and sometimes most overlooked – types of design project. Just think of how often you click “buy now” on a website.
But what makes it work? Of utmost importance in e-commerce design is user experience and the purchase flow, but more and more sites are also beginning to develop awesome design schemes as well. Here, we’ll look at ten e-commerce sites that function well, and also look fantastic.
Once shunned by designers, circles seem to be making a comeback. The perfectly round shape – and its oblong counterparts – can be difficult to work with. The shape does not stack as well as the more standard rectangle and creates a much different overall feel.
The circle is a perfect shape, meaning that it is the same no matter how you look at it. It is complete and in harmony with nature – consider how many natural elements are circle-based. So, as a designer, how can you make circles work for you?
At first glance, minimalist websites might look like they’ve just been slapped together as quickly as possible. After all, they’re plain and simple, and most people tend to associate lots of detail with good craftsmanship. But the same rules just don’t apply to the online world.
It only takes a small amount of user interaction to quickly reveal the quality of a minimalist site. This is because the original idea that fueled the rise of minimalism was that functionality is inherently beautiful. A design that clarifies and reveals the structure of a website can be just as appealing as one that obscures its purposes behind fancy decorative additions. Furthermore, it often yields a much better user experience, because those unnecessary distractions are eliminated.
Mobile app interfaces have been utilizing on/off sliding switches for a while. These are most commonly found on the settings page where users can update preferences for their account. But web designers have taken notice and have built many open platforms to generate your own on/off switch sliders.
In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update. Plus, you have the option of triggering click or slide events, which may also tie into a form checkbox on the page. Anyone running a modern JavaScript-enabled browser should be able to experience the full effect. Take a peek at my live demo to catch a glimpse of what we are building.
Design kits seem to be everywhere these days. From UI kits, to templates and grids, to complete design kits, what makes these tools so popular (and what are the disadvantages)?
Today we’re going to take a look at the pros and cons of using different types of design kits, and even show you a few kits in the examples that might be worth trying out for various purposes.
Web browsers can generate unique sessions organized for each user on a website. Often these are handled on the backend using languages like PHP or Ruby, but we can also utilize cookie sessions on the frontend with Javascript. There are many tutorials out there explaining how to generate pure JS cookies. But a newer library jQuery Cookie simplifies the whole process.
I want to explain how we can build a very simple authentication system using jQuery Cookies. The code is all handled on the frontend but you will need a live testing server to see any results.
Browser cookies are created on the local IP which comes from the web server, and so unfortunately you can’t just run these scripts locally. But definitely check out my live demo to get an idea of what we are creating.
We’re excited to bring you another great competition today, giving you the chance to win one of three awesome packages from Markup-Service.com.
This is going to be a real treat for busy web designers and developers out there who need a little help with their PSD to HTML conversions. We have $600 of packages up for grabs, so read on to find out a little more about how to enter — it just takes a couple of seconds!